Forms: replace jetpack buttons with core

projects/packages/forms/changelog/add-core-button-submit

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: allow using the Gutenberg Core Button block as the submit control in Contact Form. The block gets the same interactivity bindings and loading spinner as the Jetpack Button, and all form variations now insert a core button by default.

projects/packages/forms/changelog/replace-forms-jetpack-buttons-core

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Forms: use core/button instead of jetpack/button

projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php

@@ -47,6 +47,7 @@ public static function register_block() {
 
 		add_filter( 'render_block_data', array( __CLASS__, 'find_nested_html_block' ), 10, 3 );
 		add_filter( 'render_block_core/html', array( __CLASS__, 'render_wrapped_html_block' ), 10, 2 );
+		add_filter( 'render_block_core/button', array( __CLASS__, 'render_submit_button' ), 10, 2 );
 		add_filter( 'jetpack_block_editor_feature_flags', array( __CLASS__, 'register_feature' ) );
 		add_filter( 'pre_render_block', array( __CLASS__, 'pre_render_contact_form' ), 10, 3 );
 
@@ -102,6 +103,35 @@ public static function render_wrapped_html_block( $content, $parsed_block ) {
 		return $content;
 	}
 
+	/**
+	 * Add Jetpack Forms interactivity attributes to core/buttons blocks that live inside a contact form.
+	 *
+	 * @param string $content Rendered HTML of the core/button block.
+	 * @param array  $parsed_block Parsed block array.
+	 * @return string Possibly modified HTML.
+	 */
+	public static function render_submit_button( $content, $parsed_block ) {
+		$class = $parsed_block['attrs']['className'] ?? '';
+		if ( ! str_contains( $class, 'jetpack-form-submit-button' ) ) {
+			return $content;
+		}
+
+		if ( ! class_exists( \WP_HTML_Tag_Processor::class ) ) {
+			return $content;
+		}
+
+		$p = new \WP_HTML_Tag_Processor( $content );
+		if ( ! $p->next_tag( array( 'tag_name' => 'button' ) ) ) {
+			return $content;
+		}
+
+		$p->set_attribute( 'data-wp-class--is-submitting', 'state.isSubmitting' );
+		$p->set_attribute( 'data-wp-bind--aria-disabled', 'state.isAriaDisabled' );
+		$p->set_attribute( 'data-wp-bind--disabled', 'state.isAriaDisabled' );
+
+		return $p->get_updated_html();
+	}
+
 	/**
 	 * Register the Child blocks of Contact Form
 	 * We are registering child blocks only when Contact Form plugin is Active

projects/packages/forms/src/blocks/contact-form/edit.tsx

@@ -211,11 +211,13 @@ function JetpackContactFormEdit( {
 		[ clientId, steps ]
 	);
 
-	const submitButton = useFindBlockRecursively(
-		clientId,
-		block => block.name === 'jetpack/button'
+	const findButtonsBlock = useCallback(
+		block => block.name === 'core/button' || block.name === 'jetpack/button',
+		[]
 	);
 
+	const submitButton = useFindBlockRecursively( clientId, findButtonsBlock );
+
 	const { postTitle, hasAnyInnerBlocks, postAuthorEmail, selectedBlockClientId, onlySubmitBlock } =
 		useSelect(
 			select => {
@@ -236,6 +238,11 @@ function JetpackContactFormEdit( {
 				const { getUser } = select( coreStore );
 				const innerBlocksData = getBlocks( clientId );
 
+				const isSingleButtonBlock =
+					innerBlocksData.length === 1 &&
+					( innerBlocksData[ 0 ].name === 'core/button' ||
+						innerBlocksData[ 0 ].name === 'jetpack/button' );
+
 				const title = getEditedPostAttribute( 'title' );
 				const authorId = getEditedPostAttribute( 'author' );
 				const authorEmail = authorId && getUser( authorId )?.email;
@@ -245,8 +252,7 @@ function JetpackContactFormEdit( {
 					hasAnyInnerBlocks: innerBlocksData.length > 0,
 					postAuthorEmail: authorEmail,
 					selectedBlockClientId: selectedStepBlockId,
-					onlySubmitBlock:
-						innerBlocksData.length === 1 && innerBlocksData[ 0 ].name === 'jetpack/button',
+					onlySubmitBlock: isSingleButtonBlock,
 				};
 			},
 			[ clientId ]
@@ -344,7 +350,7 @@ function JetpackContactFormEdit( {
 			// Find the submit button
 			const submitButtonIndex = currentInnerBlocks.findIndex(
 				block =>
-					block.name === 'jetpack/button' &&
+					( block.name === 'core/button' || block.name === 'jetpack/button' ) &&
 					( block.attributes?.customVariant === 'submit' || block.attributes?.element === 'button' )
 			);
 
@@ -479,7 +485,9 @@ function JetpackContactFormEdit( {
 
 		// Helper functions
 		const findButtonBlock = () => {
-			const buttonIndex = currentInnerBlocks.findIndex( block => block.name === 'jetpack/button' );
+			const buttonIndex = currentInnerBlocks.findIndex(
+				block => block.name === 'core/buttons' || block.name === 'jetpack/button'
+			);
 			return buttonIndex !== -1
 				? {
 						block: currentInnerBlocks[ buttonIndex ],
@@ -720,9 +728,11 @@ function JetpackContactFormEdit( {
 		// Ensure we have a submit button at the end of the form.
 		if ( ! finalSubmitButton ) {
 			// Create a fresh submit button if none was found.
-			finalSubmitButton = createBlock( 'jetpack/button', {
-				element: 'button',
+			finalSubmitButton = createBlock( 'core/button', {
 				text: __( 'Submit', 'jetpack-forms' ),
+				type: 'submit',
+				tagName: 'button',
+				className: 'wp-block-jetpack-button jetpack-form-submit-button',
 			} );
 		}
 

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -54,17 +54,20 @@
 			flex: 1 1 100%;
 		}
 
+		// .wp-block:not(.wp-block-buttons):not(.wp-block-button) {
 		.wp-block {
-			flex: 1 1 100%;
+			flex: 0 0 100%;
 			margin-top: 0;
 			margin-bottom: 0;
 			max-width: 100%;
 
+			&.wp-block-button,
 			&.wp-block-jetpack-button {
 				flex: 0 0 auto;
 				min-height: var(--jetpack--contact-form--input-height, auto);
 				align-self: flex-end;
 				line-height: 1;
+				margin-block: 0;
 
 				.wp-block-button__link {
 					min-height: var(--jetpack--contact-form--input-height, auto);
@@ -86,6 +89,7 @@
 				box-sizing: border-box;
 			}
 
+			&.wp-block-button__width-25,
 			&.jetpack-field__width-25 {
 				flex: 1 1 calc(25% - calc(var(--wp--style--block-gap, 1.5rem) * 1));
 				max-width: 25%;
@@ -96,16 +100,30 @@
 				max-width: 33.33%;
 			}
 
+			&.wp-block-button__width-50,
 			&.jetpack-field__width-50 {
 				flex: 1 1 calc(50% - calc(var(--wp--style--block-gap, 1.5rem) * 1));
 				max-width: 50%;
 			}
 
+			&.wp-block-button__width-75,
 			&.jetpack-field__width-75 {
 				flex: 1 1 calc(75% - calc(var(--wp--style--block-gap, 1.5rem) * 1));
 				max-width: 75%;
 			}
 
+			&.wp-block-button__width-100 {
+				flex: 1 1 100%;
+				max-width: 100%;
+			}
+
+			&.wp-block-button.has-custom-width {
+
+				.wp-block-button__link {
+					width: 100%;
+				}
+			}
+
 			&.jetpack-field__width-auto {
 				flex: 1 1 0;
 			}

projects/packages/forms/src/blocks/contact-form/variations.js

@@ -66,11 +66,13 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
-					text: __( 'Contact Us', 'jetpack-forms' ),
+					text: __( 'Contact us', 'jetpack-forms' ),
+					tagName: 'button',
+					className: 'jetpack-form-submit-button',
+					type: 'submit',
 					element: 'button',
-					lock: { remove: true },
 				},
 			],
 		],
@@ -145,11 +147,13 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
 					text: __( 'Send RSVP', 'jetpack-forms' ),
+					tagName: 'button',
+					className: 'jetpack-form-submit-button',
+					type: 'submit',
 					element: 'button',
-					lock: { remove: true },
 				},
 			],
 		],
@@ -298,11 +302,13 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
 					text: __( 'Send', 'jetpack-forms' ),
+					tagName: 'button',
+					className: 'jetpack-form-submit-button',
+					type: 'submit',
 					element: 'button',
-					lock: { remove: true },
 				},
 			],
 		],
@@ -487,11 +493,13 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
 					text: __( 'Book appointment', 'jetpack-forms' ),
+					tagName: 'button',
+					className: 'jetpack-form-submit-button',
+					type: 'submit',
 					element: 'button',
-					lock: { remove: true },
 				},
 			],
 		],
@@ -633,11 +641,13 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
-					text: __( 'Send Feedback', 'jetpack-forms' ),
+					text: __( 'Send feedback', 'jetpack-forms' ),
+					tagName: 'button',
+					className: 'jetpack-form-submit-button',
+					type: 'submit',
 					element: 'button',
-					lock: { remove: true },
 				},
 			],
 		],
@@ -956,11 +966,13 @@ const variations = [
 				[ [ 'jetpack/label' ], [ 'jetpack/input', { type: 'checkbox' } ] ],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
 					text: __( 'Subscribe', 'jetpack-forms' ),
+					tagName: 'button',
+					className: 'jetpack-form-submit-button',
+					type: 'submit',
 					element: 'button',
-					lock: { remove: true },
 				},
 			],
 		],

projects/packages/forms/src/blocks/dropzone/index.js

@@ -11,7 +11,7 @@ const settings = {
 	description: __( 'A dropzone for file uploads.', 'jetpack-forms' ),
 	parent: [ 'jetpack/field-file' ],
 	allowedBlocks: [
-		'core/buttons',
+		'core/button',
 		'core/heading',
 		'core/image',
 		'core/list',

projects/packages/forms/src/blocks/shared/hooks/use-form-wrapper.js

@@ -25,10 +25,11 @@ export default function useFormWrapper( { attributes, clientId, name } ) {
 				clientId,
 				createBlock( FORM_BLOCK_NAME, {}, [
 					createBlock( name, attributes, getBlocks( clientId ) ),
-					createBlock( 'jetpack/button', {
+					createBlock( 'core/button', {
 						text: __( 'Submit', 'jetpack-forms' ),
-						element: 'button',
-						lock: { remove: true },
+						type: 'submit',
+						tagName: 'button',
+						className: 'wp-block-jetpack-button jetpack-form-submit-button',
 					} ),
 				] )
 			);

projects/packages/forms/src/contact-form/class-contact-form.php

@@ -1069,7 +1069,7 @@ class='{$container_classes_string}'
 			 * @param int $id Contact Form ID.
 			 */
 			$url                     = apply_filters( 'grunion_contact_form_form_action', $url, $GLOBALS['post'], $id, $page );
-			$has_submit_button_block = str_contains( $content, 'wp-block-jetpack-button' );
+			$has_submit_button_block = str_contains( $content, 'wp-block-jetpack-button' ) || str_contains( $content, 'wp-block-button' );
 			$form_classes            = 'contact-form commentsblock';
 			if ( $submission_success ) {
 				$form_classes .= ' submission-success';
@@ -1104,8 +1104,11 @@ class='" . esc_attr( $form_classes ) . "' $form_aria_label
 				$r = preg_replace( '/<div class="wp-block-jetpack-form-step-navigation__wrapper/', self::render_error_wrapper() . ' <div class="wp-block-jetpack-form-step-navigation__wrapper', $r, 1 );
 			} elseif ( $has_submit_button_block && ! $is_single_input_form ) {
 				// Place the error wrapper before the FIRST button block only to avoid duplicates (e.g., navigation buttons in multistep forms).
-				// Replace only the first occurrence.
+				// Replace only the first occurrence for both Jetpack and core Buttons blocks.
 				$r = preg_replace( '/<div class="wp-block-jetpack-button/', self::render_error_wrapper() . ' <div class="wp-block-jetpack-button', $r, 1 );
+				if ( str_contains( $r, 'wp-block-buttons' ) ) {
+					$r = preg_replace( '/<div class="wp-block-buttons/', self::render_error_wrapper() . ' <div class="wp-block-buttons', $r, 1 );
+				}
 			}
 
 			// In new versions of the contact form block the button is an inner block