@wordpress/block-library 8.32.0 → 8.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.32.0",
+	"version": "8.34.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,38 +31,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.55.0",
-		"@wordpress/api-fetch": "^6.52.0",
-		"@wordpress/autop": "^3.55.0",
-		"@wordpress/blob": "^3.55.0",
-		"@wordpress/block-editor": "^12.23.0",
-		"@wordpress/blocks": "^12.32.0",
-		"@wordpress/components": "^27.3.0",
-		"@wordpress/compose": "^6.32.0",
-		"@wordpress/core-data": "^6.32.0",
-		"@wordpress/data": "^9.25.0",
-		"@wordpress/date": "^4.55.0",
-		"@wordpress/deprecated": "^3.55.0",
-		"@wordpress/dom": "^3.55.0",
-		"@wordpress/element": "^5.32.0",
-		"@wordpress/escape-html": "^2.55.0",
-		"@wordpress/hooks": "^3.55.0",
-		"@wordpress/html-entities": "^3.55.0",
-		"@wordpress/i18n": "^4.55.0",
-		"@wordpress/icons": "^9.46.0",
-		"@wordpress/interactivity": "^5.4.0",
-		"@wordpress/interactivity-router": "^1.5.0",
-		"@wordpress/keycodes": "^3.55.0",
-		"@wordpress/notices": "^4.23.0",
-		"@wordpress/patterns": "^1.16.0",
-		"@wordpress/primitives": "^3.53.0",
-		"@wordpress/private-apis": "^0.37.0",
-		"@wordpress/reusable-blocks": "^4.32.0",
-		"@wordpress/rich-text": "^6.32.0",
-		"@wordpress/server-side-render": "^4.32.0",
-		"@wordpress/url": "^3.56.0",
-		"@wordpress/viewport": "^5.32.0",
-		"@wordpress/wordcount": "^3.55.0",
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/api-fetch": "^6.54.0",
+		"@wordpress/autop": "^3.57.0",
+		"@wordpress/blob": "^3.57.0",
+		"@wordpress/block-editor": "^12.25.0",
+		"@wordpress/blocks": "^12.34.0",
+		"@wordpress/components": "^27.5.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/core-data": "^6.34.0",
+		"@wordpress/data": "^9.27.0",
+		"@wordpress/date": "^4.57.0",
+		"@wordpress/deprecated": "^3.57.0",
+		"@wordpress/dom": "^3.57.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/escape-html": "^2.57.0",
+		"@wordpress/hooks": "^3.57.0",
+		"@wordpress/html-entities": "^3.57.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/interactivity": "^5.6.0",
+		"@wordpress/interactivity-router": "^1.7.0",
+		"@wordpress/keyboard-shortcuts": "^4.34.0",
+		"@wordpress/keycodes": "^3.57.0",
+		"@wordpress/notices": "^4.25.0",
+		"@wordpress/patterns": "^1.18.0",
+		"@wordpress/primitives": "^3.55.0",
+		"@wordpress/private-apis": "^0.39.0",
+		"@wordpress/reusable-blocks": "^4.34.0",
+		"@wordpress/rich-text": "^6.34.0",
+		"@wordpress/server-side-render": "^4.34.0",
+		"@wordpress/url": "^3.58.0",
+		"@wordpress/viewport": "^5.34.0",
+		"@wordpress/wordcount": "^3.57.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -80,5 +81,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

package/src/avatar/index.php

