Skip to content

Commit

Permalink
Refactor Form block to use view script module
Browse files Browse the repository at this point in the history
  • Loading branch information
gziolo committed Dec 2, 2024
1 parent 4e736dd commit d988d70
Show file tree
Hide file tree
Showing 6 changed files with 40 additions and 59 deletions.
19 changes: 19 additions & 0 deletions lib/experimental/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -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'
);
1 change: 1 addition & 0 deletions packages/block-library/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/form/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,5 @@
}
},
"__experimentalSelector": "form"
},
"viewScript": "file:./view.min.js"
}
}
21 changes: 1 addition & 20 deletions packages/block-library/src/form/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down Expand Up @@ -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.
*
Expand Down
23 changes: 18 additions & 5 deletions packages/block-library/src/form/view.js
Original file line number Diff line number Diff line change
@@ -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;
}

Expand All @@ -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',
Expand Down
32 changes: 0 additions & 32 deletions tools/webpack/blocks.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,38 +41,6 @@ function escapeRegExp( string ) {
return string.replace( /[\\^$.*+?()[\]{}|]/g, '\\$&' );
}

<<<<<<< HEAD
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,
};
}, {} );
};

=======
>>>>>>> ee59af9d23 (Build: Stop generating unused legacy scripts for core blocks)
module.exports = [
{
...baseConfig,
Expand Down

0 comments on commit d988d70

Please sign in to comment.