← All changes
|
extensions/blocks/image-compare/image-compare.php
+9
-54
12.7.3
→
16.3-a.1
View file →
| @@ -9,12 +9,12 @@ | ||
| 9 | 9 | |
| 10 | 10 | namespace Automattic\Jetpack\Extensions\ImageCompare; |
| 11 | 11 | |
| 12 | 12 | use Automattic\Jetpack\Blocks; |
| 13 | -use Jetpack_Gutenberg; | |
| 14 | 13 | |
| 15 | -const FEATURE_NAME = 'image-compare'; | |
| 16 | -const BLOCK_NAME = 'jetpack/' . FEATURE_NAME; | |
| 14 | +if ( ! defined( 'ABSPATH' ) ) { | |
| 15 | + exit( 0 ); | |
| 16 | +} | |
| 17 | 17 | |
| 18 | 18 | /** |
| 19 | 19 | * Registers the block for use in Gutenberg |
| 20 | 20 | * This is done via an action so that we can disable |
| @@ -21,9 +21,9 @@ | ||
| 21 | 21 | * registration if we need to. |
| 22 | 22 | */ |
| 23 | 23 | function register_block() { |
| 24 | 24 | Blocks::jetpack_register_block( |
| 25 | - BLOCK_NAME, | |
| 25 | + __DIR__, | |
| 26 | 26 | array( 'render_callback' => __NAMESPACE__ . '\load_assets' ) |
| 27 | 27 | ); |
| 28 | 28 | } |
| 29 | 29 | add_action( 'init', __NAMESPACE__ . '\register_block' ); |
| @@ -30,8 +30,11 @@ | ||
| 30 | 30 | |
| 31 | 31 | /** |
| 32 | 32 | * Image Compare block registration/dependency declaration. |
| 33 | 33 | * |
| 34 | + * The render implementation lives in render.php and is only loaded when the | |
| 35 | + * block is actually rendered, keeping it out of the eager front-end path. | |
| 36 | + * | |
| 34 | 37 | * @param array $attr Array containing the image-compare block attributes. |
| 35 | 38 | * @param string $content String containing the image-compare block content. |
| 36 | 39 | * |
| 37 | 40 | * @return string |
| @@ -36,55 +39,7 @@ | ||
| 36 | 39 | * |
| 37 | 40 | * @return string |
| 38 | 41 | */ |
| 39 | 42 | function load_assets( $attr, $content ) { |
| 40 | - Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME ); | |
| 41 | - wp_localize_script( | |
| 42 | - 'jetpack-block-' . sanitize_title_with_dashes( FEATURE_NAME ), | |
| 43 | - 'imageCompareHandle', | |
| 44 | - array( | |
| 45 | - 'msg' => __( 'Slide to compare images', 'jetpack' ), | |
| 46 | - ) | |
| 47 | - ); | |
| 48 | - if ( Blocks::is_amp_request() ) { | |
| 49 | - $content = preg_replace( | |
| 50 | - '#<div class="juxtapose".+?</div>#s', | |
| 51 | - render_amp( $attr ), | |
| 52 | - $content | |
| 53 | - ); | |
| 54 | - } | |
| 55 | - | |
| 56 | - return $content; | |
| 57 | -} | |
| 58 | - | |
| 59 | -/** | |
| 60 | - * Render image compare block for AMP | |
| 61 | - * | |
| 62 | - * @param array $attr Array containing the image-compare block attributes. | |
| 63 | - * | |
| 64 | - * @return string Markup for amp-image-slider. | |
| 65 | - */ | |
| 66 | -function render_amp( $attr ) { | |
| 67 | - $img_before = $attr['imageBefore']; | |
| 68 | - $img_after = $attr['imageAfter']; | |
| 69 | - | |
| 70 | - $width = ! empty( $img_before['width'] ) ? absint( $img_before['width'] ) : 0; | |
| 71 | - $height = ! empty( $img_before['height'] ) ? absint( $img_before['height'] ) : 0; | |
| 72 | - | |
| 73 | - // As fallback, give 1:1 aspect ratio. | |
| 74 | - if ( ! $width || ! $height ) { | |
| 75 | - $width = 1; | |
| 76 | - $height = 1; | |
| 77 | - } | |
| 78 | - | |
| 79 | - return sprintf( | |
| 80 | - '<amp-image-slider layout="responsive" width="%1$s" height="%2$s"> <amp-img id="%3$d" src="%4$s" alt="%5$s" layout="fill"></amp-img> <amp-img id="%6$d" src="%7$s" alt="%8$s" layout="fill"></amp-img></amp-image-slider>', | |
| 81 | - esc_attr( $width ), | |
| 82 | - esc_attr( $height ), | |
| 83 | - absint( $img_before['id'] ), | |
| 84 | - esc_url( $img_before['url'] ), | |
| 85 | - esc_attr( $img_before['alt'] ), | |
| 86 | - absint( $img_after['id'] ), | |
| 87 | - esc_url( $img_after['url'] ), | |
| 88 | - esc_attr( $img_after['alt'] ) | |
| 89 | - ); | |
| 43 | + require_once __DIR__ . '/render.php'; | |
| 44 | + return render_implementation( $attr, $content ); | |
| 90 | 45 | } |