Changeset 59072 for trunk/src/wp-includes/blocks/image.php

Timestamp:

09/20/2024 01:53:52 AM (23 months ago)

Author:

noisysocks

Message:

Editor: Update packages for 6.7 Beta 1.

Syncs @wordpress/* packages to the wp-6.7 npm tag.

Fixes #61906.
Props peterwilsoncc, gziolo, kevin940726.

File:

• trunk/src/wp-includes/blocks/image.php (modified) (6 diffs)

trunk/src/wp-includes/blocks/image.php

@@ -73 +73 @@
                 $suffix = wp_scripts_get_suffix();
                 if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-                        $module_url = gutenberg_url( '/build/interactivity/image.min.js' );
+                        $module_url = gutenberg_url( '/build-module/block-library/image/view.min.js' );
                 }
 
@@ -186 +186 @@
         $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'        => $aria_label,
+                                        'alt'              => $alt,
+                                ),
+                        ),
+                )
+        );
+
         $p->add_class( 'wp-lightbox-container' );
         $p->set_attribute( 'data-wp-interactive', 'core/image' );
@@ -192 +216 @@
                 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
@@ -216 +231 @@
         // 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();
@@ -232 +249 @@
                         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"
                 >
                         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
@@ -289 +306 @@
                         >
                                 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button">
-                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg>
                                 </button>
                                 <div class="lightbox-image-container">
-                                        <figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles">
+                                        <figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
                                                 <img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.currentImage.currentSrc">
                                         </figure>
                                 </div>
                                 <div class="lightbox-image-container">
-                                        <figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles">
+                                        <figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
                                                 <img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
                                         </figure>