From 4c44bbd966b9699e359d9ae1549d2efb4eb5f6c6 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 3 Nov 2021 11:16:22 +0200 Subject: [PATCH 01/18] Handle arrays in viewScript --- lib/blocks.php | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/lib/blocks.php b/lib/blocks.php index 320d50bf50950..3f042f3a8ac20 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -593,3 +593,33 @@ function gutenberg_multiple_block_styles( $metadata ) { return $metadata; } add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' ); + + +/** + * Allow multiple view scripts per block. + * + * Filters the metadata provided for registering a block type. + * + * @param array $metadata Metadata for registering a block type. + * + * @return array + */ +function gutenberg_block_type_metadata_multiple_view_scripts( $metadata ) { + + // Early return if viewScript is empty, or not an array. + if ( ! isset( $metadata['viewScript'] ) || ! is_array( $metadata['viewScript'] ) ) { + return $metadata; + } + + // Register all viewScript items. + foreach ( $metadata['viewScript'] as $view_script ) { + $item_metadata = $metadata; + $item_metadata['viewScript'] = $view_script; + gutenberg_block_type_metadata_view_script( array(), $item_metadata ); + } + + // Proceed with the default behavior. + $metadata['viewScript'] = $metadata['viewScript'][0]; + return $metadata; +} +add_filter( 'block_type_metadata', 'gutenberg_block_type_metadata_multiple_view_scripts' ); From c0728d7e0699f5a83cfeb71fe3c78069c917fc96 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 3 Nov 2021 11:17:53 +0200 Subject: [PATCH 02/18] Split modal script in navigation's viewScript --- .../block-library/src/navigation/block.json | 2 +- .../src/navigation/view-modal.js | 36 +++++++++++++++++++ packages/block-library/src/navigation/view.js | 35 ------------------ 3 files changed, 37 insertions(+), 36 deletions(-) create mode 100644 packages/block-library/src/navigation/view-modal.js diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index dc904dc25eee1..d34271378f65e 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -116,7 +116,7 @@ } } }, - "viewScript": "file:./view.min.js", + "viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ], "editorStyle": "wp-block-navigation-editor", "style": "wp-block-navigation" } diff --git a/packages/block-library/src/navigation/view-modal.js b/packages/block-library/src/navigation/view-modal.js new file mode 100644 index 0000000000000..c9028af28ab2a --- /dev/null +++ b/packages/block-library/src/navigation/view-modal.js @@ -0,0 +1,36 @@ +/** + * External dependencies + */ +import MicroModal from 'micromodal'; + +// Responsive navigation toggle. +function navigationToggleModal( modal ) { + const dialogContainer = modal.querySelector( + `.wp-block-navigation__responsive-dialog` + ); + + const isHidden = 'true' === modal.getAttribute( 'aria-hidden' ); + + modal.classList.toggle( 'has-modal-open', ! isHidden ); + dialogContainer.toggleAttribute( 'aria-modal', ! isHidden ); + + if ( isHidden ) { + dialogContainer.removeAttribute( 'role' ); + dialogContainer.removeAttribute( 'aria-modal' ); + } else { + dialogContainer.setAttribute( 'role', 'dialog' ); + dialogContainer.setAttribute( 'aria-modal', 'true' ); + } + + // Add a class to indicate the modal is open. + const htmlElement = document.documentElement; + htmlElement.classList.toggle( 'has-modal-open' ); +} + +window.addEventListener( 'load', () => { + MicroModal.init( { + onShow: navigationToggleModal, + onClose: navigationToggleModal, + openClass: 'is-menu-open', + } ); +} ); diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index 60d6a342a9c43..5116f983b5400 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -1,32 +1,3 @@ -/** - * External dependencies - */ -import MicroModal from 'micromodal'; - -// Responsive navigation toggle. -function navigationToggleModal( modal ) { - const dialogContainer = modal.querySelector( - `.wp-block-navigation__responsive-dialog` - ); - - const isHidden = 'true' === modal.getAttribute( 'aria-hidden' ); - - modal.classList.toggle( 'has-modal-open', ! isHidden ); - dialogContainer.toggleAttribute( 'aria-modal', ! isHidden ); - - if ( isHidden ) { - dialogContainer.removeAttribute( 'role' ); - dialogContainer.removeAttribute( 'aria-modal' ); - } else { - dialogContainer.setAttribute( 'role', 'dialog' ); - dialogContainer.setAttribute( 'aria-modal', 'true' ); - } - - // Add a class to indicate the modal is open. - const htmlElement = document.documentElement; - htmlElement.classList.toggle( 'has-modal-open' ); -} - // Open on click functionality. function closeSubmenus( element ) { element @@ -65,12 +36,6 @@ function toggleSubmenuOnClick( event ) { // Necessary for some themes such as TT1 Blocks, where // scripts could be loaded before the body. window.addEventListener( 'load', () => { - MicroModal.init( { - onShow: navigationToggleModal, - onClose: navigationToggleModal, - openClass: 'is-menu-open', - } ); - const submenuButtons = document.querySelectorAll( '.wp-block-navigation-submenu__toggle' ); From b360607a8423da57440e589a554f54e8ef2f0ff3 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 3 Nov 2021 11:47:29 +0200 Subject: [PATCH 03/18] Enqueue modal script when needed --- packages/block-library/src/navigation/index.php | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 28da77e0f021d..9302c948791ff 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -396,6 +396,11 @@ function render_block_core_navigation( $attributes, $content, $block ) { wp_enqueue_script( 'wp-block-navigation-view' ); } + $should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu']; + if ( $should_load_modal_view_script ) { + wp_enqueue_script( 'wp-block-navigation-view-modal' ); + } + $inner_blocks = $block->inner_blocks; // Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render. From b5e5a91f15adfab00b7ffec9785bfea7a0e02212 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 3 Feb 2022 13:05:10 +0200 Subject: [PATCH 04/18] Add function in the 6.0-compat folder --- lib/compat/wordpress-6.0/blocks.php | 49 +++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/lib/compat/wordpress-6.0/blocks.php b/lib/compat/wordpress-6.0/blocks.php index 40108be343ec9..73c3fa298d5fd 100644 --- a/lib/compat/wordpress-6.0/blocks.php +++ b/lib/compat/wordpress-6.0/blocks.php @@ -122,3 +122,52 @@ function gutenberg_build_query_vars_from_query_block( $block, $page ) { } return $query; } + +/** + * Registers view scripts for core blocks if handling is missing in WordPress core. + * + * This is a temporary solution until the Gutenberg plugin sets + * the required WordPress version to 6.0. + * + * @param array $settings Array of determined settings for registering a block type. + * @param array $metadata Metadata provided for registering a block type. + * + * @return array Array of settings for registering a block type. + */ +function gutenberg_block_type_metadata_view_script( $settings, $metadata ) { + if ( + ! isset( $metadata['viewScript'] ) || + ! empty( $settings['view_script'] ) || + ! isset( $metadata['file'] ) || + strpos( $metadata['file'], gutenberg_dir_path() ) !== 0 + ) { + return $settings; + } + + $view_script_path = realpath( dirname( $metadata['file'] ) . '/' . remove_block_asset_path_prefix( $metadata['viewScript'] ) ); + + if ( file_exists( $view_script_path ) ) { + $view_script_handle = str_replace( 'core/', 'wp-block-', $metadata['name'] ) . '-view'; + $view_script_id = str_replace( array( '.min.js', '.js' ), '', basename( remove_block_asset_path_prefix( $metadata['viewScript'] ) ) ); + $view_script_handle = str_replace( 'core/', 'wp-block-', $metadata['name'] ) . '-' . $view_script_id; + wp_deregister_script( $view_script_handle ); + + // Replace suffix and extension with `.asset.php` to find the generated dependencies file. + $view_asset_file = substr( $view_script_path, 0, -( strlen( '.js' ) ) ) . '.asset.php'; + $view_asset = file_exists( $view_asset_file ) ? require( $view_asset_file ) : null; + $view_script_dependencies = isset( $view_asset['dependencies'] ) ? $view_asset['dependencies'] : array(); + $view_script_version = isset( $view_asset['version'] ) ? $view_asset['version'] : false; + $result = wp_register_script( + $view_script_handle, + gutenberg_url( str_replace( gutenberg_dir_path(), '', $view_script_path ) ), + $view_script_dependencies, + $view_script_version, + true + ); + if ( $result ) { + $settings['view_script'] = $view_script_handle; + } + } + return $settings; +} +add_filter( 'block_type_metadata_settings', 'gutenberg_block_type_metadata_view_script', 10, 2 ); From e49cdea9d03010386587e0a891aff00a635c49f2 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 3 Feb 2022 13:17:55 +0200 Subject: [PATCH 05/18] Indentation fix --- lib/compat/wordpress-6.0/blocks.php | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/compat/wordpress-6.0/blocks.php b/lib/compat/wordpress-6.0/blocks.php index 73c3fa298d5fd..f2d6cb641e17f 100644 --- a/lib/compat/wordpress-6.0/blocks.php +++ b/lib/compat/wordpress-6.0/blocks.php @@ -142,17 +142,17 @@ function gutenberg_block_type_metadata_view_script( $settings, $metadata ) { strpos( $metadata['file'], gutenberg_dir_path() ) !== 0 ) { return $settings; - } + } - $view_script_path = realpath( dirname( $metadata['file'] ) . '/' . remove_block_asset_path_prefix( $metadata['viewScript'] ) ); + $view_script_path = realpath( dirname( $metadata['file'] ) . '/' . remove_block_asset_path_prefix( $metadata['viewScript'] ) ); - if ( file_exists( $view_script_path ) ) { - $view_script_handle = str_replace( 'core/', 'wp-block-', $metadata['name'] ) . '-view'; - $view_script_id = str_replace( array( '.min.js', '.js' ), '', basename( remove_block_asset_path_prefix( $metadata['viewScript'] ) ) ); - $view_script_handle = str_replace( 'core/', 'wp-block-', $metadata['name'] ) . '-' . $view_script_id; - wp_deregister_script( $view_script_handle ); + if ( file_exists( $view_script_path ) ) { + $view_script_handle = str_replace( 'core/', 'wp-block-', $metadata['name'] ) . '-view'; + $view_script_id = str_replace( array( '.min.js', '.js' ), '', basename( remove_block_asset_path_prefix( $metadata['viewScript'] ) ) ); + $view_script_handle = str_replace( 'core/', 'wp-block-', $metadata['name'] ) . '-' . $view_script_id; + wp_deregister_script( $view_script_handle ); - // Replace suffix and extension with `.asset.php` to find the generated dependencies file. + // Replace suffix and extension with `.asset.php` to find the generated dependencies file. $view_asset_file = substr( $view_script_path, 0, -( strlen( '.js' ) ) ) . '.asset.php'; $view_asset = file_exists( $view_asset_file ) ? require( $view_asset_file ) : null; $view_script_dependencies = isset( $view_asset['dependencies'] ) ? $view_asset['dependencies'] : array(); From 40c6a7133d2fdbec7acdbe6d66a6950ecc8ec03b Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Wed, 16 Mar 2022 10:37:35 +0100 Subject: [PATCH 06/18] Add webpack changes to build also view files prefixed with view --- packages/block-library/README.md | 2 +- tools/webpack/blocks.js | 24 ++++++++++++++---------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/block-library/README.md b/packages/block-library/README.md index 92cf2c6a35184..45f923af9f8e3 100644 --- a/packages/block-library/README.md +++ b/packages/block-library/README.md @@ -14,7 +14,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If ## Building JavaScript for the browser -If a `view.js` file is present in the block's directory, this file will be built along other assets, making it available to load from the browser. +If a `view.js` file (or a file prefixed with `view`, e.g. `view-example.js`) is present in the block's directory, this file will be built along other assets, making it available to load from the browser. This enables us to, for instance, load this file when the block is present on the page in two ways: diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index 11d4635af9632..c9a5af0b631ce 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -17,10 +17,11 @@ const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extrac const { baseConfig, plugins, stylesTransform } = require( './shared' ); /* - * Matches a block's name in paths in the form - * build-module//view.js + * Matches a block's filepaths in the form build-module/.js */ -const blockNameRegex = new RegExp( /(?<=build-module\/).*(?=(\/view))/g ); +const blockViewRegex = new RegExp( + /build-module\/(?.*\/view.*).js$/ +); /** * We need to automatically rename some functions when they are called inside block files, @@ -31,14 +32,14 @@ const prefixFunctions = [ 'build_query_vars_from_query_block' ]; const createEntrypoints = () => { /* - * Returns an array of paths to view.js files within the `@wordpress/block-library` package. - * These paths can be matched by the regex `blockNameRegex` in order to extract - * the block's name. + * Returns an array of paths to block view files within the `@wordpress/block-library` package. + * These paths can be matched by the regex `blockViewRegex` in order to extract + * the block's filename. * * Returns an empty array if no files were found. */ const blockViewScriptPaths = fastGlob.sync( - './packages/block-library/build-module/**/view.js' + './packages/block-library/build-module/**/view*.js' ); /* @@ -46,11 +47,14 @@ const createEntrypoints = () => { * each block's view.js file. */ return blockViewScriptPaths.reduce( ( entries, scriptPath ) => { - const [ blockName ] = scriptPath.match( blockNameRegex ); + const result = scriptPath.match( blockViewRegex ); + if ( ! result?.groups?.filename ) { + return entries; + } return { ...entries, - [ 'blocks/' + blockName ]: scriptPath, + [ result.groups.filename ]: scriptPath, }; }, {} ); }; @@ -61,7 +65,7 @@ module.exports = { entry: createEntrypoints(), output: { devtoolNamespace: 'wp', - filename: './build/block-library/[name]/view.min.js', + filename: './build/block-library/blocks/[name].min.js', path: join( __dirname, '..', '..' ), }, plugins: [ From d9a23973b3c2a982c71a9a6262bebcdbe231d444 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 22 Mar 2022 10:00:49 +0200 Subject: [PATCH 07/18] fix the schema --- schemas/json/block.json | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/schemas/json/block.json b/schemas/json/block.json index 99217d43c376f..43e24b28f91ee 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -421,8 +421,18 @@ "description": "Block type frontend and editor script definition. It will be enqueued both in the editor and when viewing the content on the front of the site." }, "viewScript": { - "type": "string", - "description": "Block type frontend script definition. It will be enqueued only when viewing the content on the front of the site." + "description": "Block type frontend script definition. It will be enqueued only when viewing the content on the front of the site.", + "oneOf": [ + { + "type": "string" + }, + { + "type": "array", + "items": { + "type": "string" + } + } + ] }, "editorStyle": { "description": "Block type editor style definition. It will only be enqueued in the context of the editor.", From 1dbc5712dcf2300975225d6e67a911f3663f4160 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 22 Mar 2022 10:09:30 +0200 Subject: [PATCH 08/18] PHPCS fix (= alignment) --- lib/compat/wordpress-6.0/blocks.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.0/blocks.php b/lib/compat/wordpress-6.0/blocks.php index f2d6cb641e17f..5032e43212d71 100644 --- a/lib/compat/wordpress-6.0/blocks.php +++ b/lib/compat/wordpress-6.0/blocks.php @@ -157,7 +157,7 @@ function gutenberg_block_type_metadata_view_script( $settings, $metadata ) { $view_asset = file_exists( $view_asset_file ) ? require( $view_asset_file ) : null; $view_script_dependencies = isset( $view_asset['dependencies'] ) ? $view_asset['dependencies'] : array(); $view_script_version = isset( $view_asset['version'] ) ? $view_asset['version'] : false; - $result = wp_register_script( + $result = wp_register_script( $view_script_handle, gutenberg_url( str_replace( gutenberg_dir_path(), '', $view_script_path ) ), $view_script_dependencies, From 76dd3b437d080b6c3d7bbc87ea12148532b084a5 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Mon, 28 Mar 2022 10:13:02 +0300 Subject: [PATCH 09/18] remove unnecessary line --- lib/compat/wordpress-6.0/blocks.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/compat/wordpress-6.0/blocks.php b/lib/compat/wordpress-6.0/blocks.php index 5032e43212d71..bcdc80c292090 100644 --- a/lib/compat/wordpress-6.0/blocks.php +++ b/lib/compat/wordpress-6.0/blocks.php @@ -147,7 +147,6 @@ function gutenberg_block_type_metadata_view_script( $settings, $metadata ) { $view_script_path = realpath( dirname( $metadata['file'] ) . '/' . remove_block_asset_path_prefix( $metadata['viewScript'] ) ); if ( file_exists( $view_script_path ) ) { - $view_script_handle = str_replace( 'core/', 'wp-block-', $metadata['name'] ) . '-view'; $view_script_id = str_replace( array( '.min.js', '.js' ), '', basename( remove_block_asset_path_prefix( $metadata['viewScript'] ) ) ); $view_script_handle = str_replace( 'core/', 'wp-block-', $metadata['name'] ) . '-' . $view_script_id; wp_deregister_script( $view_script_handle ); From ae6f187983c7ea93e0ae001fa90ce5d3ab53ac70 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Mon, 28 Mar 2022 10:14:50 +0300 Subject: [PATCH 10/18] remove in_footer arg --- lib/compat/wordpress-6.0/blocks.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.0/blocks.php b/lib/compat/wordpress-6.0/blocks.php index bcdc80c292090..50c697f1baf3e 100644 --- a/lib/compat/wordpress-6.0/blocks.php +++ b/lib/compat/wordpress-6.0/blocks.php @@ -160,8 +160,7 @@ function gutenberg_block_type_metadata_view_script( $settings, $metadata ) { $view_script_handle, gutenberg_url( str_replace( gutenberg_dir_path(), '', $view_script_path ) ), $view_script_dependencies, - $view_script_version, - true + $view_script_version ); if ( $result ) { $settings['view_script'] = $view_script_handle; From 48e789ce173a4b1691707654dee07e7d945a58e6 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Mon, 28 Mar 2022 12:58:53 +0300 Subject: [PATCH 11/18] handle script translations --- lib/compat/wordpress-6.0/blocks.php | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/compat/wordpress-6.0/blocks.php b/lib/compat/wordpress-6.0/blocks.php index 50c697f1baf3e..842dd50b7f610 100644 --- a/lib/compat/wordpress-6.0/blocks.php +++ b/lib/compat/wordpress-6.0/blocks.php @@ -164,6 +164,10 @@ function gutenberg_block_type_metadata_view_script( $settings, $metadata ) { ); if ( $result ) { $settings['view_script'] = $view_script_handle; + + if ( ! empty( $metadata['textdomain'] ) && in_array( 'wp-i18n', $view_script_dependencies, true ) ) { + wp_set_script_translations( $view_script_handle, $metadata['textdomain'] ); + } } } return $settings; From 0d24d3835a9e4aa42c950cc3bb90339ce0accecf Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 29 Mar 2022 14:14:33 +0300 Subject: [PATCH 12/18] Add a wp_enqueue_block_script function --- lib/blocks.php | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/lib/blocks.php b/lib/blocks.php index 3f042f3a8ac20..fa3109ad1657d 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -594,6 +594,68 @@ function gutenberg_multiple_block_styles( $metadata ) { } add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' ); +if ( ! function_exists( 'wp_enqueue_block_script' ) ) { + /** + * Enqueue a script for a specific block. + * + * Scripts enqueued using this function will only get printed + * when the block gets rendered on the frontend. + * + * @param string $block_name The block-name, including namespace. + * @param array $args An array of arguments [handle,src,deps,ver,media]. + * + * @return void + */ + function wp_enqueue_block_script( $block_name, $args ) { + $args = wp_parse_args( + $args, + array( + 'handle' => '', + 'src' => '', + 'deps' => array(), + 'ver' => false, + 'in_footer' => false, + ) + ); + + /** + * Callback function to register and enqueue scripts. + * + * @param string $content When the callback is used for the render_block filter, + * the content needs to be returned so the function parameter + * is to ensure the content exists. + * @return string Block content. + */ + $callback = static function( $content, $block ) use ( $args, $block_name ) { + + // Sanity check. + if ( empty( $block['blockName'] ) || $block_name !== $block['blockName'] ) { + return $content; + } + + // Register the stylesheet. + if ( ! empty( $args['src'] ) ) { + wp_register_script( $args['handle'], $args['src'], $args['deps'], $args['ver'], $args['in_footer'] ); + } + + // Enqueue the stylesheet. + wp_enqueue_script( $args['handle'] ); + + return $content; + }; + + /* + * The filter's callback here is an anonymous function because + * using a named function in this case is not possible. + * + * The function cannot be unhooked, however, users are still able + * to dequeue the stylesheets registered/enqueued by the callback + * which is why in this case, using an anonymous function + * was deemed acceptable. + */ + add_filter( 'render_block', $callback, 10, 2 ); + } +} /** * Allow multiple view scripts per block. From 6f6124353706c9289600e1b5aaf0909dcf99e0e8 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 30 Mar 2022 10:10:17 +0300 Subject: [PATCH 13/18] rename function --- lib/blocks.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index fa3109ad1657d..6048fb0abff77 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -594,9 +594,9 @@ function gutenberg_multiple_block_styles( $metadata ) { } add_filter( 'block_type_metadata', 'gutenberg_multiple_block_styles' ); -if ( ! function_exists( 'wp_enqueue_block_script' ) ) { +if ( ! function_exists( 'wp_enqueue_block_view_script' ) ) { /** - * Enqueue a script for a specific block. + * Enqueue a frontend script for a specific block. * * Scripts enqueued using this function will only get printed * when the block gets rendered on the frontend. @@ -606,7 +606,7 @@ function gutenberg_multiple_block_styles( $metadata ) { * * @return void */ - function wp_enqueue_block_script( $block_name, $args ) { + function wp_enqueue_block_view_script( $block_name, $args ) { $args = wp_parse_args( $args, array( From c64d80b485936dfd3ff14a149ba3ee8fbee42ebb Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 30 Mar 2022 10:14:34 +0300 Subject: [PATCH 14/18] Update lib/blocks.php MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Greg Ziółkowski --- lib/blocks.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/blocks.php b/lib/blocks.php index 6048fb0abff77..d0b01619ad0e7 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -649,7 +649,7 @@ function wp_enqueue_block_view_script( $block_name, $args ) { * using a named function in this case is not possible. * * The function cannot be unhooked, however, users are still able - * to dequeue the stylesheets registered/enqueued by the callback + * to dequeue the script registered/enqueued by the callback * which is why in this case, using an anonymous function * was deemed acceptable. */ From ba0bf2ab17c00f603cbdb3ceffbf57ec56217fd3 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 30 Mar 2022 10:24:57 +0300 Subject: [PATCH 15/18] allow script translations by defining a textdomain --- lib/blocks.php | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index d0b01619ad0e7..71ce992158541 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -610,11 +610,14 @@ function wp_enqueue_block_view_script( $block_name, $args ) { $args = wp_parse_args( $args, array( - 'handle' => '', - 'src' => '', - 'deps' => array(), - 'ver' => false, - 'in_footer' => false, + 'handle' => '', + 'src' => '', + 'deps' => array(), + 'ver' => false, + 'in_footer' => false, + + // Additional arg to allow translations for the script's textdomain. + 'textdomain' => '', ) ); @@ -633,6 +636,11 @@ function wp_enqueue_block_view_script( $block_name, $args ) { return $content; } + // If a textdomain is defined, ensure that `wp-i18n` is enqueued. + if ( ! empty( $args['textdomain'] ) && ! in_array( 'wp-i18n', $args['deps'], true ) ) { + $args['deps'][] = 'wp-i18n'; + } + // Register the stylesheet. if ( ! empty( $args['src'] ) ) { wp_register_script( $args['handle'], $args['src'], $args['deps'], $args['ver'], $args['in_footer'] ); @@ -641,6 +649,11 @@ function wp_enqueue_block_view_script( $block_name, $args ) { // Enqueue the stylesheet. wp_enqueue_script( $args['handle'] ); + // If a textdomain is defined, use it to set the script translations. + if ( ! empty( $metadata['textdomain'] ) ) { + wp_set_script_translations( $args['handle'], $args['textdomain'] ); + } + return $content; }; From 73e100f91a02893e9d0787e09423c70dd1969321 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 30 Mar 2022 10:40:50 +0300 Subject: [PATCH 16/18] reverse i18n logic --- lib/blocks.php | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index 71ce992158541..0bc55164dff33 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -636,11 +636,6 @@ function wp_enqueue_block_view_script( $block_name, $args ) { return $content; } - // If a textdomain is defined, ensure that `wp-i18n` is enqueued. - if ( ! empty( $args['textdomain'] ) && ! in_array( 'wp-i18n', $args['deps'], true ) ) { - $args['deps'][] = 'wp-i18n'; - } - // Register the stylesheet. if ( ! empty( $args['src'] ) ) { wp_register_script( $args['handle'], $args['src'], $args['deps'], $args['ver'], $args['in_footer'] ); @@ -650,7 +645,7 @@ function wp_enqueue_block_view_script( $block_name, $args ) { wp_enqueue_script( $args['handle'] ); // If a textdomain is defined, use it to set the script translations. - if ( ! empty( $metadata['textdomain'] ) ) { + if ( ! empty( $metadata['textdomain'] ) && in_array( 'wp-i18n', $args['deps'], true ) ) { wp_set_script_translations( $args['handle'], $args['textdomain'] ); } From afbfbe35f5eb340a5470334312cde9f240a56073 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 30 Mar 2022 10:44:21 +0300 Subject: [PATCH 17/18] typo --- lib/blocks.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/blocks.php b/lib/blocks.php index 0bc55164dff33..8e2b25715f109 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -645,7 +645,7 @@ function wp_enqueue_block_view_script( $block_name, $args ) { wp_enqueue_script( $args['handle'] ); // If a textdomain is defined, use it to set the script translations. - if ( ! empty( $metadata['textdomain'] ) && in_array( 'wp-i18n', $args['deps'], true ) ) { + if ( ! empty( $args['textdomain'] ) && in_array( 'wp-i18n', $args['deps'], true ) ) { wp_set_script_translations( $args['handle'], $args['textdomain'] ); } From 59337a080381355c2e19a7c8f30c2b39c7f4cc7b Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 7 Apr 2022 10:36:01 +0300 Subject: [PATCH 18/18] revert navigation block changes --- .../block-library/src/navigation/block.json | 2 +- .../block-library/src/navigation/index.php | 5 --- .../src/navigation/view-modal.js | 36 ------------------- packages/block-library/src/navigation/view.js | 35 ++++++++++++++++++ 4 files changed, 36 insertions(+), 42 deletions(-) delete mode 100644 packages/block-library/src/navigation/view-modal.js diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index d34271378f65e..dc904dc25eee1 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -116,7 +116,7 @@ } } }, - "viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ], + "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 9302c948791ff..28da77e0f021d 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -396,11 +396,6 @@ function render_block_core_navigation( $attributes, $content, $block ) { wp_enqueue_script( 'wp-block-navigation-view' ); } - $should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu']; - if ( $should_load_modal_view_script ) { - wp_enqueue_script( 'wp-block-navigation-view-modal' ); - } - $inner_blocks = $block->inner_blocks; // Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render. diff --git a/packages/block-library/src/navigation/view-modal.js b/packages/block-library/src/navigation/view-modal.js deleted file mode 100644 index c9028af28ab2a..0000000000000 --- a/packages/block-library/src/navigation/view-modal.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * External dependencies - */ -import MicroModal from 'micromodal'; - -// Responsive navigation toggle. -function navigationToggleModal( modal ) { - const dialogContainer = modal.querySelector( - `.wp-block-navigation__responsive-dialog` - ); - - const isHidden = 'true' === modal.getAttribute( 'aria-hidden' ); - - modal.classList.toggle( 'has-modal-open', ! isHidden ); - dialogContainer.toggleAttribute( 'aria-modal', ! isHidden ); - - if ( isHidden ) { - dialogContainer.removeAttribute( 'role' ); - dialogContainer.removeAttribute( 'aria-modal' ); - } else { - dialogContainer.setAttribute( 'role', 'dialog' ); - dialogContainer.setAttribute( 'aria-modal', 'true' ); - } - - // Add a class to indicate the modal is open. - const htmlElement = document.documentElement; - htmlElement.classList.toggle( 'has-modal-open' ); -} - -window.addEventListener( 'load', () => { - MicroModal.init( { - onShow: navigationToggleModal, - onClose: navigationToggleModal, - openClass: 'is-menu-open', - } ); -} ); diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index 5116f983b5400..60d6a342a9c43 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -1,3 +1,32 @@ +/** + * External dependencies + */ +import MicroModal from 'micromodal'; + +// Responsive navigation toggle. +function navigationToggleModal( modal ) { + const dialogContainer = modal.querySelector( + `.wp-block-navigation__responsive-dialog` + ); + + const isHidden = 'true' === modal.getAttribute( 'aria-hidden' ); + + modal.classList.toggle( 'has-modal-open', ! isHidden ); + dialogContainer.toggleAttribute( 'aria-modal', ! isHidden ); + + if ( isHidden ) { + dialogContainer.removeAttribute( 'role' ); + dialogContainer.removeAttribute( 'aria-modal' ); + } else { + dialogContainer.setAttribute( 'role', 'dialog' ); + dialogContainer.setAttribute( 'aria-modal', 'true' ); + } + + // Add a class to indicate the modal is open. + const htmlElement = document.documentElement; + htmlElement.classList.toggle( 'has-modal-open' ); +} + // Open on click functionality. function closeSubmenus( element ) { element @@ -36,6 +65,12 @@ function toggleSubmenuOnClick( event ) { // Necessary for some themes such as TT1 Blocks, where // scripts could be loaded before the body. window.addEventListener( 'load', () => { + MicroModal.init( { + onShow: navigationToggleModal, + onClose: navigationToggleModal, + openClass: 'is-menu-open', + } ); + const submenuButtons = document.querySelectorAll( '.wp-block-navigation-submenu__toggle' );