Forms: replace jetpack buttons with core button

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/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/button' || block.name === 'jetpack/button'
+			);
 			return buttonIndex !== -1
 				? {
 						block: currentInnerBlocks[ buttonIndex ],
@@ -720,9 +728,10 @@ 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',
 			} );
 		}
 

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

@@ -55,16 +55,18 @@
 		}
 
 		.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 +88,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 +99,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,11 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
-					text: __( 'Contact Us', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
+					text: __( 'Contact us', 'jetpack-forms' ),
+					tagName: 'button',
+					type: 'submit',
 				},
 			],
 		],
@@ -145,11 +145,11 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
 					text: __( 'Send RSVP', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
+					tagName: 'button',
+					type: 'submit',
 				},
 			],
 		],
@@ -212,10 +212,10 @@ const variations = [
 					],
 				},
 				{
-					name: 'jetpack/button',
+					name: 'core/button',
 					attributes: {
 						text: __( 'Send RSVP', 'jetpack-forms' ),
-						element: 'button',
+						tagName: 'button',
 						lock: { remove: true },
 					},
 				},
@@ -298,11 +298,11 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
 					text: __( 'Send', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
+					tagName: 'button',
+					type: 'submit',
 				},
 			],
 		],
@@ -394,10 +394,10 @@ const variations = [
 					],
 				},
 				{
-					name: 'jetpack/button',
+					name: 'core/button',
 					attributes: {
 						text: __( 'Send', 'jetpack-forms' ),
-						element: 'button',
+						tagName: 'button',
 						lock: { remove: true },
 					},
 				},
@@ -487,11 +487,11 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
 					text: __( 'Book appointment', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
+					tagName: 'button',
+					type: 'submit',
 				},
 			],
 		],
@@ -567,10 +567,10 @@ const variations = [
 					],
 				},
 				{
-					name: 'jetpack/button',
+					name: 'core/button',
 					attributes: {
 						text: __( 'Book appointment', 'jetpack-forms' ),
-						element: 'button',
+						tagName: 'button',
 						lock: { remove: true },
 					},
 				},
@@ -633,11 +633,11 @@ const variations = [
 				],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
-					text: __( 'Send Feedback', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
+					text: __( 'Send feedback', 'jetpack-forms' ),
+					tagName: 'button',
+					type: 'submit',
 				},
 			],
 		],
@@ -683,10 +683,10 @@ const variations = [
 					],
 				},
 				{
-					name: 'jetpack/button',
+					name: 'core/button',
 					attributes: {
 						text: __( 'Send Feedback', 'jetpack-forms' ),
-						element: 'button',
+						tagName: 'button',
 						lock: { remove: true },
 					},
 				},
@@ -888,9 +888,9 @@ const variations = [
 				{ layout: { type: 'flex', justifyContent: 'right' } },
 				[
 					[
-						'jetpack/button',
+						'core/button',
 						{
-							element: 'button',
+							tagName: 'button',
 							uniqueId: 'previous-step',
 							customVariant: 'previous',
 							text: __( '← Back', 'jetpack-forms' ),
@@ -899,19 +899,19 @@ const variations = [
 						},
 					],
 					[
-						'jetpack/button',
+						'core/button',
 						{
-							element: 'button',
+							tagName: 'button',
 							uniqueId: 'next-step',
 							customVariant: 'next',
 							text: __( 'Next →', 'jetpack-forms' ),
 							metaName: __( 'Next button', 'jetpack-forms' ),
 						},
 					],
 					[
-						'jetpack/button',
+						'core/button',
 						{
-							element: 'button',
+							tagName: 'button',
 							uniqueId: 'submit-step',
 							customVariant: 'submit',
 							text: __( 'Submit', 'jetpack-forms' ),
@@ -956,11 +956,11 @@ const variations = [
 				[ [ 'jetpack/label' ], [ 'jetpack/input', { type: 'checkbox' } ] ],
 			],
 			[
-				'jetpack/button',
+				'core/button',
 				{
 					text: __( 'Subscribe', 'jetpack-forms' ),
-					element: 'button',
-					lock: { remove: true },
+					tagName: 'button',
+					type: 'submit',
 				},
 			],
 		],
@@ -992,10 +992,10 @@ const variations = [
 					],
 				},
 				{
-					name: 'jetpack/button',
+					name: 'core/button',
 					attributes: {
 						text: __( 'Subscribe', 'jetpack-forms' ),
-						element: 'button',
+						tagName: '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,10 @@ 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',
 					} ),
 				] )
 			);