@wordpress/block-library 7.8.0 → 7.11.0

package/src/navigation/use-navigation-menu.js

@@ -1,12 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseResourcePermissions as useResourcePermissions,
+} from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 export default function useNavigationMenu( ref ) {
+	const permissions = useResourcePermissions( 'navigation', ref );
+
 	return useSelect(
 		( select ) => {
+			const [
+				hasResolvedPermissions,
+				{ canCreate, canUpdate, canDelete, isResolving },
+			] = permissions;
+
 			const {
 				navigationMenus,
 				isResolvingNavigationMenus,
@@ -19,22 +29,6 @@ export default function useNavigationMenu( ref ) {
 				isNavigationMenuMissing,
 			} = selectExistingMenu( select, ref );
 
-			const {
-				canUserCreateNavigationMenu,
-				isResolvingCanUserCreateNavigationMenu,
-				hasResolvedCanUserCreateNavigationMenu,
-			} = selectMenuCreatePermissions( select );
-
-			const {
-				canUserUpdateNavigationMenu,
-				hasResolvedCanUserUpdateNavigationMenu,
-			} = selectMenuUpdatePermissions( select, ref );
-
-			const {
-				canUserDeleteNavigationMenu,
-				hasResolvedCanUserDeleteNavigationMenu,
-			} = selectMenuDeletePermissions( select, ref );
-
 			return {
 				navigationMenus,
 				isResolvingNavigationMenus,
@@ -44,22 +38,26 @@ export default function useNavigationMenu( ref ) {
 				isNavigationMenuResolved,
 				isNavigationMenuMissing,
 
-				canUserCreateNavigationMenu,
-				isResolvingCanUserCreateNavigationMenu,
-				hasResolvedCanUserCreateNavigationMenu,
-
-				canUserUpdateNavigationMenu,
-				hasResolvedCanUserUpdateNavigationMenu,
-
-				canUserDeleteNavigationMenu,
-				hasResolvedCanUserDeleteNavigationMenu,
-
 				canSwitchNavigationMenu: ref
 					? navigationMenus?.length > 1
 					: navigationMenus?.length > 0,
+
+				canUserCreateNavigationMenu: canCreate,
+				isResolvingCanUserCreateNavigationMenu: isResolving,
+				hasResolvedCanUserCreateNavigationMenu: hasResolvedPermissions,
+
+				canUserUpdateNavigationMenu: canUpdate,
+				hasResolvedCanUserUpdateNavigationMenu: ref
+					? hasResolvedPermissions
+					: undefined,
+
+				canUserDeleteNavigationMenu: canDelete,
+				hasResolvedCanUserDeleteNavigationMenu: ref
+					? hasResolvedPermissions
+					: undefined,
 			};
 		},
-		[ ref ]
+		[ ref, permissions ]
 	);
 }
 
@@ -113,58 +111,3 @@ function selectExistingMenu( select, ref ) {
 				: null,
 	};
 }
-
-function selectMenuCreatePermissions( select ) {
-	const { hasFinishedResolution, isResolving, canUser } = select( coreStore );
-
-	const args = [ 'create', 'navigation' ];
-	return {
-		canUserCreateNavigationMenu: !! canUser( ...args ),
-		isResolvingCanUserCreateNavigationMenu: !! isResolving(
-			'canUser',
-			args
-		),
-		hasResolvedCanUserCreateNavigationMenu: !! hasFinishedResolution(
-			'canUser',
-			args
-		),
-	};
-}
-
-function selectMenuUpdatePermissions( select, ref ) {
-	if ( ! ref ) {
-		return {
-			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserUpdateNavigationMenu: false,
-		};
-	}
-
-	const { hasFinishedResolution, canUser } = select( coreStore );
-	const args = [ 'update', 'navigation', ref ];
-	return {
-		canUserUpdateNavigationMenu: !! canUser( ...args ),
-		hasResolvedCanUserUpdateNavigationMenu: !! hasFinishedResolution(
-			'canUser',
-			args
-		),
-	};
-}
-
-function selectMenuDeletePermissions( select, ref ) {
-	if ( ! ref ) {
-		return {
-			canUserDeleteNavigationMenu: false,
-			hasResolvedCanUserDeleteNavigationMenu: false,
-		};
-	}
-
-	const { hasFinishedResolution, canUser } = select( coreStore );
-	const args = [ 'delete', 'navigation', ref ];
-	return {
-		canUserDeleteNavigationMenu: !! canUser( ...args ),
-		hasResolvedCanUserDeleteNavigationMenu: !! hasFinishedResolution(
-			'canUser',
-			args
-		),
-	};
-}

package/src/navigation/view.js

@@ -55,7 +55,7 @@ window.addEventListener( 'load', () => {
 			}
 		} );
 	} );