@@ -62,7 +62,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 			$label = '';
 			if ( '_blank' === $attributes['linkTarget'] ) {
 				// translators: %s is the Author name.
-				$label = 'aria-label="' . sprintf( esc_attr__( '(%s author archive, opens in a new tab)' ), $author_name ) . '"';
+				$label = 'aria-label="' . esc_attr( sprintf( __( '(%s author archive, opens in a new tab)' ), $author_name ) ) . '"';
 			}
 			// translators: %1$s: Author archive link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
 			$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( get_author_posts_url( $author_id ) ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
@@ -89,7 +89,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		$label = '';
 		if ( '_blank' === $attributes['linkTarget'] ) {
 			// translators: %s is the Comment Author name.
-			$label = 'aria-label="' . sprintf( esc_attr__( '(%s website link, opens in a new tab)' ), $comment->comment_author ) . '"';
+			$label = 'aria-label="' . esc_attr( sprintf( __( '(%s website link, opens in a new tab)' ), $comment->comment_author ) ) . '"';
 		}
 		// translators: %1$s: Comment Author website link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
 		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( $comment->comment_author_url ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );

package/src/block/edit.js

@@ -92,7 +92,9 @@ const useInferredLayout = ( blocks, parentLayout ) => {
 
 function hasOverridableBlocks( blocks ) {
 	return blocks.some( ( block ) => {
-		if ( isOverridableBlock( block ) ) return true;
+		if ( isOverridableBlock( block ) ) {
+			return true;
+		}
 		return hasOverridableBlocks( block.innerBlocks );
 	} );
 }
@@ -159,7 +161,9 @@ function getContentValuesFromInnerBlocks( blocks, defaultValues, legacyIdMap ) {
 	/** @type {Record<string, { values: Record<string, unknown>}>} */
 	const content = {};
 	for ( const block of blocks ) {
-		if ( block.name === patternBlockName ) continue;
+		if ( block.name === patternBlockName ) {
+			continue;
+		}
 		if ( block.innerBlocks.length ) {
 			Object.assign(
 				content,
@@ -217,7 +221,36 @@ function setBlockEditMode( setEditMode, blocks, mode ) {
 	} );
 }
 
-export default function ReusableBlockEdit( {
+function RecursionWarning() {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Warning>
+				{ __( 'Block cannot be rendered inside itself.' ) }
+			</Warning>
+		</div>
+	);
+}
+
+// Wrap the main Edit function for the pattern block with a recursion wrapper
+// that allows short-circuiting rendering as early as possible, before any
+// of the other effects in the block edit have run.
+export default function ReusableBlockEditRecursionWrapper( props ) {
+	const { ref } = props.attributes;
+	const hasAlreadyRendered = useHasRecursion( ref );
+
+	if ( hasAlreadyRendered ) {
+		return <RecursionWarning />;
+	}
+
+	return (
+		<RecursionProvider uniqueId={ ref }>
+			<ReusableBlockEdit { ...props } />
+		</RecursionProvider>
+	);
+}
+
+function ReusableBlockEdit( {
 	name,
 	attributes: { ref, content },
 	__unstableParentLayout: parentLayout,
@@ -225,7 +258,6 @@ export default function ReusableBlockEdit( {
 	setAttributes,
 } ) {
 	const registry = useRegistry();
-	const hasAlreadyRendered = useHasRecursion( ref );
 	const { record, editedRecord, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
@@ -233,8 +265,9 @@ export default function ReusableBlockEdit( {
 	);
 	const isMissing = hasResolved && ! record;
 
-	// The initial value of the `content` attribute.
-	const initialContent = useRef( content );
+	// The value of the `content` attribute, stored in a `ref` to avoid triggering the effect
+	// that runs `applyInitialContentValuesToInnerBlocks` unnecessarily.
+	const contentRef = useRef( content );
 
 	// The default content values from the original pattern for overridable attributes.
 	// Set by the `applyInitialContentValuesToInnerBlocks` function.
@@ -321,7 +354,7 @@ export default function ReusableBlockEdit( {
 		// Build a map of clientIds to the old nano id system to provide back compat.
 		legacyIdMap.current = getLegacyIdMap(
 			initialBlocks,
-			initialContent.current
+			contentRef.current
 		);
 		defaultContent.current = {};
 		const originalEditingMode = getBlockEditingMode( patternClientId );
@@ -332,7 +365,7 @@ export default function ReusableBlockEdit( {
 				const blocks = hasPatternOverridesSource
 					? applyInitialContentValuesToInnerBlocks(
 							initialBlocks,
-							initialContent.current,
+							contentRef.current,
 							defaultContent.current,
 							legacyIdMap.current
 					  )
@@ -369,7 +402,7 @@ export default function ReusableBlockEdit( {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		templateLock: 'all',
+		templateLock: 'contentOnly',
 		layout,
 		renderAppender: innerBlocks?.length
 			? undefined
@@ -389,13 +422,15 @@ export default function ReusableBlockEdit( {
 			if ( blocks !== prevBlocks ) {
 				prevBlocks = blocks;
 				syncDerivedUpdates( () => {
+					const updatedContent = getContentValuesFromInnerBlocks(
+						blocks,
+						defaultContent.current,
+						legacyIdMap.current
+					);
 					setAttributes( {
-						content: getContentValuesFromInnerBlocks(
-							blocks,
-							defaultContent.current,
-							legacyIdMap.current
-						),
+						content: updatedContent,
 					} );
+					contentRef.current = updatedContent;
 				} );
 			}
 		}, blockEditorStore );
@@ -422,14 +457,6 @@ export default function ReusableBlockEdit( {
 
 	let children = null;
 
-	if ( hasAlreadyRendered ) {
-		children = (
-			<Warning>
-				{ __( 'Block cannot be rendered inside itself.' ) }
-			</Warning>
-		);
-	}
-
 	if ( isMissing ) {
 		children = (
 			<Warning>
@@ -447,7 +474,7 @@ export default function ReusableBlockEdit( {
 	}
 
 	return (
-		<RecursionProvider uniqueId={ ref }>
+		<>
 			{ userCanEdit && onNavigateToEntityRecord && (
 				<BlockControls>
 					<ToolbarGroup>
@@ -477,6 +504,6 @@ export default function ReusableBlockEdit( {
 			) : (
 				<div { ...blockProps }>{ children }</div>
 			) }
-		</RecursionProvider>
+		</>
 	);
 }

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

@@ -45,6 +45,7 @@ const getMockedReusableBlock = ( id ) => ( {
 	title: { raw: `Reusable block - ${ id }` },
 	type: 'wp_block',
 	meta: { footnotes: '' },
+	wp_pattern_category: [],
 } );
 
 beforeAll( () => {

package/src/block-keyboard-shortcuts/index.js

@@ -0,0 +1,113 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+function BlockKeyboardShortcuts() {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTransformHeadingAndParagraph = ( event, level ) => {
+		event.preventDefault();
+
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+
+		const blockName = getBlockName( currentClientId );
+		const isParagraph = blockName === 'core/paragraph';
+		const isHeading = blockName === 'core/heading';
+
+		if ( ! isParagraph && ! isHeading ) {
+			return;
+		}
+
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+
+		const attributes = getBlockAttributes( currentClientId );
+
+		// Avoid unnecessary block transform when attempting to transform to
+		// the same block type and/or same level.
+		if (
+			( isParagraph && level === 0 ) ||
+			( isHeading && attributes.level === level )
+		) {
+			return;
+		}
+
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/block-editor/transform-heading-to-paragraph',
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: '0',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: '7',
+				},
+			],
+		} );
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			registerShortcut( {
+				name: `core/block-editor/transform-paragraph-to-heading-${ level }`,
+				category: 'block-library',
+				description: __( 'Transform paragraph to heading.' ),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+			} );
+		} );
+	}, [] );
+
+	useShortcut(
+		'core/block-editor/transform-heading-to-paragraph',
+		( event ) => handleTransformHeadingAndParagraph( event, 0 )
+	);
+
+	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+		//the loop is based off on a constant therefore
+		//the hook will execute the same way every time
+		//eslint-disable-next-line react-hooks/rules-of-hooks
+		useShortcut(
+			`core/block-editor/transform-paragraph-to-heading-${ level }`,
+			( event ) => handleTransformHeadingAndParagraph( event, level )
+		);
+	} );
+
+	return null;
+}
+
+export default BlockKeyboardShortcuts;

package/src/column/edit.js

@@ -24,6 +24,28 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
+function ColumnInspectorControls( { width, setAttributes } ) {
+	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const units = useCustomUnits( {
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
+	} );
+	return (
+		<PanelBody title={ __( 'Settings' ) }>
+			<UnitControl
+				label={ __( 'Width' ) }
+				labelPosition="edge"
+				__unstableInputWidth="80px"
+				value={ width || '' }
+				onChange={ ( nextWidth ) => {
+					nextWidth = 0 > parseFloat( nextWidth ) ? '0' : nextWidth;
+					setAttributes( { width: nextWidth } );
+				} }
+				units={ units }
+			/>
+		</PanelBody>
+	);
+}
+
 function ColumnEdit( {
 	attributes: { verticalAlignment, width, templateLock, allowedBlocks },
 	setAttributes,
@@ -32,12 +54,6 @@ function ColumnEdit( {
 	const classes = classnames( 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
-
-	const [ availableUnits ] = useSettings( 'spacing.units' );
-	const units = useCustomUnits( {
-		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
-	} );
-
 	const { columnsIds, hasChildBlocks, rootClientId } = useSelect(
 		( select ) => {
 			const { getBlockOrder, getBlockRootClientId } =
@@ -103,20 +119,10 @@ function ColumnEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<UnitControl
-						label={ __( 'Width' ) }
-						labelPosition="edge"
-						__unstableInputWidth="80px"
-						value={ width || '' }
-						onChange={ ( nextWidth ) => {
-							nextWidth =
-								0 > parseFloat( nextWidth ) ? '0' : nextWidth;
-							setAttributes( { width: nextWidth } );
-						} }
-						units={ units }
-					/>
-				</PanelBody>
+				<ColumnInspectorControls
+					width={ width }
+					setAttributes={ setAttributes }
+				/>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />
 		</>

package/src/column/edit.native.js

@@ -220,7 +220,9 @@ function ColumnEditWrapper( props ) {
 	const { verticalAlignment } = props.attributes;
 
 	const getVerticalAlignmentRemap = ( alignment ) => {
-		if ( ! alignment ) return styles.flexBase;
+		if ( ! alignment ) {
+			return styles.flexBase;
+		}
 		return {
 			...styles.flexBase,
 			...styles[ `is-vertically-aligned-${ alignment }` ],

package/src/columns/edit.js

@@ -44,8 +44,11 @@ const DEFAULT_BLOCK = {
 	name: 'core/column',
 };
 
-function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
-	const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
+function ColumnInspectorControls( {
+	clientId,
+	setAttributes,
+	isStackedOnMobile,
+} ) {
 	const { count, canInsertColumnBlock, minCount } = useSelect(
 		( select ) => {
 			const {
@@ -79,47 +82,8 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 		},
 		[ clientId ]
 	);
-
-	const registry = useRegistry();
-	const { getBlocks, getBlockOrder } = useSelect( blockEditorStore );
-	const { updateBlockAttributes, replaceInnerBlocks } =
-		useDispatch( blockEditorStore );
-
-	const classes = classnames( {
-		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
-		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
-	} );
-
-	const blockProps = useBlockProps( {
-		className: classes,
-	} );
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		defaultBlock: DEFAULT_BLOCK,
-		directInsert: true,
-		orientation: 'horizontal',
-		renderAppender: false,
-		templateLock,
-	} );
-
-	/**
-	 * Update all child Column blocks with a new vertical alignment setting
-	 * based on whatever alignment is passed in. This allows change to parent
-	 * to overide anything set on a individual column basis.
-	 *
-	 * @param {string} newVerticalAlignment The vertical alignment setting.
-	 */
-	function updateAlignment( newVerticalAlignment ) {
-		const innerBlockClientIds = getBlockOrder( clientId );
-
-		// Update own and child Column block vertical alignments.
-		// This is a single action; the batching prevents creating multiple history records.
-		registry.batch( () => {
-			setAttributes( { verticalAlignment: newVerticalAlignment } );
-			updateBlockAttributes( innerBlockClientIds, {
-				verticalAlignment: newVerticalAlignment,
-			} );
-		} );
-	}
+	const { getBlocks } = useSelect( blockEditorStore );
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 
 	/**
 	 * Updates the column count, including necessary revisions to child Column
@@ -184,6 +148,86 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 		replaceInnerBlocks( clientId, innerBlocks );
 	}
 
+	return (
+		<PanelBody title={ __( 'Settings' ) }>
+			{ canInsertColumnBlock && (
+				<>
+					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Columns' ) }
+						value={ count }
+						onChange={ ( value ) =>
+							updateColumns( count, Math.max( minCount, value ) )
+						}
+						min={ Math.max( 1, minCount ) }
+						max={ Math.max( 6, count ) }
+					/>
+					{ count > 6 && (
+						<Notice status="warning" isDismissible={ false }>
+							{ __(
+								'This column count exceeds the recommended amount and may cause visual breakage.'
+							) }
+						</Notice>
+					) }
+				</>
+			) }
+			<ToggleControl
+				__nextHasNoMarginBottom
+				label={ __( 'Stack on mobile' ) }
+				checked={ isStackedOnMobile }
+				onChange={ () =>
+					setAttributes( {
+						isStackedOnMobile: ! isStackedOnMobile,
+					} )
+				}
+			/>
+		</PanelBody>
+	);
+}
+
+function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
+	const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
+	const registry = useRegistry();
+	const { getBlockOrder } = useSelect( blockEditorStore );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const classes = classnames( {
+		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
+	} );
+
+	const blockProps = useBlockProps( {
+		className: classes,
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
+		orientation: 'horizontal',
+		renderAppender: false,
+		templateLock,
+	} );
+
+	/**
+	 * Update all child Column blocks with a new vertical alignment setting
+	 * based on whatever alignment is passed in. This allows change to parent
+	 * to overide anything set on a individual column basis.
+	 *
+	 * @param {string} newVerticalAlignment The vertical alignment setting.
+	 */
+	function updateAlignment( newVerticalAlignment ) {
+		const innerBlockClientIds = getBlockOrder( clientId );
+
+		// Update own and child Column block vertical alignments.
+		// This is a single action; the batching prevents creating multiple history records.
+		registry.batch( () => {
+			setAttributes( { verticalAlignment: newVerticalAlignment } );
+			updateBlockAttributes( innerBlockClientIds, {
+				verticalAlignment: newVerticalAlignment,
+			} );
+		} );
+	}
+
 	return (
 		<>
 			<BlockControls>
@@ -193,46 +237,11 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					{ canInsertColumnBlock && (
-						<>
-							<RangeControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __( 'Columns' ) }
-								value={ count }
-								onChange={ ( value ) =>
-									updateColumns(
-										count,
-										Math.max( minCount, value )
-									)
-								}
-								min={ Math.max( 1, minCount ) }
-								max={ Math.max( 6, count ) }
-							/>
-							{ count > 6 && (
-								<Notice
-									status="warning"
-									isDismissible={ false }
-								>
-									{ __(
-										'This column count exceeds the recommended amount and may cause visual breakage.'
-									) }
-								</Notice>
-							) }
-						</>
-					) }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Stack on mobile' ) }
-						checked={ isStackedOnMobile }
-						onChange={ () =>
-							setAttributes( {
-								isStackedOnMobile: ! isStackedOnMobile,
-							} )
-						}
-					/>
-				</PanelBody>
+				<ColumnInspectorControls
+					clientId={ clientId }
+					setAttributes={ setAttributes }
+					isStackedOnMobile={ isStackedOnMobile }
+				/>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />
 		</>
@@ -265,6 +274,7 @@ function Placeholder( { clientId, name, setAttributes } ) {
 				icon={ blockType?.icon?.src }
 				label={ blockType?.title }
 				variations={ variations }
+				instructions={ __( 'Divide into columns. Select a layout:' ) }
 				onSelect={ ( nextVariation = defaultVariation ) => {
 					if ( nextVariation.attributes ) {
 						setAttributes( nextVariation.attributes );