From 9e76f0f301643adc1ee0446ab61da5137dc11ec7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Fri, 6 Dec 2024 09:18:43 +0100 Subject: [PATCH] Build: Stop generating unused legacy scripts for core blocks (#65268) * Build: Stop generating unused legacy scripts for core blocks * Refactor Form block to use view script module Co-authored-by: gziolo Co-authored-by: sirreal --- lib/experimental/blocks.php | 19 ++++++++++ packages/block-library/package.json | 1 + packages/block-library/src/form/block.json | 3 +- packages/block-library/src/form/index.php | 21 +---------- packages/block-library/src/form/view.js | 23 +++++++++--- tools/webpack/blocks.js | 43 +--------------------- 6 files changed, 41 insertions(+), 69 deletions(-) diff --git a/lib/experimental/blocks.php b/lib/experimental/blocks.php index 68113276ec1c0..b4bf0d409b159 100644 --- a/lib/experimental/blocks.php +++ b/lib/experimental/blocks.php @@ -117,3 +117,22 @@ function gutenberg_register_block_style( $block_name, $style_properties ) { return $result; } + +/** + * Additional data to expose to the view script module in the Form block. + */ +function gutenberg_block_core_form_view_script_module( $data ) { + if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) { + return $data; + } + + $data['nonce'] = wp_create_nonce( 'wp-block-form' ); + $data['ajaxUrl'] = admin_url( 'admin-ajax.php' ); + $data['action'] = 'wp_block_form_email_submit'; + + return $data; +} +add_filter( + 'script_module_data_@wordpress/block-library/form/view', + 'gutenberg_block_core_form_view_script_module' +); diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 77da5721abacb..ab95896035c9f 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -28,6 +28,7 @@ "wpScript": true, "wpScriptModuleExports": { "./file/view": "./build-module/file/view.js", + "./form/view": "./build-module/form/view.js", "./image/view": "./build-module/image/view.js", "./navigation/view": "./build-module/navigation/view.js", "./query/view": "./build-module/query/view.js", diff --git a/packages/block-library/src/form/block.json b/packages/block-library/src/form/block.json index fa5212822cc71..20f3b89dc62b0 100644 --- a/packages/block-library/src/form/block.json +++ b/packages/block-library/src/form/block.json @@ -64,6 +64,5 @@ } }, "__experimentalSelector": "form" - }, - "viewScript": "file:./view.min.js" + } } diff --git a/packages/block-library/src/form/index.php b/packages/block-library/src/form/index.php index c887d46ad8618..d2b4942d6a50b 100644 --- a/packages/block-library/src/form/index.php +++ b/packages/block-library/src/form/index.php @@ -14,6 +14,7 @@ * @return string The content of the block being rendered. */ function render_block_core_form( $attributes, $content ) { + wp_enqueue_script_module( '@wordpress/block-library/form/view' ); $processed_content = new WP_HTML_Tag_Processor( $content ); $processed_content->next_tag( 'form' ); @@ -42,26 +43,6 @@ function render_block_core_form( $attributes, $content ) { ); } -/** - * Additional data to add to the view.js script for this block. - */ -function block_core_form_view_script() { - if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) { - return; - } - - wp_localize_script( - 'wp-block-form-view', - 'wpBlockFormSettings', - array( - 'nonce' => wp_create_nonce( 'wp-block-form' ), - 'ajaxUrl' => admin_url( 'admin-ajax.php' ), - 'action' => 'wp_block_form_email_submit', - ) - ); -} -add_action( 'wp_enqueue_scripts', 'block_core_form_view_script' ); - /** * Adds extra fields to the form. * diff --git a/packages/block-library/src/form/view.js b/packages/block-library/src/form/view.js index d162d66020f44..43e5af99e2128 100644 --- a/packages/block-library/src/form/view.js +++ b/packages/block-library/src/form/view.js @@ -1,8 +1,21 @@ +let formSettings; +try { + formSettings = JSON.parse( + document.getElementById( + 'wp-script-module-data-@wordpress/block-library/form/view' + )?.textContent + ); +} catch {} + // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable no-undef */ document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) { - // Bail If the form is not using the mailto: action. - if ( ! form.action || ! form.action.startsWith( 'mailto:' ) ) { + // Bail If the form settings not provided or the form is not using the mailto: action. + if ( + ! formSettings || + ! form.action || + ! form.action.startsWith( 'mailto:' ) + ) { return; } @@ -18,13 +31,13 @@ document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) { // Get the form data and merge it with the form action and nonce. const formData = Object.fromEntries( new FormData( form ).entries() ); formData.formAction = form.action; - formData._ajax_nonce = wpBlockFormSettings.nonce; - formData.action = wpBlockFormSettings.action; + formData._ajax_nonce = formSettings.nonce; + formData.action = formSettings.action; formData._wp_http_referer = window.location.href; formData.formAction = form.action; try { - const response = await fetch( wpBlockFormSettings.ajaxUrl, { + const response = await fetch( formSettings.ajaxUrl, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index 02a379d3cdae2..c05318d5b060f 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -3,13 +3,11 @@ */ const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); const { join, sep, basename } = require( 'path' ); -const fastGlob = require( 'fast-glob' ); const { realpathSync } = require( 'fs' ); /** * WordPress dependencies */ -const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); const { PhpFilePathsPlugin } = require( '@wordpress/scripts/utils' ); /** @@ -17,13 +15,6 @@ const { PhpFilePathsPlugin } = require( '@wordpress/scripts/utils' ); */ const { baseConfig, plugins, stylesTransform } = require( './shared' ); -/* - * Matches a block's filepaths in the form build-module/.js - */ -const blockViewRegex = new RegExp( - /build-module\/(?.*\/view.*).js$/ -); - /** * We need to automatically rename some functions when they are called inside block files, * but have been declared elsewhere. This way we can call Gutenberg override functions, but @@ -50,48 +41,16 @@ function escapeRegExp( string ) { return string.replace( /[\\^$.*+?()[\]{}|]/g, '\\$&' ); } -const createEntrypoints = () => { - /* - * 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. All blocks were migrated to script modules but the Form block. - * - * Returns an empty array if no files were found. - */ - const blockViewScriptPaths = fastGlob.sync( - './packages/block-library/build-module/form/view.js' - ); - - /* - * Go through the paths found above, in order to define webpack entry points for - * each block's view.js file. - */ - return blockViewScriptPaths.reduce( ( entries, scriptPath ) => { - const result = scriptPath.match( blockViewRegex ); - if ( ! result?.groups?.filename ) { - return entries; - } - - return { - ...entries, - [ result.groups.filename ]: scriptPath, - }; - }, {} ); -}; - module.exports = [ { ...baseConfig, name: 'blocks', - entry: createEntrypoints(), + entry: {}, output: { - devtoolNamespace: 'wp', - filename: './build/block-library/blocks/[name].min.js', path: join( __dirname, '..', '..' ), }, plugins: [ ...plugins, - new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ), new PhpFilePathsPlugin( { context: './packages/block-library/src/', props: [ 'render', 'variations' ],