From b0cddec62f1079296de8a2cfed9e63ddc2edacc9 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 27 Oct 2021 14:01:51 +1100 Subject: [PATCH 1/8] Adding a server render_callback in order to add a data-id attribute to the image element. Check for existing data-id attribute on the image block content Wrapping $attributes['id'] in an isset check to catch undefined indexes --- lib/blocks.php | 2 ++ packages/block-library/src/image/index.php | 40 ++++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 packages/block-library/src/image/index.php diff --git a/lib/blocks.php b/lib/blocks.php index 76bf0d74eed4d..9aa111dfff61a 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -66,6 +66,8 @@ function gutenberg_reregister_core_block_types() { 'comment-template.php' => 'core/comment-template', 'file.php' => 'core/file', 'home-link.php' => 'core/home-link', + 'image.php' => 'core/image', + 'gallery.php' => 'core/gallery', 'latest-comments.php' => 'core/latest-comments', 'latest-posts.php' => 'core/latest-posts', 'loginout.php' => 'core/loginout', diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php new file mode 100644 index 0000000000000..cf412684aad37 --- /dev/null +++ b/packages/block-library/src/image/index.php @@ -0,0 +1,40 @@ + 'render_block_core_image', + ) + ); +} +add_action( 'init', 'register_block_core_image' ); From a0b5948f5fc0a1f0cf7cc5b366d63fae162f6713 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 2 Nov 2021 11:51:40 +1300 Subject: [PATCH 2/8] Switch to using the_post instead of server side block render --- packages/block-library/src/image/index.php | 51 +++++++++++----------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index cf412684aad37..08ed9e732877c 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -6,35 +6,34 @@ */ /** - * Renders the `core/image` block on the server. + * Adds a data-id attribute to the core Image block when nested in a Gallery block. * - * @param array $attributes The block attributes. - * @param array $content The block content. - * @return string Returns the block content with the data-id attribute added. + * @param WP_Post $post The block attributes. + * @return string Returns the block content with the data-id attribute added. */ -function render_block_core_image( $attributes, $content ) { - if ( isset( $attributes['id'] ) ) { - // Add the data-id="$id" attribute to the img element - // to provide backwards compatibility for the Gallery Block, - // which now wraps Image Blocks within innerBlocks. - $data_id_attribute = 'data-id="' . esc_attr( $attributes['id'] ) . '"'; - if ( ! strpos( $content, $data_id_attribute ) ) { - $content = str_replace( 'post_content ) ) { + $content = $post->post_content; + $blocks = parse_blocks( $content ); + foreach ( $blocks as $block ) { + if ( 'core/gallery' === $block['blockName'] ) { + foreach ( $block['innerBlocks'] as $inner_block ) { + if ( 'core/image' === $inner_block['blockName'] ) { + if ( isset( $inner_block['attrs']['id'] ) ) { + $image_id = esc_attr( $inner_block['attrs']['id'] ); + $data_id_attribute = 'data-id="' . $image_id . '"'; + $class_string = 'class="wp-image-' . $image_id . '"'; + $content = str_replace( $class_string, $class_string . ' ' . $data_id_attribute, $content ); + } + } + } + } } } - return $content; + $post->post_content = $content; } - -/** - * Register image block. - */ -function register_block_core_image() { - register_block_type_from_metadata( - __DIR__ . '/image', - array( - 'render_callback' => 'render_block_core_image', - ) - ); -} -add_action( 'init', 'register_block_core_image' ); +add_action( 'the_post', 'get_block_core_image_post_content', 10, 2 ); From 6af28ef59ba53e53dedb17f678fec76250eab37f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 2 Nov 2021 13:23:29 +1300 Subject: [PATCH 3/8] Change order of attribs and check for innerBlocks --- packages/block-library/src/image/index.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 08ed9e732877c..8c6010ef1f6ca 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -8,8 +8,8 @@ /** * Adds a data-id attribute to the core Image block when nested in a Gallery block. * - * @param WP_Post $post The block attributes. - * @return string Returns the block content with the data-id attribute added. + * @param WP_Post $post The WP post. + * @return string Returns the post content with the data-id attribute added to gallery images. */ function get_block_core_image_post_content( $post ) { if ( is_admin() ) { @@ -19,14 +19,14 @@ function get_block_core_image_post_content( $post ) { $content = $post->post_content; $blocks = parse_blocks( $content ); foreach ( $blocks as $block ) { - if ( 'core/gallery' === $block['blockName'] ) { + if ( 'core/gallery' === $block['blockName'] && ! empty( $block['innerBlocks'] ) ) { foreach ( $block['innerBlocks'] as $inner_block ) { if ( 'core/image' === $inner_block['blockName'] ) { if ( isset( $inner_block['attrs']['id'] ) ) { $image_id = esc_attr( $inner_block['attrs']['id'] ); $data_id_attribute = 'data-id="' . $image_id . '"'; $class_string = 'class="wp-image-' . $image_id . '"'; - $content = str_replace( $class_string, $class_string . ' ' . $data_id_attribute, $content ); + $content = str_replace( $class_string, $data_id_attribute . ' ' . $class_string, $content ); } } } @@ -36,4 +36,4 @@ function get_block_core_image_post_content( $post ) { $post->post_content = $content; } -add_action( 'the_post', 'get_block_core_image_post_content', 10, 2 ); +add_action( 'the_post', 'get_block_core_image_post_content', 10, 1 ); From 48975cd3bcf9c79ccba633ff914629190fe65787 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 4 Nov 2021 07:18:49 +1100 Subject: [PATCH 4/8] Reinstating render_callback --- packages/block-library/src/image/index.php | 51 +++++++++++----------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 8c6010ef1f6ca..cf412684aad37 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -6,34 +6,35 @@ */ /** - * Adds a data-id attribute to the core Image block when nested in a Gallery block. + * Renders the `core/image` block on the server. * - * @param WP_Post $post The WP post. - * @return string Returns the post content with the data-id attribute added to gallery images. + * @param array $attributes The block attributes. + * @param array $content The block content. + * @return string Returns the block content with the data-id attribute added. */ -function get_block_core_image_post_content( $post ) { - if ( is_admin() ) { - return; - } - if ( has_blocks( $post->post_content ) ) { - $content = $post->post_content; - $blocks = parse_blocks( $content ); - foreach ( $blocks as $block ) { - if ( 'core/gallery' === $block['blockName'] && ! empty( $block['innerBlocks'] ) ) { - foreach ( $block['innerBlocks'] as $inner_block ) { - if ( 'core/image' === $inner_block['blockName'] ) { - if ( isset( $inner_block['attrs']['id'] ) ) { - $image_id = esc_attr( $inner_block['attrs']['id'] ); - $data_id_attribute = 'data-id="' . $image_id . '"'; - $class_string = 'class="wp-image-' . $image_id . '"'; - $content = str_replace( $class_string, $data_id_attribute . ' ' . $class_string, $content ); - } - } - } - } +function render_block_core_image( $attributes, $content ) { + if ( isset( $attributes['id'] ) ) { + // Add the data-id="$id" attribute to the img element + // to provide backwards compatibility for the Gallery Block, + // which now wraps Image Blocks within innerBlocks. + $data_id_attribute = 'data-id="' . esc_attr( $attributes['id'] ) . '"'; + if ( ! strpos( $content, $data_id_attribute ) ) { + $content = str_replace( 'post_content = $content; + return $content; } -add_action( 'the_post', 'get_block_core_image_post_content', 10, 1 ); + +/** + * Register image block. + */ +function register_block_core_image() { + register_block_type_from_metadata( + __DIR__ . '/image', + array( + 'render_callback' => 'render_block_core_image', + ) + ); +} +add_action( 'init', 'register_block_core_image' ); From 15e853217619f7c4342c618ac9053c503fda355a Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 4 Nov 2021 10:38:59 +1100 Subject: [PATCH 5/8] This commit adds a data-id attribute to every image innerblock of a gallery before render. The image block render callback can detect this and add it to the image elements. Because the gallery block is adding the attribute, we can target images inside galleries. --- packages/block-library/src/gallery/index.php | 34 ++++++++++++++++++++ packages/block-library/src/image/index.php | 8 +++-- 2 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 packages/block-library/src/gallery/index.php diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php new file mode 100644 index 0000000000000..23b5cb5a62f97 --- /dev/null +++ b/packages/block-library/src/gallery/index.php @@ -0,0 +1,34 @@ + $inner_block ) { + if ( 'core/image' === $inner_block['blockName'] ) { + if ( ! $parsed_block['innerBlocks'][$key]['attrs']['data-id'] ) { + $parsed_block['innerBlocks'][$key]['attrs']['data-id'] = esc_attr( $inner_block['attrs']['id'] ); + } + } + } + } + + return $parsed_block; +} + +add_filter( 'render_block_data', 'render_block_core_gallery_data' ); diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index cf412684aad37..fc442659d5509 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -6,18 +6,20 @@ */ /** - * Renders the `core/image` block on the server. + * Renders the `core/image` block on the server, + * adding a data-id attribute to the element if core/gallery has added on pre-render. * * @param array $attributes The block attributes. * @param array $content The block content. * @return string Returns the block content with the data-id attribute added. */ function render_block_core_image( $attributes, $content ) { - if ( isset( $attributes['id'] ) ) { + if ( isset( $attributes['data-id'] ) ) { // Add the data-id="$id" attribute to the img element // to provide backwards compatibility for the Gallery Block, // which now wraps Image Blocks within innerBlocks. - $data_id_attribute = 'data-id="' . esc_attr( $attributes['id'] ) . '"'; + // The data-id attribute is added in a core/gallery `render_block_data` hook. + $data_id_attribute = 'data-id="' . esc_attr( $attributes['data-id'] ) . '"'; if ( ! strpos( $content, $data_id_attribute ) ) { $content = str_replace( ' Date: Thu, 4 Nov 2021 10:48:17 +1100 Subject: [PATCH 6/8] NEWSFLASH! Array keys must be surrounded by spaces unless they contain a string or an integer. --- packages/block-library/src/gallery/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php index 23b5cb5a62f97..dd7c37239f312 100644 --- a/packages/block-library/src/gallery/index.php +++ b/packages/block-library/src/gallery/index.php @@ -21,8 +21,8 @@ function render_block_core_gallery_data( $parsed_block ) { if ( 'core/gallery' === $parsed_block['blockName'] ) { foreach ( $parsed_block['innerBlocks'] as $key => $inner_block ) { if ( 'core/image' === $inner_block['blockName'] ) { - if ( ! $parsed_block['innerBlocks'][$key]['attrs']['data-id'] ) { - $parsed_block['innerBlocks'][$key]['attrs']['data-id'] = esc_attr( $inner_block['attrs']['id'] ); + if ( ! $parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] ) { + $parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] = esc_attr( $inner_block['attrs']['id'] ); } } } From a958531b40bc7f78d4ac439a5a61ef5ca4360105 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 4 Nov 2021 19:19:42 +1100 Subject: [PATCH 7/8] Adding a render function so that block based themes render the gallery correctly. Without this dummy render function, the gallery styles do not load with the block-library build. --- packages/block-library/src/gallery/index.php | 18 ++++++++++++++++++ packages/block-library/src/image/index.php | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php index dd7c37239f312..1e5b21e067c66 100644 --- a/packages/block-library/src/gallery/index.php +++ b/packages/block-library/src/gallery/index.php @@ -32,3 +32,21 @@ function render_block_core_gallery_data( $parsed_block ) { } add_filter( 'render_block_data', 'render_block_core_gallery_data' ); + +/** + * Registers the `core/gallery` block on server. + * This render callback needs to be here + * so that the gallery styles are loaded in block-based themes. + */ +function gutenberg_register_block_core_gallery() { + register_block_type_from_metadata( + __DIR__ . '/gallery', + array( + 'render_callback' => function ( $attributes, $content ) { + return $content; + }, + ) + ); +} + +add_action( 'init', 'gutenberg_register_block_core_gallery', 20 ); diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index fc442659d5509..4e149a9c13fce 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -29,7 +29,7 @@ function render_block_core_image( $attributes, $content ) { /** - * Register image block. + * Registers the `core/image` block on server. */ function register_block_core_image() { register_block_type_from_metadata( From ff4ba58c037738b015ff430ec2b2caa091c44a51 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 5 Nov 2021 16:57:24 +1300 Subject: [PATCH 8/8] Add guards for undefined indexes --- packages/block-library/src/gallery/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php index 1e5b21e067c66..74ac0e3b96946 100644 --- a/packages/block-library/src/gallery/index.php +++ b/packages/block-library/src/gallery/index.php @@ -21,7 +21,7 @@ function render_block_core_gallery_data( $parsed_block ) { if ( 'core/gallery' === $parsed_block['blockName'] ) { foreach ( $parsed_block['innerBlocks'] as $key => $inner_block ) { if ( 'core/image' === $inner_block['blockName'] ) { - if ( ! $parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] ) { + if ( ! isset( $parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] ) && isset( $inner_block['attrs']['id'] ) ) { $parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] = esc_attr( $inner_block['attrs']['id'] ); } }