diff -r 48c4eec2b7e6 -r 8c2e4d02f4ef wp/wp-includes/blocks/image.php --- a/wp/wp-includes/blocks/image.php Fri Sep 05 18:40:08 2025 +0200 +++ b/wp/wp-includes/blocks/image.php Fri Sep 05 18:52:52 2025 +0200 @@ -24,7 +24,7 @@ $p = new WP_HTML_Tag_Processor( $content ); - if ( ! $p->next_tag( 'img' ) || null === $p->get_attribute( 'src' ) ) { + if ( ! $p->next_tag( 'img' ) || ! $p->get_attribute( 'src' ) ) { return ''; } @@ -70,19 +70,7 @@ isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) { - $suffix = wp_scripts_get_suffix(); - if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) { - $module_url = gutenberg_url( '/build/interactivity/image.min.js' ); - } - - wp_register_script_module( - '@wordpress/block-library/image', - isset( $module_url ) ? $module_url : includes_url( "blocks/image/view{$suffix}.js" ), - array( '@wordpress/interactivity' ), - defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ) - ); - - wp_enqueue_script_module( '@wordpress/block-library/image' ); + wp_enqueue_script_module( '@wordpress/block-library/image/view' ); /* * This render needs to happen in a filter with priority 15 to ensure that @@ -161,18 +149,14 @@ return $block_content; } - $alt = $p->get_attribute( 'alt' ); - $img_uploaded_src = $p->get_attribute( 'src' ); - $img_class_names = $p->get_attribute( 'class' ); - $img_styles = $p->get_attribute( 'style' ); - $img_width = 'none'; - $img_height = 'none'; - $aria_label = __( 'Enlarge image' ); - - if ( $alt ) { - /* translators: %s: Image alt text. */ - $aria_label = sprintf( __( 'Enlarge image: %s' ), $alt ); - } + $alt = $p->get_attribute( 'alt' ); + $img_uploaded_src = $p->get_attribute( 'src' ); + $img_class_names = $p->get_attribute( 'class' ); + $img_styles = $p->get_attribute( 'style' ); + $img_width = 'none'; + $img_height = 'none'; + $aria_label = __( 'Enlarge' ); + $dialog_aria_label = __( 'Enlarged image' ); if ( isset( $block['attrs']['id'] ) ) { $img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] ); @@ -185,22 +169,37 @@ $p->seek( 'figure' ); $figure_class_names = $p->get_attribute( 'class' ); $figure_styles = $p->get_attribute( 'style' ); + + // Create unique id and set the image metadata in the state. + $unique_image_id = uniqid(); + + wp_interactivity_state( + 'core/image', + array( + 'metadata' => array( + $unique_image_id => array( + 'uploadedSrc' => $img_uploaded_src, + 'figureClassNames' => $figure_class_names, + 'figureStyles' => $figure_styles, + 'imgClassNames' => $img_class_names, + 'imgStyles' => $img_styles, + 'targetWidth' => $img_width, + 'targetHeight' => $img_height, + 'scaleAttr' => $block['attrs']['scale'] ?? false, + 'ariaLabel' => $dialog_aria_label, + 'alt' => $alt, + ), + ), + ) + ); + $p->add_class( 'wp-lightbox-container' ); $p->set_attribute( 'data-wp-interactive', 'core/image' ); $p->set_attribute( 'data-wp-context', wp_json_encode( array( - 'uploadedSrc' => $img_uploaded_src, - 'figureClassNames' => $figure_class_names, - 'figureStyles' => $figure_styles, - 'imgClassNames' => $img_class_names, - 'imgStyles' => $img_styles, - 'targetWidth' => $img_width, - 'targetHeight' => $img_height, - 'scaleAttr' => $block['attrs']['scale'] ?? false, - 'ariaLabel' => $aria_label, - 'alt' => $alt, + 'imageId' => $unique_image_id, ), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ) @@ -215,6 +214,8 @@ // contain a caption, and we don't want to trigger the lightbox when the // caption is clicked. $p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' ); + $p->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' ); + $p->set_attribute( 'data-wp-class--show', 'state.isContentVisible' ); $body_content = $p->get_updated_html(); @@ -231,8 +232,8 @@ aria-label="' . esc_attr( $aria_label ) . '" data-wp-init="callbacks.initTriggerButton" data-wp-on-async--click="actions.showLightbox" - data-wp-style--right="context.imageButtonRight" - data-wp-style--top="context.imageButtonTop" + data-wp-style--right="state.imageButtonRight" + data-wp-style--top="state.imageButtonTop" > @@ -285,23 +286,23 @@ data-wp-on-async--click="actions.hideLightbox" data-wp-on-async-window--resize="callbacks.setOverlayStyles" data-wp-on-async-window--scroll="actions.handleScroll" + data-wp-bind--style="state.overlayStyles" tabindex="-1" >
-
+
-
+
- HTML; }