Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File: Add experimental integration with Interactivity API #50377

Merged
merged 5 commits into from
May 17, 2023
Merged

File: Add experimental integration with Interactivity API #50377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a407918
File: Add experimental integration with Interactivity API
gziolo May 5, 2023
720bbe1
File: Mark the block as an island to activate directives
gziolo May 5, 2023
e12f9f4
Improve webpack config
gziolo May 8, 2023
4798578
Refactor code with the latest changes applied to `trunk`
gziolo May 16, 2023
2d1c63b
Refactor init effect with bind for `hidden` attribute
gziolo May 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bin/build-plugin-zip.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 \
Expand Down
3 changes: 0 additions & 3 deletions lib/experimental/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) ) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

window.__experimentalEnableNavigationBlockInteractivity is never used so can safely remove it.

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' );
}
Expand Down
57 changes: 40 additions & 17 deletions ...ty-api/navigation-block-interactivity.php → ...experimental/interactivity-api/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,29 @@
* @package gutenberg
*/

/**
* Adds Interactivity API directives to the File block markup using the Tag Processor.
*
* @param string $block_content Markup of the File block.
* @param array $block The full block, including name and attributes.
* @param WP_Block $instance The block instance.
*
* @return string File block markup with the directives injected when applicable.
*/
function gutenberg_block_core_file_add_directives_to_content( $block_content, $block, $instance ) {
if ( empty( $instance->attributes['displayPreview'] ) ) {
return $block_content;
}
$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-bind.hidden', 'selectors.core.file.hasNoPdfPreview' );
$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 );

/**
* Add Interactivity API directives to the navigation block markup using the Tag Processor
* The final HTML of the navigation block will look similar to this:
Expand Down Expand Up @@ -221,20 +244,20 @@ function 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/interactive-blocks/navigation.min.js' ),
array( 'wp-interactivity-runtime' )
);
$metadata['viewScript'] = array( 'wp-block-navigation-view' );
}
return $metadata;
},
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_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_update_interactive_view_script', 10, 1 );
43 changes: 25 additions & 18 deletions lib/experimental/interactivity-api/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,39 +11,46 @@
* @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 ) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to explore how we could automate registering the runtime based on the asset files that we use for all other scripts built with webpack. In particular, the version generate is very important as it only changes when the file's content changes, so it's essential for proper caching in WordPress core.

$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 );

/**
* 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 );
return $p->get_updated_html();
}
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 );
8 changes: 4 additions & 4 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
)
);

Expand Down
6 changes: 3 additions & 3 deletions lib/load.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,13 +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/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.
Expand Down
17 changes: 17 additions & 0 deletions packages/block-library/src/file/interactivity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* Internal dependencies
*/
import { store } from '../utils/interactivity';
import { browserSupportsPdfs } from './utils';

store( {
selectors: {
core: {
file: {
hasNoPdfPreview() {
return ! browserSupportsPdfs();
},
},
},
},
} );
0 packages/block-library/src/file/utils.js → ...ges/block-library/src/file/utils/index.js
View file
Open in desktop
File renamed without changes.
10 changes: 10 additions & 0 deletions packages/dependency-extraction-webpack-plugin/lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ class DependencyExtractionWebpackPlugin {
combinedOutputFile: null,
externalizedReport: false,
injectPolyfill: false,
__experimentalInjectInteractivityRuntime: false,
outputFormat: 'php',
outputFilename: null,
useDefaults: true,
Expand Down Expand Up @@ -142,6 +143,7 @@ class DependencyExtractionWebpackPlugin {
combinedOutputFile,
externalizedReport,
injectPolyfill,
__experimentalInjectInteractivityRuntime,
outputFormat,
outputFilename,
} = this.options;
Expand Down Expand Up @@ -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 ) ) {
Expand Down
24 changes: 20 additions & 4 deletions tools/webpack/blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,16 +220,23 @@ module.exports = [
].filter( Boolean ),
},
{
...baseConfig,
Copy link
Member Author

@gziolo gziolo May 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This brings some shared setting used for all other configs:

  • Browserslist integration (see Add Interactivity API runtime #49994 (comment)).
  • Bundle analyzer integration.
  • Custom config for the terser plugin.
  • Development vs production mode aligned with how npm run build and npm run dev work.
  • Integration with devtol.

watchOptions: {
aggregateTimeout: 200,
},
name: 'interactivity',
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: {
...baseConfig.optimization,
runtimeChunk: {
name: 'vendors',
},
Expand All @@ -238,12 +245,14 @@ module.exports = [
vendors: {
name: 'vendors',
test: /[\\/]node_modules[\\/]/,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to change this to the list of dependencies, even if we have to do it manually. Maybe in another PR :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I recall correctly, @DAreRodz tried listing dependencies, but you also need to list their dependencies and so on. It might be difficult to maintain, but it's worth trying.

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,
Expand Down Expand Up @@ -279,5 +288,12 @@ module.exports = [
},
],
},
plugins: [
...plugins,
Copy link
Member Author

@gziolo gziolo May 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Integrates webpack plugins used with all other configs:

  • Integration with bundle analyzer.
  • Integration with the plugin that replaces globals like process.env.IS_GUTENBERG_PLUGIN, process.env.IS_WORDPRESS_CORE. Once Warning: Introduce SCRIPT_DEBUG to make the package compatible with webpack 5 #50122 lands, it would also make it possible using SCRIPT_DEBUG - that could be a way to run console.log only in development mode in a way where it's completely removed in the production build.
  • Custom setup for DependencyExtractionWebpackPlugin, that together with another WP specific plugin ReadableJsAssetsWebpackPlugin ensure that all necessary files are created in the filesystem inside build/block-library:

Screenshot 2023-05-08 at 21 04 19

new DependencyExtractionWebpackPlugin( {
__experimentalInjectInteractivityRuntime: true,
injectPolyfill: false,
} ),
].filter( Boolean ),
},
];