@wordpress/block-library 8.33.0 → 8.34.0

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,
@@ -261,8 +265,9 @@ 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.
@@ -349,7 +354,7 @@ 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 );
@@ -360,7 +365,7 @@ function ReusableBlockEdit( {
 				const blocks = hasPatternOverridesSource
 					? applyInitialContentValuesToInnerBlocks(
 							initialBlocks,
-							initialContent.current,
+							contentRef.current,
 							defaultContent.current,
 							legacyIdMap.current
 					  )
@@ -397,7 +402,7 @@ function ReusableBlockEdit( {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		templateLock: 'all',
+		templateLock: 'contentOnly',
 		layout,
 		renderAppender: innerBlocks?.length
 			? undefined
@@ -417,13 +422,15 @@ 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 );

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 );

package/src/columns/variations.js

@@ -18,16 +18,12 @@ const variations = [
 		description: __( 'One column' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="m39.0625 14h-30.0625v20.0938h30.0625zm-30.0625-2c-1.10457 0-2 .8954-2 2v20.0938c0 1.1045.89543 2 2 2h30.0625c1.1046 0 2-.8955 2-2v-20.0938c0-1.1046-.8954-2-2-2z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [ [ 'core/column' ] ],
@@ -39,16 +35,12 @@ const variations = [
 		description: __( 'Two columns; equal split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H25V34H39ZM23 34H9V14H23V34Z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		isDefault: true,
@@ -61,16 +53,12 @@ const variations = [
 		description: __( 'Two columns; one-third, two-thirds split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H20V34H39ZM18 34H9V14H18V34Z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm17 0a2 2 0 0 1 2-2h27a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H19a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [
@@ -85,16 +73,12 @@ const variations = [
 		description: __( 'Two columns; two-thirds, one-third split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H30V34H39ZM28 34H9V14H28V34Z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h27a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm33 0a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H35a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [
@@ -109,15 +93,12 @@ const variations = [
 		description: __( 'Three columns; equal split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM28.5 34h-9V14h9v20zm2 0V14H39v20h-8.5zm-13 0H9V14h8.5v20z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h10.531c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H2a2 2 0 0 1-2-2V10Zm16.5 0c0-1.105.864-2 1.969-2H29.53c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H18.47c-1.105 0-1.969-.895-1.969-2V10Zm17 0c0-1.105.864-2 1.969-2H46a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H35.469c-1.105 0-1.969-.895-1.969-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [
@@ -133,15 +114,12 @@ const variations = [
 		description: __( 'Three columns; wide center column' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM31 34H17V14h14v20zm2 0V14h6v20h-6zm-18 0H9V14h6v20z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h7.531c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H2a2 2 0 0 1-2-2V10Zm13.5 0c0-1.105.864-2 1.969-2H32.53c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H15.47c-1.105 0-1.969-.895-1.969-2V10Zm23 0c0-1.105.864-2 1.969-2H46a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2h-7.531c-1.105 0-1.969-.895-1.969-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [

package/src/comment-template/util.js

@@ -30,7 +30,9 @@
 export const convertToTree = ( data ) => {
 	const table = {};
 
-	if ( ! data ) return [];
+	if ( ! data ) {
+		return [];
+	}
 
 	// First create a hash table of { [id]: { ...comment, children: [] }}
 	data.forEach( ( item ) => {

package/src/cover/shared.js

@@ -103,7 +103,9 @@ export function getPositionClassName( contentPosition ) {
 	/*
 	 * Only render a className if the contentPosition is not center (the default).
 	 */
-	if ( isContentPositionCenter( contentPosition ) ) return '';
+	if ( isContentPositionCenter( contentPosition ) ) {
+		return '';
+	}
 
 	return POSITION_CLASSNAMES[ contentPosition ];
 }

package/src/embed/editor.scss

@@ -19,8 +19,6 @@
 }
 
 .wp-block-embed__learn-more {
-	margin-top: 1em;
-
 	@at-root .wp-block-post-content & {
 		a {
 			color: var(--wp-admin-theme-color);

package/src/embed/embed-placeholder.js

@@ -2,7 +2,13 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Button, Placeholder, ExternalLink } from '@wordpress/components';
+import {
+	Button,
+	Placeholder,
+	ExternalLink,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 
 const EmbedPlaceholder = ( {
@@ -47,17 +53,23 @@ const EmbedPlaceholder = ( {
 				</ExternalLink>
 			</div>
 			{ cannotEmbed && (
-				<div className="components-placeholder__error">
+				<VStack spacing={ 3 } className="components-placeholder__error">
 					<div className="components-placeholder__instructions">
 						{ __( 'Sorry, this content could not be embedded.' ) }
 					</div>
-					<Button variant="secondary" onClick={ tryAgain }>
-						{ _x( 'Try again', 'button label' ) }
-					</Button>{ ' ' }
-					<Button variant="secondary" onClick={ fallback }>
-						{ _x( 'Convert to link', 'button label' ) }
-					</Button>
-				</div>
+					<HStack
+						expanded={ false }
+						spacing={ 3 }
+						justify="flex-start"
+					>
+						<Button variant="secondary" onClick={ tryAgain }>
+							{ _x( 'Try again', 'button label' ) }
+						</Button>{ ' ' }
+						<Button variant="secondary" onClick={ fallback }>
+							{ _x( 'Convert to link', 'button label' ) }
+						</Button>
+					</HStack>
+				</VStack>
 			) }
 		</Placeholder>
 	);

package/src/embed/util.js

@@ -97,7 +97,9 @@ export const createUpgradedEmbedBlock = (
 	const { preview, attributes = {} } = props;
 	const { url, providerNameSlug, type, ...restAttributes } = attributes;
 
-	if ( ! url || ! getBlockType( DEFAULT_EMBED_BLOCK ) ) return;
+	if ( ! url || ! getBlockType( DEFAULT_EMBED_BLOCK ) ) {
+		return;
+	}
 
 	const matchedBlock = findMoreSuitableBlock( url );