@wordpress/block-editor 12.13.0 → 12.15.0

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

@@ -20,7 +20,7 @@ import {
 	store as keyboardShortcutsStore,
 	__unstableUseShortcutEventMatch,
 } from '@wordpress/keyboard-shortcuts';
-import { pipe, useCopyToClipboard } from '@wordpress/compose';
+import { pipe, useCopyToClipboard, useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -47,6 +47,38 @@ function CopyMenuItem( { blocks, onCopy, label } ) {
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
+function ParentSelectorMenuItem( { parentClientId, parentBlockType } ) {
+	const isSmallViewport = useViewportMatch( 'medium', '<' );
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	// Allows highlighting the parent block outline when focusing or hovering
+	// the parent block selector within the child.
+	const menuItemRef = useRef();
+	const gesturesProps = useShowHoveredOrFocusedGestures( {
+		ref: menuItemRef,
+		highlightParent: true,
+	} );
+
+	if ( ! isSmallViewport ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			{ ...gesturesProps }
+			ref={ menuItemRef }
+			icon={ <BlockIcon icon={ parentBlockType.icon } /> }
+			onClick={ () => selectBlock( parentClientId ) }
+		>
+			{ sprintf(
+				/* translators: %s: Name of the block's parent. */
+				__( 'Select parent block (%s)' ),
+				parentBlockType.title
+			) }
+		</MenuItem>
+	);
+}
+
 export function BlockSettingsDropdown( {
 	block,
 	clientIds,
@@ -132,8 +164,6 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 	const isMatch = __unstableUseShortcutEventMatch();
-
-	const { selectBlock } = useDispatch( blockEditorStore );
 	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
 
 	const updateSelectionAfterDuplicate = useCallback(
@@ -175,14 +205,6 @@ export function BlockSettingsDropdown( {
 	const removeBlockLabel =
 		count === 1 ? __( 'Delete' ) : __( 'Delete blocks' );
 
-	// Allows highlighting the parent block outline when focusing or hovering
-	// the parent block selector within the child.
-	const selectParentButtonRef = useRef();
-	const showParentOutlineGestures = useShowHoveredOrFocusedGestures( {
-		ref: selectParentButtonRef,
-		highlightParent: true,
-	} );
-
 	// This can occur when the selected block (the parent)
 	// displays child blocks within a List View.
 	const parentBlockIsSelected =
@@ -297,30 +319,12 @@ export function BlockSettingsDropdown( {
 								/>
 								{ ! parentBlockIsSelected &&
 									!! firstParentClientId && (
-										<MenuItem
-											{ ...showParentOutlineGestures }
-											ref={ selectParentButtonRef }
-											icon={
-												<BlockIcon
-													icon={
-														parentBlockType.icon
-													}
-												/>
-											}
-											onClick={ () =>
-												selectBlock(
-													firstParentClientId
-												)
+										<ParentSelectorMenuItem
+											parentClientId={
+												firstParentClientId
 											}
-										>
-											{ sprintf(
-												/* translators: %s: Name of the block's parent. */
-												__(
-													'Select parent block (%s)'
-												),
-												parentBlockType.title
-											) }
-										</MenuItem>
+											parentBlockType={ parentBlockType }
+										/>
 									) }
 								{ count === 1 && (
 									<BlockHTMLConvertButton

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

@@ -22,6 +22,8 @@ import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 
+import { BlockRenameControl, useBlockRename } from '../block-rename';
+
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( {
@@ -44,7 +46,9 @@ const BlockSettingsMenuControlsSlot = ( {
 	);
 
 	const { canLock } = useBlockLock( selectedClientIds[ 0 ] );
+	const { canRename } = useBlockRename( selectedBlocks[ 0 ] );
 	const showLockButton = selectedClientIds.length === 1 && canLock;
+	const showRenameButton = selectedClientIds.length === 1 && canRename;
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
@@ -84,6 +88,11 @@ const BlockSettingsMenuControlsSlot = ( {
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
+						{ showRenameButton && (
+							<BlockRenameControl
+								clientId={ selectedClientIds[ 0 ] }
+							/>
+						) }
 						{ fills }
 						{ fillProps?.canMove && ! fillProps?.onlyBlock && (
 							<MenuItem

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

@@ -13,7 +13,6 @@ import {
 	__experimentalTruncate as Truncate,
 	Popover,
 } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -120,12 +119,3 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 }
 
 export default BlockStyles;
-
-BlockStyles.Slot = () => {
-	deprecated( 'BlockStyles.Slot', {
-		version: '6.4',
-		since: '6.2',
-	} );
-
-	return null;
-};

package/src/components/block-switcher/pattern-transformations-menu.js

@@ -11,9 +11,7 @@ import {
 	MenuItem,
 	Popover,
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 /**
@@ -21,6 +19,13 @@ import {
  */
 import BlockPreview from '../block-preview';
 import useTransformedPatterns from './use-transformed-patterns';
+import { unlock } from '../../lock-unlock';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
 
 function PatternTransformationsMenu( {
 	blocks,
@@ -73,10 +78,10 @@ function PreviewPatternsPopover( { patterns, onSelect } ) {
 }
 
 function BlockPatternsList( { patterns, onSelect } ) {
-	const composite = useCompositeState();
+	const composite = useCompositeStore();
 	return (
 		<Composite
-			{ ...composite }
+			store={ composite }
 			role="listbox"
 			className="block-editor-block-switcher__preview-patterns-container"
 			aria-label={ __( 'Patterns list' ) }
@@ -86,14 +91,13 @@ function BlockPatternsList( { patterns, onSelect } ) {
 					key={ pattern.name }
 					pattern={ pattern }
 					onSelect={ onSelect }
-					composite={ composite }
 				/>
 			) ) }
 		</Composite>
 	);
 }
 
-function BlockPattern( { pattern, onSelect, composite } ) {
+function BlockPattern( { pattern, onSelect } ) {
 	// TODO check pattern/preview width...
 	const baseClassName =
 		'block-editor-block-switcher__preview-patterns-container';
@@ -104,14 +108,16 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 	return (
 		<div className={ `${ baseClassName }-list__list-item` }>
 			<CompositeItem
-				role="option"
-				as="div"
-				{ ...composite }
-				aria-label={ pattern.title }
-				aria-describedby={
-					pattern.description ? descriptionId : undefined
+				render={
+					<div
+						role="option"
+						aria-label={ pattern.title }
+						aria-describedby={
+							pattern.description ? descriptionId : undefined
+						}
+						className={ `${ baseClassName }-list__item` }
+					/>
 				}
-				className={ `${ baseClassName }-list__item` }
 				onClick={ () => onSelect( pattern.transformedBlocks ) }
 			>
 				<BlockPreview

package/src/components/block-toolbar/block-toolbar-menu.native.js

@@ -212,10 +212,7 @@ const BlockActionsMenu = ( {
 		},
 		convertToRegularBlocks: {
 			id: 'convertToRegularBlocksOption',
-			label:
-				innerBlockCount > 1
-					? __( 'Detach patterns' )
-					: __( 'Detach pattern' ),
+			label: __( 'Detach' ),
 			value: 'convertToRegularBlocksOption',
 			onSelect: () => {
 				/* translators: %s: name of the synced block */

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

@@ -56,6 +56,14 @@
 	}
 }
 
+.block-editor-block-contextual-toolbar.is-fixed {
+	position: sticky;
+	top: 0;
+	z-index: z-index(".block-editor-block-popover");
+	display: block;
+	width: 100%;
+}
+
 // on desktop browsers the fixed toolbar has tweaked borders
 @include break-medium() {
 	.block-editor-block-contextual-toolbar.is-fixed {

package/src/components/block-tools/back-compat.js

@@ -9,7 +9,7 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import InsertionPoint, { InsertionPointOpenRef } from './insertion-point';
-import BlockPopover from './selected-block-popover';
+import BlockPopover from './selected-block-tools';
 
 export default function BlockToolsBackCompat( { children } ) {
 	const openRef = useContext( InsertionPointOpenRef );

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

@@ -7,21 +7,8 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	useLayoutEffect,
-	useEffect,
-	useRef,
-	useState,
-} from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import {
-	ToolbarItem,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { next, previous } from '@wordpress/icons';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -31,12 +18,11 @@ import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
-function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
-	// When the toolbar is fixed it can be collapsed
-	const [ isCollapsed, setIsCollapsed ] = useState( false );
-	const toolbarButtonRef = useRef();
-
-	const isLargeViewport = useViewportMatch( 'medium' );
+export default function BlockContextualToolbar( {
+	focusOnMount,
+	isFixed,
+	...props
+} ) {
 	const {
 		blockType,
 		blockEditingMode,
@@ -78,94 +64,8 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 		};
 	}, [] );
 
-	useEffect( () => {
-		setIsCollapsed( false );
-	}, [ selectedBlockClientId ] );
-
-	const isLargerThanTabletViewport = useViewportMatch( 'large', '>=' );
-	const isFullscreen =
-		document.body.classList.contains( 'is-fullscreen-mode' );
-
-	/**
-	 * The following code is a workaround to fix the width of the toolbar
-	 * it should be removed when the toolbar will be rendered inline
-	 * FIXME: remove this layout effect when the toolbar is no longer
-	 * 				absolutely positioned
-	 */
-	useLayoutEffect( () => {
-		// don't do anything if not fixed toolbar
-		if ( ! isFixed ) {
-			return;
-		}
-
-		const blockToolbar = document.querySelector(
-			'.block-editor-block-contextual-toolbar'
-		);
-
-		if ( ! blockToolbar ) {
-			return;
-		}
-
-		if ( ! blockType ) {
-			blockToolbar.style.width = 'initial';
-			return;
-		}
-
-		if ( ! isLargerThanTabletViewport ) {
-			// set the width of the toolbar to auto
-			blockToolbar.style = {};
-			return;
-		}
-
-		if ( isCollapsed ) {
-			// set the width of the toolbar to auto
-			blockToolbar.style.width = 'auto';
-			return;
-		}
-
-		// get the width of the pinned items in the post editor or widget editor
-		const pinnedItems = document.querySelector(
-			'.edit-post-header__settings, .edit-widgets-header__actions'
-		);
-		// get the width of the left header in the site editor
-		const leftHeader = document.querySelector(
-			'.edit-site-header-edit-mode__end'
-		);
-
-		const computedToolbarStyle = window.getComputedStyle( blockToolbar );
-		const computedPinnedItemsStyle = pinnedItems
-			? window.getComputedStyle( pinnedItems )
-			: false;
-		const computedLeftHeaderStyle = leftHeader
-			? window.getComputedStyle( leftHeader )
-			: false;
-
-		const marginLeft = parseFloat( computedToolbarStyle.marginLeft );
-		const pinnedItemsWidth = computedPinnedItemsStyle
-			? parseFloat( computedPinnedItemsStyle.width )
-			: 0;
-		const leftHeaderWidth = computedLeftHeaderStyle
-			? parseFloat( computedLeftHeaderStyle.width )
-			: 0;
-
-		// set the new witdth of the toolbar
-		blockToolbar.style.width = `calc(100% - ${
-			leftHeaderWidth +
-			pinnedItemsWidth +
-			marginLeft +
-			( pinnedItems || leftHeader ? 2 : 0 ) + // Prevents button focus border from being cut off
-			( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded
-		}px)`;
-	}, [
-		isFixed,
-		isLargerThanTabletViewport,
-		isCollapsed,
-		isFullscreen,
-		blockType,
-	] );
-
 	const isToolbarEnabled =
-		! blockType ||
+		blockType &&
 		hasBlockSupport( blockType, '__experimentalToolbar', true );
 	const hasAnyBlockControls = useHasAnyBlockControls();
 	if (
@@ -179,45 +79,22 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const classes = classnames( 'block-editor-block-contextual-toolbar', {
 		'has-parent': hasParents && showParentSelector,
 		'is-fixed': isFixed,
-		'is-collapsed': isCollapsed,
 	} );
 
 	return (
 		<NavigableToolbar
 			focusOnMount={ focusOnMount }
+			focusEditorOnEscape
 			className={ classes }
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
 			variant={ isFixed ? 'unstyled' : undefined }
+			// Resets the index whenever the active block changes so
+			// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+			key={ selectedBlockClientId }
 			{ ...props }
 		>
-			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
-			{ isFixed && isLargeViewport && blockType && (
-				<ToolbarGroup
-					className={
-						isCollapsed
-							? 'block-editor-block-toolbar__group-expand-fixed-toolbar'
-							: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
-					}
-				>
-					<ToolbarItem
-						as={ ToolbarButton }
-						ref={ toolbarButtonRef }
-						icon={ isCollapsed ? next : previous }
-						onClick={ () => {
-							setIsCollapsed( ( collapsed ) => ! collapsed );
-							toolbarButtonRef.current.focus();
-						} }
-						label={
-							isCollapsed
-								? __( 'Show block tools' )
-								: __( 'Hide block tools' )
-						}
-					/>
-				</ToolbarGroup>
-			) }
+			<BlockToolbar hideDragHandle={ isFixed } />
 		</NavigableToolbar>
 	);
 }
-
-export default BlockContextualToolbar;

package/src/components/block-tools/empty-block-inserter.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import Inserter from '../inserter';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+
+export default function EmptyBlockInserter( {
+	clientId,
+	__unstableContentRef,
+} ) {
+	const {
+		capturingClientId,
+		isInsertionPointVisible,
+		lastClientId,
+		rootClientId,
+	} = useSelectedBlockToolProps( clientId );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	return (
+		<BlockPopover
+			clientId={ capturingClientId || clientId }
+			__unstableCoverTarget
+			bottomClientId={ lastClientId }
+			className={ classnames(
+				'block-editor-block-list__block-side-inserter-popover',
+				{
+					'is-insertion-point-visible': isInsertionPointVisible,
+				}
+			) }
+			__unstableContentRef={ __unstableContentRef }
+			resize={ false }
+			shift={ false }
+			{ ...popoverProps }
+		>
+			<div className="block-editor-block-list__empty-block-inserter">
+				<Inserter
+					position="bottom right"
+					rootClientId={ rootClientId }
+					clientId={ clientId }
+					__experimentalIsQuick
+				/>
+			</div>
+		</BlockPopover>
+	);
+}

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

@@ -6,28 +6,48 @@ import { useViewportMatch } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
+import EmptyBlockInserter from './empty-block-inserter';
 import {
 	InsertionPointOpenRef,
 	default as InsertionPoint,
 } from './insertion-point';
-import SelectedBlockPopover from './selected-block-popover';
+import SelectedBlockTools from './selected-block-tools';
 import { store as blockEditorStore } from '../../store';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 
 function selector( select ) {
-	const { __unstableGetEditorMode, getSettings, isTyping } =
-		select( blockEditorStore );
+	const {
+		getSelectedBlockClientId,
+		getFirstMultiSelectedBlockClientId,
+		getBlock,
+		getSettings,
+		__unstableGetEditorMode,
+		isTyping,
+	} = select( blockEditorStore );
+
+	const clientId =
+		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
+
+	const { name = '', attributes = {} } = getBlock( clientId ) || {};
 
 	return {
-		isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+		clientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
+		hasSelectedBlock: clientId && name,
 		isTyping: isTyping(),
+		isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+		showEmptyBlockSideInserter:
+			clientId &&
+			! isTyping() &&
+			__unstableGetEditorMode() === 'edit' &&
+			isUnmodifiedDefaultBlock( { name, attributes } ),
 	};
 }
 
@@ -46,10 +66,14 @@ export default function BlockTools( {
 	...props
 } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { hasFixedToolbar, isZoomOutMode, isTyping } = useSelect(
-		selector,
-		[]
-	);
+	const {
+		clientId,
+		hasFixedToolbar,
+		hasSelectedBlock,
+		isTyping,
+		isZoomOutMode,
+		showEmptyBlockSideInserter,
+	} = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -106,6 +130,15 @@ export default function BlockTools( {
 				insertBeforeBlock( clientIds[ 0 ] );
 			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
+			if ( event.target.closest( '[role=toolbar]' ) ) {
+				// This shouldn't be necessary, but we have a combination of a few things all combining to create a situation where:
+				// - Because the block toolbar uses createPortal to populate the block toolbar fills, we can't rely on the React event bubbling to hit the onKeyDown listener for the block toolbar
+				// - Since we can't use the React tree, we use the DOM tree which _should_ handle the event bubbling correctly from a `createPortal` element.
+				// - This bubbles via the React tree, which hits this `unselect` escape keypress before the block toolbar DOM event listener has access to it.
+				// An alternative would be to remove the addEventListener on the navigableToolbar and use this event to handle it directly right here. That feels hacky too though.
+				return;
+			}
+
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
@@ -129,6 +162,12 @@ export default function BlockTools( {
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
 	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
 
+	// Conditions for fixed toolbar
+	// 1. Not zoom out mode
+	// 2. It's a large viewport. If it's a smaller viewport, let the floating toolbar handle it as it already has styles attached to make it render that way.
+	// 3. Fixed toolbar is enabled
+	const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
@@ -138,17 +177,34 @@ export default function BlockTools( {
 						__unstableContentRef={ __unstableContentRef }
 					/>
 				) }
-				{ ! isZoomOutMode &&
-					( hasFixedToolbar || ! isLargeViewport ) && (
-						<BlockContextualToolbar isFixed />
-					) }
+				{ /* If there is no slot available, such as in the standalone block editor, render within the editor */ }
+
+				{ ! isLargeViewport && ( // Small viewports always get a fixed toolbar
+					<BlockContextualToolbar isFixed />
+				) }
+
+				{ showEmptyBlockSideInserter && (
+					<EmptyBlockInserter
+						__unstableContentRef={ __unstableContentRef }
+						clientId={ clientId }
+					/>
+				) }
 				{ /* Even if the toolbar is fixed, the block popover is still
 					needed for navigation and zoom-out mode. */ }
-				<SelectedBlockPopover
-					__unstableContentRef={ __unstableContentRef }
-				/>
+				{ ! showEmptyBlockSideInserter && hasSelectedBlock && (
+					<SelectedBlockTools
+						__unstableContentRef={ __unstableContentRef }
+						clientId={ clientId }
+					/>
+				) }
+
 				{ /* Used for the inline rich text toolbar. */ }
-				<Popover.Slot name="block-toolbar" ref={ blockToolbarRef } />
+				{ ! isTopToolbar && (
+					<Popover.Slot
+						name="block-toolbar"
+						ref={ blockToolbarRef }
+					/>
+				) }
 				{ children }
 				{ /* Used for inline rich text popovers. */ }
 				<Popover.Slot