@wordpress/block-library 7.18.0 → 8.0.0

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

@@ -3,7 +3,6 @@
  */
 import {
 	fireEvent,
-	waitFor,
 	getEditorHtml,
 	within,
 	getBlock,
@@ -50,20 +49,20 @@ 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 editor = await initializeEditor( {
 				initialHtml,
 			} );
 
-			const buttonsBlock = await waitFor( () =>
-				getByA11yLabel( /Buttons Block\. Row 1/ )
+			const [ buttonsBlock ] = await editor.findAllByLabelText(
+				/Buttons Block\. Row 1/
 			);
 			fireEvent.press( buttonsBlock );
 
 			// onLayout event has to be explicitly dispatched in BlockList component,
 			// otherwise the inner blocks are not rendered.
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper = await within(
+				buttonsBlock
+			).findByTestId( 'block-list-wrapper' );
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -72,22 +71,22 @@ describe( 'Buttons block', () => {
 				},
 			} );
 
-			const buttonInnerBlock = await waitFor( () =>
-				within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ )
-			);
+			const [ buttonInnerBlock ] = await within(
+				buttonsBlock
+			).findAllByLabelText( /Button Block\. Row 1/ );
 			fireEvent.press( buttonInnerBlock );
 
-			const settingsButton = await waitFor( () =>
-				getByA11yLabel( 'Open Settings' )
+			const settingsButton = await editor.findByLabelText(
+				'Open Settings'
 			);
 			fireEvent.press( settingsButton );
 
-			const radiusStepper = await waitFor( () =>
-				getByA11yLabel( /Border Radius/ )
+			const radiusStepper = await editor.findByLabelText(
+				/Border Radius/
 			);
 
-			const incrementButton = await waitFor( () =>
-				within( radiusStepper ).getByTestId( 'Increment' )
+			const incrementButton = await within( radiusStepper ).findByTestId(
+				'Increment'
 			);
 			fireEvent( incrementButton, 'onPressIn' );
 
@@ -98,15 +97,14 @@ describe( 'Buttons block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
-			const { getByA11yLabel } = screen;
 
 			// Get block
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper = await within(
+				buttonsBlock
+			).findByTestId( 'block-list-wrapper' );
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -125,14 +123,14 @@ describe( 'Buttons block', () => {
 			fireEvent.press( appenderButton );
 
 			// Check for new button
-			const secondButtonBlock = await waitFor( () =>
-				within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 2/ )
-			);
+			const [ secondButtonBlock ] = await within(
+				buttonsBlock
+			).findAllByLabelText( /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' )
+			const paragraphPlaceholder = await screen.findByLabelText(
+				'Add paragraph block'
 			);
 			fireEvent.press( paragraphPlaceholder );
 
@@ -148,21 +146,15 @@ describe( 'Buttons block', () => {
 			const screen = await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
-			const {
-				getByA11yLabel,
-				getByTestId,
-				queryAllByA11yLabel,
-				getByText,
-			} = screen;
 
 			// Get block
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
 			fireEvent.press( buttonsBlock );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper = await within(
+				buttonsBlock
+			).findByTestId( 'block-list-wrapper' );
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -176,9 +168,9 @@ describe( 'Buttons block', () => {
 			fireEvent.press( buttonBlock );
 
 			// Open the block inserter
-			fireEvent.press( getByA11yLabel( 'Add block' ) );
+			fireEvent.press( screen.getByLabelText( 'Add block' ) );
 
-			const blockList = getByTestId( 'InserterUI-Blocks' );
+			const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 			// onScroll event used to force the FlatList to render all items
 			fireEvent.scroll( blockList, {
 				nativeEvent: {
@@ -190,18 +182,18 @@ describe( 'Buttons block', () => {
 
 			// Check the Add block here placeholder is not visible
 			const addBlockHerePlaceholders =
-				queryAllByA11yLabel( 'ADD BLOCK HERE' );
+				screen.queryAllByLabelText( 'ADD BLOCK HERE' );
 			expect( addBlockHerePlaceholders.length ).toBe( 0 );
 
 			// Add a new Button block
-			fireEvent.press( await waitFor( () => getByText( 'Button' ) ) );
+			fireEvent.press( await screen.findByText( 'Button' ) );
 
 			// Get new button
 			const secondButtonBlock = await getBlock( screen, 'Button', {
 				rowIndex: 2,
 			} );
 			const secondButtonInput =
-				within( secondButtonBlock ).getByA11yLabel(
+				within( secondButtonBlock ).getByLabelText(
 					'Text input. Empty'
 				);
 			changeTextOfRichText( secondButtonInput, 'Hello!' );
@@ -214,15 +206,14 @@ describe( 'Buttons block', () => {
 				const screen = await initializeEditor( {
 					initialHtml: BUTTONS_HTML,
 				} );
-				const { getByA11yLabel } = screen;
 
 				// Get block
 				const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 				// Trigger inner blocks layout
-				const innerBlockListWrapper = await waitFor( () =>
-					within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-				);
+				const innerBlockListWrapper = await within(
+					buttonsBlock
+				).findByTestId( 'block-list-wrapper' );
 				fireEvent( innerBlockListWrapper, 'layout', {
 					nativeEvent: {
 						layout: {
@@ -236,13 +227,13 @@ describe( 'Buttons block', () => {
 				fireEvent.press( buttonBlock );
 
 				// Open block actions menu
-				const blockActionsButton = getByA11yLabel(
+				const blockActionsButton = screen.getByLabelText(
 					/Open Block Actions Menu/
 				);
 				fireEvent.press( blockActionsButton );
 
 				// Delete block
-				const deleteButton = getByA11yLabel( /Remove block/ );
+				const deleteButton = screen.getByLabelText( /Remove block/ );
 				fireEvent.press( deleteButton );
 
 				expect( getEditorHtml() ).toMatchSnapshot();
@@ -260,22 +251,20 @@ describe( 'Buttons block', () => {
 				const initialHtml = `<!-- wp:buttons -->
 				<div class="wp-block-buttons"><!-- wp:button /--></div>
 				<!-- /wp:buttons -->`;
-				const { getByA11yLabel, getByText } = await initializeEditor( {
-					initialHtml,
-				} );
+				const screen = await initializeEditor( { initialHtml } );
 
-				const block = await waitFor( () =>
-					getByA11yLabel( /Buttons Block\. Row 1/ )
+				const [ block ] = await screen.findAllByLabelText(
+					/Buttons Block\. Row 1/
 				);
 				fireEvent.press( block );
 
 				fireEvent.press(
-					getByA11yLabel( 'Change items justification' )
+					screen.getByLabelText( 'Change items justification' )
 				);
 
 				// Select alignment option.
 				fireEvent.press(
-					await waitFor( () => getByText( justificationOption ) )
+					await screen.findByText( justificationOption )
 				);
 
 				expect( getEditorHtml() ).toMatchSnapshot();

package/src/code/transforms.js

@@ -43,7 +43,9 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			transform: ( { content } ) => {
-				return createBlock( 'core/paragraph', { content } );
+				return createBlock( 'core/paragraph', {
+					content: content.replace( /\n/g, '<br>' ),
+				} );
 			},
 		},
 	],

package/src/columns/edit.js

@@ -95,6 +95,7 @@ function ColumnsEditContainer( {
 			<InspectorControls>
 				<PanelBody>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Columns' ) }
 						value={ count }
 						onChange={ ( value ) => updateColumns( count, value ) }

package/src/columns/edit.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, Dimensions } from 'react-native';
-import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -332,11 +332,6 @@ const ColumnsEditContainerWrapper = withDispatch(
 				width: value,
 			} );
 		},
-		updateBlockSettings( settings ) {
-			const { clientId } = ownProps;
-			const { updateBlockListSettings } = dispatch( blockEditorStore );
-			updateBlockListSettings( clientId, settings );
-		},
 		/**
 		 * Updates the column columnCount, including necessary revisions to child Column
 		 * blocks to grant required or redistribute available space.
@@ -450,7 +445,7 @@ const ColumnsEdit = ( props ) => {
 	const {
 		columnCount,
 		isDefaultColumns,
-		innerWidths = [],
+		innerBlocks,
 		hasParents,
 		parentBlockAlignment,
 		editorSidebarOpened,
@@ -463,24 +458,20 @@ const ColumnsEdit = ( props ) => {
 				getBlockAttributes,
 			} = select( blockEditorStore );
 			const { isEditorSidebarOpened } = select( 'core/edit-post' );
-			const innerBlocks = getBlocks( clientId );
 
-			const isContentEmpty = map(
-				innerBlocks,
-				( innerBlock ) => innerBlock.innerBlocks.length
+			const innerBlocksList = getBlocks( clientId );
+
+			const isContentEmpty = innerBlocksList.every(
+				( innerBlock ) => innerBlock.innerBlocks.length === 0
 			);
 
-			const innerColumnsWidths = innerBlocks.map( ( inn ) => ( {
-				clientId: inn.clientId,
-				attributes: { width: inn.attributes.width },
-			} ) );
 			const parents = getBlockParents( clientId, true );
 
 			return {
 				columnCount: getBlockCount( clientId ),
-				isDefaultColumns: ! isContentEmpty.filter( Boolean ).length,
-				innerWidths: innerColumnsWidths,
-				hasParents: !! parents.length,
+				isDefaultColumns: isContentEmpty,
+				innerBlocks: innerBlocksList,
+				hasParents: parents.length > 0,
 				parentBlockAlignment: getBlockAttributes( parents[ 0 ] )?.align,
 				editorSidebarOpened: isSelected && isEditorSidebarOpened(),
 			};
@@ -488,13 +479,14 @@ const ColumnsEdit = ( props ) => {
 		[ clientId, isSelected ]
 	);
 
-	const memoizedInnerWidths = useMemo( () => {
-		return innerWidths;
-	}, [
-		// The JSON.stringify is used because innerWidth is always a new reference.
-		// The innerBlocks is a new reference after each attribute change of any nested block.
-		JSON.stringify( innerWidths ),
-	] );
+	const innerWidths = useMemo(
+		() =>
+			innerBlocks.map( ( inn ) => ( {
+				clientId: inn.clientId,
+				attributes: { width: inn.attributes.width },
+			} ) ),
+		[ innerBlocks ]
+	);
 
 	const [ isVisible, setIsVisible ] = useState( false );
 
@@ -514,7 +506,7 @@ const ColumnsEdit = ( props ) => {
 		<View style={ style }>
 			<ColumnsEditContainerWrapper
 				columnCount={ columnCount }
-				innerWidths={ memoizedInnerWidths }
+				innerWidths={ innerWidths }
 				hasParents={ hasParents }
 				parentBlockAlignment={ parentBlockAlignment }
 				editorSidebarOpened={ editorSidebarOpened }

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/comment-author-avatar/edit.js

@@ -50,6 +50,7 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Avatar Settings' ) }>
 				<RangeControl
+					__nextHasNoMarginBottom
 					label={ __( 'Image size' ) }
 					onChange={ ( newWidth ) =>
 						setAttributes( {

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,

package/src/cover/edit/inspector-controls.js

@@ -162,6 +162,7 @@ export default function CoverInspectorControls( {
 						) }
 						{ showFocalPointPicker && (
 							<FocalPointPicker
+								__nextHasNoMarginBottom
 								label={ __( 'Focal point picker' ) }
 								url={ url }
 								value={ focalPoint }
@@ -265,6 +266,7 @@ export default function CoverInspectorControls( {
 					panelId={ clientId }
 				>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Overlay opacity' ) }
 						value={ dimRatio }
 						onChange={ ( newDimRation ) =>