@wordpress/block-editor 7.0.1-next.5df0cd52b7.0 → 7.0.4

package/src/components/block-list/use-block-props/use-block-custom-class-name.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { hasBlockSupport, getBlockType } from '@wordpress/blocks';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -25,22 +25,20 @@ export function useBlockCustomClassName( clientId ) {
 			const { getBlockName, getBlockAttributes } = select(
 				blockEditorStore
 			);
-			const { className } = getBlockAttributes( clientId );
+			const attributes = getBlockAttributes( clientId );
 
-			if ( ! className ) {
+			if ( ! attributes?.className ) {
 				return;
 			}
 
 			const blockType = getBlockType( getBlockName( clientId ) );
-			const hasLightBlockWrapper =
-				blockType.apiVersion > 1 ||
-				hasBlockSupport( blockType, 'lightBlockWrapper', false );
+			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 
 			if ( ! hasLightBlockWrapper ) {
 				return;
 			}
 
-			return className;
+			return attributes.className;
 		},
 		[ clientId ]
 	);

package/src/components/block-list/use-block-props/use-block-default-class-name.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import {
-	hasBlockSupport,
-	getBlockType,
-	getBlockDefaultClassName,
-} from '@wordpress/blocks';
+import { getBlockType, getBlockDefaultClassName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -26,9 +22,7 @@ export function useBlockDefaultClassName( clientId ) {
 		( select ) => {
 			const name = select( blockEditorStore ).getBlockName( clientId );
 			const blockType = getBlockType( name );
-			const hasLightBlockWrapper =
-				blockType.apiVersion > 1 ||
-				hasBlockSupport( blockType, 'lightBlockWrapper', false );
+			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 
 			if ( ! hasLightBlockWrapper ) {
 				return;

package/src/components/block-list/use-block-props/use-multi-selection.js

@@ -165,7 +165,13 @@ export function useMultiSelection( clientId ) {
 
 				if ( event.shiftKey ) {
 					const blockSelectionStart = getBlockSelectionStart();
-					if ( blockSelectionStart !== clientId ) {
+					// Handle the case where we select a single block by
+					// holding the `shiftKey` and don't mark this action
+					// as multiselection.
+					if (
+						blockSelectionStart &&
+						blockSelectionStart !== clientId
+					) {
 						toggleRichText( node, false );
 						multiSelect( blockSelectionStart, clientId );
 						event.preventDefault();

package/src/components/block-list/use-in-between-inserter.js

@@ -107,6 +107,15 @@ export function useInBetweenInserter() {
 					}
 				}
 
+				// Don't show the insertion point if a parent block has an "overlay"
+				// See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
+				const parentOverlay = element.parentElement?.closest(
+					'.block-editor-block-content-overlay.overlay-active'
+				);
+				if ( parentOverlay ) {
+					return;
+				}
+
 				const clientId = element.id.slice( 'block-'.length );
 
 				if ( ! clientId ) {

package/src/components/block-list-appender/index.js

@@ -87,6 +87,14 @@ function BlockListAppender( {
 				'block-list-appender wp-block',
 				className
 			) }
+			// The appender exists to let you add the first Paragraph before
+			// any is inserted. To that end, this appender should visually be
+			// presented as a block. That means theme CSS should style it as if
+			// it were an empty paragraph block. That means a `wp-block` class to
+			// ensure the width is correct, and a [data-block] attribute to ensure
+			// the correct margin is applied, especially for classic themes which
+			// have commonly targeted that attribute for margins.
+			data-block
 		>
 			{ appender }
 		</TagName>

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

@@ -26,7 +26,7 @@ function BlockMover( {
 	isFirst,
 	isLast,
 	clientIds,
-	isLocked,
+	canMove,
 	isHidden,
 	rootClientId,
 	orientation,
@@ -37,7 +37,7 @@ function BlockMover( {
 	const onFocus = () => setIsFocused( true );
 	const onBlur = () => setIsFocused( false );
 
-	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
+	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
 
@@ -100,7 +100,7 @@ export default withSelect( ( select, { clientIds } ) => {
 		getBlock,
 		getBlockIndex,
 		getBlockListSettings,
-		getTemplateLock,
+		canMoveBlocks,
 		getBlockOrder,
 		getBlockRootClientId,
 	} = select( blockEditorStore );
@@ -119,7 +119,7 @@ export default withSelect( ( select, { clientIds } ) => {
 
 	return {
 		blockType: block ? getBlockType( block.name ) : null,
-		isLocked: getTemplateLock( rootClientId ) === 'all',
+		canMove: canMoveBlocks( clientIds, rootClientId ),
 		rootClientId,
 		firstIndex,
 		isFirst,

package/src/components/block-mover/index.native.js

@@ -26,7 +26,7 @@ export const BLOCK_MOVER_DIRECTION_BOTTOM =
 export const BlockMover = ( {
 	isFirst,
 	isLast,
-	isLocked,
+	canMove,
 	onMoveDown,
 	onMoveUp,
 	onLongMove,
@@ -86,7 +86,7 @@ export const BlockMover = ( {
 		if ( option && option.onSelect ) option.onSelect();
 	};
 
-	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
+	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
 
@@ -130,7 +130,7 @@ export default compose(
 	withSelect( ( select, { clientIds } ) => {
 		const {
 			getBlockIndex,
-			getTemplateLock,
+			canMoveBlocks,
 			getBlockRootClientId,
 			getBlockOrder,
 		} = select( blockEditorStore );
@@ -149,7 +149,7 @@ export default compose(
 			numberOfBlocks: blockOrder.length - 1,
 			isFirst: firstIndex === 0,
 			isLast: lastIndex === blockOrder.length - 1,
-			isLocked: getTemplateLock( rootClientId ) === 'all',
+			canMove: canMoveBlocks( clientIds, rootClientId ),
 			rootClientId,
 		};
 	} ),

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

@@ -5,7 +5,7 @@ exports[`Block Mover Picker should match snapshot 1`] = `
   <ForwardRef(ToolbarButton)
     extraProps={
       Object {
-        "hint": "Double tap to move the block up",
+        "hint": "Double tap to move the block to the left",
       }
     }
     icon={
@@ -14,17 +14,19 @@ exports[`Block Mover Picker should match snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M12.5 3.9L6.7 9.7l1.1 1.1 4-4V20h1.4V6.7l4.5 4.1 1.1-1.1z"
+          d="M20 10.8H6.7l4.1-4.5-1.1-1.1-5.8 6.3 5.8 5.8 1.1-1.1-4-3.9H20z"
         />
       </SVG>
     }
+    isDisabled={false}
+    onClick={[MockFunction]}
     onLongPress={[Function]}
-    title="Move block up from row NaN to row NaN"
+    title="Move block left from position 2 to position 1"
   />
   <ForwardRef(ToolbarButton)
     extraProps={
       Object {
-        "hint": "Double tap to move the block down",
+        "hint": "Double tap to move the block to the right",
       }
     }
     icon={
@@ -33,12 +35,14 @@ exports[`Block Mover Picker should match snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M16.2 13.2l-4 4V4h-1.5v13.3l-4.5-4.1-1 1.1 6.2 5.8 5.8-5.8-1-1.1z"
+          d="M14.3 6.7l-1.1 1.1 4 4H4v1.5h13.3l-4.1 4.4 1.1 1.1 5.8-6.3z"
         />
       </SVG>
     }
+    isDisabled={true}
+    onClick={[MockFunction]}
     onLongPress={[Function]}
-    title="Move block down from row NaN to row NaN"
+    title="Move block right"
   />
   <Picker
     hideCancelButton={true}

package/src/components/block-mover/test/index.native.js

@@ -10,42 +10,40 @@ import { BlockMover } from '../index';
 
 describe( 'Block Mover Picker', () => {
 	it( 'renders without crashing', () => {
-		const wrapper = shallow( <BlockMover />, {
-			context: {
-				isFirst: false,
-				isLast: true,
-				isLocked: false,
-				numberOfBlocks: 2,
-				firstIndex: 1,
+		const props = {
+			isFirst: false,
+			isLast: true,
+			canMove: true,
+			numberOfBlocks: 2,
+			firstIndex: 1,
 
-				onMoveDown: jest.fn(),
-				onMoveUp: jest.fn(),
-				onLongPress: jest.fn(),
+			onMoveDown: jest.fn(),
+			onMoveUp: jest.fn(),
+			onLongPress: jest.fn(),
 
-				rootClientId: '',
-				isStackedHorizontally: true,
-			},
-		} );
+			rootClientId: '',
+			isStackedHorizontally: true,
+		};
+		const wrapper = shallow( <BlockMover { ...props } /> );
 		expect( wrapper ).toBeTruthy();
 	} );
 
 	it( 'should match snapshot', () => {
-		const wrapper = shallow( <BlockMover />, {
-			context: {
-				isFirst: false,
-				isLast: true,
-				isLocked: false,
-				numberOfBlocks: 2,
-				firstIndex: 1,
+		const props = {
+			isFirst: false,
+			isLast: true,
+			canMove: true,
+			numberOfBlocks: 2,
+			firstIndex: 1,
 
-				onMoveDown: jest.fn(),
-				onMoveUp: jest.fn(),
-				onLongPress: jest.fn(),
+			onMoveDown: jest.fn(),
+			onMoveUp: jest.fn(),
+			onLongPress: jest.fn(),
 
-				rootClientId: '',
-				isStackedHorizontally: true,
-			},
-		} );
+			rootClientId: '',
+			isStackedHorizontally: true,
+		};
+		const wrapper = shallow( <BlockMover { ...props } /> );
 		expect( wrapper ).toMatchSnapshot();
 	} );
 } );

package/src/components/block-preview/README.md

@@ -22,7 +22,7 @@ A block instance (object) or a blocks array you would like to render a preview.
 ### `viewportWidth`
 
 -   **Type:** `Int`
--   **Default:** `700`
+-   **Default:** `1200`
 
 Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview.
 

package/src/components/block-preview/auto.js

@@ -2,12 +2,16 @@
  * WordPress dependencies
  */
 import { Disabled } from '@wordpress/components';
-import { useResizeObserver, pure } from '@wordpress/compose';
+import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import BlockList from '../block-list';
+import Iframe from '../iframe';
+import EditorStyles from '../editor-styles';
+import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
 let MemoizedBlockList;
@@ -18,37 +22,51 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 		{ width: containerWidth },
 	] = useResizeObserver();
 	const [
-		containtResizeListener,
+		contentResizeListener,
 		{ height: contentHeight },
 	] = useResizeObserver();
+	const styles = useSelect( ( select ) => {
+		return select( store ).getSettings().styles;
+	}, [] );
 
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
-	const scale =
-		( containerWidth - 2 * __experimentalPadding ) / viewportWidth;
+	const scale = containerWidth / viewportWidth;
 
 	return (
-		<div
-			className="block-editor-block-preview__container editor-styles-wrapper"
-			aria-hidden
-			style={ {
-				height: contentHeight * scale + 2 * __experimentalPadding,
-			} }
-		>
+		<div className="block-editor-block-preview__container">
 			{ containerResizeListener }
 			<Disabled
+				className="block-editor-block-preview__content"
 				style={ {
 					transform: `scale(${ scale })`,
-					width: viewportWidth,
-					left: __experimentalPadding,
-					right: __experimentalPadding,
-					top: __experimentalPadding,
+					height: contentHeight * scale,
 				} }
-				className="block-editor-block-preview__content"
 			>
-				{ containtResizeListener }
-				<MemoizedBlockList />
+				<Iframe
+					head={ <EditorStyles styles={ styles } /> }
+					contentRef={ useRefEffect( ( bodyElement ) => {
+						const {
+							ownerDocument: { documentElement },
+						} = bodyElement;
+						documentElement.style.position = 'absolute';
+						documentElement.style.width = '100%';
+						bodyElement.style.padding =
+							__experimentalPadding + 'px';
+					}, [] ) }
+					aria-hidden
+					tabIndex={ -1 }
+					style={ {
+						position: 'absolute',
+						width: viewportWidth,
+						height: contentHeight,
+						pointerEvents: 'none',
+					} }
+				>
+					{ contentResizeListener }
+					<MemoizedBlockList renderAppender={ false } />
+				</Iframe>
 			</Disabled>
 		</div>
 	);

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

@@ -10,19 +10,10 @@
 
 	overflow: hidden;
 
-	// Overrides the default padding applied in editor styles otherwise preview centering break.
-	&.editor-styles-wrapper {
-		padding: 0;
-		margin: 0;
-	}
-
 	.block-editor-block-preview__content {
 		// This element receives inline styles for width, height, and transform-scale.
 		// Those inline styles are calculated to fit a perfect thumbnail.
 
-		// Position above the padding.
-		position: absolute;
-
 		// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
 		top: 0;
 		left: 0;
@@ -43,16 +34,5 @@
 		.block-list-appender {
 			display: none;
 		}
-
-		// Reset default editor padding
-		.block-editor-block-list__layout.is-root-container {
-			padding-left: 0;
-			padding-right: 0;
-
-			> .wp-block[data-align="full"] {
-				margin-left: 0;
-				margin-right: 0;
-			}
-		}
 	}
 }

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -90,7 +90,8 @@ export function BlockSettingsDropdown( {
 			{ ( {
 				canDuplicate,
 				canInsertDefaultBlock,
-				isLocked,
+				canMove,
+				canRemove,
 				onDuplicate,
 				onInsertAfter,
 				onInsertBefore,
@@ -156,7 +157,7 @@ export function BlockSettingsDropdown( {
 										</MenuItem>
 									</>
 								) }
-								{ ! isLocked && ! onlyBlock && (
+								{ canMove && ! onlyBlock && (
 									<MenuItem
 										onClick={ flow( onClose, onMoveTo ) }
 									>
@@ -179,8 +180,8 @@ export function BlockSettingsDropdown( {
 								: Children.map( ( child ) =>
 										cloneElement( child, { onClose } )
 								  ) }
-							<MenuGroup>
-								{ ! isLocked && (
+							{ canRemove && (
+								<MenuGroup>
 									<MenuItem
 										onClick={ flow(
 											onClose,
@@ -191,8 +192,8 @@ export function BlockSettingsDropdown( {
 									>
 										{ removeBlockLabel }
 									</MenuItem>
-								) }
-							</MenuGroup>
+								</MenuGroup>
+							) }
 						</>
 					) }
 				</DropdownMenu>

package/src/components/block-settings-menu-controls/index.js

@@ -25,17 +25,20 @@ import { store as blockEditorStore } from '../../store';
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
-	const selectedBlocks = useSelect(
+	const { selectedBlocks, selectedClientIds } = useSelect(
 		( select ) => {
 			const { getBlocksByClientId, getSelectedBlockClientIds } = select(
 				blockEditorStore
 			);
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
-			return map(
-				compact( getBlocksByClientId( ids ) ),
-				( block ) => block.name
-			);
+			return {
+				selectedBlocks: map(
+					compact( getBlocksByClientId( ids ) ),
+					( block ) => block.name
+				),
+				selectedClientIds: ids,
+			};
 		},
 		[ clientIds ]
 	);
@@ -46,7 +49,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton = isGroupable || isUngroupable;
 	return (
-		<Slot fillProps={ { ...fillProps, selectedBlocks } }>
+		<Slot fillProps={ { ...fillProps, selectedBlocks, selectedClientIds } }>
 			{ ( fills ) => {
 				if ( fills?.length > 0 || showConvertToGroupButton ) {
 					return (

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

@@ -103,6 +103,7 @@ function BlockStyles( {
 				return (
 					<BlockStyleItem
 						genericPreviewBlock={ genericPreviewBlock }
+						viewportWidth={ type.example?.viewportWidth ?? 500 }
 						className={ className }
 						isActive={ activeStyle === style }
 						key={ style.name }
@@ -127,6 +128,7 @@ function BlockStyles( {
 
 function BlockStyleItem( {
 	genericPreviewBlock,
+	viewportWidth,
 	style,
 	isActive,
 	onBlur,
@@ -165,7 +167,10 @@ function BlockStyleItem( {
 			aria-label={ style.label || style.name }
 		>
 			<div className="block-editor-block-styles__item-preview">
-				<BlockPreview viewportWidth={ 500 } blocks={ previewBlocks } />
+				<BlockPreview
+					viewportWidth={ viewportWidth }
+					blocks={ previewBlocks }
+				/>
 			</div>
 			<div className="block-editor-block-styles__item-label">
 				{ style.label || style.name }

package/src/components/block-styles/preview.native.js

@@ -71,7 +71,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
 			return (
 				<Animated.View
 					style={ [ outlineStyle, { opacity }, styles[ name ] ] }
-					key={ outlineStyle.borderColor }
+					key={ JSON.stringify( outlineStyle ) }
 				/>
 			);
 		} );

package/src/components/block-switcher/block-styles-menu.js

@@ -33,7 +33,7 @@ export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
 			{ hoveredClassName && (
 				<PreviewBlockPopover
 					blocks={
-						blockType.example
+						blockType && blockType.example
 							? getBlockFromExample( blockType.name, {
 									attributes: {
 										...blockType.example.attributes,

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

@@ -38,6 +38,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );
 	const {
 		possibleBlockTransformations,
+		canRemove,
 		hasBlockStyles,
 		icon,
 		blockTitle,
@@ -50,6 +51,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				__experimentalGetPatternTransformItems,
 			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType } = select( blocksStore );
+			const { canRemoveBlocks } = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId(
 				castArray( clientIds )[ 0 ]
 			);
@@ -74,9 +76,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					blocks,
 					rootClientId
 				),
+				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				hasBlockStyles: !! styles?.length,
 				icon: _icon,
-				blockTitle: getBlockType( firstBlockName ).title,
+				blockTitle: getBlockType( firstBlockName )?.title,
 				patterns: __experimentalGetPatternTransformItems(
 					blocks,
 					rootClientId
@@ -95,8 +98,9 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	// Pattern transformation through the `Patterns` API.
 	const onPatternTransform = ( transformedBlocks ) =>
 		replaceBlocks( clientIds, transformedBlocks );
-	const hasPossibleBlockTransformations = !! possibleBlockTransformations.length;
-	const hasPatternTransformation = !! patterns?.length;
+	const hasPossibleBlockTransformations =
+		!! possibleBlockTransformations.length && canRemove;
+	const hasPatternTransformation = !! patterns?.length && canRemove;
 	if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
 		return (
 			<ToolbarGroup>

package/src/components/block-switcher/test/index.js

@@ -120,6 +120,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				{ name: 'core/heading', frecency: 1 },
 				{ name: 'core/paragraph', frecency: 1 },
 			],
+			canRemove: true,
 		} ) );
 		const wrapper = shallow(
 			<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
@@ -146,6 +147,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				{ name: 'core/heading', frecency: 1 },
 				{ name: 'core/paragraph', frecency: 1 },
 			],
+			canRemove: true,
 		} ) );
 		const wrapper = shallow(
 			<BlockSwitcherDropdownMenu
@@ -161,6 +163,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				possibleBlockTransformations: [
 					{ name: 'core/paragraph', frecency: 3 },
 				],
+				canRemove: true,
 			} ) );
 		} );
 		const getDropdown = () =>

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

@@ -66,11 +66,14 @@ export default function BlockTitle( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
 	if ( ! name || ! blockInformation ) return null;
 	const blockType = getBlockType( name );
-	const label = reusableBlockTitle || getBlockLabel( blockType, attributes );
+	const blockLabel = blockType
+		? getBlockLabel( blockType, attributes )
+		: null;
+	const label = reusableBlockTitle || blockLabel;
 	// Label will fallback to the title if no label is defined for the current
 	// label context. If the label is defined we prioritize it over possible
 	// possible block variation title match.
-	if ( label !== blockType.title ) {
+	if ( label && label !== blockType.title ) {
 		return truncate( label, { length: 35 } );
 	}
 	return blockInformation.title;

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

@@ -123,6 +123,10 @@ export default function BlockToolbar( { hideDragHandle } ) {
 			</div>
 			{ shouldShowVisualToolbar && (
 				<>
+					<BlockControls.Slot
+						group="parent"
+						className="block-editor-block-toolbar__slot"
+					/>
 					<BlockControls.Slot
 						group="block"
 						className="block-editor-block-toolbar__slot"