Switch contact form submit button to core/buttons block

Replaces usage of the custom jetpack/button block with the core/buttons and core/button blocks for submit actions in the contact form. Updates block variations, editor logic, and server-side rendering to support and enhance compatibility with core/buttons, including interactivity attributes and error handling. This change improves alignment with WordPress core blocks and future-proofs the contact form implementation.

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/buttons', array( __CLASS__, 'render_buttons_block' ), 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 );
 
@@ -101,6 +102,55 @@ 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 block HTML.
+	 * @param array  $parsed_block  Parsed block data.
+	 *
+	 * @return string
+	 */
+	public static function render_buttons_block( $content, $parsed_block ) {
+		// We don't need the parsed_block details anymore; suppress unused-variable warning.
+		unset( $parsed_block );
+		// We simply scan the content for our marker class; if absent, return early.
+		if ( ! str_contains( $content, 'jetpack-form-submit-button' ) ) {
+			return $content;
+		}
+
+		if ( ! class_exists( '\WP_HTML_Tag_Processor' ) ) {
+			return $content;
+		}
+
+		$processor = new \WP_HTML_Tag_Processor( $content );
+		$modified  = false;
+
+		// Find wrapper div with marker class.
+		while ( $processor->next_tag( array( 'tag_name' => 'div' ) ) ) {
+			$class_attr = $processor->get_attribute( 'class' );
+			if ( $class_attr && str_contains( $class_attr, 'jetpack-form-submit-button' ) ) {
+				// Ensure interactivity root attribute on wrapper.
+				if ( ! $processor->get_attribute( 'data-wp-interactive' ) ) {
+					$processor->set_attribute( 'data-wp-interactive', 'jetpack/form' );
+				}
+				// Save bookmark to return later.
+				$processor->set_bookmark( 'wrapper' );
+
+				// Dive into its children to find first link or button.
+				if ( $processor->next_tag( array( 'tag_name' => array( 'a', 'button' ) ) ) ) {
+					$processor->set_attribute( 'data-wp-class--is-submitting', 'state.isSubmitting' );
+					$processor->set_attribute( 'data-wp-bind--aria-disabled', 'state.isAriaDisabled' );
+					$modified = true;
+				}
+
+				// Jump back to wrapper to continue outer loop safely.
+				$processor->seek( 'wrapper' );
+			}
+		}
+
+		return $modified ? $processor->get_updated_html() : $content;
+	}
+
 	/**
 	 * 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

@@ -197,11 +197,13 @@ function JetpackContactFormEdit( {
 		[ clientId, steps ]
 	);
 
-	const submitButton = useFindBlockRecursively(
-		clientId,
-		block => block.name === 'jetpack/button'
+	const findButtonsBlock = useCallback(
+		block => block.name === 'core/buttons' || block.name === 'jetpack/button',
+		[]
 	);
 
+	const submitButton = useFindBlockRecursively( clientId, findButtonsBlock );
+
 	const { postTitle, hasAnyInnerBlocks, postAuthorEmail, selectedBlockClientId, onlySubmitBlock } =
 		useSelect(
 			select => {
@@ -222,6 +224,11 @@ function JetpackContactFormEdit( {
 				const { getUser } = select( coreStore );
 				const innerBlocksData = getBlocks( clientId );
 
+				const isSingleButtonBlock =
+					innerBlocksData.length === 1 &&
+					( innerBlocksData[ 0 ].name === 'core/buttons' ||
+						innerBlocksData[ 0 ].name === 'jetpack/button' );
+
 				const title = getEditedPostAttribute( 'title' );
 				const authorId = getEditedPostAttribute( 'author' );
 				const authorEmail = authorId && getUser( authorId )?.email;
@@ -231,8 +238,7 @@ function JetpackContactFormEdit( {
 					hasAnyInnerBlocks: innerBlocksData.length > 0,
 					postAuthorEmail: authorEmail,
 					selectedBlockClientId: selectedStepBlockId,
-					onlySubmitBlock:
-						innerBlocksData.length === 1 && innerBlocksData[ 0 ].name === 'jetpack/button',
+					onlySubmitBlock: isSingleButtonBlock,
 				};
 			},
 			[ clientId ]
@@ -330,7 +336,7 @@ function JetpackContactFormEdit( {
 			// Find the submit button
 			const submitButtonIndex = currentInnerBlocks.findIndex(
 				block =>
-					block.name === 'jetpack/button' &&
+					( block.name === 'core/buttons' || block.name === 'jetpack/button' ) &&
 					( block.attributes?.customVariant === 'submit' || block.attributes?.element === 'button' )
 			);
 
@@ -465,7 +471,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 ],
@@ -706,10 +714,14 @@ 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',
-				text: __( 'Submit', 'jetpack-forms' ),
-			} );
+			finalSubmitButton = createBlock( 'core/buttons', {}, [
+				createBlock( 'core/button', {
+					text: __( 'Submit', 'jetpack-forms' ),
+					type: 'submit',
+					tagName: 'button',
+					className: 'wp-block-jetpack-button jetpack-form-submit-button',
+				} ),
+			] );
 		}
 
 		const finalBlocks = [ ...flattenedInnerBlocks, finalSubmitButton ];

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

@@ -55,7 +55,6 @@
 		}
 
 		.wp-block {
-			flex: 1 1 100%;
 			margin-top: 0;
 			margin-bottom: 0;
 			max-width: 100%;

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

@@ -66,12 +66,20 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
-				{
-					text: __( 'Contact Us', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
-				},
+				'core/buttons',
+				{},
+				[
+					[
+						'core/button',
+						{
+							text: __( 'Contact Us', 'jetpack-forms' ),
+							tagName: 'button',
+							className: 'jetpack-form-submit-button',
+							type: 'submit',
+							element: 'button',
+						},
+					],
+				],
 			],
 		],
 		attributes: {
@@ -145,12 +153,20 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
-				{
-					text: __( 'Send RSVP', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
-				},
+				'core/buttons',
+				{},
+				[
+					[
+						'core/button',
+						{
+							text: __( 'Send RSVP', 'jetpack-forms' ),
+							tagName: 'button',
+							className: 'jetpack-form-submit-button',
+							type: 'submit',
+							element: 'button',
+						},
+					],
+				],
 			],
 		],
 		attributes: {
@@ -298,12 +314,20 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
-				{
-					text: __( 'Send', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
-				},
+				'core/buttons',
+				{},
+				[
+					[
+						'core/button',
+						{
+							text: __( 'Send', 'jetpack-forms' ),
+							tagName: 'button',
+							className: 'jetpack-form-submit-button',
+							type: 'submit',
+							element: 'button',
+						},
+					],
+				],
 			],
 		],
 		attributes: {
@@ -487,12 +511,20 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
-				{
-					text: __( 'Book appointment', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
-				},
+				'core/buttons',
+				{},
+				[
+					[
+						'core/button',
+						{
+							text: __( 'Book appointment', 'jetpack-forms' ),
+							tagName: 'button',
+							className: 'jetpack-form-submit-button',
+							type: 'submit',
+							element: 'button',
+						},
+					],
+				],
 			],
 		],
 		attributes: {
@@ -633,12 +665,20 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
-				{
-					text: __( 'Send Feedback', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
-				},
+				'core/buttons',
+				{},
+				[
+					[
+						'core/button',
+						{
+							text: __( 'Send Feedback', 'jetpack-forms' ),
+							tagName: 'button',
+							className: 'jetpack-form-submit-button',
+							type: 'submit',
+							element: 'button',
+						},
+					],
+				],
 			],
 		],
 		attributes: {
@@ -956,12 +996,20 @@ const variations = [
 				[ [ 'jetpack/label' ], [ 'jetpack/input', { type: 'checkbox' } ] ],
 			],
 			[
-				'jetpack/button',
-				{
-					text: __( 'Subscribe', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
-				},
+				'core/buttons',
+				{},
+				[
+					[
+						'core/button',
+						{
+							text: __( 'Subscribe', 'jetpack-forms' ),
+							tagName: 'button',
+							className: 'jetpack-form-submit-button',
+							type: 'submit',
+							element: 'button',
+						},
+					],
+				],
 			],
 		],
 		attributes: {},

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

@@ -1049,7 +1049,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-buttons' );
 			$form_classes            = 'contact-form commentsblock';
 			if ( $submission_success ) {
 				$form_classes .= ' submission-success';
@@ -1084,8 +1084,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