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

Timestamp:

01/29/2024 09:04:18 PM (15 months ago)

Author:

youknowriad

Message:

Editor: Update the WordPress packages to the Gutenberg 16.7 RC2 version.

This patch, somewhat small brings a lot to WordPress.
This includes features like:

• DataViews.
• Customization tools like box shadow, background size and repeat.
• UI improvements in the site editor.
• Preferences sharing between the post and site editors.
• Unified panels and editors between post and site editors.
• Improved template mode in the post editor.
• Iterations to multiple interactive blocks.
• Preparing the blocks and UI for pattern overrides.
• and a lot more.

Props luisherranz, gziolo, isabel_brison, costdev, jonsurrell, peterwilsoncc, get_dave, antonvlasenko, desrosj.
See #60315.

File:

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

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

@@ -37 +37 @@
     $link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
     $lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
-
-    $view_js_file_handle = 'wp-block-image-view';
-    $script_handles      = $block->block_type->view_script_handles;
 
     /*
@@ -51 +48 @@
         true === $lightbox_settings['enabled']
     ) {
-        $block->block_type->supports['interactivity'] = true;
-
-        if ( ! in_array( $view_js_file_handle, $script_handles, true ) ) {
-            $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file_handle ) );
-        }
+        wp_enqueue_script_module( '@wordpress/block-library/image' );
 
         /*
-         * This render needs to happen in a filter with priority 15 to ensure
-         * that it runs after the duotone filter and that duotone styles are
-         * applied to the image in the lightbox. We also need to ensure that the
-         * lightbox works with any plugins that might use filters as well. We
-         * can consider removing this in the future if the way the blocks are
-         * rendered changes, or if a new kind of filter is introduced.
+         * This render needs to happen in a filter with priority 15 to ensure that
+         * it runs after the duotone filter and that duotone styles are applied to
+         * the image in the lightbox. Lightbox has to work with any plugins that
+         * might use filters as well. Removing this can be considered in the
+         * future 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 );
     } else {
         /*
-         * Remove the filter and the JavaScript view file if previously added by
-         * other Image blocks.
+         * Remove the filter if previously added by other Image blocks.
          */
         remove_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15 );
-        // If the script is not needed, and it is still in the `view_script_handles`, remove it.
-        if ( in_array( $view_js_file_handle, $script_handles, true ) ) {
-            $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file_handle ) );
-        }
     }
 
@@ -94 +82 @@
     if ( isset( $block['attrs']['lightbox'] ) ) {
         $lightbox_settings = $block['attrs']['lightbox'];
-        // If the lightbox setting is not set in the block attributes,
-        // check the legacy lightbox settings that are set using the
-        // `gutenberg_should_render_lightbox` filter.
-        // We can remove this elseif statement when the legacy lightbox settings are removed.
-    } elseif ( isset( $block['legacyLightboxSettings'] ) ) {
-        $lightbox_settings = $block['legacyLightboxSettings'];
     }
 
@@ -188 +170 @@
     $w->next_tag( 'figure' );
     $w->add_class( 'wp-lightbox-container' );
-    $w->set_attribute( 'data-wp-interactive', true );
+    $w->set_attribute( 'data-wp-interactive', '{"namespace":"core/image"}' );
 
     $w->set_attribute(
         'data-wp-context',
         sprintf(
-            '{ "core":
-                { "image":
-                    {   "imageLoaded": false,
-                        "initialized": false,
-                        "lightboxEnabled": false,
-                        "hideAnimationEnabled": false,
-                        "preloadInitialized": false,
-                        "lightboxAnimation": "%s",
-                        "imageUploadedSrc": "%s",
-                        "imageCurrentSrc": "",
-                        "targetWidth": "%s",
-                        "targetHeight": "%s",
-                        "scaleAttr": "%s",
-                        "dialogLabel": "%s"
-                    }
-                }
+            '{  "imageLoaded": false,
+                "initialized": false,
+                "lightboxEnabled": false,
+                "hideAnimationEnabled": false,
+                "preloadInitialized": false,
+                "lightboxAnimation": "%s",
+                "imageUploadedSrc": "%s",
+                "imageCurrentSrc": "",
+                "targetWidth": "%s",
+                "targetHeight": "%s",
+                "scaleAttr": "%s",
+                "dialogLabel": "%s"
             }',
             $lightbox_animation,
@@ -219 +197 @@
     );
     $w->next_tag( 'img' );
-    $w->set_attribute( 'data-wp-init', 'effects.core.image.initOriginImage' );
-    $w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
-    $w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
+    $w->set_attribute( 'data-wp-init', 'callbacks.initOriginImage' );
+    $w->set_attribute( 'data-wp-on--load', 'actions.handleLoad' );
+    $w->set_attribute( 'data-wp-watch', 'callbacks.setButtonStyles' );
     // We need to set an event callback on the `img` specifically
     // because the `figure` element can also contain a caption, and
     // we don't want to trigger the lightbox when the caption is clicked.
