From a4079180d239cf13417a52b3ec6869fba2f9ad2c Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 5 May 2023 14:47:58 +0200 Subject: [PATCH 1/5] File: Add experimental integration with Interactivity API --- lib/experimental/interactivity-api/blocks.php | 41 +++++++++++++++++++ .../navigation-block-interactivity.php | 2 +- .../interactivity-api/script-loader.php | 41 +++++++++++-------- lib/load.php | 1 + .../src/file/{utils.js => utils/index.js} | 0 .../src/file/view/interactivity.js | 17 ++++++++ .../lib/index.js | 10 +++++ tools/webpack/blocks.js | 18 ++++++-- 8 files changed, 108 insertions(+), 22 deletions(-) create mode 100644 lib/experimental/interactivity-api/blocks.php rename packages/block-library/src/file/{utils.js => utils/index.js} (100%) create mode 100644 packages/block-library/src/file/view/interactivity.js diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php new file mode 100644 index 00000000000000..b7f58d87603092 --- /dev/null +++ b/lib/experimental/interactivity-api/blocks.php @@ -0,0 +1,41 @@ +attributes['displayPreview'] ) ) { + return $block_content; + } + $processor = new WP_HTML_Tag_Processor( $block_content ); + $processor->next_tag(); + $processor->set_attribute( 'data-wp-init', 'effects.core.file.init' ); + return $processor->get_updated_html(); +} +add_filter( 'render_block_core/file', 'gutenberg_block_core_file_add_directives_to_content', 10, 3 ); + +/** + * Replaces view script for the File block with version using Interactivity API. + * + * @param array $metadata Block metadata as read in via block.json. + * + * @return array Filtered block type metadata. + */ +function gutenberg_block_core_file_update_view_script( $metadata ) { + if ( 'core/file' === $metadata['name'] && str_contains( $metadata['file'], 'build/block-library/blocks' ) ) { + $metadata['viewScript'] = array( 'file:./interactivity.min.js' ); + } + return $metadata; +} +add_filter( 'block_type_metadata', 'gutenberg_block_core_file_update_view_script', 10, 1 ); diff --git a/lib/experimental/interactivity-api/navigation-block-interactivity.php b/lib/experimental/interactivity-api/navigation-block-interactivity.php index 21e1e0381b70ed..2111870d497abb 100644 --- a/lib/experimental/interactivity-api/navigation-block-interactivity.php +++ b/lib/experimental/interactivity-api/navigation-block-interactivity.php @@ -228,7 +228,7 @@ function ( $metadata ) { if ( 'core/navigation' === $metadata['name'] ) { wp_register_script( 'wp-block-navigation-view', - gutenberg_url( 'build/block-library/interactive-blocks/navigation.min.js' ), + gutenberg_url( 'build/block-library/navigation/interactivity.min.js' ), array( 'wp-interactivity-runtime' ) ); $metadata['viewScript'] = array( 'wp-block-navigation-view' ); diff --git a/lib/experimental/interactivity-api/script-loader.php b/lib/experimental/interactivity-api/script-loader.php index 15804ca1e92444..74a5dcf44550b5 100644 --- a/lib/experimental/interactivity-api/script-loader.php +++ b/lib/experimental/interactivity-api/script-loader.php @@ -11,22 +11,28 @@ * @param WP_Scripts $scripts WP_Scripts instance. */ function gutenberg_register_interactivity_scripts( $scripts ) { - gutenberg_override_script( - $scripts, - 'wp-interactivity-runtime', - gutenberg_url( - 'build/block-library/interactive-blocks/interactivity.min.js' - ), - array( 'wp-interactivity-vendors' ) - ); + // When in production, use the plugin's version as the default asset version; + // else (for development or test) default to use the current time. + $default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time(); - gutenberg_override_script( - $scripts, - 'wp-interactivity-vendors', - gutenberg_url( - 'build/block-library/interactive-blocks/vendors.min.js' - ) - ); + foreach ( array( 'vendors', 'runtime' ) as $script_name ) { + $script_path = "build/block-library/interactivity/$script_name.min.js"; + // Replace extension with `.asset.php` to find the generated dependencies file. + $asset_file = gutenberg_dir_path() . substr( $script_path, 0, -( strlen( '.js' ) ) ) . '.asset.php'; + $asset = file_exists( $asset_file ) + ? require $asset_file + : null; + $dependencies = isset( $asset['dependencies'] ) ? $asset['dependencies'] : array(); + $version = isset( $asset['version'] ) ? $asset['version'] : $default_version; + + gutenberg_override_script( + $scripts, + "wp-interactivity-$script_name", + gutenberg_url( $script_path ), + $dependencies, + $version + ); + } } add_action( 'wp_default_scripts', 'gutenberg_register_interactivity_scripts', 10, 1 ); @@ -34,11 +40,12 @@ function gutenberg_register_interactivity_scripts( $scripts ) { * Adds the "defer" attribute to all the interactivity script tags. * * @param string $tag The generated script tag. + * @param string $handle The script handle. * * @return string The modified script tag. */ -function gutenberg_interactivity_scripts_add_defer_attribute( $tag ) { - if ( str_contains( $tag, '/block-library/interactive-blocks/' ) ) { +function gutenberg_interactivity_scripts_add_defer_attribute( $tag, $handle ) { + if ( str_starts_with( $handle, 'wp-interactivity-' ) || str_contains( $tag, '/interactivity.min.js' ) ) { $p = new WP_HTML_Tag_Processor( $tag ); $p->next_tag( array( 'tag' => 'script' ) ); $p->set_attribute( 'defer', true ); diff --git a/lib/load.php b/lib/load.php index 31bf94d06a4641..5b77d37db6e26b 100644 --- a/lib/load.php +++ b/lib/load.php @@ -100,6 +100,7 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/experimental/block-editor-settings.php'; require __DIR__ . '/experimental/blocks.php'; require __DIR__ . '/experimental/interactivity-api/script-loader.php'; +require __DIR__ . '/experimental/interactivity-api/blocks.php'; require __DIR__ . '/experimental/navigation-theme-opt-in.php'; require __DIR__ . '/experimental/kses.php'; require __DIR__ . '/experimental/l10n.php'; diff --git a/packages/block-library/src/file/utils.js b/packages/block-library/src/file/utils/index.js similarity index 100% rename from packages/block-library/src/file/utils.js rename to packages/block-library/src/file/utils/index.js diff --git a/packages/block-library/src/file/view/interactivity.js b/packages/block-library/src/file/view/interactivity.js new file mode 100644 index 00000000000000..64365fe8bed954 --- /dev/null +++ b/packages/block-library/src/file/view/interactivity.js @@ -0,0 +1,17 @@ +/** + * Internal dependencies + */ +import { store } from '../../utils/interactivity'; +import { hidePdfEmbedsOnUnsupportedBrowsers } from '../utils'; + +store( { + effects: { + core: { + file: { + init() { + hidePdfEmbedsOnUnsupportedBrowsers(); + }, + }, + }, + }, +} ); diff --git a/packages/dependency-extraction-webpack-plugin/lib/index.js b/packages/dependency-extraction-webpack-plugin/lib/index.js index 581274c3684f93..3da2286ddbd57d 100644 --- a/packages/dependency-extraction-webpack-plugin/lib/index.js +++ b/packages/dependency-extraction-webpack-plugin/lib/index.js @@ -27,6 +27,7 @@ class DependencyExtractionWebpackPlugin { combinedOutputFile: null, externalizedReport: false, injectPolyfill: false, + __experimentalInjectInteractivityRuntime: false, outputFormat: 'php', outputFilename: null, useDefaults: true, @@ -142,6 +143,7 @@ class DependencyExtractionWebpackPlugin { combinedOutputFile, externalizedReport, injectPolyfill, + __experimentalInjectInteractivityRuntime, outputFormat, outputFilename, } = this.options; @@ -184,6 +186,14 @@ class DependencyExtractionWebpackPlugin { if ( injectPolyfill ) { chunkDeps.add( 'wp-polyfill' ); } + // Temporary fix for Interactivity API until it gets moved to its package. + if ( __experimentalInjectInteractivityRuntime ) { + if ( ! chunkJSFile.startsWith( './interactivity/' ) ) { + chunkDeps.add( 'wp-interactivity-runtime' ); + } else if ( './interactivity/runtime.min.js' === chunkJSFile ) { + chunkDeps.add( 'wp-interactivity-vendors' ); + } + } const processModule = ( { userRequest } ) => { if ( this.externalizedDeps.has( userRequest ) ) { diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index d8bcf0559fdbd7..c6c3c58a54be8f 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -221,13 +221,14 @@ module.exports = [ }, { entry: { + file: './packages/block-library/src/file/interactivity.js', navigation: './packages/block-library/src/navigation/interactivity.js', }, output: { devtoolNamespace: 'wp', - filename: './build/block-library/interactive-blocks/[name].min.js', - path: join( __dirname, '..', '..' ), + filename: './blocks/[name]/interactivity.min.js', + path: join( __dirname, '..', '..', 'build', 'block-library' ), }, optimization: { runtimeChunk: { @@ -238,12 +239,14 @@ module.exports = [ vendors: { name: 'vendors', test: /[\\/]node_modules[\\/]/, + filename: './interactivity/[name].min.js', minSize: 0, chunks: 'all', }, - interactivity: { - name: 'interactivity', + runtime: { + name: 'runtime', test: /[\\/]utils\/interactivity[\\/]/, + filename: './interactivity/[name].min.js', chunks: 'all', minSize: 0, priority: -10, @@ -279,5 +282,12 @@ module.exports = [ }, ], }, + plugins: [ + ...plugins, + new DependencyExtractionWebpackPlugin( { + __experimentalInjectInteractivityRuntime: true, + injectPolyfill: false, + } ), + ].filter( Boolean ), }, ]; From 720bbe1672b844c5cb55d77a8d0e6f14393c2ce3 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 5 May 2023 15:05:29 +0200 Subject: [PATCH 2/5] File: Mark the block as an island to activate directives --- lib/experimental/interactivity-api/blocks.php | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php index b7f58d87603092..f4e98ac6bfe2ad 100644 --- a/lib/experimental/interactivity-api/blocks.php +++ b/lib/experimental/interactivity-api/blocks.php @@ -20,6 +20,7 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b } $processor = new WP_HTML_Tag_Processor( $block_content ); $processor->next_tag(); + $processor->set_attribute( 'data-wp-island', '' ); $processor->set_attribute( 'data-wp-init', 'effects.core.file.init' ); return $processor->get_updated_html(); } From e12f9f43c5aaef9e7314e1c2b6095a148c05a26f Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 8 May 2023 10:24:49 +0200 Subject: [PATCH 3/5] Improve webpack config --- lib/experimental/interactivity-api/blocks.php | 2 ++ packages/block-library/src/file/view/interactivity.js | 8 +++++--- tools/webpack/blocks.js | 6 ++++++ 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php index f4e98ac6bfe2ad..d9f3e05ea6a977 100644 --- a/lib/experimental/interactivity-api/blocks.php +++ b/lib/experimental/interactivity-api/blocks.php @@ -21,7 +21,9 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b $processor = new WP_HTML_Tag_Processor( $block_content ); $processor->next_tag(); $processor->set_attribute( 'data-wp-island', '' ); + $processor->next_tag( 'object' ); $processor->set_attribute( 'data-wp-init', 'effects.core.file.init' ); + $processor->set_attribute( 'hidden', true ); return $processor->get_updated_html(); } add_filter( 'render_block_core/file', 'gutenberg_block_core_file_add_directives_to_content', 10, 3 ); diff --git a/packages/block-library/src/file/view/interactivity.js b/packages/block-library/src/file/view/interactivity.js index 64365fe8bed954..2ef50c9bd92df6 100644 --- a/packages/block-library/src/file/view/interactivity.js +++ b/packages/block-library/src/file/view/interactivity.js @@ -2,14 +2,16 @@ * Internal dependencies */ import { store } from '../../utils/interactivity'; -import { hidePdfEmbedsOnUnsupportedBrowsers } from '../utils'; +import { browserSupportsPdfs } from '../utils'; store( { effects: { core: { file: { - init() { - hidePdfEmbedsOnUnsupportedBrowsers(); + init( { ref } ) { + if ( browserSupportsPdfs() ) { + ref.removeAttribute( 'hidden' ); + } }, }, }, diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index c6c3c58a54be8f..481b8b457a1967 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -220,6 +220,11 @@ module.exports = [ ].filter( Boolean ), }, { + ...baseConfig, + watchOptions: { + aggregateTimeout: 200, + }, + name: 'interactivity', entry: { file: './packages/block-library/src/file/interactivity.js', navigation: @@ -231,6 +236,7 @@ module.exports = [ path: join( __dirname, '..', '..', 'build', 'block-library' ), }, optimization: { + ...baseConfig.optimization, runtimeChunk: { name: 'vendors', }, From 4798578177e8ad1c690fed1be55ba481bec67c0c Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 16 May 2023 14:26:59 +0200 Subject: [PATCH 4/5] Refactor code with the latest changes applied to `trunk` --- bin/build-plugin-zip.sh | 2 +- lib/experimental/editor-settings.php | 3 - lib/experimental/interactivity-api/blocks.php | 229 ++++++++++++++++- .../navigation-block-interactivity.php | 240 ------------------ .../interactivity-api/script-loader.php | 2 +- lib/experiments-page.php | 8 +- lib/load.php | 7 +- .../src/file/{view => }/interactivity.js | 4 +- 8 files changed, 235 insertions(+), 260 deletions(-) delete mode 100644 lib/experimental/interactivity-api/navigation-block-interactivity.php rename packages/block-library/src/file/{view => }/interactivity.js (67%) diff --git a/bin/build-plugin-zip.sh b/bin/build-plugin-zip.sh index 52d473cd8d4016..131e434d1383d0 100755 --- a/bin/build-plugin-zip.sh +++ b/bin/build-plugin-zip.sh @@ -83,7 +83,7 @@ build_files=$( build/block-library/blocks/*.php \ build/block-library/blocks/*/block.json \ build/block-library/blocks/*/*.{js,js.map,css,asset.php} \ - build/block-library/interactive-blocks/*.js \ + build/block-library/interactivity/*.{js,js.map,asset.php} \ build/edit-widgets/blocks/*/block.json \ build/widgets/blocks/*.php \ build/widgets/blocks/*/block.json \ diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 8d4046530fbc95..bf9acb7b70d4dd 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -95,9 +95,6 @@ function gutenberg_enable_experiments() { if ( $gutenberg_experiments && array_key_exists( 'gutenberg-details-blocks', $gutenberg_experiments ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableDetailsBlocks = true', 'before' ); } - if ( $gutenberg_experiments && array_key_exists( 'gutenberg-interactivity-api-navigation-block', $gutenberg_experiments ) ) { - wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableNavigationBlockInteractivity = true', 'before' ); - } if ( $gutenberg_experiments && array_key_exists( 'gutenberg-theme-previews', $gutenberg_experiments ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableThemePreviews = true', 'before' ); } diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php index d9f3e05ea6a977..d32fc17d5f44aa 100644 --- a/lib/experimental/interactivity-api/blocks.php +++ b/lib/experimental/interactivity-api/blocks.php @@ -1,6 +1,7 @@ + * + * Title + *
    + * SUBMENU ITEMS + *
+ * + * + * @param string $w Markup of the navigation block. + * + * @return void + */ +function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) { + while ( $w->next_tag( + array( + 'tag_name' => 'LI', + 'class_name' => 'has-child', + ) + ) ) { + // Add directives to the parent `
  • `. + $w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }' ); + + // Add directives to the toggle submenu button. + if ( $w->next_tag( + array( + 'tag_name' => 'BUTTON', + 'class_name' => 'wp-block-navigation-submenu__toggle', + ) + ) ) { + $w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' ); + $w->set_attribute( 'data-wp-bind.aria-expanded', 'context.core.navigation.isMenuOpen' ); + $w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' ); + $w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' ); + }; + + // Add directives to the `
      ` containing the subitems. + if ( $w->next_tag( + array( + 'tag_name' => 'UL', + 'class_name' => 'wp-block-navigation__submenu-container', + ) + ) ) { + $w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' ); + $w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' ); + $w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' ); + }; + // Iterate through subitems if exist. + gutenberg_block_core_navigation_add_directives_to_submenu( $w ); + } +}; + +add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 1 ); + +/** + * Replaces view script for the File and Navigation blocks with version using Interactivity API. * * @param array $metadata Block metadata as read in via block.json. * * @return array Filtered block type metadata. */ -function gutenberg_block_core_file_update_view_script( $metadata ) { - if ( 'core/file' === $metadata['name'] && str_contains( $metadata['file'], 'build/block-library/blocks' ) ) { +function gutenberg_block_update_interactive_view_script( $metadata ) { + if ( + in_array( $metadata['name'], array( 'core/file', 'core/navigation' ), true ) && + str_contains( $metadata['file'], 'build/block-library/blocks' ) + ) { $metadata['viewScript'] = array( 'file:./interactivity.min.js' ); } return $metadata; } -add_filter( 'block_type_metadata', 'gutenberg_block_core_file_update_view_script', 10, 1 ); +add_filter( 'block_type_metadata', 'gutenberg_block_update_interactive_view_script', 10, 1 ); diff --git a/lib/experimental/interactivity-api/navigation-block-interactivity.php b/lib/experimental/interactivity-api/navigation-block-interactivity.php deleted file mode 100644 index 2111870d497abb..00000000000000 --- a/lib/experimental/interactivity-api/navigation-block-interactivity.php +++ /dev/null @@ -1,240 +0,0 @@ - - * - * Title - *
        - * SUBMENU ITEMS - *
      - * - * - * @param string $w Markup of the navigation block. - * - * @return void - */ -function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) { - while ( $w->next_tag( - array( - 'tag_name' => 'LI', - 'class_name' => 'has-child', - ) - ) ) { - // Add directives to the parent `
    • `. - $w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }' ); - - // Add directives to the toggle submenu button. - if ( $w->next_tag( - array( - 'tag_name' => 'BUTTON', - 'class_name' => 'wp-block-navigation-submenu__toggle', - ) - ) ) { - $w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' ); - $w->set_attribute( 'data-wp-bind.aria-expanded', 'context.core.navigation.isMenuOpen' ); - $w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' ); - $w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' ); - }; - - // Add directives to the `
        ` containing the subitems. - if ( $w->next_tag( - array( - 'tag_name' => 'UL', - 'class_name' => 'wp-block-navigation__submenu-container', - ) - ) ) { - $w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' ); - $w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' ); - $w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' ); - }; - // Iterate through subitems if exist. - gutenberg_block_core_navigation_add_directives_to_submenu( $w ); - } -}; - -add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 1 ); - -// Enqueue the `interactivity.js` file with the store. -add_filter( - 'block_type_metadata', - function ( $metadata ) { - if ( 'core/navigation' === $metadata['name'] ) { - wp_register_script( - 'wp-block-navigation-view', - gutenberg_url( 'build/block-library/navigation/interactivity.min.js' ), - array( 'wp-interactivity-runtime' ) - ); - $metadata['viewScript'] = array( 'wp-block-navigation-view' ); - } - return $metadata; - }, - 10, - 1 -); diff --git a/lib/experimental/interactivity-api/script-loader.php b/lib/experimental/interactivity-api/script-loader.php index 74a5dcf44550b5..63453713dd18cf 100644 --- a/lib/experimental/interactivity-api/script-loader.php +++ b/lib/experimental/interactivity-api/script-loader.php @@ -53,4 +53,4 @@ function gutenberg_interactivity_scripts_add_defer_attribute( $tag, $handle ) { } return $tag; } -add_filter( 'script_loader_tag', 'gutenberg_interactivity_scripts_add_defer_attribute', 10, 1 ); +add_filter( 'script_loader_tag', 'gutenberg_interactivity_scripts_add_defer_attribute', 10, 2 ); diff --git a/lib/experiments-page.php b/lib/experiments-page.php index e39a9dbefb9c16..521d04b75b34be 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -114,14 +114,14 @@ function gutenberg_initialize_experiments_settings() { ); add_settings_field( - 'gutenberg-interactivity-api-navigation-block', - __( 'Navigation block', 'gutenberg' ), + 'gutenberg-interactivity-api-core-blocks', + __( 'Core blocks', 'gutenberg' ), 'gutenberg_display_experiment_field', 'gutenberg-experiments', 'gutenberg_experiments_section', array( - 'label' => __( 'Test the Navigation block using the Interactivity API', 'gutenberg' ), - 'id' => 'gutenberg-interactivity-api-navigation-block', + 'label' => __( 'Test the core blocks using the Interactivity API', 'gutenberg' ), + 'id' => 'gutenberg-interactivity-api-core-blocks', ) ); diff --git a/lib/load.php b/lib/load.php index 5b77d37db6e26b..b8ec4a4d607849 100644 --- a/lib/load.php +++ b/lib/load.php @@ -99,14 +99,13 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/experimental/block-editor-settings-mobile.php'; require __DIR__ . '/experimental/block-editor-settings.php'; require __DIR__ . '/experimental/blocks.php'; -require __DIR__ . '/experimental/interactivity-api/script-loader.php'; -require __DIR__ . '/experimental/interactivity-api/blocks.php'; require __DIR__ . '/experimental/navigation-theme-opt-in.php'; require __DIR__ . '/experimental/kses.php'; require __DIR__ . '/experimental/l10n.php'; require __DIR__ . '/experimental/navigation-fallback.php'; -if ( gutenberg_is_experiment_enabled( 'gutenberg-interactivity-api-navigation-block' ) ) { - require __DIR__ . '/experimental/interactivity-api/navigation-block-interactivity.php'; +if ( gutenberg_is_experiment_enabled( 'gutenberg-interactivity-api-core-blocks' ) ) { + require __DIR__ . '/experimental/interactivity-api/script-loader.php'; + require __DIR__ . '/experimental/interactivity-api/blocks.php'; } // Fonts API. diff --git a/packages/block-library/src/file/view/interactivity.js b/packages/block-library/src/file/interactivity.js similarity index 67% rename from packages/block-library/src/file/view/interactivity.js rename to packages/block-library/src/file/interactivity.js index 2ef50c9bd92df6..aea5c684d9b5e7 100644 --- a/packages/block-library/src/file/view/interactivity.js +++ b/packages/block-library/src/file/interactivity.js @@ -1,8 +1,8 @@ /** * Internal dependencies */ -import { store } from '../../utils/interactivity'; -import { browserSupportsPdfs } from '../utils'; +import { store } from '../utils/interactivity'; +import { browserSupportsPdfs } from './utils'; store( { effects: { From 2d1c63b7a89c8a89e9bb9924c92e04cc0592558a Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Wed, 17 May 2023 09:59:10 +0200 Subject: [PATCH 5/5] Refactor init effect with bind for `hidden` attribute --- lib/experimental/interactivity-api/blocks.php | 2 +- packages/block-library/src/file/interactivity.js | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php index d32fc17d5f44aa..755c1d1d4fa7d7 100644 --- a/lib/experimental/interactivity-api/blocks.php +++ b/lib/experimental/interactivity-api/blocks.php @@ -23,7 +23,7 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b $processor->next_tag(); $processor->set_attribute( 'data-wp-island', '' ); $processor->next_tag( 'object' ); - $processor->set_attribute( 'data-wp-init', 'effects.core.file.init' ); + $processor->set_attribute( 'data-wp-bind.hidden', 'selectors.core.file.hasNoPdfPreview' ); $processor->set_attribute( 'hidden', true ); return $processor->get_updated_html(); } diff --git a/packages/block-library/src/file/interactivity.js b/packages/block-library/src/file/interactivity.js index aea5c684d9b5e7..cf9ae41002b276 100644 --- a/packages/block-library/src/file/interactivity.js +++ b/packages/block-library/src/file/interactivity.js @@ -5,13 +5,11 @@ import { store } from '../utils/interactivity'; import { browserSupportsPdfs } from './utils'; store( { - effects: { + selectors: { core: { file: { - init( { ref } ) { - if ( browserSupportsPdfs() ) { - ref.removeAttribute( 'hidden' ); - } + hasNoPdfPreview() { + return ! browserSupportsPdfs(); }, }, },