@wordpress/block-editor 11.4.0 → 11.6.0

package/src/components/block-draggable/test/__snapshots__/index.native.js.snap

@@ -5,28 +5,28 @@ exports[`BlockDraggable moves blocks: Initial order 1`] = `
 <p>This is a paragraph.</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`BlockDraggable moves blocks: Paragraph block moved from first to second position 1`] = `
-"<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+"<!-- wp:image {"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:paragraph -->
@@ -34,40 +34,40 @@ exports[`BlockDraggable moves blocks: Paragraph block moved from first to second
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`BlockDraggable moves blocks: Spacer block moved from third to first position 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:paragraph -->
 <p>This is a paragraph.</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;

package/src/components/block-inspector/index.js

@@ -36,6 +36,7 @@ import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
+import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 
 function useContentBlocks( blockTypes, block ) {
 	const contentBlocksObjectAux = useMemo( () => {
@@ -56,7 +57,7 @@ function useContentBlocks( blockTypes, block ) {
 		( blockName ) => {
 			return !! contentBlocksObjectAux[ blockName ];
 		},
-		[ blockTypes ]
+		[ contentBlocksObjectAux ]
 	);
 	return useMemo( () => {
 		return getContentBlocks( [ block ], isContentBlock );
@@ -173,19 +174,15 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const availableTabs = useInspectorControlsTabs( blockType?.name );
 	const showTabs = availableTabs?.length > 1;
 
-	const blockInspectorAnimationSettings = useSelect(
-		( select ) => {
-			if ( blockType ) {
-				const globalBlockInspectorAnimationSettings =
-					select( blockEditorStore ).getSettings()
-						.blockInspectorAnimation;
-				return globalBlockInspectorAnimationSettings?.[
-					blockType.name
-				];
-			}
-			return null;
-		},
-		[ selectedBlockClientId, blockType ]
+	// The block inspector animation settings will be completely
+	// removed in the future to create an API which allows the block
+	// inspector to transition between what it
+	// displays based on the relationship between the selected block
+	// and its parent, and only enable it if the parent is controlling
+	// its children blocks.
+	const blockInspectorAnimationSettings = useBlockInspectorAnimationSettings(
+		blockType,
+		selectedBlockClientId
 	);
 
 	if ( count > 1 ) {

package/src/components/block-inspector/style.scss

@@ -27,6 +27,9 @@
 	.components-panel__body {
 		border: none;
 		border-top: $border-width solid $gray-200;
+
+		// Ensures this PanelBody is treated like the ToolsPanel, removing double borders.
+		margin-top: -$border-width;
 	}
 
 	.block-editor-block-card {

package/src/components/block-inspector/useBlockInspectorAnimationSettings.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function useBlockInspectorAnimationSettings(
+	blockType,
+	selectedBlockClientId
+) {
+	return useSelect(
+		( select ) => {
+			if ( blockType ) {
+				const globalBlockInspectorAnimationSettings =
+					select( blockEditorStore ).getSettings()
+						.blockInspectorAnimation;
+
+				// Get the name of the block that will allow it's children to be animated.
+				const animationParent =
+					globalBlockInspectorAnimationSettings?.animationParent;
+
+				// Determine whether the animationParent block is a parent of the selected block.
+				const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+					select( blockEditorStore );
+				const _selectedBlockClientId = getSelectedBlockClientId();
+				const animationParentBlockClientId = getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					animationParent,
+					true
+				)[ 0 ];
+
+				// If the selected block is not a child of the animationParent block,
+				// and not an animationParent block itself, don't animate.
+				if (
+					! animationParentBlockClientId &&
+					blockType.name !== animationParent
+				) {
+					return null;
+				}
+
+				return globalBlockInspectorAnimationSettings?.[
+					blockType.name
+				];
+			}
+			return null;
+		},
+		[ selectedBlockClientId, blockType ]
+	);
+}

package/src/components/block-list/block-invalid-warning.js

@@ -4,9 +4,8 @@
 import { __, _x } from '@wordpress/i18n';
 import { Button, Modal } from '@wordpress/components';
 import { useState, useCallback, useMemo } from '@wordpress/element';
-import { getBlockType, createBlock, rawHandler } from '@wordpress/blocks';
-import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { createBlock, rawHandler } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,38 +14,86 @@ import Warning from '../warning';
 import BlockCompare from '../block-compare';
 import { store as blockEditorStore } from '../../store';
 
-export function BlockInvalidWarning( {
-	convertToHTML,
-	convertToBlocks,
-	convertToClassic,
-	attemptBlockRecovery,
-	block,
-} ) {
-	const hasHTMLBlock = !! getBlockType( 'core/html' );
-	const [ compare, setCompare ] = useState( false );
+const blockToBlocks = ( block ) =>
+	rawHandler( {
+		HTML: block.originalContent,
+	} );
+
+export default function BlockInvalidWarning( { clientId } ) {
+	const { block, canInsertHTMLBlock, canInsertClassicBlock } = useSelect(
+		( select ) => {
+			const { canInsertBlockType, getBlock, getBlockRootClientId } =
+				select( blockEditorStore );
 
-	const onCompare = useCallback( () => setCompare( true ), [] );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return {
+				block: getBlock( clientId ),
+				canInsertHTMLBlock: canInsertBlockType(
+					'core/html',
+					rootClientId
+				),
+				canInsertClassicBlock: canInsertBlockType(
+					'core/freeform',
+					rootClientId
+				),
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	const [ compare, setCompare ] = useState( false );
 	const onCompareClose = useCallback( () => setCompare( false ), [] );
 
-	// We memo the array here to prevent the children components from being updated unexpectedly.
-	const hiddenActions = useMemo(
+	const convert = useMemo(
+		() => ( {
+			toClassic() {
+				const classicBlock = createBlock( 'core/freeform', {
+					content: block.originalContent,
+				} );
+				return replaceBlock( block.clientId, classicBlock );
+			},
+			toHTML() {
+				const htmlBlock = createBlock( 'core/html', {
+					content: block.originalContent,
+				} );
+				return replaceBlock( block.clientId, htmlBlock );
+			},
+			toBlocks() {
+				const newBlocks = blockToBlocks( block );
+				return replaceBlock( block.clientId, newBlocks );
+			},
+			toRecoveredBlock() {
+				const recoveredBlock = createBlock(
+					block.name,
+					block.attributes,
+					block.innerBlocks
+				);
+				return replaceBlock( block.clientId, recoveredBlock );
+			},
+		} ),
+		[ block, replaceBlock ]
+	);
+
+	const secondaryActions = useMemo(
 		() =>
 			[
 				{
 					// translators: Button to fix block content
 					title: _x( 'Resolve', 'imperative verb' ),
-					onClick: onCompare,
+					onClick: () => setCompare( true ),
 				},
-				hasHTMLBlock && {
+				canInsertHTMLBlock && {
 					title: __( 'Convert to HTML' ),
-					onClick: convertToHTML,
+					onClick: convert.toHTML,
 				},
-				{
+				canInsertClassicBlock && {
 					title: __( 'Convert to Classic Block' ),
-					onClick: convertToClassic,
+					onClick: convert.toClassic,
 				},
 			].filter( Boolean ),
-		[ onCompare, convertToHTML, convertToClassic ]
+		[ canInsertHTMLBlock, canInsertClassicBlock, convert ]
 	);
 
 	return (
@@ -55,13 +102,13 @@ export function BlockInvalidWarning( {
 				actions={ [
 					<Button
 						key="recover"
-						onClick={ attemptBlockRecovery }
+						onClick={ convert.toRecoveredBlock }
 						variant="primary"
 					>
 						{ __( 'Attempt Block Recovery' ) }
 					</Button>,
 				] }
-				secondaryActions={ hiddenActions }
+				secondaryActions={ secondaryActions }
 			>
 				{ __( 'This block contains unexpected or invalid content.' ) }
 			</Warning>
@@ -76,8 +123,8 @@ export function BlockInvalidWarning( {
 				>
 					<BlockCompare
 						block={ block }
-						onKeep={ convertToHTML }
-						onConvert={ convertToBlocks }
+						onKeep={ convert.toHTML }
+						onConvert={ convert.toBlocks }
 						convertor={ blockToBlocks }
 						convertButtonText={ __( 'Convert to Blocks' ) }
 					/>
@@ -86,42 +133,3 @@ export function BlockInvalidWarning( {
 		</>
 	);
 }
-
-const blockToClassic = ( block ) =>
-	createBlock( 'core/freeform', {
-		content: block.originalContent,
-	} );
-const blockToHTML = ( block ) =>
-	createBlock( 'core/html', {
-		content: block.originalContent,
-	} );
-const blockToBlocks = ( block ) =>
-	rawHandler( {
-		HTML: block.originalContent,
-	} );
-const recoverBlock = ( { name, attributes, innerBlocks } ) =>
-	createBlock( name, attributes, innerBlocks );
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => ( {
-		block: select( blockEditorStore ).getBlock( clientId ),
-	} ) ),
-	withDispatch( ( dispatch, { block } ) => {
-		const { replaceBlock } = dispatch( blockEditorStore );
-
-		return {
-			convertToClassic() {
-				replaceBlock( block.clientId, blockToClassic( block ) );
-			},
-			convertToHTML() {
-				replaceBlock( block.clientId, blockToHTML( block ) );
-			},
-			convertToBlocks() {
-				replaceBlock( block.clientId, blockToBlocks( block ) );
-			},
-			attemptBlockRecovery() {
-				replaceBlock( block.clientId, recoverBlock( block ) );
-			},
-		};
-	} ),
-] )( BlockInvalidWarning );

package/src/components/block-lock/modal.js

@@ -187,6 +187,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					</ul>
 					{ hasTemplateLock && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							className="block-editor-block-lock-modal__template-lock"
 							label={ __( 'Apply to all blocks inside' ) }
 							checked={ applyTemplateLock }

package/src/components/block-lock/style.scss

@@ -18,11 +18,6 @@
 	.components-checkbox-control__label {
 		font-weight: 600;
 	}
-
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-	}
 }
 .block-editor-block-lock-modal__checklist-item {
 	display: flex;
@@ -48,10 +43,6 @@
 	border-top: $border-width solid $gray-300;
 	margin-top: $grid-unit-20;
 	padding: $grid-unit-15 0;
-
-	.components-base-control__field {
-		margin: 0;
-	}
 }
 
 .block-editor-block-lock-modal__actions {

package/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap

@@ -6,25 +6,25 @@ exports[`Block Actions Menu block options copies and pastes a block 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Block Actions Menu block options cuts and pastes a block 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -38,15 +38,15 @@ exports[`Block Actions Menu block options does not replace a non empty Paragraph
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
@@ -56,29 +56,29 @@ exports[`Block Actions Menu block options duplicates a block 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Block Actions Menu block options transforms a Paragraph block into a Pullquote block 1`] = `
 "<!-- wp:pullquote -->
-<figure class=\\"wp-block-pullquote\\"><blockquote><p>Hello!</p></blockquote></figure>
+<figure class="wp-block-pullquote"><blockquote><p>Hello!</p></blockquote></figure>
 <!-- /wp:pullquote -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
@@ -88,11 +88,11 @@ exports[`Block Actions Menu moving blocks disables the Move Down button for the
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
@@ -102,17 +102,17 @@ exports[`Block Actions Menu moving blocks disables the Move Up button for the fi
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Block Actions Menu moving blocks moves blocks up and down 1`] = `
 "<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -120,6 +120,6 @@ exports[`Block Actions Menu moving blocks moves blocks up and down 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;