diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 6a2129ec1e056f..08a96702d949c8 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -9,6 +9,9 @@ "keywords": [ "images", "photos" ], "textdomain": "default", "attributes": { + "galleryId": { + "type": "number" + }, "images": { "type": "array", "default": [], @@ -105,6 +108,7 @@ } }, "providesContext": { + "galleryId": "galleryId", "allowResize": "allowResize", "imageCrop": "imageCrop", "fixedHeight": "fixedHeight" diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php index bcb96842948c72..c4ee4dbc89e94f 100644 --- a/packages/block-library/src/gallery/index.php +++ b/packages/block-library/src/gallery/index.php @@ -40,30 +40,32 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) { * @since 6.7.0 * * @param string $block_content Rendered block content. - * @param array $block Block object. * * @return string Filtered block content. */ -function block_core_gallery_interactivity_state( $block_content, $block ) { - if ( 'core/gallery' !== $block['blockName'] ) { +function block_core_gallery_interactivity_state( $block_content ) { + if ( 'core/gallery' !== $block_content['blockName'] ) { return $block_content; } $unique_gallery_id = uniqid(); - interactive_block_gallery_id( $unique_gallery_id ); + $filter_block_context = static function ( $context ) use ( $unique_gallery_id ) { + $context['galleryId'] = $unique_gallery_id; + return $context; + }; + add_filter( 'render_block_context', $filter_block_context, 1 ); wp_interactivity_state( 'core/gallery', array( 'images' => array(), - 'galleryId' => $unique_gallery_id, ) ); return $block_content; } -add_filter( 'render_block_data', 'block_core_gallery_interactivity_state', 15, 2 ); +add_filter( 'render_block_data', 'block_core_gallery_interactivity_state' ); /** * Returns the current gallery block id. @@ -91,7 +93,7 @@ function interactive_block_gallery_id( $id = null ) { * @param string $content Content of the block 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 @@ -169,8 +171,7 @@ function block_core_gallery_render( $attributes, $content ) { ) ); - $state = wp_interactivity_state( 'core/gallery' ); - $gallery_id = interactive_block_gallery_id( ); + $gallery_id = $block->context['galleryId']; $processed_content->set_attribute( 'data-wp-interactive', 'core/gallery' ); $processed_content->set_attribute( @@ -184,7 +185,7 @@ function block_core_gallery_render( $attributes, $content ) { ) ); - add_filter( 'render_block_core/gallery', 'block_core_gallery_render_lightbox' ); + add_filter( 'render_block_core/gallery', 'block_core_gallery_render_lightbox', 15, 3 ); // The WP_HTML_Tag_Processor class calls get_updated_html() internally // when the instance is treated as a string, but here we explicitly @@ -245,9 +246,9 @@ static function () use ( $image_blocks, &$i ) { * * @return string Filtered block content. */ -function block_core_gallery_render_lightbox( $block_content ) { +function block_core_gallery_render_lightbox( $block_content, $content, $block ) { $state = wp_interactivity_state( 'core/gallery' ); - $gallery_id = interactive_block_gallery_id(); + $gallery_id = $block->context['galleryId']; $images = $state['images'][ $gallery_id ] ?? array(); $translations = array(); diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 6417879164a22b..33787024c75e37 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -4,7 +4,7 @@ "name": "core/image", "title": "Image", "category": "media", - "usesContext": [ "allowResize", "imageCrop", "fixedHeight" ], + "usesContext": [ "galleryId", "allowResize", "imageCrop", "fixedHeight" ], "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 84a69061642a95..91523c02944102 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -92,7 +92,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. @@ -142,12 +142,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 @@ -205,9 +206,10 @@ function block_core_image_render_lightbox( $block_content, $block ) { ) ); - $state = wp_interactivity_state( 'core/gallery' ); - $gallery_id = gutenberg_interactive_block_gallery_id( ); + $gallery_id = $block_instance->context['galleryId'] ?? null; + if ( isset( $gallery_id ) ) { + $state = wp_interactivity_state( 'core/gallery' ); $images = $state['images'][ $gallery_id ]; if ( ! isset( $images ) ) { $images = array();