-	// Close on focus outside.
+	// Close on focus outside or escape key.
 	document.addEventListener( 'keyup', function ( event ) {
 		const submenuBlocks = document.querySelectorAll(
 			'.wp-block-navigation-item.has-child'
@@ -63,6 +63,11 @@ window.addEventListener( 'load', () => {
 		submenuBlocks.forEach( function ( block ) {
 			if ( ! block.contains( event.target ) ) {
 				closeSubmenus( block );
+			} else if ( event.key === 'Escape' ) {
+				const toggle = block.querySelector( '[aria-expanded="true"]' );
+				closeSubmenus( block );
+				// Focus the submenu trigger so focus does not get trapped in the closed submenu.
+				toggle?.focus();
 			}
 		} );
 	} );

package/src/navigation-link/edit.js

@@ -312,7 +312,7 @@ const useIsInvalidLink = ( kind, type, id ) => {
 	return [ isInvalid, isDraft ];
 };
 
-const useMissingText = ( type ) => {
+function getMissingText( type ) {
 	let missingText = '';
 
 	switch ( type ) {
@@ -338,7 +338,7 @@ const useMissingText = ( type ) => {
 	}
 
 	return missingText;
-};
+}
 
 /**
  * Removes HTML from a given string.
@@ -682,7 +682,7 @@ export default function NavigationLinkEdit( {
 		'wp-block-navigation-link__placeholder': ! url || isInvalid || isDraft,
 	} );
 
-	const missingText = useMissingText( type, isInvalid, isDraft );
+	const missingText = getMissingText( type );
 	/* translators: Whether the navigation link is Invalid or a Draft. */
 	const placeholderText = `(${
 		isInvalid ? __( 'Invalid' ) : __( 'Draft' )
@@ -849,6 +849,7 @@ export default function NavigationLinkEdit( {
 							position="bottom center"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchorRef={ listItemRef.current }
+							__unstableShift
 						>
 							<LinkControl
 								hasTextControl

package/src/navigation-link/hooks.js

@@ -9,11 +9,6 @@ import {
 	customPostType,
 } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import fallbackVariations from './fallback-variations';
-
 function getIcon( variationName ) {
 	switch ( variationName ) {
 		case 'post':
@@ -34,15 +29,6 @@ export function enhanceNavigationLinkVariations( settings, name ) {
 		return settings;
 	}
 
-	// Fallback handling may be deleted after supported WP ranges understand the `variations`
-	// property when passed to register_block_type in index.php.
-	if ( ! settings.variations ) {
-		return {
-			...settings,
-			variations: fallbackVariations,
-		};
-	}
-
 	// Otherwise decorate server passed variations with an icon and isActive function.
 	if ( settings.variations ) {
 		const isActive = ( blockAttributes, variationAttributes ) => {

package/src/navigation-link/index.js

@@ -88,7 +88,7 @@ export const settings = {
 	transforms,
 };
 
-// importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects
+// importing this file includes side effects. This is added in block-library/package.json under sideEffects
 addFilter(
 	'blocks.registerBlockType',
 	'core/navigation-link',

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -1,98 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`hooks enhanceNavigationLinkVariations adds fallback variations when variations are missing 1`] = `
-Object {
-  "name": "core/navigation-link",
-  "one": "one",
-  "three": "three",
-  "two": "two",
-  "variations": Array [
-    Object {
-      "attributes": Object {},
-      "description": "A link to a custom URL.",
-      "isActive": [Function],
-      "isDefault": true,
-      "name": "link",
-      "title": "Custom Link",
-    },
-    Object {
-      "attributes": Object {
-        "kind": "post-type",
-        "type": "post",
-      },
-      "description": "A link to a post.",
-      "icon": <SVG
-        viewBox="0 0 24 24"
-        xmlns="https://www.w3.org/2000/svg"
-      >
-        <Path
-          d="M4 20h16v-1.5H4V20zm0-4.8h16v-1.5H4v1.5zm0-6.4v1.5h16V8.8H4zM16 4H4v1.5h12V4z"
-        />
-      </SVG>,
-      "isActive": [Function],
-      "name": "post",
-      "title": "Post Link",
-    },
-    Object {
-      "attributes": Object {
-        "kind": "post-type",
-        "type": "page",
-      },
-      "description": "A link to a page.",
-      "icon": <SVG
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <Path
-          d="M7 5.5h10a.5.5 0 01.5.5v12a.5.5 0 01-.5.5H7a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM17 4H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2zm-1 3.75H8v1.5h8v-1.5zM8 11h8v1.5H8V11zm6 3.25H8v1.5h6v-1.5z"
-        />
-      </SVG>,
-      "isActive": [Function],
-      "name": "page",
-      "title": "Page Link",
-    },
-    Object {
-      "attributes": Object {
-        "kind": "taxonomy",
-        "type": "category",
-      },
-      "description": "A link to a category.",
-      "icon": <SVG
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <Path
-          clipRule="evenodd"
-          d="M6 5.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm11-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM13 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V6zm5 8.5h-3a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5zM15 13a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm-9 1.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5zM4 15a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3z"
-          fillRule="evenodd"
-        />
-      </SVG>,
-      "isActive": [Function],
-      "name": "category",
-      "title": "Category Link",
-    },
-    Object {
-      "attributes": Object {
-        "kind": "taxonomy",
-        "type": "tag",
-      },
-      "description": "A link to a tag.",
-      "icon": <SVG
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <Path
-          d="M20.1 11.2l-6.7-6.7c-.1-.1-.3-.2-.5-.2H5c-.4-.1-.8.3-.8.7v7.8c0 .2.1.4.2.5l6.7 6.7c.2.2.5.4.7.5s.6.2.9.2c.3 0 .6-.1.9-.2.3-.1.5-.3.8-.5l5.6-5.6c.4-.4.7-1 .7-1.6.1-.6-.2-1.2-.6-1.6zM19 13.4L13.4 19c-.1.1-.2.1-.3.2-.2.1-.4.1-.6 0-.1 0-.2-.1-.3-.2l-6.5-6.5V5.8h6.8l6.5 6.5c.2.2.2.4.2.6 0 .1 0 .3-.2.5zM9 8c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z"
-        />
-      </SVG>,
-      "isActive": [Function],
-      "name": "tag",
-      "title": "Tag Link",
-    },
-  ],
-}
-`;
-
 exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and isActive functions 1`] = `
 Object {
   "extraProp": "extraProp",

package/src/navigation-link/test/hooks.js

@@ -26,18 +26,6 @@ describe( 'hooks', () => {
 				three: 'three',
 			} );
 		} );
-		it( 'adds fallback variations when variations are missing', () => {
-			const updatedSettings = enhanceNavigationLinkVariations(
-				{
-					name: 'core/navigation-link',
-					one: 'one',
-					two: 'two',
-					three: 'three',
-				},
-				'core/navigation-link'
-			);
-			expect( updatedSettings ).toMatchSnapshot();
-		} );
 		it( 'enhances variations with icon and isActive functions', () => {
 			const updatedSettings = enhanceNavigationLinkVariations(
 				{

package/src/navigation-submenu/edit.js

@@ -634,6 +634,7 @@ export default function NavigationSubmenuEdit( {
 							position="bottom center"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchorRef={ listItemRef.current }
+							__unstableShift
 						>
 							<LinkControl
 								className="wp-block-navigation-link__inline-link-input"

package/src/navigation-submenu/view.js

@@ -49,7 +49,7 @@ document.addEventListener( 'click', function ( event ) {
 		}
 	} );
 } );
-// Close on focus outside.
+// Close on focus outside or escape key.
 document.addEventListener( 'keyup', function ( event ) {
 	const submenuBlocks = document.querySelectorAll(
 		'.wp-block-navigation-submenu'
@@ -57,6 +57,11 @@ document.addEventListener( 'keyup', function ( event ) {
 	submenuBlocks.forEach( ( block ) => {
 		if ( ! block.contains( event.target ) ) {
 			closeSubmenus( block );
+		} else if ( event.key === 'Escape' ) {
+			const toggle = block.querySelector( '[aria-expanded="true"]' );
+			closeSubmenus( block );
+			// Focus the submenu trigger so focus does not get trapped in the closed submenu.
+			toggle?.focus();
 		}
 	} );
 } );

package/src/nextpage/edit.js

@@ -7,9 +7,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 export default function NextPageEdit() {
 	return (
 		<div { ...useBlockProps() }>
-			<div className="wp-block-nextpage">
-				<span>{ __( 'Page break' ) }</span>
-			</div>
+			<span>{ __( 'Page break' ) }</span>
 		</div>
 	);
 }

package/src/page-list/edit.js

@@ -76,11 +76,9 @@ export default function PageListEdit( { context, clientId } ) {
 
 			{ hasResolvedPages && totalPages === null && (
 				<div { ...blockProps }>
-					<div { ...blockProps }>
-						<Notice status={ 'warning' } isDismissible={ false }>
-							{ __( 'Page List: Cannot retrieve Pages.' ) }
-						</Notice>
-					</div>
+					<Notice status={ 'warning' } isDismissible={ false }>
+						{ __( 'Page List: Cannot retrieve Pages.' ) }
+					</Notice>
 				</div>
 			) }
 
@@ -105,6 +103,14 @@ export default function PageListEdit( { context, clientId } ) {
 
 function useFrontPageId() {
 	return useSelect( ( select ) => {
+		const canReadSettings = select( coreStore ).canUser(
+			'read',
+			'settings'
+		);
+		if ( ! canReadSettings ) {
+			return undefined;
+		}
+
 		const site = select( coreStore ).getEntityRecord( 'root', 'site' );
 		return site?.show_on_front === 'page' && site?.page_on_front;
 	}, [] );
@@ -119,6 +125,7 @@ function usePageData() {
 			order: 'asc',
 			_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
 			per_page: -1,
+			context: 'view',
 		}
 	);
 

package/src/paragraph/edit.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { __, _x, isRTL } from '@wordpress/i18n';
 import {
-	ToolbarDropdownMenu,
+	ToolbarButton,
 	ToggleControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -33,19 +33,13 @@ const name = 'core/paragraph';
 function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
 		isRTL() && (
-			<ToolbarDropdownMenu
-				controls={ [
-					{
-						icon: formatLtr,
-						title: _x( 'Left to right', 'editor button' ),
-						isActive: direction === 'ltr',
-						onClick() {
-							setDirection(
-								direction === 'ltr' ? undefined : 'ltr'
-							);
-						},
-					},
-				] }
+			<ToolbarButton
+				icon={ formatLtr }
+				title={ _x( 'Left to right', 'editor button' ) }
+				isActive={ direction === 'ltr' }
+				onClick={ () => {
+					setDirection( direction === 'ltr' ? undefined : 'ltr' );
+				} }
 			/>
 		)
 	);

package/src/post-comments-form/edit.js

@@ -9,13 +9,9 @@ import classnames from 'classnames';
 import {
 	AlignmentControl,
 	BlockControls,
-	Warning,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
@@ -28,62 +24,13 @@ export default function PostCommentsFormEdit( {
 } ) {
 	const { textAlign } = attributes;
 	const { postId, postType } = context;
-	const [ commentStatus ] = useEntityProp(
-		'postType',
-		postType,
-		'comment_status',
-		postId
-	);
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
 
-	const isSiteEditor = postType === undefined || postId === undefined;
-
-	const { defaultCommentStatus } = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings()
-				.__experimentalDiscussionSettings
-	);
-
-	const postTypeSupportsComments = useSelect( ( select ) =>
-		postType
-			? !! select( coreStore ).getPostType( postType )?.supports.comments
-			: false
-	);
-
-	let warning = false;
-	let showPlaceholder = true;
-
-	if ( ! isSiteEditor && 'open' !== commentStatus ) {
-		if ( 'closed' === commentStatus ) {
-			warning = sprintf(
-				/* translators: 1: Post type (i.e. "post", "page") */
-				__(
-					'Post Comments Form block: Comments on this %s are not allowed.'
-				),
-				postType
-			);
-			showPlaceholder = false;
-		} else if ( ! postTypeSupportsComments ) {
-			warning = sprintf(
-				/* translators: 1: Post type (i.e. "post", "page") */
-				__(
-					'Post Comments Form block: Comments for this post type (%s) are not enabled.'
-				),
-				postType
-			);
-			showPlaceholder = false;
-		} else if ( 'open' !== defaultCommentStatus ) {
-			warning = __(
-				'Post Comments Form block: Comments are not enabled.'
-			);
-			showPlaceholder = false;
-		}
-	}
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -95,9 +42,7 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				{ warning && <Warning>{ warning }</Warning> }
-
-				{ showPlaceholder ? <CommentsForm /> : null }
+				<CommentsForm postId={ postId } postType={ postType } />
 			</div>
 		</>
 	);

package/src/post-comments-form/editor.scss

@@ -1,3 +1,7 @@
 .wp-block-post-comments-form * {
 	pointer-events: none;
+
+	&.block-editor-warning * {
+		pointer-events: auto;
+	}
 }

package/src/post-comments-form/form.js

@@ -6,13 +6,20 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { __experimentalElementButtonClassName } from '@wordpress/block-editor';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import {
+	Warning,
+	store as blockEditorStore,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
 import { useDisabled, useInstanceId } from '@wordpress/compose';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
-const CommentsForm = () => {
+const CommentsFormPlaceholder = () => {
 	const disabledFormRef = useDisabled();
-	const instanceId = useInstanceId( CommentsForm );
+	const instanceId = useInstanceId( CommentsFormPlaceholder );
 
 	return (
 		<div className="comment-respond">
@@ -34,9 +41,8 @@ const CommentsForm = () => {
 						name="submit"
 						type="submit"
 						className={ classnames(
-							'submit',
 							'wp-block-button__link',
-							__experimentalElementButtonClassName
+							__experimentalGetElementClassName( 'button' )
 						) }
 						label={ __( 'Post Comment' ) }
 						value={ __( 'Post Comment' ) }
@@ -47,4 +53,73 @@ const CommentsForm = () => {
 	);
 };
 
+const CommentsForm = ( { postId, postType } ) => {
+	const [ commentStatus, setCommentStatus ] = useEntityProp(
+		'postType',
+		postType,
+		'comment_status',
+		postId
+	);
+
+	const isSiteEditor = postType === undefined || postId === undefined;
+
+	const { defaultCommentStatus } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const postTypeSupportsComments = useSelect( ( select ) =>
+		postType
+			? !! select( coreStore ).getPostType( postType )?.supports.comments
+			: false
+	);
+
+	if ( ! isSiteEditor && 'open' !== commentStatus ) {
+		if ( 'closed' === commentStatus ) {
+			const actions = [
+				<Button
+					key="enableComments"
+					onClick={ () => setCommentStatus( 'open' ) }
+					variant="primary"
+				>
+					{ _x(
+						'Enable comments',
+						'action that affects the current post'
+					) }
+				</Button>,
+			];
+			return (
+				<Warning actions={ actions }>
+					{ __(
+						'Post Comments Form block: Comments are not enabled for this item.'
+					) }
+				</Warning>
+			);
+		} else if ( ! postTypeSupportsComments ) {
+			return (
+				<Warning>
+					{ sprintf(
+						/* translators: 1: Post type (i.e. "post", "page") */
+						__(
+							'Post Comments Form block: Comments are not enabled for this post type (%s).'
+						),
+						postType
+					) }
+				</Warning>
+			);
+		} else if ( 'open' !== defaultCommentStatus ) {
+			return (
+				<Warning>
+					{ __(
+						'Post Comments Form block: Comments are not enabled.'
+					) }
+				</Warning>
+			);
+		}
+	}
+
+	return <CommentsFormPlaceholder />;
+};
+
 export default CommentsForm;

package/src/post-comments-form/index.php

@@ -72,7 +72,7 @@ add_action( 'init', 'register_block_core_post_comments_form' );
  */
 function post_comments_form_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME . '" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}