-    $w->set_attribute( 'data-wp-on--click', 'actions.core.image.showLightbox' );
-    $w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
+    $w->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
+    $w->set_attribute( 'data-wp-watch--setStylesOnResize', 'callbacks.setStylesOnResize' );
     $body_content = $w->get_updated_html();
 
@@ -240 +218 @@
             aria-haspopup="dialog"
             aria-label="' . esc_attr( $aria_label ) . '"
-            data-wp-on--click="actions.core.image.showLightbox"
-            data-wp-style--right="context.core.image.imageButtonRight"
-            data-wp-style--top="context.core.image.imageButtonTop"
+            data-wp-init="callbacks.initTriggerButton"
+            data-wp-on--click="actions.showLightbox"
+            data-wp-style--right="context.imageButtonRight"
+            data-wp-style--top="context.imageButtonTop"
         >
             <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
@@ -268 +247 @@
     // we wait for the larger image to load.
     $m->set_attribute( 'src', '' );
-    $m->set_attribute( 'data-wp-bind--src', 'context.core.image.imageCurrentSrc' );
-    $m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
+    $m->set_attribute( 'data-wp-bind--src', 'context.imageCurrentSrc' );
+    $m->set_attribute( 'data-wp-style--object-fit', 'state.lightboxObjectFit' );
     $initial_image_content = $m->get_updated_html();
 
@@ -284 +263 @@
     // is resolved, manually setting the 'src' seems to be the best solution to load the large image on demand.
     $q->set_attribute( 'src', '' );
-    $q->set_attribute( 'data-wp-bind--src', 'selectors.core.image.enlargedImgSrc' );
-    $q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
+    $q->set_attribute( 'data-wp-bind--src', 'state.enlargedImgSrc' );
+    $q->set_attribute( 'data-wp-style--object-fit', 'state.lightboxObjectFit' );
     $enlarged_image_content = $q->get_updated_html();
 
@@ -308 +287 @@
     $lightbox_html = <<<HTML
         <div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
-            data-wp-bind--role="selectors.core.image.roleAttribute"
-            data-wp-bind--aria-label="selectors.core.image.dialogLabel"
-            data-wp-class--initialized="context.core.image.initialized"
-            data-wp-class--active="context.core.image.lightboxEnabled"
-            data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
-            data-wp-bind--aria-modal="selectors.core.image.ariaModal"
-            data-wp-effect="effects.core.image.initLightbox"
-            data-wp-on--keydown="actions.core.image.handleKeydown"
-            data-wp-on--touchstart="actions.core.image.handleTouchStart"
-            data-wp-on--touchmove="actions.core.image.handleTouchMove"
-            data-wp-on--touchend="actions.core.image.handleTouchEnd"
-            data-wp-on--click="actions.core.image.hideLightbox"
+            data-wp-bind--role="state.roleAttribute"
+            data-wp-bind--aria-label="state.dialogLabel"
+            data-wp-class--initialized="context.initialized"
+            data-wp-class--active="context.lightboxEnabled"
+            data-wp-class--hideAnimationEnabled="context.hideAnimationEnabled"
+            data-wp-bind--aria-modal="state.ariaModal"
+            data-wp-watch="callbacks.initLightbox"
+            data-wp-on--keydown="actions.handleKeydown"
+            data-wp-on--touchstart="actions.handleTouchStart"
+            data-wp-on--touchmove="actions.handleTouchMove"
+            data-wp-on--touchend="actions.handleTouchEnd"
+            data-wp-on--click="actions.hideLightbox"
             tabindex="-1"
             >
-                <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
+                <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.hideLightbox">
                     $close_button_icon
                 </button>
@@ -335 +314 @@
 
 /**
- * Ensures that the view script has the `wp-interactivity` dependency.
- *
- * @since 6.4.0
- *
- * @global WP_Scripts $wp_scripts
- */
-function block_core_image_ensure_interactivity_dependency() {
-    global $wp_scripts;
-    if (
-        isset( $wp_scripts->registered['wp-block-image-view'] ) &&
-        ! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-image-view']->deps, true )
-    ) {
-        $wp_scripts->registered['wp-block-image-view']->deps[] = 'wp-interactivity';
-    }
-}
-
-add_action( 'wp_print_scripts', 'block_core_image_ensure_interactivity_dependency' );
-
-/**
  * Registers the `core/image` block on server.
  */
@@ -363 +323 @@
         )
     );
+
+    wp_register_script_module(
+        '@wordpress/block-library/image',
+        defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ? gutenberg_url( '/build/interactivity/image.min.js' ) : includes_url( 'blocks/image/view.min.js' ),
+        array( '@wordpress/interactivity' ),
+        defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+    );
 }
 add_action( 'init', 'register_block_core_image' );