From 1f3f99d4f049edc511801040ae3218ecf93f9bd8 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Thu, 9 Nov 2023 12:00:21 +0100 Subject: [PATCH 01/14] Bundle `@wordpress/interactivity` as an ES module --- tools/webpack/interactivity.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js index 26e49966ad40c..befb018117880 100644 --- a/tools/webpack/interactivity.js +++ b/tools/webpack/interactivity.js @@ -14,15 +14,17 @@ module.exports = { entry: { index: { import: `./packages/interactivity/src/index.js`, - library: { - name: [ 'wp', 'interactivity' ], - type: 'window', - }, }, }, + experiments: { + outputModule: true, + }, output: { devtoolNamespace: 'wp', filename: './build/interactivity/[name].min.js', + library: { + type: 'module', + }, path: join( __dirname, '..', '..' ), }, module: { From 8fe36f9f0cc57e8208f2e29837659f32113806b4 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Mon, 13 Nov 2023 16:26:19 +0100 Subject: [PATCH 02/14] Add the class with a basic API --- .../modules/class-gutenberg-modules.php | 116 ++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 lib/experimental/modules/class-gutenberg-modules.php diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php new file mode 100644 index 0000000000000..657e1befc1453 --- /dev/null +++ b/lib/experimental/modules/class-gutenberg-modules.php @@ -0,0 +1,116 @@ + $src, + 'args' => $args, + ); + } + } + + /** + * Enqueues a module for output in the page. + * + * @param string $module_identifier The identifier of the module. + * @param string $src Optional. Full URL of the module, or path of the script relative to the WordPress root directory. + * @param array $args { + * Optional array of arguments. + * + * @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL + * as a query string for cache busting purposes. If version is set to false, a version + * number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG + * is set to true, it uses the timestamp instead. + * } + */ + public static function enqueue( $module_identifier, $src = null, $args = array() ) { + // Register the module if a source is provided and it's not already registered. + if ( $src && ! isset( self::$registered[ $module_identifier ] ) ) { + self::register( $module_identifier, $src, $args ); + } + + // Add the module to the queue if it's not already there. + if ( ! in_array( $module_identifier, self::$queue, true ) ) { + self::$queue[] = $module_identifier; + } + } +} + +/** + * Registers a JavaScript module. It will be added to the import map. + * + * @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map. + * @param string $src Full URL of the module, or path of the script relative to the WordPress root directory. + * @param array $args { + * Optional array of arguments. + * + * @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL + * as a query string for cache busting purposes. If version is set to false, a version + * number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG + * is set to true, it uses the timestamp instead. + * } + */ +function gutenberg_register_module( $module_identifier, $src, $args = array() ) { + Gutenberg_Modules::register( $module_identifier, $src, $args ); +} + +/** + * Enqueues a JavaScript module. It will be added to both the import map and a + * script tag with the "module" type. + * + * It registers the module if a source is provided but it won't overwrites the + * value if there is an existing one. + * + * @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map. + * @param string $src Optional. Full URL of the module, or path of the script relative to the WordPress root directory. + * @param array $args { + * Optional array of arguments. + * + * @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL + * as a query string for cache busting purposes. If version is set to false, a version + * number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG + * is set to true, it uses the timestamp instead. + * } + */ +function gutenberg_enqueue_module( $module_identifier, $src = '', $args = array() ) { + Gutenberg_Modules::enqueue( $module_identifier, $src, $args ); +} From 68692d1232f3eb926392f24c9d28d06847214086 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Mon, 13 Nov 2023 21:15:12 +0100 Subject: [PATCH 03/14] Make it work with the Navigation block --- .../modules/class-gutenberg-modules.php | 47 +++++++++++++++++-- lib/load.php | 2 + .../block-library/src/navigation/block.json | 1 - .../block-library/src/navigation/index.php | 22 ++++----- tools/webpack/interactivity.js | 10 ++-- 5 files changed, 63 insertions(+), 19 deletions(-) diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php index 657e1befc1453..e0239431166ff 100644 --- a/lib/experimental/modules/class-gutenberg-modules.php +++ b/lib/experimental/modules/class-gutenberg-modules.php @@ -21,7 +21,7 @@ class Gutenberg_Modules { * * @var string[] */ - public $queue = array(); + private static $enqueued = array(); /** * Registers the module if no module with that module identifier already @@ -69,8 +69,43 @@ public static function enqueue( $module_identifier, $src = null, $args = array() } // Add the module to the queue if it's not already there. - if ( ! in_array( $module_identifier, self::$queue, true ) ) { - self::$queue[] = $module_identifier; + if ( ! in_array( $module_identifier, self::$enqueued, true ) ) { + self::$enqueued[] = $module_identifier; + } + } + + /** + * Returns the import map array. + * + * @return string The import map. + */ + public static function get_import_map() { + $import_map = array( + 'imports' => array(), + ); + + foreach ( self::$registered as $module_identifier => $module_data ) { + $import_map['imports'][ $module_identifier ] = $module_data['src']; + } + + return $import_map; + } + + /** + * Prints the import map + */ + public static function print_import_map() { + echo ''; + } + + /** + * Prints all enqueued modules using script tags with type "module". + */ + public static function print_enqueued_modules() { + foreach ( self::$enqueued as $module_identifier ) { + if ( isset( self::$registered[ $module_identifier ] ) ) { + echo ''; + } } } } @@ -114,3 +149,9 @@ function gutenberg_register_module( $module_identifier, $src, $args = array() ) function gutenberg_enqueue_module( $module_identifier, $src = '', $args = array() ) { Gutenberg_Modules::enqueue( $module_identifier, $src, $args ); } + +// Attach the above function to 'wp_head' action hook. +add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_import_map' ) ); + +// Attach the new function to 'wp_head' action hook. +add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_enqueued_modules' ) ); diff --git a/lib/load.php b/lib/load.php index 711766dec7dfb..b57d7464799ec 100644 --- a/lib/load.php +++ b/lib/load.php @@ -148,6 +148,8 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/experimental/interactivity-api/directives/wp-style.php'; require __DIR__ . '/experimental/interactivity-api/directives/wp-text.php'; +require __DIR__ . '/experimental/modules/class-gutenberg-modules.php'; + // Fonts API / Font Face. remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WordPress 6.0's stopgap handler. diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index 9ec919ae38d1f..36817a5e1c35b 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -136,7 +136,6 @@ "interactivity": true, "renaming": false }, - "viewScript": "file:./view.min.js", "editorStyle": "wp-block-navigation-editor", "style": "wp-block-navigation" } diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 209a8b1c17c16..b2b659b269239 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -637,20 +637,18 @@ function render_block_core_navigation( $attributes, $content, $block ) { } $should_load_view_script = ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) || $is_responsive_menu; - $view_js_file = 'wp-block-navigation-view'; - // If the script already exists, there is no point in removing it from viewScript. - if ( ! wp_script_is( $view_js_file ) ) { - $script_handles = $block->block_type->view_script_handles; + // Load the modules. + if ( $should_load_view_script ) { + gutenberg_register_module( + '@wordpress/interactivity', + '/wp-content/plugins/gutenberg/build/interactivity/index.min.js' + ); - // If the script is not needed, and it is still in the `view_script_handles`, remove it. - if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) { - $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) ); - } - // If the script is needed, but it was previously removed, add it again. - if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) { - $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) ); - } + gutenberg_enqueue_module( + '@wordpress/block-library/navigation-block', + '/wp-content/plugins/gutenberg/build/interactivity/navigation.min.js' + ); } // Add directives to the submenu if needed. diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js index befb018117880..e0c25b51afafc 100644 --- a/tools/webpack/interactivity.js +++ b/tools/webpack/interactivity.js @@ -12,9 +12,8 @@ module.exports = { ...baseConfig, name: 'interactivity', entry: { - index: { - import: `./packages/interactivity/src/index.js`, - }, + index: `./packages/interactivity/src/index.js`, + navigation: './packages/block-library/src/navigation/view.js', }, experiments: { outputModule: true, @@ -26,6 +25,11 @@ module.exports = { type: 'module', }, path: join( __dirname, '..', '..' ), + environment: { module: true }, + }, + externalsType: 'module', + externals: { + '@wordpress/interactivity': '@wordpress/interactivity', }, module: { rules: [ From 0215330e56ba4b1c4266afa5f0965ab67d9ec7c1 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Mon, 13 Nov 2023 21:31:07 +0100 Subject: [PATCH 04/14] Add versions --- lib/experimental/modules/class-gutenberg-modules.php | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php index e0239431166ff..1d6112563acec 100644 --- a/lib/experimental/modules/class-gutenberg-modules.php +++ b/lib/experimental/modules/class-gutenberg-modules.php @@ -85,7 +85,9 @@ public static function get_import_map() { ); foreach ( self::$registered as $module_identifier => $module_data ) { - $import_map['imports'][ $module_identifier ] = $module_data['src']; + $version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module_data['args']['version'] || ''; + + $import_map['imports'][ $module_identifier ] = $module_data['src'] . $version; } return $import_map; @@ -104,7 +106,9 @@ public static function print_import_map() { public static function print_enqueued_modules() { foreach ( self::$enqueued as $module_identifier ) { if ( isset( self::$registered[ $module_identifier ] ) ) { - echo ''; + $module = self::$registered[ $module_identifier ]; + $version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module['args']['version'] || ''; + echo ''; } } } From 9c5ea5dae4d57c55570d93795de2097a52fbdb3f Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Mon, 13 Nov 2023 21:49:25 +0100 Subject: [PATCH 05/14] Register `@wordpress/interactivity` module --- .../interactivity-api/modules.php | 19 +++++++++ .../interactivity-api/scripts.php | 40 ------------------- lib/load.php | 2 +- .../block-library/src/navigation/index.php | 5 --- 4 files changed, 20 insertions(+), 46 deletions(-) create mode 100644 lib/experimental/interactivity-api/modules.php delete mode 100644 lib/experimental/interactivity-api/scripts.php diff --git a/lib/experimental/interactivity-api/modules.php b/lib/experimental/interactivity-api/modules.php new file mode 100644 index 0000000000000..57d69bab805f6 --- /dev/null +++ b/lib/experimental/interactivity-api/modules.php @@ -0,0 +1,19 @@ +=' ); - if ( $supports_defer ) { - // Defer execution of @wordpress/interactivity package but continue loading in head. - wp_script_add_data( 'wp-interactivity', 'strategy', 'defer' ); - wp_script_add_data( 'wp-interactivity', 'group', 0 ); - } else { - // Move the @wordpress/interactivity package to the footer. - wp_script_add_data( 'wp-interactivity', 'group', 1 ); - } - - // Move all the view scripts of the interactive blocks to the footer. - $registered_blocks = \WP_Block_Type_Registry::get_instance()->get_all_registered(); - foreach ( array_values( $registered_blocks ) as $block ) { - if ( isset( $block->supports['interactivity'] ) && $block->supports['interactivity'] ) { - foreach ( $block->view_script_handles as $handle ) { - // Note that all block view scripts are already made defer by default. - wp_script_add_data( $handle, 'group', $supports_defer ? 0 : 1 ); - } - } - } -} -add_action( 'wp_enqueue_scripts', 'gutenberg_interactivity_move_interactive_scripts_to_the_footer', 11 ); diff --git a/lib/load.php b/lib/load.php index b57d7464799ec..88e7ec2ae073a 100644 --- a/lib/load.php +++ b/lib/load.php @@ -138,7 +138,7 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/experimental/interactivity-api/class-wp-interactivity-store.php'; require __DIR__ . '/experimental/interactivity-api/store.php'; -require __DIR__ . '/experimental/interactivity-api/scripts.php'; +require __DIR__ . '/experimental/interactivity-api/modules.php'; require __DIR__ . '/experimental/interactivity-api/class-wp-directive-processor.php'; require __DIR__ . '/experimental/interactivity-api/class-wp-directive-context.php'; require __DIR__ . '/experimental/interactivity-api/directive-processing.php'; diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index b2b659b269239..d1d581f06343c 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -640,11 +640,6 @@ function render_block_core_navigation( $attributes, $content, $block ) { // Load the modules. if ( $should_load_view_script ) { - gutenberg_register_module( - '@wordpress/interactivity', - '/wp-content/plugins/gutenberg/build/interactivity/index.min.js' - ); - gutenberg_enqueue_module( '@wordpress/block-library/navigation-block', '/wp-content/plugins/gutenberg/build/interactivity/navigation.min.js' From 3ffc77ca784859be41d3122258d61b2854dc36d7 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Mon, 13 Nov 2023 22:03:55 +0100 Subject: [PATCH 06/14] Add query and image blocks --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/image/block.json | 4 ++-- packages/block-library/src/image/index.php | 16 ++++------------ packages/block-library/src/query/block.json | 3 +-- packages/block-library/src/query/index.php | 19 +++++-------------- tools/webpack/interactivity.js | 2 ++ 6 files changed, 15 insertions(+), 31 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index e65853a6fbdf7..396d8ef40e059 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -378,7 +378,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre - **Name:** core/image - **Category:** media -- **Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone) +- **Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity - **Attributes:** align, alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width ## Latest Comments diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index d665a8a8f7708..bd94f3b43796d 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -95,6 +95,7 @@ } }, "supports": { + "interactivity": true, "anchor": true, "color": { "text": false, @@ -130,6 +131,5 @@ { "name": "rounded", "label": "Rounded" } ], "editorStyle": "wp-block-image-editor", - "style": "wp-block-image", - "viewScript": "file:./view.min.js" + "style": "wp-block-image" } diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index acefd5714bbd4..5f9611142d15e 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -37,9 +37,6 @@ function render_block_core_image( $attributes, $content, $block ) { $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; - /* * If the lightbox is enabled and the image is not linked, add the filter * and the JavaScript view file. @@ -50,11 +47,10 @@ function render_block_core_image( $attributes, $content, $block ) { isset( $lightbox_settings['enabled'] ) && 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 ) ); - } + gutenberg_enqueue_module( + '@wordpress/block-library/image', + '/wp-content/plugins/gutenberg/build/interactivity/image.min.js' + ); /* * This render needs to happen in a filter with priority 15 to ensure @@ -71,10 +67,6 @@ function render_block_core_image( $attributes, $content, $block ) { * 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 ) ); - } } return $processor->get_updated_html(); diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index d30eccf376579..6189f6f0189b7 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -52,6 +52,5 @@ "layout": true }, "editorStyle": "wp-block-query-editor", - "style": "wp-block-query", - "viewScript": "file:./view.min.js" + "style": "wp-block-query" } diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php index b6a5733632ff4..d8083c6bd3f56 100644 --- a/packages/block-library/src/query/index.php +++ b/packages/block-library/src/query/index.php @@ -67,20 +67,11 @@ class="wp-block-query__enhanced-pagination-animation" } } - $view_asset = 'wp-block-query-view'; - if ( ! wp_script_is( $view_asset ) ) { - $script_handles = $block->block_type->view_script_handles; - // If the script is not needed, and it is still in the `view_script_handles`, remove it. - if ( - ( ! $attributes['enhancedPagination'] || ! isset( $attributes['queryId'] ) ) - && in_array( $view_asset, $script_handles, true ) - ) { - $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) ); - } - // If the script is needed, but it was previously removed, add it again. - if ( $attributes['enhancedPagination'] && isset( $attributes['queryId'] ) && ! in_array( $view_asset, $script_handles, true ) ) { - $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_asset ) ); - } + if ( $attributes['enhancedPagination'] ) { + gutenberg_enqueue_module( + '@wordpress/block-library/query', + '/wp-content/plugins/gutenberg/build/interactivity/query.min.js' + ); } $style_asset = 'wp-block-query'; diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js index e0c25b51afafc..8abc3343c724b 100644 --- a/tools/webpack/interactivity.js +++ b/tools/webpack/interactivity.js @@ -14,6 +14,8 @@ module.exports = { entry: { index: `./packages/interactivity/src/index.js`, navigation: './packages/block-library/src/navigation/view.js', + query: './packages/block-library/src/query/view.js', + image: './packages/block-library/src/image/view.js', }, experiments: { outputModule: true, From 7cc08c853d21e47b86c989e8d5cf97fcad2c858f Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Mon, 13 Nov 2023 22:09:55 +0100 Subject: [PATCH 07/14] Add id with module identifier to the enqueued modules --- lib/experimental/modules/class-gutenberg-modules.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php index 1d6112563acec..935faaede7471 100644 --- a/lib/experimental/modules/class-gutenberg-modules.php +++ b/lib/experimental/modules/class-gutenberg-modules.php @@ -108,7 +108,7 @@ public static function print_enqueued_modules() { if ( isset( self::$registered[ $module_identifier ] ) ) { $module = self::$registered[ $module_identifier ]; $version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module['args']['version'] || ''; - echo ''; + echo ''; } } } From 11b4e1b7adb27264b003c52e9170c0eaacff5c84 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Tue, 14 Nov 2023 10:31:01 +0100 Subject: [PATCH 08/14] Add requried $usage for admin/frontend --- .../interactivity-api/modules.php | 3 +- .../modules/class-gutenberg-modules.php | 50 +++++++++++++------ packages/block-library/src/image/index.php | 11 ++-- .../block-library/src/navigation/index.php | 11 ++-- packages/block-library/src/query/index.php | 15 +++--- 5 files changed, 60 insertions(+), 30 deletions(-) diff --git a/lib/experimental/interactivity-api/modules.php b/lib/experimental/interactivity-api/modules.php index 57d69bab805f6..eec49ec40d9a6 100644 --- a/lib/experimental/interactivity-api/modules.php +++ b/lib/experimental/interactivity-api/modules.php @@ -12,7 +12,8 @@ function gutenberg_register_interactivity_module() { gutenberg_register_module( '@wordpress/interactivity', - '/wp-content/plugins/gutenberg/build/interactivity/index.min.js' + '/wp-content/plugins/gutenberg/build/interactivity/index.min.js', + 'frontend' ); } diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php index 935faaede7471..d282e7fc84ca7 100644 --- a/lib/experimental/modules/class-gutenberg-modules.php +++ b/lib/experimental/modules/class-gutenberg-modules.php @@ -29,6 +29,7 @@ class Gutenberg_Modules { * * @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map. * @param string $src Full URL of the module, or path of the script relative to the WordPress root directory. + * @param string $usage Specifies where the module would be used. Can be 'admin', 'frontend', or 'both'. * @param array $args { * Optional array of arguments. * @@ -38,13 +39,14 @@ class Gutenberg_Modules { * is set to true, it uses the timestamp instead. * } */ - public static function register( $module_identifier, $src, $args = array() ) { + public static function register( $module_identifier, $src, $usage, $args = array() ) { // Register the module if it's not already registered. if ( ! isset( self::$registered[ $module_identifier ] ) ) { - self::$registered[ $module_identifier ] = array( - 'src' => $src, - 'args' => $args, - ); + self::$registered[ $module_identifier ] = array( + 'src' => $src, + 'usage' => $usage, + 'args' => $args, + ); } } @@ -85,9 +87,10 @@ public static function get_import_map() { ); foreach ( self::$registered as $module_identifier => $module_data ) { - $version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module_data['args']['version'] || ''; - - $import_map['imports'][ $module_identifier ] = $module_data['src'] . $version; + if ( self::appropriate_usage( $module_data['usage'] ) ) { + $version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module_data['args']['version'] || ''; + $import_map['imports'][ $module_identifier ] = $module_data['src'] . $version; + } } return $import_map; @@ -105,13 +108,32 @@ public static function print_import_map() { */ public static function print_enqueued_modules() { foreach ( self::$enqueued as $module_identifier ) { - if ( isset( self::$registered[ $module_identifier ] ) ) { - $module = self::$registered[ $module_identifier ]; - $version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module['args']['version'] || ''; - echo ''; + if ( isset( self::$registered[ $module_identifier ] ) && self::appropriate_usage( self::$registered[ $module_identifier ]['usage'] ) ) { + $module = self::$registered[ $module_identifier ]; + $version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module['args']['version'] || ''; + echo ''; } } } + + /** + * Determines if the usage is appropriate for the current context. + * + * @param string $usage Specifies the usage of the module. Can be 'admin', 'frontend', or 'both'. + * @return bool Returns true if it's appropriate to load the module in the current WP context. + */ + public static function appropriate_usage( $usage ) { + if ( 'both' === $usage ) { + return true; + } + if ( 'admin' === $usage && is_admin() ) { + return true; + } + if ( 'frontend' === $usage && ! is_admin() ) { + return true; + } + return false; + } } /** @@ -128,8 +150,8 @@ public static function print_enqueued_modules() { * is set to true, it uses the timestamp instead. * } */ -function gutenberg_register_module( $module_identifier, $src, $args = array() ) { - Gutenberg_Modules::register( $module_identifier, $src, $args ); +function gutenberg_register_module( $module_identifier, $src, $usage, $args = array() ) { + Gutenberg_Modules::register( $module_identifier, $src, $usage, $args ); } /** diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 5f9611142d15e..98d2a14a73148 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -47,10 +47,7 @@ function render_block_core_image( $attributes, $content, $block ) { isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) { - gutenberg_enqueue_module( - '@wordpress/block-library/image', - '/wp-content/plugins/gutenberg/build/interactivity/image.min.js' - ); + gutenberg_enqueue_module( '@wordpress/block-library/image' ); /* * This render needs to happen in a filter with priority 15 to ensure @@ -354,5 +351,11 @@ function register_block_core_image() { 'render_callback' => 'render_block_core_image', ) ); + + gutenberg_register_module( + '@wordpress/block-library/image', + '/wp-content/plugins/gutenberg/build/interactivity/image.min.js', + 'frontend' + ); } add_action( 'init', 'register_block_core_image' ); diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index d1d581f06343c..b8a4d7238a837 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -640,10 +640,7 @@ function render_block_core_navigation( $attributes, $content, $block ) { // Load the modules. if ( $should_load_view_script ) { - gutenberg_enqueue_module( - '@wordpress/block-library/navigation-block', - '/wp-content/plugins/gutenberg/build/interactivity/navigation.min.js' - ); + gutenberg_enqueue_module( '@wordpress/block-library/navigation-block' ); } // Add directives to the submenu if needed. @@ -784,6 +781,12 @@ function register_block_core_navigation() { 'render_callback' => 'render_block_core_navigation', ) ); + + gutenberg_register_module( + '@wordpress/block-library/navigation-block', + '/wp-content/plugins/gutenberg/build/interactivity/navigation.min.js', + 'frontend' + ); } add_action( 'init', 'register_block_core_navigation' ); diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php index d8083c6bd3f56..adc07e6280c58 100644 --- a/packages/block-library/src/query/index.php +++ b/packages/block-library/src/query/index.php @@ -18,6 +18,8 @@ */ function render_block_core_query( $attributes, $content, $block ) { if ( $attributes['enhancedPagination'] && isset( $attributes['queryId'] ) ) { + gutenberg_enqueue_module( '@wordpress/block-library/query' ); + $p = new WP_HTML_Tag_Processor( $content ); if ( $p->next_tag() ) { // Add the necessary directives. @@ -67,13 +69,6 @@ class="wp-block-query__enhanced-pagination-animation" } } - if ( $attributes['enhancedPagination'] ) { - gutenberg_enqueue_module( - '@wordpress/block-library/query', - '/wp-content/plugins/gutenberg/build/interactivity/query.min.js' - ); - } - $style_asset = 'wp-block-query'; if ( ! wp_style_is( $style_asset ) ) { $style_handles = $block->block_type->style_handles; @@ -122,6 +117,12 @@ function register_block_core_query() { 'render_callback' => 'render_block_core_query', ) ); + + gutenberg_register_module( + '@wordpress/block-library/query', + '/wp-content/plugins/gutenberg/build/interactivity/query.min.js', + 'frontend' + ); } add_action( 'init', 'register_block_core_query' ); From c080fa74a8af06dccc6a84fd5003ce809fa5c087 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Tue, 14 Nov 2023 10:44:56 +0100 Subject: [PATCH 09/14] Avoid the use of enqueue to register modules --- .../modules/class-gutenberg-modules.php | 21 ++++--------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php index d282e7fc84ca7..c500870dd46ce 100644 --- a/lib/experimental/modules/class-gutenberg-modules.php +++ b/lib/experimental/modules/class-gutenberg-modules.php @@ -54,22 +54,8 @@ public static function register( $module_identifier, $src, $usage, $args = array * Enqueues a module for output in the page. * * @param string $module_identifier The identifier of the module. - * @param string $src Optional. Full URL of the module, or path of the script relative to the WordPress root directory. - * @param array $args { - * Optional array of arguments. - * - * @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL - * as a query string for cache busting purposes. If version is set to false, a version - * number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG - * is set to true, it uses the timestamp instead. - * } */ - public static function enqueue( $module_identifier, $src = null, $args = array() ) { - // Register the module if a source is provided and it's not already registered. - if ( $src && ! isset( self::$registered[ $module_identifier ] ) ) { - self::register( $module_identifier, $src, $args ); - } - + public static function enqueue( $module_identifier ) { // Add the module to the queue if it's not already there. if ( ! in_array( $module_identifier, self::$enqueued, true ) ) { self::$enqueued[] = $module_identifier; @@ -141,6 +127,7 @@ public static function appropriate_usage( $usage ) { * * @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map. * @param string $src Full URL of the module, or path of the script relative to the WordPress root directory. + * @param string $usage Specifies where the module would be used. Can be 'admin', 'frontend', or 'both'. * @param array $args { * Optional array of arguments. * @@ -172,8 +159,8 @@ function gutenberg_register_module( $module_identifier, $src, $usage, $args = ar * is set to true, it uses the timestamp instead. * } */ -function gutenberg_enqueue_module( $module_identifier, $src = '', $args = array() ) { - Gutenberg_Modules::enqueue( $module_identifier, $src, $args ); +function gutenberg_enqueue_module( $module_identifier ) { + Gutenberg_Modules::enqueue( $module_identifier ); } // Attach the above function to 'wp_head' action hook. From bd0a881e2a9736d64af21b912a3871b7f291bb13 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Tue, 14 Nov 2023 11:22:19 +0100 Subject: [PATCH 10/14] Refactor versions --- .../interactivity-api/modules.php | 5 ++- .../modules/class-gutenberg-modules.php | 45 +++++++++++-------- packages/block-library/src/image/index.php | 5 ++- .../block-library/src/navigation/index.php | 5 ++- packages/block-library/src/query/index.php | 5 ++- 5 files changed, 42 insertions(+), 23 deletions(-) diff --git a/lib/experimental/interactivity-api/modules.php b/lib/experimental/interactivity-api/modules.php index eec49ec40d9a6..d67f225e58293 100644 --- a/lib/experimental/interactivity-api/modules.php +++ b/lib/experimental/interactivity-api/modules.php @@ -13,7 +13,10 @@ function gutenberg_register_interactivity_module() { gutenberg_register_module( '@wordpress/interactivity', '/wp-content/plugins/gutenberg/build/interactivity/index.min.js', - 'frontend' + 'frontend', + array( + 'version' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ), + ) ); } diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php index c500870dd46ce..652875cea2b75 100644 --- a/lib/experimental/modules/class-gutenberg-modules.php +++ b/lib/experimental/modules/class-gutenberg-modules.php @@ -43,9 +43,9 @@ public static function register( $module_identifier, $src, $usage, $args = array // Register the module if it's not already registered. if ( ! isset( self::$registered[ $module_identifier ] ) ) { self::$registered[ $module_identifier ] = array( - 'src' => $src, - 'usage' => $usage, - 'args' => $args, + 'src' => $src, + 'usage' => $usage, + 'version' => isset( $args['version'] ) ? $args['version'] : '', ); } } @@ -72,10 +72,9 @@ public static function get_import_map() { 'imports' => array(), ); - foreach ( self::$registered as $module_identifier => $module_data ) { - if ( self::appropriate_usage( $module_data['usage'] ) ) { - $version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module_data['args']['version'] || ''; - $import_map['imports'][ $module_identifier ] = $module_data['src'] . $version; + foreach ( self::$registered as $module_identifier => $module ) { + if ( self::get_appropriate_usage( $module['usage'] ) ) { + $import_map['imports'][ $module_identifier ] = $module['src'] . self::get_module_version( $module ); } } @@ -94,9 +93,9 @@ public static function print_import_map() { */ public static function print_enqueued_modules() { foreach ( self::$enqueued as $module_identifier ) { - if ( isset( self::$registered[ $module_identifier ] ) && self::appropriate_usage( self::$registered[ $module_identifier ]['usage'] ) ) { + if ( isset( self::$registered[ $module_identifier ] ) && self::get_appropriate_usage( self::$registered[ $module_identifier ]['usage'] ) ) { $module = self::$registered[ $module_identifier ]; - $version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module['args']['version'] || ''; + $version = self::get_module_version( $module ); echo ''; } } @@ -108,7 +107,7 @@ public static function print_enqueued_modules() { * @param string $usage Specifies the usage of the module. Can be 'admin', 'frontend', or 'both'. * @return bool Returns true if it's appropriate to load the module in the current WP context. */ - public static function appropriate_usage( $usage ) { + private static function get_appropriate_usage( $usage ) { if ( 'both' === $usage ) { return true; } @@ -120,6 +119,23 @@ public static function appropriate_usage( $usage ) { } return false; } + + /** + * Gets the module's version. It either returns a timestamp (if SCRIPT_DEBUG + * is true), the explicit version of the module if it is set and not false, or + * an empty string if none of the above conditions are met. + * + * @param array $module The data of the module. + * @return string A string presenting the version. + */ + private static function get_module_version( $module ) { + if ( SCRIPT_DEBUG ) { + return '?ver=' . time(); + } elseif ( $module['version'] ) { + return '?ver=' . $module['version']; + } + return ''; + } } /** @@ -149,15 +165,6 @@ function gutenberg_register_module( $module_identifier, $src, $usage, $args = ar * value if there is an existing one. * * @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map. - * @param string $src Optional. Full URL of the module, or path of the script relative to the WordPress root directory. - * @param array $args { - * Optional array of arguments. - * - * @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL - * as a query string for cache busting purposes. If version is set to false, a version - * number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG - * is set to true, it uses the timestamp instead. - * } */ function gutenberg_enqueue_module( $module_identifier ) { Gutenberg_Modules::enqueue( $module_identifier ); diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 98d2a14a73148..99cbf2c880636 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -355,7 +355,10 @@ function register_block_core_image() { gutenberg_register_module( '@wordpress/block-library/image', '/wp-content/plugins/gutenberg/build/interactivity/image.min.js', - 'frontend' + 'frontend', + array( + 'version' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ), + ) ); } add_action( 'init', 'register_block_core_image' ); diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index b8a4d7238a837..d232f6953171f 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -785,7 +785,10 @@ function register_block_core_navigation() { gutenberg_register_module( '@wordpress/block-library/navigation-block', '/wp-content/plugins/gutenberg/build/interactivity/navigation.min.js', - 'frontend' + 'frontend', + array( + 'version' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ), + ) ); } diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php index adc07e6280c58..cb67904b6b341 100644 --- a/packages/block-library/src/query/index.php +++ b/packages/block-library/src/query/index.php @@ -121,7 +121,10 @@ function register_block_core_query() { gutenberg_register_module( '@wordpress/block-library/query', '/wp-content/plugins/gutenberg/build/interactivity/query.min.js', - 'frontend' + 'frontend', + array( + 'version' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ), + ) ); } add_action( 'init', 'register_block_core_query' ); From e0201cee783b9cbfe7b69b7de9b78404d7909327 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Tue, 14 Nov 2023 11:41:16 +0100 Subject: [PATCH 11/14] Switch from `both` to `['admin', 'frontend']` --- .../modules/class-gutenberg-modules.php | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php index 652875cea2b75..15560fc851151 100644 --- a/lib/experimental/modules/class-gutenberg-modules.php +++ b/lib/experimental/modules/class-gutenberg-modules.php @@ -27,10 +27,10 @@ class Gutenberg_Modules { * Registers the module if no module with that module identifier already * exists. * - * @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map. - * @param string $src Full URL of the module, or path of the script relative to the WordPress root directory. - * @param string $usage Specifies where the module would be used. Can be 'admin', 'frontend', or 'both'. - * @param array $args { + * @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map. + * @param string $src Full URL of the module, or path of the script relative to the WordPress root directory. + * @param string|array $usage Specifies where the module would be used. Can be 'admin', 'frontend', or an array of such strings. + * @param array $args { * Optional array of arguments. * * @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL @@ -40,13 +40,18 @@ class Gutenberg_Modules { * } */ public static function register( $module_identifier, $src, $usage, $args = array() ) { + // Normalize $usage to an array. + if ( ! is_array( $usage ) ) { + $usage = array( $usage ); + } + // Register the module if it's not already registered. if ( ! isset( self::$registered[ $module_identifier ] ) ) { - self::$registered[ $module_identifier ] = array( - 'src' => $src, - 'usage' => $usage, - 'version' => isset( $args['version'] ) ? $args['version'] : '', - ); + self::$registered[ $module_identifier ] = array( + 'src' => $src, + 'usage' => $usage, + 'version' => isset( $args['version'] ) ? $args['version'] : '', + ); } } @@ -104,17 +109,14 @@ public static function print_enqueued_modules() { /** * Determines if the usage is appropriate for the current context. * - * @param string $usage Specifies the usage of the module. Can be 'admin', 'frontend', or 'both'. + * @param array $usage Specifies the usage of the module. Can contain 'admin' or 'frontend'. * @return bool Returns true if it's appropriate to load the module in the current WP context. */ private static function get_appropriate_usage( $usage ) { - if ( 'both' === $usage ) { - return true; - } - if ( 'admin' === $usage && is_admin() ) { + if ( in_array( 'admin', $usage, true ) && is_admin() ) { return true; } - if ( 'frontend' === $usage && ! is_admin() ) { + if ( in_array( 'frontend', $usage, true ) && ! is_admin() ) { return true; } return false; From 89f6be07c0d3c49bef3b98871e697d6ad0844039 Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Tue, 14 Nov 2023 11:41:28 +0100 Subject: [PATCH 12/14] Improve comments --- .../modules/class-gutenberg-modules.php | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/lib/experimental/modules/class-gutenberg-modules.php b/lib/experimental/modules/class-gutenberg-modules.php index 15560fc851151..c1cee129bcce2 100644 --- a/lib/experimental/modules/class-gutenberg-modules.php +++ b/lib/experimental/modules/class-gutenberg-modules.php @@ -1,12 +1,16 @@ ' . wp_json_encode( self::get_import_map(), JSON_HEX_TAG | JSON_HEX_AMP ) . ''; } /** - * Prints all enqueued modules using script tags with type "module". + * Prints all the enqueued modules using script tags with type "module". */ public static function print_enqueued_modules() { foreach ( self::$enqueued as $module_identifier ) { @@ -163,17 +166,14 @@ function gutenberg_register_module( $module_identifier, $src, $usage, $args = ar * Enqueues a JavaScript module. It will be added to both the import map and a * script tag with the "module" type. * - * It registers the module if a source is provided but it won't overwrites the - * value if there is an existing one. - * * @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map. */ function gutenberg_enqueue_module( $module_identifier ) { Gutenberg_Modules::enqueue( $module_identifier ); } -// Attach the above function to 'wp_head' action hook. +// Prints the import map in the head tag. add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_import_map' ) ); -// Attach the new function to 'wp_head' action hook. +// Prints the enqueued modules in the head tag. add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_enqueued_modules' ) ); From c5b2c83a231387890cba3268a186b50ce810989e Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Tue, 14 Nov 2023 17:04:13 +0100 Subject: [PATCH 13/14] Add the file and search blocks --- packages/block-library/src/file/block.json | 1 - packages/block-library/src/file/index.php | 24 +++++----- .../block-library/src/navigation/index.php | 2 +- packages/block-library/src/search/block.json | 1 - packages/block-library/src/search/index.php | 44 +++++-------------- tools/webpack/interactivity.js | 2 + 6 files changed, 25 insertions(+), 49 deletions(-) diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json index 0cc20b3f501e9..1b74b46dacdbc 100644 --- a/packages/block-library/src/file/block.json +++ b/packages/block-library/src/file/block.json @@ -72,7 +72,6 @@ }, "interactivity": true }, - "viewScript": "file:./view.min.js", "editorStyle": "wp-block-file-editor", "style": "wp-block-file" } diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php index 042ea89970736..328b4d0f5e2e7 100644 --- a/packages/block-library/src/file/index.php +++ b/packages/block-library/src/file/index.php @@ -16,19 +16,8 @@ */ function render_block_core_file( $attributes, $content, $block ) { $should_load_view_script = ! empty( $attributes['displayPreview'] ); - $view_js_file = 'wp-block-file-view'; - // If the script already exists, there is no point in removing it from viewScript. - if ( ! wp_script_is( $view_js_file ) ) { - $script_handles = $block->block_type->view_script_handles; - - // If the script is not needed, and it is still in the `view_script_handles`, remove it. - if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) { - $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) ); - } - // If the script is needed, but it was previously removed, add it again. - if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) { - $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) ); - } + if ( $should_load_view_script ) { + gutenberg_enqueue_module( '@wordpress/block-library/file-block' ); } // Update object's aria-label attribute if present in block HTML. @@ -96,5 +85,14 @@ function register_block_core_file() { 'render_callback' => 'render_block_core_file', ) ); + + gutenberg_register_module( + '@wordpress/block-library/file-block', + '/wp-content/plugins/gutenberg/build/interactivity/file.min.js', + 'frontend', + array( + 'version' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ), + ) + ); } add_action( 'init', 'register_block_core_file' ); diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index d232f6953171f..99d43e1648e60 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -638,7 +638,7 @@ function render_block_core_navigation( $attributes, $content, $block ) { $should_load_view_script = ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) || $is_responsive_menu; - // Load the modules. + // Load the module. if ( $should_load_view_script ) { gutenberg_enqueue_module( '@wordpress/block-library/navigation-block' ); } diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 5669a9089d0e0..93018c2c29f4c 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -91,7 +91,6 @@ }, "html": false }, - "viewScript": "file:./view.min.js", "editorStyle": "wp-block-search-editor", "style": "wp-block-search" } diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index f00ecfe6abe1c..bfc52f032d04f 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -85,21 +85,9 @@ function render_block_core_search( $attributes, $content, $block ) { // Adding these attributes manually is needed until the Interactivity API SSR logic is added to core. $input->set_attribute( 'aria-hidden', 'true' ); $input->set_attribute( 'tabindex', '-1' ); - } - - // If the script already exists, there is no point in removing it from viewScript. - $view_js_file = 'wp-block-search-view'; - if ( ! wp_script_is( $view_js_file ) ) { - $script_handles = $block->block_type->view_script_handles; - // If the script is not needed, and it is still in the `view_script_handles`, remove it. - if ( ! $is_expandable_searchfield && in_array( $view_js_file, $script_handles, true ) ) { - $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) ); - } - // If the script is needed, but it was previously removed, add it again. - if ( $is_expandable_searchfield && ! in_array( $view_js_file, $script_handles, true ) ) { - $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) ); - } + // Load the module. + gutenberg_enqueue_module( '@wordpress/block-library/search-block' ); } } @@ -203,27 +191,17 @@ function register_block_core_search() { 'render_callback' => 'render_block_core_search', ) ); -} -add_action( 'init', 'register_block_core_search' ); -/** - * Ensure that the view script has the `wp-interactivity` dependency. - * - * @since 6.4.0 - * - * @global WP_Scripts $wp_scripts - */ -function block_core_search_ensure_interactivity_dependency() { - global $wp_scripts; - if ( - isset( $wp_scripts->registered['wp-block-search-view'] ) && - ! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-search-view']->deps, true ) - ) { - $wp_scripts->registered['wp-block-search-view']->deps[] = 'wp-interactivity'; - } + gutenberg_register_module( + '@wordpress/block-library/search-block', + '/wp-content/plugins/gutenberg/build/interactivity/search.min.js', + 'frontend', + array( + 'version' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ), + ) + ); } - -add_action( 'wp_print_scripts', 'block_core_search_ensure_interactivity_dependency' ); +add_action( 'init', 'register_block_core_search' ); /** * Builds the correct top level classnames for the 'core/search' block. diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js index 8abc3343c724b..6f43caafee227 100644 --- a/tools/webpack/interactivity.js +++ b/tools/webpack/interactivity.js @@ -16,6 +16,8 @@ module.exports = { navigation: './packages/block-library/src/navigation/view.js', query: './packages/block-library/src/query/view.js', image: './packages/block-library/src/image/view.js', + file: './packages/block-library/src/file/view.js', + search: './packages/block-library/src/search/view.js', }, experiments: { outputModule: true, From 68cd6c00bea0acf73c573b75da41ddb269a183bf Mon Sep 17 00:00:00 2001 From: Luis Herranz Date: Fri, 17 Nov 2023 17:46:17 +0100 Subject: [PATCH 14/14] Add polyfill --- lib/experimental/interactivity-api/modules.php | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/lib/experimental/interactivity-api/modules.php b/lib/experimental/interactivity-api/modules.php index d67f225e58293..a15f6c915f431 100644 --- a/lib/experimental/interactivity-api/modules.php +++ b/lib/experimental/interactivity-api/modules.php @@ -18,6 +18,18 @@ function gutenberg_register_interactivity_module() { 'version' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ), ) ); + + // TODO: Move this to a local file and replace with a simpler version that + // only provides support for import maps. + wp_enqueue_script( + 'es-module-shims', + 'https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js', + array(), + null, + array( + 'strategy' => 'defer', + ) + ); } add_action( 'wp_enqueue_scripts', 'gutenberg_register_interactivity_module' );