@wordpress/block-library 7.18.0 → 7.19.0

package/src/block/test/edit.native.js

@@ -78,14 +78,14 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByA11yLabel, getByTestId, getByText } =
+		const { getByLabelText, getByTestId, getByText } =
 			await initializeEditor( {
 				initialHtml: '',
 				capabilities: { reusableBlock: true },
 			} );
 
 		// Open the inserter menu.
-		fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
+		fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) );
 
 		// Navigate to reusable tab.
 		const reusableSegment = await waitFor( () => getByText( 'Reusable' ) );
@@ -116,7 +116,7 @@ describe( 'Reusable block', () => {
 
 		// Get the reusable block.
 		const reusableBlock = await waitFor( () =>
-			getByA11yLabel( /Reusable block Block\. Row 1/ )
+			getByLabelText( /Reusable block Block\. Row 1/ )
 		);
 
 		expect( reusableBlock ).toBeDefined();
@@ -128,12 +128,12 @@ describe( 'Reusable block', () => {
 		const id = 3;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		const reusableBlock = await waitFor( () =>
-			getByA11yLabel( /Reusable block Block\. Row 1/ )
+			getByLabelText( /Reusable block Block\. Row 1/ )
 		);
 
 		const blockDeleted = await waitFor( () =>
@@ -163,12 +163,12 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		const reusableBlock = await waitFor( () =>
-			getByA11yLabel( /Reusable block Block\. Row 1/ )
+			getByLabelText( /Reusable block Block\. Row 1/ )
 		);
 
 		const innerBlockListWrapper = await waitFor( () =>
@@ -186,7 +186,7 @@ describe( 'Reusable block', () => {
 		} );
 
 		const headingInnerBlock = await waitFor( () =>
-			within( reusableBlock ).getByA11yLabel(
+			within( reusableBlock ).getByLabelText(
 				'Heading Block. Row 1. Level 2. First Reusable block'
 			)
 		);

package/src/button/block.json

@@ -9,6 +9,9 @@
 	"keywords": [ "link" ],
 	"textdomain": "default",
 	"attributes": {
+		"textAlign": {
+			"type": "string"
+		},
 		"url": {
 			"type": "string",
 			"source": "attribute",
@@ -56,7 +59,7 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true,
+		"align": false,
 		"alignWide": false,
 		"color": {
 			"__experimentalSkipSerialization": true,

package/src/button/deprecated.js

@@ -51,6 +51,20 @@ const migrateBorderRadius = ( attributes ) => {
 	};
 };
 
+function migrateAlign( attributes ) {
+	if ( ! attributes.align ) {
+		return attributes;
+	}
+	const { align, ...otherAttributes } = attributes;
+	return {
+		...otherAttributes,
+		className: classnames(
+			otherAttributes.className,
+			`align${ attributes.align }`
+		),
+	};
+}
+
 const migrateCustomColorsAndGradients = ( attributes ) => {
 	if (
 		! attributes.customTextColor &&
@@ -780,10 +794,12 @@ const deprecated = [
 		isEligible: ( attributes ) =>
 			!! attributes.customTextColor ||
 			!! attributes.customBackgroundColor ||
-			!! attributes.customGradient,
+			!! attributes.customGradient ||
+			!! attributes.align,
 		migrate: compose(
 			migrateBorderRadius,
-			migrateCustomColorsAndGradients
+			migrateCustomColorsAndGradients,
+			migrateAlign
 		),
 		save( { attributes } ) {
 			const {

package/src/button/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import {
 	Button,
 	ButtonGroup,
@@ -17,6 +17,7 @@ import {
 	Popover,
 } from '@wordpress/components';
 import {
+	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	RichText,
@@ -76,14 +77,8 @@ function ButtonEdit( props ) {
 		onReplace,
 		mergeBlocks,
 	} = props;
-	const { linkTarget, placeholder, rel, style, text, url, width } =
+	const { textAlign, linkTarget, placeholder, rel, style, text, url, width } =
 		attributes;
-	const onSetLinkRel = useCallback(
-		( value ) => {
-			setAttributes( { rel: value } );
-		},
-		[ setAttributes ]
-	);
 
 	function onToggleOpenInNewTab( value ) {
 		const newLinkTarget = value ? '_blank' : undefined;
@@ -176,6 +171,7 @@ function ButtonEdit( props ) {
 						colorProps.className,
 						borderProps.className,
 						{
+							[ `has-text-align-${ textAlign }` ]: textAlign,
 							// For backwards compatibility add style that isn't
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
@@ -199,6 +195,12 @@ function ButtonEdit( props ) {
 				/>
 			</div>
 			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
 				{ ! isURLSet && (
 					<ToolbarButton
 						name="link"
@@ -262,7 +264,7 @@ function ButtonEdit( props ) {
 				<TextControl
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
-					onChange={ onSetLinkRel }
+					onChange={ ( newRel ) => setAttributes( { rel: newRel } ) }
 				/>
 			</InspectorControls>
 		</>

package/src/button/save.js

@@ -16,8 +16,17 @@ import {
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
-	const { fontSize, linkTarget, rel, style, text, title, url, width } =
-		attributes;
+	const {
+		textAlign,
+		fontSize,
+		linkTarget,
+		rel,
+		style,
+		text,
+		title,
+		url,
+		width,
+	} = attributes;
 
 	if ( ! text ) {
 		return null;
@@ -31,6 +40,7 @@ export default function save( { attributes, className } ) {
 		colorProps.className,
 		borderProps.className,
 		{
+			[ `has-text-align-${ textAlign }` ]: textAlign,
 			// For backwards compatibility add style that isn't provided via
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,

package/src/buttons/test/edit.native.js

@@ -50,12 +50,12 @@ describe( 'Buttons block', () => {
 			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px" >Hello</a></div>
 			<!-- /wp:button --></div>
 			<!-- /wp:buttons -->`;
-			const { getByA11yLabel } = await initializeEditor( {
+			const { getByLabelText } = await initializeEditor( {
 				initialHtml,
 			} );
 
 			const buttonsBlock = await waitFor( () =>
-				getByA11yLabel( /Buttons Block\. Row 1/ )
+				getByLabelText( /Buttons Block\. Row 1/ )
 			);
 			fireEvent.press( buttonsBlock );
 
@@ -73,17 +73,17 @@ describe( 'Buttons block', () => {
 			} );
 
 			const buttonInnerBlock = await waitFor( () =>
-				within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ )
+				within( buttonsBlock ).getByLabelText( /Button Block\. Row 1/ )
 			);
 			fireEvent.press( buttonInnerBlock );
 
 			const settingsButton = await waitFor( () =>
-				getByA11yLabel( 'Open Settings' )
+				getByLabelText( 'Open Settings' )
 			);
 			fireEvent.press( settingsButton );
 
 			const radiusStepper = await waitFor( () =>
-				getByA11yLabel( /Border Radius/ )
+				getByLabelText( /Border Radius/ )
 			);
 
 			const incrementButton = await waitFor( () =>
@@ -98,7 +98,7 @@ describe( 'Buttons block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
-			const { getByA11yLabel } = screen;
+			const { getByLabelText } = screen;
 
 			// Get block
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
@@ -126,13 +126,13 @@ describe( 'Buttons block', () => {
 
 			// Check for new button
 			const secondButtonBlock = await waitFor( () =>
-				within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 2/ )
+				within( buttonsBlock ).getByLabelText( /Button Block\. Row 2/ )
 			);
 			expect( secondButtonBlock ).toBeVisible();
 
 			// Add a Paragraph block using the empty placeholder at the bottom
 			const paragraphPlaceholder = await waitFor( () =>
-				getByA11yLabel( 'Add paragraph block' )
+				getByLabelText( 'Add paragraph block' )
 			);
 			fireEvent.press( paragraphPlaceholder );
 
@@ -149,9 +149,9 @@ describe( 'Buttons block', () => {
 				initialHtml: BUTTONS_HTML,
 			} );
 			const {
-				getByA11yLabel,
+				getByLabelText,
 				getByTestId,
-				queryAllByA11yLabel,
+				queryAllByLabelText,
 				getByText,
 			} = screen;
 
@@ -176,7 +176,7 @@ describe( 'Buttons block', () => {
 			fireEvent.press( buttonBlock );
 
 			// Open the block inserter
-			fireEvent.press( getByA11yLabel( 'Add block' ) );
+			fireEvent.press( getByLabelText( 'Add block' ) );
 
 			const blockList = getByTestId( 'InserterUI-Blocks' );
 			// onScroll event used to force the FlatList to render all items
@@ -190,7 +190,7 @@ describe( 'Buttons block', () => {
 
 			// Check the Add block here placeholder is not visible
 			const addBlockHerePlaceholders =
-				queryAllByA11yLabel( 'ADD BLOCK HERE' );
+				queryAllByLabelText( 'ADD BLOCK HERE' );
 			expect( addBlockHerePlaceholders.length ).toBe( 0 );
 
 			// Add a new Button block
@@ -201,7 +201,7 @@ describe( 'Buttons block', () => {
 				rowIndex: 2,
 			} );
 			const secondButtonInput =
-				within( secondButtonBlock ).getByA11yLabel(
+				within( secondButtonBlock ).getByLabelText(
 					'Text input. Empty'
 				);
 			changeTextOfRichText( secondButtonInput, 'Hello!' );
@@ -214,7 +214,7 @@ describe( 'Buttons block', () => {
 				const screen = await initializeEditor( {
 					initialHtml: BUTTONS_HTML,
 				} );
-				const { getByA11yLabel } = screen;
+				const { getByLabelText } = screen;
 
 				// Get block
 				const buttonsBlock = await getBlock( screen, 'Buttons' );
@@ -236,13 +236,13 @@ describe( 'Buttons block', () => {
 				fireEvent.press( buttonBlock );
 
 				// Open block actions menu
-				const blockActionsButton = getByA11yLabel(
+				const blockActionsButton = getByLabelText(
 					/Open Block Actions Menu/
 				);
 				fireEvent.press( blockActionsButton );
 
 				// Delete block
-				const deleteButton = getByA11yLabel( /Remove block/ );
+				const deleteButton = getByLabelText( /Remove block/ );
 				fireEvent.press( deleteButton );
 
 				expect( getEditorHtml() ).toMatchSnapshot();
@@ -260,17 +260,17 @@ describe( 'Buttons block', () => {
 				const initialHtml = `<!-- wp:buttons -->
 				<div class="wp-block-buttons"><!-- wp:button /--></div>
 				<!-- /wp:buttons -->`;
-				const { getByA11yLabel, getByText } = await initializeEditor( {
+				const { getByLabelText, getByText } = await initializeEditor( {
 					initialHtml,
 				} );
 
 				const block = await waitFor( () =>
-					getByA11yLabel( /Buttons Block\. Row 1/ )
+					getByLabelText( /Buttons Block\. Row 1/ )
 				);
 				fireEvent.press( block );
 
 				fireEvent.press(
-					getByA11yLabel( 'Change items justification' )
+					getByLabelText( 'Change items justification' )
 				);
 
 				// Select alignment option.

package/src/columns/test/edit.native.js

@@ -75,7 +75,7 @@ describe( 'Columns block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
-			const { getByA11yLabel } = screen;
+			const { getByLabelText } = screen;
 
 			// Get block
 			const columnsBlock = await getBlock( screen, 'Columns' );
@@ -85,7 +85,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Update the number of columns by adding one
-			const columnsControl = getByA11yLabel( /Number of columns/ );
+			const columnsControl = getByLabelText( /Number of columns/ );
 			fireEvent( columnsControl, 'accessibilityAction', {
 				nativeEvent: { actionName: 'increment' },
 			} );
@@ -97,7 +97,7 @@ describe( 'Columns block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
-			const { getByA11yLabel } = screen;
+			const { getByLabelText } = screen;
 
 			// Wait for the block to be created.
 			const columnsBlock = await getBlock( screen, 'Columns' );
@@ -107,7 +107,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Update the number of columns by removing one
-			const columnsControl = getByA11yLabel( /Number of columns/ );
+			const columnsControl = getByLabelText( /Number of columns/ );
 			fireEvent( columnsControl, 'accessibilityAction', {
 				nativeEvent: { actionName: 'decrement' },
 			} );
@@ -117,7 +117,7 @@ describe( 'Columns block', () => {
 
 		it( 'reaches the minimum limit of number of column blocks', async () => {
 			const screen = await initializeEditor();
-			const { getByA11yLabel, getByTestId } = screen;
+			const { getByLabelText, getByTestId } = screen;
 
 			// Add block
 			await addBlock( screen, 'Columns' );
@@ -131,7 +131,7 @@ describe( 'Columns block', () => {
 			const blockVariationModal = getByTestId( 'block-variation-modal' );
 			await waitFor( () => blockVariationModal.props.isVisible );
 			const threeColumnLayout =
-				within( blockVariationModal ).getByA11yLabel(
+				within( blockVariationModal ).getByLabelText(
 					/33 \/ 33 \/ 33 block/
 				);
 			fireEvent.press( threeColumnLayout );
@@ -144,7 +144,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Update the number of columns by adding one
-			const columnsControl = getByA11yLabel( /Number of columns/ );
+			const columnsControl = getByLabelText( /Number of columns/ );
 			fireEvent( columnsControl, 'accessibilityAction', {
 				nativeEvent: { actionName: 'increment' },
 			} );
@@ -164,7 +164,7 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
@@ -175,11 +175,11 @@ describe( 'Columns block', () => {
 		fireEvent.press( firstColumnBlock );
 
 		// Open block actions menu
-		const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		fireEvent.press( blockActionsButton );
 
 		// Delete block
-		const deleteButton = getByA11yLabel( /Remove block/ );
+		const deleteButton = getByLabelText( /Remove block/ );
 		fireEvent.press( deleteButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -189,7 +189,7 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
@@ -200,11 +200,11 @@ describe( 'Columns block', () => {
 		fireEvent.press( firstColumnBlock );
 
 		// Open block actions menu
-		let blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		let blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		fireEvent.press( blockActionsButton );
 
 		// Delete block
-		let deleteButton = getByA11yLabel( /Remove block/ );
+		let deleteButton = getByLabelText( /Remove block/ );
 		fireEvent.press( deleteButton );
 
 		// Get the only left column
@@ -212,11 +212,11 @@ describe( 'Columns block', () => {
 		fireEvent.press( lastColumnBlock );
 
 		// Open block actions menu
-		blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		fireEvent.press( blockActionsButton );
 
 		// Delete block
-		deleteButton = getByA11yLabel( /Remove block/ );
+		deleteButton = getByLabelText( /Remove block/ );
 		fireEvent.press( deleteButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -226,20 +226,20 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByA11yLabel(
+		const verticalAlignmentButton = getByLabelText(
 			/Change vertical alignment/
 		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
-		const verticalTopAlignmentButton = getByA11yLabel( /Align top/ );
+		const verticalTopAlignmentButton = getByLabelText( /Align top/ );
 		fireEvent.press( verticalTopAlignmentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -249,20 +249,20 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByA11yLabel(
+		const verticalAlignmentButton = getByLabelText(
 			/Change vertical alignment/
 		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
-		const verticalTopAlignmentButton = getByA11yLabel( /Align top/ );
+		const verticalTopAlignmentButton = getByLabelText( /Align top/ );
 		fireEvent.press( verticalTopAlignmentButton );
 
 		// Get the first column
@@ -273,7 +273,7 @@ describe( 'Columns block', () => {
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align bottom button
-		const verticalBottomAlignmentButton = getByA11yLabel( /Align bottom/ );
+		const verticalBottomAlignmentButton = getByLabelText( /Align bottom/ );
 		fireEvent.press( verticalBottomAlignmentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -283,20 +283,20 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByA11yLabel(
+		const verticalAlignmentButton = getByLabelText(
 			/Change vertical alignment/
 		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
-		const verticalTopAlignmentButton = getByA11yLabel( /Align top/ );
+		const verticalTopAlignmentButton = getByLabelText( /Align top/ );
 		fireEvent.press( verticalTopAlignmentButton );
 
 		// Add a new column
@@ -310,7 +310,7 @@ describe( 'Columns block', () => {
 	describe( 'when using columns percentage mechanism', () => {
 		it( "updates the slider's input value", async () => {
 			const screen = await initializeEditor();
-			const { getByA11yLabel, getByTestId } = screen;
+			const { getByLabelText, getByTestId } = screen;
 
 			// Add block
 			await addBlock( screen, 'Columns' );
@@ -324,7 +324,7 @@ describe( 'Columns block', () => {
 			const blockVariationModal = getByTestId( 'block-variation-modal' );
 			await waitFor( () => blockVariationModal.props.isVisible );
 			const threeColumnLayout =
-				within( blockVariationModal ).getByA11yLabel(
+				within( blockVariationModal ).getByLabelText(
 					/33 \/ 33 \/ 33 block/
 				);
 			fireEvent.press( threeColumnLayout );
@@ -337,7 +337,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Get width control
-			const widthControl = getByA11yLabel( /Width. Value is/ );
+			const widthControl = getByLabelText( /Width. Value is/ );
 			fireEvent.press( within( widthControl ).getByText( '33.3' ) );
 			const widthTextInput =
 				within( widthControl ).getByDisplayValue( '33.3' );
@@ -350,7 +350,7 @@ describe( 'Columns block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
-			const { getByA11yLabel, getByTestId } = screen;
+			const { getByLabelText, getByTestId } = screen;
 
 			// Get block
 			const columnsBlock = await getBlock( screen, 'Columns' );
@@ -364,7 +364,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Set custom width value for the first column
-			let widthControl = getByA11yLabel( /Width. Value is/ );
+			let widthControl = getByLabelText( /Width. Value is/ );
 			fireEvent.press( within( widthControl ).getByText( '50' ) );
 			let widthTextInput =
 				within( widthControl ).getByDisplayValue( '50' );
@@ -383,7 +383,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Set custom width value for the second column
-			widthControl = getByA11yLabel( /Width. Value is/ );
+			widthControl = getByLabelText( /Width. Value is/ );
 			fireEvent.press( within( widthControl ).getByText( '50' ) );
 			widthTextInput = within( widthControl ).getByDisplayValue( '50' );
 			fireEvent.changeText( widthTextInput, '55.5' );
@@ -422,7 +422,7 @@ describe( 'Columns block', () => {
 				);
 				await waitFor( () => blockVariationModal.props.isVisible );
 				const columnLayout =
-					within( blockVariationModal ).getByA11yLabel( layout );
+					within( blockVariationModal ).getByLabelText( layout );
 				fireEvent.press( columnLayout );
 
 				expect( getEditorHtml() ).toMatchSnapshot();

package/src/columns/transforms.js

@@ -105,6 +105,14 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( attributes, innerBlocks ) =>
+				innerBlocks.flatMap( ( innerBlock ) => innerBlock.innerBlocks ),
+		},
+	],
 };
 
 export default transforms;

package/src/cover/edit/index.js

@@ -188,7 +188,9 @@ function CoverEdit( {
 			className: 'wp-block-cover__inner-container',
 		},
 		{
-			template: innerBlocksTemplate,
+			// Avoid template sync when the `templateLock` value is `all` or `contentOnly`.
+			// See: https://github.com/WordPress/gutenberg/pull/45632
+			template: ! hasInnerBlocks ? innerBlocksTemplate : undefined,
 			templateInsertUpdatesSelection: true,
 			allowedBlocks,
 			templateLock,