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

Timestamp:

09/20/2024 01:53:52 AM (6 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>