From 1077e73ccc93e06b13bbf8254a9fd8968d6c361b Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Fri, 6 Dec 2024 16:13:12 +0100 Subject: [PATCH] Use block context to pass down a gallery ID --- packages/block-library/src/gallery/block.json | 1 + packages/block-library/src/gallery/index.php | 52 +++++++++---------- packages/block-library/src/image/block.json | 10 +++- packages/block-library/src/image/index.php | 30 +++-------- 4 files changed, 41 insertions(+), 52 deletions(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 6a2129ec1e056f..874adae1ca3150 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -4,6 +4,7 @@ "name": "core/gallery", "title": "Gallery", "category": "media", + "usesContext": [ "galleryId" ], "allowedBlocks": [ "core/image" ], "description": "Display multiple images in a rich gallery.", "keywords": [ "images", "photos" ], diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php index 4b8d83c896c417..46d7431c2a3927 100644 --- a/packages/block-library/src/gallery/index.php +++ b/packages/block-library/src/gallery/index.php @@ -35,33 +35,22 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) { add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' ); /** - * Handles interactivity state initialization for Gallery Block. + * Adds a unique ID to the gallery block context. * - * @since 6.7.0 - * - * @param string $block_content Rendered block content. - * @param array $block Block object. + * @since 6.8.0 * - * @return string Filtered block content. + * @param array $context Default context. + * @param array $parsed_block Block being rendered, filtered by render_block_data. + * @return array Filtered context. */ -function block_core_gallery_interactivity_state( $block_content, $block ) { - if ( 'core/gallery' !== $block['blockName'] ) { - return $block_content; +function block_core_gallery_render_context( $context, $parsed_block ) { + if ( 'core/gallery' === $parsed_block['blockName'] ) { + $context['galleryId'] = uniqid(); } - - $unique_gallery_id = uniqid(); - wp_interactivity_state( - 'core/gallery', - array( - 'images' => array(), - 'galleryId' => $unique_gallery_id, - ) - ); - - return $block_content; + return $context; } -add_filter( 'render_block_data', 'block_core_gallery_interactivity_state', 15, 2 ); +add_filter( 'render_block_context', 'block_core_gallery_render_context', 10, 2 ); /** * Renders the `core/gallery` block on the server. @@ -69,10 +58,11 @@ function block_core_gallery_interactivity_state( $block_content, $block ) { * @since 6.0.0 * * @param array $attributes Attributes of the block being rendered. - * @param string $content Content of the block being rendered. + * @param string $content Content of the block being rendered. + * @param array $block The block instance being rendered. * @return string The content of the block being rendered. */ -function block_core_gallery_render( $attributes, $content ) { +function block_core_gallery_render( $attributes, $content, $block ) { // Adds a style tag for the --wp--style--unstable-gallery-gap var. // The Gallery block needs to recalculate Image block width based on // the current gap setting in order to maintain the number of flex columns @@ -150,16 +140,24 @@ function block_core_gallery_render( $attributes, $content ) { ) ); - $state = wp_interactivity_state( 'core/gallery' ); - $gallery_id = $state['galleryId']; + // Get all image IDs from the state that match this gallery's ID. + $state = wp_interactivity_state( 'core/image' ); + $gallery_id = $block->context['galleryId'] ?? null; + $image_ids = array(); + if ( isset( $gallery_id ) && isset( $state['metadata'] ) ) { + foreach ( $state['metadata'] as $image_id => $metadata ) { + if ( isset( $metadata['galleryId'] ) && $metadata['galleryId'] === $gallery_id ) { + $image_ids[] = $image_id; + } + } + } $processed_content->set_attribute( 'data-wp-interactive', 'core/gallery' ); $processed_content->set_attribute( 'data-wp-context', wp_json_encode( array( - 'galleryId' => $gallery_id, - 'lightbox' => true, + 'images' => $image_ids, ), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ) diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 16e31217476026..b5d12b048f0112 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -4,7 +4,15 @@ "name": "core/image", "title": "Image", "category": "media", - "usesContext": [ "allowResize", "imageCrop", "fixedHeight", "postId", "postType", "queryId" ], + "usesContext": [ + "allowResize", + "imageCrop", + "fixedHeight", + "postId", + "postType", + "queryId", + "galleryId" + ], "description": "Insert an image to make a visual statement.", "keywords": [ "img", "photo", "picture" ], "textdomain": "default", diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 64f9b7c14e8cf9..906ae318cb090f 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -80,7 +80,7 @@ function render_block_core_image( $attributes, $content, $block ) { * if the way the blocks are rendered changes, or if a new kind of filter is * introduced. */ - add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 ); + add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 3 ); } else { /* * Remove the filter if previously added by other Image blocks. @@ -130,12 +130,13 @@ function block_core_image_get_lightbox_settings( $block ) { * * @since 6.4.0 * - * @param string $block_content Rendered block content. - * @param array $block Block object. + * @param string $block_content Rendered block content. + * @param array $block Block object. + * @param array $block_instance Block instance. * * @return string Filtered block content. */ -function block_core_image_render_lightbox( $block_content, $block ) { +function block_core_image_render_lightbox( $block_content, $block, $block_instance ) { /* * If there's no IMG tag in the block then return the given block content * as-is. There's nothing that this code can knowingly modify to add the @@ -172,7 +173,6 @@ function block_core_image_render_lightbox( $block_content, $block ) { // Create unique id and set the image metadata in the state. $unique_image_id = uniqid(); - wp_interactivity_state( 'core/image', array( @@ -188,30 +188,12 @@ function block_core_image_render_lightbox( $block_content, $block ) { 'scaleAttr' => $block['attrs']['scale'] ?? false, 'alt' => $alt, 'screenReaderText' => empty( $alt ) ? $screen_reader_text : "$screen_reader_text: $alt", + 'galleryId' => $block_instance->context['galleryId'] ?? null, ), ), ) ); - $state = wp_interactivity_state( 'core/gallery' ); - $gallery_id = $state['galleryId']; - if ( isset( $gallery_id ) ) { - $images = $state['images'][ $gallery_id ]; - if ( ! isset( $images ) ) { - $images = array(); - } - $images[] = $unique_image_id; - - wp_interactivity_state( - 'core/gallery', - array( - 'images' => array( - $gallery_id => $images, - ), - ) - ); - } - $p->add_class( 'wp-lightbox-container' ); $p->set_attribute( 'data-wp-interactive', 'core/image' ); $p->set_attribute(