Make WordPress Core


Ignore:
Timestamp:
01/29/2024 09:04:18 PM (5 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/blocks/image.php

    r57063 r57377  
    3737    $link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
    3838    $lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
    39 
    40     $view_js_file_handle = 'wp-block-image-view';
    41     $script_handles      = $block->block_type->view_script_handles;
    4239
    4340    /*
     
    5148        true === $lightbox_settings['enabled']
    5249    ) {
    53         $block->block_type->supports['interactivity'] = true;
    54 
    55         if ( ! in_array( $view_js_file_handle, $script_handles, true ) ) {
    56             $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file_handle ) );
    57         }
     50        wp_enqueue_script_module( '@wordpress/block-library/image' );
    5851
    5952        /*
    60          * This render needs to happen in a filter with priority 15 to ensure
    61          * that it runs after the duotone filter and that duotone styles are
    62          * applied to the image in the lightbox. We also need to ensure that the
    63          * lightbox works with any plugins that might use filters as well. We
    64          * can consider removing this in the future if the way the blocks are
    65          * rendered changes, or if a new kind of filter is introduced.
     53         * This render needs to happen in a filter with priority 15 to ensure that
     54         * it runs after the duotone filter and that duotone styles are applied to
     55         * the image in the lightbox. Lightbox has to work with any plugins that
     56         * might use filters as well. Removing this can be considered in the
     57         * future if the way the blocks are rendered changes, or if a
     58         * new kind of filter is introduced.
    6659         */
    6760        add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
    6861    } else {
    6962        /*
    70          * Remove the filter and the JavaScript view file if previously added by
    71          * other Image blocks.
     63         * Remove the filter if previously added by other Image blocks.
    7264         */
    7365        remove_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15 );
    74         // If the script is not needed, and it is still in the `view_script_handles`, remove it.
    75         if ( in_array( $view_js_file_handle, $script_handles, true ) ) {
    76             $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file_handle ) );
    77         }
    7866    }
    7967
     
    9482    if ( isset( $block['attrs']['lightbox'] ) ) {
    9583        $lightbox_settings = $block['attrs']['lightbox'];
    96         // If the lightbox setting is not set in the block attributes,
    97         // check the legacy lightbox settings that are set using the
    98         // `gutenberg_should_render_lightbox` filter.
    99         // We can remove this elseif statement when the legacy lightbox settings are removed.
    100     } elseif ( isset( $block['legacyLightboxSettings'] ) ) {
    101         $lightbox_settings = $block['legacyLightboxSettings'];
    10284    }
    10385
     
    188170    $w->next_tag( 'figure' );
    189171    $w->add_class( 'wp-lightbox-container' );
    190     $w->set_attribute( 'data-wp-interactive', true );
     172    $w->set_attribute( 'data-wp-interactive', '{"namespace":"core/image"}' );
    191173
    192174    $w->set_attribute(
    193175        'data-wp-context',
    194176        sprintf(
    195             '{ "core":
    196                 { "image":
    197                     {   "imageLoaded": false,
    198                         "initialized": false,
    199                         "lightboxEnabled": false,
    200                         "hideAnimationEnabled": false,
    201                         "preloadInitialized": false,
    202                         "lightboxAnimation": "%s",
    203                         "imageUploadedSrc": "%s",
    204                         "imageCurrentSrc": "",
    205                         "targetWidth": "%s",
    206                         "targetHeight": "%s",
    207                         "scaleAttr": "%s",
    208                         "dialogLabel": "%s"
    209                     }
    210                 }
     177            '{  "imageLoaded": false,
     178                "initialized": false,
     179                "lightboxEnabled": false,
     180                "hideAnimationEnabled": false,
     181                "preloadInitialized": false,
     182                "lightboxAnimation": "%s",
     183                "imageUploadedSrc": "%s",
     184                "imageCurrentSrc": "",
     185                "targetWidth": "%s",
     186                "targetHeight": "%s",
     187                "scaleAttr": "%s",
     188                "dialogLabel": "%s"
    211189            }',
    212190            $lightbox_animation,
     
    219197    );
    220198    $w->next_tag( 'img' );
    221     $w->set_attribute( 'data-wp-init', 'effects.core.image.initOriginImage' );
    222     $w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
    223     $w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
     199    $w->set_attribute( 'data-wp-init', 'callbacks.initOriginImage' );
     200    $w->set_attribute( 'data-wp-on--load', 'actions.handleLoad' );
     201    $w->set_attribute( 'data-wp-watch', 'callbacks.setButtonStyles' );
    224202    // We need to set an event callback on the `img` specifically
    225203    // because the `figure` element can also contain a caption, and
    226204    // we don't want to trigger the lightbox when the caption is clicked.
    227     $w->set_attribute( 'data-wp-on--click', 'actions.core.image.showLightbox' );
    228     $w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
     205    $w->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
     206    $w->set_attribute( 'data-wp-watch--setStylesOnResize', 'callbacks.setStylesOnResize' );
    229207    $body_content = $w->get_updated_html();
    230208
     
    240218            aria-haspopup="dialog"
    241219            aria-label="' . esc_attr( $aria_label ) . '"
    242             data-wp-on--click="actions.core.image.showLightbox"
    243             data-wp-style--right="context.core.image.imageButtonRight"
    244             data-wp-style--top="context.core.image.imageButtonTop"
     220            data-wp-init="callbacks.initTriggerButton"
     221            data-wp-on--click="actions.showLightbox"
     222            data-wp-style--right="context.imageButtonRight"
     223            data-wp-style--top="context.imageButtonTop"
    245224        >
    246225            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
     
    268247    // we wait for the larger image to load.
    269248    $m->set_attribute( 'src', '' );
    270     $m->set_attribute( 'data-wp-bind--src', 'context.core.image.imageCurrentSrc' );
    271     $m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
     249    $m->set_attribute( 'data-wp-bind--src', 'context.imageCurrentSrc' );
     250    $m->set_attribute( 'data-wp-style--object-fit', 'state.lightboxObjectFit' );
    272251    $initial_image_content = $m->get_updated_html();
    273252
     
    284263    // is resolved, manually setting the 'src' seems to be the best solution to load the large image on demand.
    285264    $q->set_attribute( 'src', '' );
    286     $q->set_attribute( 'data-wp-bind--src', 'selectors.core.image.enlargedImgSrc' );
    287     $q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
     265    $q->set_attribute( 'data-wp-bind--src', 'state.enlargedImgSrc' );
     266    $q->set_attribute( 'data-wp-style--object-fit', 'state.lightboxObjectFit' );
    288267    $enlarged_image_content = $q->get_updated_html();
    289268
     
    308287    $lightbox_html = <<<HTML
    309288        <div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
    310             data-wp-bind--role="selectors.core.image.roleAttribute"
    311             data-wp-bind--aria-label="selectors.core.image.dialogLabel"
    312             data-wp-class--initialized="context.core.image.initialized"
    313             data-wp-class--active="context.core.image.lightboxEnabled"
    314             data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
    315             data-wp-bind--aria-modal="selectors.core.image.ariaModal"
    316             data-wp-effect="effects.core.image.initLightbox"
    317             data-wp-on--keydown="actions.core.image.handleKeydown"
    318             data-wp-on--touchstart="actions.core.image.handleTouchStart"
    319             data-wp-on--touchmove="actions.core.image.handleTouchMove"
    320             data-wp-on--touchend="actions.core.image.handleTouchEnd"
    321             data-wp-on--click="actions.core.image.hideLightbox"
     289            data-wp-bind--role="state.roleAttribute"
     290            data-wp-bind--aria-label="state.dialogLabel"
     291            data-wp-class--initialized="context.initialized"
     292            data-wp-class--active="context.lightboxEnabled"
     293            data-wp-class--hideAnimationEnabled="context.hideAnimationEnabled"
     294            data-wp-bind--aria-modal="state.ariaModal"
     295            data-wp-watch="callbacks.initLightbox"
     296            data-wp-on--keydown="actions.handleKeydown"
     297            data-wp-on--touchstart="actions.handleTouchStart"
     298            data-wp-on--touchmove="actions.handleTouchMove"
     299            data-wp-on--touchend="actions.handleTouchEnd"
     300            data-wp-on--click="actions.hideLightbox"
    322301            tabindex="-1"
    323302            >
    324                 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
     303                <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.hideLightbox">
    325304                    $close_button_icon
    326305                </button>
     
    335314
    336315/**
    337  * Ensures that the view script has the `wp-interactivity` dependency.
    338  *
    339  * @since 6.4.0
    340  *
    341  * @global WP_Scripts $wp_scripts
    342  */
    343 function block_core_image_ensure_interactivity_dependency() {
    344     global $wp_scripts;
    345     if (
    346         isset( $wp_scripts->registered['wp-block-image-view'] ) &&
    347         ! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-image-view']->deps, true )
    348     ) {
    349         $wp_scripts->registered['wp-block-image-view']->deps[] = 'wp-interactivity';
    350     }
    351 }
    352 
    353 add_action( 'wp_print_scripts', 'block_core_image_ensure_interactivity_dependency' );
    354 
    355 /**
    356316 * Registers the `core/image` block on server.
    357317 */
     
    363323        )
    364324    );
     325
     326    wp_register_script_module(
     327        '@wordpress/block-library/image',
     328        defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ? gutenberg_url( '/build/interactivity/image.min.js' ) : includes_url( 'blocks/image/view.min.js' ),
     329        array( '@wordpress/interactivity' ),
     330        defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
     331    );
    365332}
    366333add_action( 'init', 'register_block_core_image' );
Note: See TracChangeset for help on using the changeset viewer.