@wordpress/block-editor 7.0.1 → 8.0.0

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

@@ -6,13 +6,13 @@ import { castArray, flow, noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
 
 import { Children, cloneElement, useCallback } from '@wordpress/element';
-import { serialize } from '@wordpress/blocks';
+import { serialize, store as blocksStore } from '@wordpress/blocks';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -46,9 +46,17 @@ export function BlockSettingsDropdown( {
 	const blockClientIds = castArray( clientIds );
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
-	const onlyBlock = useSelect(
-		( select ) => 1 === select( blockEditorStore ).getBlockCount(),
-		[]
+	const { onlyBlock, title } = useSelect(
+		( select ) => {
+			const { getBlockCount, getBlockName } = select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
+			return {
+				onlyBlock: 1 === getBlockCount(),
+				title: getBlockType( getBlockName( firstBlockClientId ) )
+					?.title,
+			};
+		},
+		[ firstBlockClientId ]
 	);
 
 	const shortcuts = useSelect( ( select ) => {
@@ -79,8 +87,12 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const removeBlockLabel =
-		count === 1 ? __( 'Remove block' ) : __( 'Remove blocks' );
+	const label = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		title
+	);
+	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
 
 	return (
 		<BlockActions
@@ -90,7 +102,8 @@ export function BlockSettingsDropdown( {
 			{ ( {
 				canDuplicate,
 				canInsertDefaultBlock,
-				isLocked,
+				canMove,
+				canRemove,
 				onDuplicate,
 				onInsertAfter,
 				onInsertBefore,
@@ -156,7 +169,7 @@ export function BlockSettingsDropdown( {
 										</MenuItem>
 									</>
 								) }
-								{ ! isLocked && ! onlyBlock && (
+								{ canMove && ! onlyBlock && (
 									<MenuItem
 										onClick={ flow( onClose, onMoveTo ) }
 									>
@@ -179,8 +192,8 @@ export function BlockSettingsDropdown( {
 								: Children.map( ( child ) =>
 										cloneElement( child, { onClose } )
 								  ) }
-							<MenuGroup>
-								{ ! isLocked && (
+							{ canRemove && (
+								<MenuGroup>
 									<MenuItem
 										onClick={ flow(
 											onClose,
@@ -191,8 +204,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

@@ -67,11 +67,11 @@ function StylePreview( { onPress, isActive, style, url } ) {
 	);
 
 	const getOutline = ( outlineStyles ) =>
-		outlineStyles.map( ( outlineStyle ) => {
+		outlineStyles.map( ( outlineStyle, index ) => {
 			return (
 				<Animated.View
 					style={ [ outlineStyle, { opacity }, styles[ name ] ] }
-					key={ outlineStyle.borderColor }
+					key={ index }
 				/>
 			);
 		} );

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/__snapshots__/index.js.snap

@@ -6,7 +6,7 @@ exports[`BlockSwitcherDropdownMenu should render disabled block switcher with mu
     className="block-editor-block-switcher__no-switcher-icon"
     disabled={true}
     icon={
-      <BlockIcon
+      <Memo(BlockIcon)
         icon={
           <SVG
             viewBox="0 0 24 24"

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"

package/src/components/block-tools/block-contextual-toolbar.js

@@ -38,15 +38,17 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					selectedBlockClientId &&
 					getBlockType( getBlockName( selectedBlockClientId ) ),
 				hasParents: parents.length,
-				showParentSelector: hasBlockSupport(
-					parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
+				showParentSelector:
+					hasBlockSupport(
+						parentBlockType,
+						'__experimentalParentSelector',
+						true
+					) && selectedBlockClientIds.length <= 1,
 			};
 		},
 		[]
 	);
+
 	if ( blockType ) {
 		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
 			return null;

package/src/components/block-tools/block-popover.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useCallback, useRef, useEffect } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { Popover } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -107,13 +107,11 @@ function BlockPopover( {
 
 	useShortcut(
 		'core/block-editor/focus-toolbar',
-		useCallback( () => {
+		() => {
 			setIsToolbarForced( true );
 			stopTyping( true );
-		}, [] ),
+		},
 		{
-			bindGlobal: true,
-			eventName: 'keydown',
 			isDisabled: ! canFocusHiddenToolbar,
 		}
 	);
@@ -213,6 +211,9 @@ function BlockPopover( {
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ node }
 			shouldAnchorIncludePadding
+			// Used to safeguard sticky position behavior against cases where it would permanently
+			// obscure specific sections of a block.
+			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
 		>
 			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
 				<div
@@ -281,7 +282,7 @@ function wrapperSelector( select ) {
 		getSelectedBlockClientId,
 		getFirstMultiSelectedBlockClientId,
 		getBlockRootClientId,
-		__unstableGetBlockWithoutInnerBlocks,
+		getBlock,
 		getBlockParents,
 		__experimentalGetBlockListSettingsForBlocks,
 	} = select( blockEditorStore );
@@ -293,8 +294,7 @@ function wrapperSelector( select ) {
 		return;
 	}
 
-	const { name, attributes = {}, isValid } =
-		__unstableGetBlockWithoutInnerBlocks( clientId ) || {};
+	const { name, attributes = {}, isValid } = getBlock( clientId ) || {};
 	const blockParentsClientIds = getBlockParents( clientId );
 
 	// Get Block List Settings for all ancestors of the current Block clientId

package/src/components/block-tools/block-selection-button.js

@@ -54,15 +54,13 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 	const selected = useSelect(
 		( select ) => {
 			const {
-				__unstableGetBlockWithoutInnerBlocks,
+				getBlock,
 				getBlockIndex,
 				hasBlockMovingClientId,
 				getBlockListSettings,
 			} = select( blockEditorStore );
 			const index = getBlockIndex( clientId, rootClientId );
-			const { name, attributes } = __unstableGetBlockWithoutInnerBlocks(
-				clientId
-			);
+			const { name, attributes } = getBlock( clientId );
 			const blockMovingMode = hasBlockMovingClientId();
 			return {
 				index,

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

@@ -128,8 +128,11 @@ export default function BlockTools( {
 					ref={ usePopoverScroll( __unstableContentRef ) }
 				/>
 				{ children }
-				{ /* Forward compatibility: a place to render block tools behind the
-                 content so it can be tabbed to properly. */ }
+				{ /* Used for inline rich text popovers. */ }
+				<Popover.Slot
+					name="__unstable-block-tools-after"
+					ref={ usePopoverScroll( __unstableContentRef ) }
+				/>
 			</InsertionPoint>
 		</div>
 	);

package/src/components/block-tools/insertion-point.js

@@ -14,7 +14,8 @@ import {
 	createContext,
 	useContext,
 } from '@wordpress/element';
-import { Popover } from '@wordpress/components';
+import { Popover, __unstableMotion as motion } from '@wordpress/components';
+import { useReducedMotion } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 
 /**
@@ -79,7 +80,7 @@ function InsertionPointPopover( {
 	}, [] );
 	const previousElement = useBlockElement( previousClientId );
 	const nextElement = useBlockElement( nextClientId );
-
+	const isVertical = orientation === 'vertical';
 	const style = useMemo( () => {
 		if ( ! previousElement && ! nextElement ) {
 			return {};
@@ -92,7 +93,7 @@ function InsertionPointPopover( {
 			? nextElement.getBoundingClientRect()
 			: null;
 
-		if ( orientation === 'vertical' ) {
+		if ( isVertical ) {
 			return {
 				width: previousElement
 					? previousElement.offsetWidth
@@ -133,7 +134,7 @@ function InsertionPointPopover( {
 			? nextElement.getBoundingClientRect()
 			: null;
 
-		if ( orientation === 'vertical' ) {
+		if ( isVertical ) {
 			if ( isRTL() ) {
 				return {
 					top: previousRect ? previousRect.bottom : nextRect.top,
@@ -173,6 +174,7 @@ function InsertionPointPopover( {
 	}, [ previousElement, nextElement ] );
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+	const disableMotion = useReducedMotion();
 
 	const className = classnames(
 		'block-editor-block-list__insertion-point',
@@ -198,6 +200,79 @@ function InsertionPointPopover( {
 	const showInsertionPointInserter =
 		previousElement && nextElement && isInserterShown;
 
+	// Define animation variants for the line element.
+	const horizontalLine = {
+		start: {
+			width: 0,
+			top: '50%',
+			bottom: '50%',
+			x: 0,
+		},
+		rest: {
+			width: 4,
+			top: 0,
+			bottom: 0,
+			x: -2,
+		},
+		hover: {
+			width: 4,
+			top: 0,
+			bottom: 0,
+			x: -2,
+		},
+	};
+	const verticalLine = {
+		start: {
+			height: 0,
+			left: '50%',
+			right: '50%',
+			y: 0,
+		},
+		rest: {
+			height: 4,
+			left: 0,
+			right: 0,
+			y: -2,
+		},
+		hover: {
+			height: 4,
+			left: 0,
+			right: 0,
+			y: -2,
+		},
+	};
+	const lineVariants = {
+		// Initial position starts from the center and invisible.
+		start: {
+			...( ! isVertical ? horizontalLine.start : verticalLine.start ),
+			opacity: 0,
+		},
+		// The line expands to fill the container. If the inserter is visible it
+		// is delayed so it appears orchestrated.
+		rest: {
+			...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),
+			opacity: 1,
+			borderRadius: '2px',
+			transition: { delay: showInsertionPointInserter ? 0.4 : 0 },
+		},
+		hover: {
+			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
+			opacity: 1,
+			borderRadius: '2px',
+			transition: { delay: 0.4 },
+		},
+	};
+
+	const inserterVariants = {
+		start: {
+			scale: disableMotion ? 1 : 0,
+		},
+		rest: {
+			scale: 1,
+			transition: { delay: 0.2 },
+		},
+	};
+
 	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 	// While ideally it would be enough to capture the
 	// bubbling focus event from the Inserter, due to the
@@ -216,8 +291,17 @@ function InsertionPointPopover( {
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
+			// Forces a remount of the popover when its position changes
+			// This makes sure the popover doesn't animate from its previous position.
+			key={ nextClientId + '--' + rootClientId }
 		>
-			<div
+			<motion.div
+				layout={ ! disableMotion }
+				initial={ disableMotion ? 'rest' : 'start' }
+				animate="rest"
+				whileHover="hover"
+				whileTap="pressed"
+				exit="start"
 				ref={ ref }
 				tabIndex={ -1 }
 				onClick={ onClick }
@@ -227,9 +311,13 @@ function InsertionPointPopover( {
 				} ) }
 				style={ style }
 			>
-				<div className="block-editor-block-list__insertion-point-indicator" />
+				<motion.div
+					variants={ lineVariants }
+					className="block-editor-block-list__insertion-point-indicator"
+				/>
 				{ showInsertionPointInserter && (
-					<div
+					<motion.div
+						variants={ inserterVariants }
 						className={ classnames(
 							'block-editor-block-list__insertion-point-inserter'
 						) }
@@ -246,9 +334,9 @@ function InsertionPointPopover( {
 								openRef.current = false;
 							} }
 						/>
-					</div>
+					</motion.div>
 				) }
-			</div>
+			</motion.div>
 		</Popover>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */

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

@@ -10,15 +10,8 @@
 	position: absolute;
 	background: var(--wp-admin-theme-color);
 
-	// Provide a muted animation that isn't too noisy.
-	animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
-
 	.block-editor-block-list__insertion-point.is-vertical > & {
 		top: 50%;
-		right: 0;
-		left: 0;
 		height: $border-width;
 	}
 
@@ -26,7 +19,6 @@
 		top: 0;
 		right: 0;
 		left: 50%;
-		height: 100%;
 		width: $border-width;
 	}
 }
@@ -42,8 +34,8 @@
 
 	justify-content: center;
 
-	top: calc(50% - #{  $button-size-small * 0.5 });
-	left: calc(50% - #{  $button-size-small * 0.5 });
+	top: calc(50% - #{$button-size-small * 0.5});
+	left: calc(50% - #{$button-size-small * 0.5});
 }
 
 .block-editor-block-list__block-popover-inserter {
@@ -86,29 +78,6 @@
 	}
 }
 
-.block-editor-block-list__insertion-point-inserter,
-.block-editor-block-list__block-popover-inserter {
-	.block-editor-inserter__toggle.components-button {
-		// Fade it in after a delay.
-		animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
-	}
-}
-
-@keyframes block-editor-inserter__toggle__fade-in-animation-delayed {
-	0% {
-		opacity: 0;
-	}
-	60% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
-
 /**
  * Block Toolbar when contextual.
  */
@@ -181,7 +150,6 @@
 	}
 }
 
-
 /**
  * Block Label for Navigation/Selection Mode
  */
@@ -270,7 +238,8 @@
 		}
 	}
 
-	.components-popover__content.components-popover__content { // Needs specificity.
+	.components-popover__content.components-popover__content {
+		// Needs specificity.
 		background: none;
 		border: none;
 		box-shadow: none;

package/src/components/block-types-list/index.native.js

@@ -22,7 +22,13 @@ import styles from './style.scss';
 
 const MIN_COL_NUM = 3;
 
-export default function BlockTypesList( { name, items, onSelect, listProps } ) {
+export default function BlockTypesList( {
+	name,
+	items,
+	onSelect,
+	listProps,
+	initialNumToRender = 3,
+} ) {
 	const [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );
 	const [ itemWidth, setItemWidth ] = useState();
 	const [ maxWidth, setMaxWidth ] = useState();
@@ -81,7 +87,7 @@ export default function BlockTypesList( { name, items, onSelect, listProps } ) {
 			keyboardShouldPersistTaps="always"
 			numColumns={ numberOfColumns }
 			data={ items }
-			initialNumToRender={ 3 }
+			initialNumToRender={ initialNumToRender }
 			ItemSeparatorComponent={ () => (
 				<TouchableWithoutFeedback accessible={ false }>
 					<View

package/src/components/block-types-list/style.scss

@@ -1,7 +1,4 @@
 .block-editor-block-types-list > [role="presentation"] {
-	padding: 4px;
-	margin-left: -4px;
-	margin-right: -4px;
 	overflow: hidden;
 	display: flex;
 	flex-wrap: wrap;