@wordpress/block-editor 14.3.3 → 14.4.0

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

@@ -58,7 +58,6 @@ export function BlockSettingsDropdown( {
 	const firstBlockClientId = clientIds[ 0 ];
 	const {
 		firstParentClientId,
-		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
 		selectedBlockClientIds,
@@ -67,7 +66,6 @@ export function BlockSettingsDropdown( {
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlockCount,
 				getBlockName,
 				getBlockRootClientId,
 				getPreviousBlockClientId,
@@ -86,7 +84,6 @@ export function BlockSettingsDropdown( {
 
 			return {
 				firstParentClientId: _firstParentClientId,
-				onlyBlock: 1 === getBlockCount( _firstParentClientId ),
 				parentBlockType:
 					_firstParentClientId &&
 					( getActiveBlockVariation(
@@ -186,6 +183,9 @@ export function BlockSettingsDropdown( {
 		}
 	}
 
+	const shouldShowBlockParentMenuItem =
+		! parentBlockIsSelected && !! firstParentClientId;
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -195,7 +195,6 @@ export function BlockSettingsDropdown( {
 				canCopyStyles,
 				canDuplicate,
 				canInsertBlock,
-				canMove,
 				canRemove,
 				onDuplicate,
 				onInsertAfter,
@@ -203,26 +202,39 @@ export function BlockSettingsDropdown( {
 				onRemove,
 				onCopy,
 				onPasteStyles,
-				onMoveTo,
-			} ) => (
-				<DropdownMenu
-					icon={ moreVertical }
-					label={ __( 'Options' ) }
-					className="block-editor-block-settings-menu"
-					popoverProps={ POPOVER_PROPS }
-					open={ open }
-					onToggle={ onToggle }
-					noIcons
-					{ ...props }
-				>
-					{ ( { onClose } ) => (
-						<>
-							<MenuGroup>
-								<__unstableBlockSettingsMenuFirstItem.Slot
-									fillProps={ { onClose } }
-								/>
-								{ ! parentBlockIsSelected &&
-									!! firstParentClientId && (
+			} ) => {
+				// It is possible that some plugins register fills for this menu
+				// even if Core doesn't render anything in the block settings menu.
+				// in which case, we may want to render the menu anyway.
+				// That said for now, we can start more conservative.
+				const isEmpty =
+					! canRemove &&
+					! canDuplicate &&
+					! canInsertBlock &&
+					isContentOnly;
+
+				if ( isEmpty ) {
+					return null;
+				}
+
+				return (
+					<DropdownMenu
+						icon={ moreVertical }
+						label={ __( 'Options' ) }
+						className="block-editor-block-settings-menu"
+						popoverProps={ POPOVER_PROPS }
+						open={ open }
+						onToggle={ onToggle }
+						noIcons
+						{ ...props }
+					>
+						{ ( { onClose } ) => (
+							<>
+								<MenuGroup>
+									<__unstableBlockSettingsMenuFirstItem.Slot
+										fillProps={ { onClose } }
+									/>
+									{ shouldShowBlockParentMenuItem && (
 										<BlockParentSelectorMenuItem
 											parentClientId={
 												firstParentClientId
@@ -230,101 +242,103 @@ export function BlockSettingsDropdown( {
 											parentBlockType={ parentBlockType }
 										/>
 									) }
-								{ count === 1 && (
-									<BlockHTMLConvertButton
-										clientId={ firstBlockClientId }
-									/>
-								) }
-								{ ! isContentOnly && (
-									<CopyMenuItem
-										clientIds={ clientIds }
-										onCopy={ onCopy }
-										shortcut={ displayShortcut.primary(
-											'c'
-										) }
-									/>
-								) }
-								{ canDuplicate && (
-									<MenuItem
-										onClick={ pipe(
-											onClose,
-											onDuplicate,
-											updateSelectionAfterDuplicate
-										) }
-										shortcut={ shortcuts.duplicate }
-									>
-										{ __( 'Duplicate' ) }
-									</MenuItem>
-								) }
-								{ canInsertBlock && ! isContentOnly && (
-									<>
+									{ count === 1 && (
+										<BlockHTMLConvertButton
+											clientId={ firstBlockClientId }
+										/>
+									) }
+									{ ! isContentOnly && (
+										<CopyMenuItem
+											clientIds={ clientIds }
+											onCopy={ onCopy }
+											shortcut={ displayShortcut.primary(
+												'c'
+											) }
+										/>
+									) }
+									{ canDuplicate && (
 										<MenuItem
 											onClick={ pipe(
 												onClose,
-												onInsertBefore
+												onDuplicate,
+												updateSelectionAfterDuplicate
 											) }
-											shortcut={ shortcuts.insertBefore }
+											shortcut={ shortcuts.duplicate }
 										>
-											{ __( 'Add before' ) }
+											{ __( 'Duplicate' ) }
+										</MenuItem>
+									) }
+									{ canInsertBlock && ! isContentOnly && (
+										<>
+											<MenuItem
+												onClick={ pipe(
+													onClose,
+													onInsertBefore
+												) }
+												shortcut={
+													shortcuts.insertBefore
+												}
+											>
+												{ __( 'Add before' ) }
+											</MenuItem>
+											<MenuItem
+												onClick={ pipe(
+													onClose,
+													onInsertAfter
+												) }
+												shortcut={
+													shortcuts.insertAfter
+												}
+											>
+												{ __( 'Add after' ) }
+											</MenuItem>
+										</>
+									) }
+								</MenuGroup>
+								{ canCopyStyles && ! isContentOnly && (
+									<MenuGroup>
+										<CopyMenuItem
+											clientIds={ clientIds }
+											onCopy={ onCopy }
+											label={ __( 'Copy styles' ) }
+										/>
+										<MenuItem onClick={ onPasteStyles }>
+											{ __( 'Paste styles' ) }
 										</MenuItem>
+									</MenuGroup>
+								) }
+								<BlockSettingsMenuControls.Slot
+									fillProps={ {
+										onClose,
+										count,
+										firstBlockClientId,
+									} }
+									clientIds={ clientIds }
+								/>
+								{ typeof children === 'function'
+									? children( { onClose } )
+									: Children.map( ( child ) =>
+											cloneElement( child, { onClose } )
+									  ) }
+								{ canRemove && (
+									<MenuGroup>
 										<MenuItem
 											onClick={ pipe(
 												onClose,
-												onInsertAfter
+												onRemove,
+												updateSelectionAfterRemove
 											) }
-											shortcut={ shortcuts.insertAfter }
+											shortcut={ shortcuts.remove }
 										>
-											{ __( 'Add after' ) }
+											{ __( 'Delete' ) }
 										</MenuItem>
-									</>
+									</MenuGroup>
 								) }
-							</MenuGroup>
-							{ canCopyStyles && ! isContentOnly && (
-								<MenuGroup>
-									<CopyMenuItem
-										clientIds={ clientIds }
-										onCopy={ onCopy }
-										label={ __( 'Copy styles' ) }
-									/>
-									<MenuItem onClick={ onPasteStyles }>
-										{ __( 'Paste styles' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-							<BlockSettingsMenuControls.Slot
-								fillProps={ {
-									onClose,
-									canMove,
-									onMoveTo,
-									onlyBlock,
-									count,
-									firstBlockClientId,
-								} }
-								clientIds={ clientIds }
-							/>
-							{ typeof children === 'function'
-								? children( { onClose } )
-								: Children.map( ( child ) =>
-										cloneElement( child, { onClose } )
-								  ) }
-							{ canRemove && (
-								<MenuGroup>
-									<MenuItem
-										onClick={ pipe(
-											onClose,
-											onRemove,
-											updateSelectionAfterRemove
-										) }
-										shortcut={ shortcuts.remove }
-									>
-										{ __( 'Delete' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-						</>
-					) }
-				</DropdownMenu>
-			) }
+							</>
+						) }
+					</DropdownMenu>
+				);
+			} }
 		</BlockActions>
 	);
 }

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

@@ -4,12 +4,9 @@
 import {
 	createSlotFill,
 	MenuGroup,
-	MenuItem,
 	__experimentalStyleProvider as StyleProvider,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { pipe } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -96,18 +93,6 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 							/>
 						) }
 						{ fills }
-						{ fillProps?.canMove &&
-							! fillProps?.onlyBlock &&
-							! isContentOnly && (
-								<MenuItem
-									onClick={ pipe(
-										fillProps?.onClose,
-										fillProps?.onMoveTo
-									) }
-								>
-									{ __( 'Move to' ) }
-								</MenuItem>
-							) }
 						{ selectedClientIds.length === 1 && (
 							<ModifyContentLockMenuItem
 								clientId={ selectedClientIds[ 0 ] }

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

@@ -35,36 +35,40 @@ function BlockSwitcherDropdownMenuContents( {
 	clientIds,
 	hasBlockStyles,
 	canRemove,
-	isUsingBindings,
 } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
-	const { possibleBlockTransformations, patterns, blocks } = useSelect(
-		( select ) => {
-			const {
-				getBlocksByClientId,
-				getBlockRootClientId,
-				getBlockTransformItems,
-				__experimentalGetPatternTransformItems,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
-			const _blocks = getBlocksByClientId( clientIds );
-			return {
-				blocks: _blocks,
-				possibleBlockTransformations: getBlockTransformItems(
-					_blocks,
-					rootClientId
-				),
-				patterns: __experimentalGetPatternTransformItems(
-					_blocks,
-					rootClientId
-				),
-			};
-		},
-		[ clientIds ]
-	);
+	const { possibleBlockTransformations, patterns, blocks, isUsingBindings } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockAttributes,
+					getBlocksByClientId,
+					getBlockRootClientId,
+					getBlockTransformItems,
+					__experimentalGetPatternTransformItems,
+				} = select( blockEditorStore );
+				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+				const _blocks = getBlocksByClientId( clientIds );
+				return {
+					blocks: _blocks,
+					possibleBlockTransformations: getBlockTransformItems(
+						_blocks,
+						rootClientId
+					),
+					patterns: __experimentalGetPatternTransformItems(
+						_blocks,
+						rootClientId
+					),
+					isUsingBindings: clientIds.every(
+						( clientId ) =>
+							!! getBlockAttributes( clientId )?.metadata
+								?.bindings
+					),
+				};
+			},
+			[ clientIds ]
+		);
 	const blockVariationTransformations = useBlockVariationTransforms( {
 		clientIds,
 		blocks,
@@ -196,7 +200,7 @@ const BlockIndicator = ( { icon, showTitle, blockTitle } ) => (
 	</>
 );
 
-export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
+export const BlockSwitcher = ( { clientIds } ) => {
 	const {
 		hasContentOnlyLocking,
 		canRemove,
@@ -205,6 +209,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		invalidBlocks,
 		isReusable,
 		isTemplate,
+		isDisabled,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -212,6 +217,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 				getBlocksByClientId,
 				getBlockAttributes,
 				canRemoveBlocks,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -222,6 +228,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 			const [ { name: firstBlockName } ] = _blocks;
 			const _isSingleBlockSelected = _blocks.length === 1;
 			const blockType = getBlockType( firstBlockName );
+			const editingMode = getBlockEditingMode( clientIds[ 0 ] );
 
 			let _icon;
 			let _hasTemplateLock;
@@ -256,6 +263,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 				isTemplate:
 					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
 				hasContentOnlyLocking: _hasTemplateLock,
+				isDisabled: editingMode !== 'default',
 			};
 		},
 		[ clientIds ]
@@ -275,7 +283,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		: __( 'Multiple blocks selected' );
 
 	const hideDropdown =
-		disabled ||
+		isDisabled ||
 		( ! hasBlockStyles && ! canRemove ) ||
 		hasContentOnlyLocking;
 
@@ -339,7 +347,6 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 								clientIds={ clientIds }
 								hasBlockStyles={ hasBlockStyles }
 								canRemove={ canRemove }
-								isUsingBindings={ isUsingBindings }
 							/>
 						) }
 					</DropdownMenu>

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

@@ -35,6 +35,7 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Renders the block toolbar.
@@ -58,7 +59,6 @@ export function PrivateBlockToolbar( {
 	const {
 		blockClientId,
 		blockClientIds,
-		isContentOnlyEditingMode,
 		isDefaultEditingMode,
 		blockType,
 		toolbarKey,
@@ -78,12 +78,14 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
-		} = select( blockEditorStore );
+			getParentSectionBlock,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 		const parents = getBlockParents( selectedBlockClientId );
-		const firstParentClientId = parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( firstParentClientId );
+		const parentSection = getParentSectionBlock( selectedBlockClientId );
+		const parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( parentClientId );
 		const parentBlockType = getBlockType( parentBlockName );
 		const editingMode = getBlockEditingMode( selectedBlockClientId );
 		const _isDefaultEditingMode = editingMode === 'default';
@@ -112,21 +114,19 @@ export function PrivateBlockToolbar( {
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
-			isContentOnlyEditingMode: editingMode === 'contentOnly',
 			isDefaultEditingMode: _isDefaultEditingMode,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
-			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
+			toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
 			showParentSelector:
 				parentBlockType &&
-				getBlockEditingMode( firstParentClientId ) === 'default' &&
+				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					parentBlockType,
 					'__experimentalParentSelector',
 					true
 				) &&
-				selectedBlockClientIds.length === 1 &&
-				_isDefaultEditingMode,
+				selectedBlockClientIds.length === 1,
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
@@ -179,36 +179,26 @@ export function PrivateBlockToolbar( {
 			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
-				{ ! isMultiToolbar &&
-					isLargeViewport &&
-					isDefaultEditingMode && <BlockParentSelector /> }
+				{ ! isMultiToolbar && isLargeViewport && (
+					<BlockParentSelector />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					( isDefaultEditingMode ||
-						( isContentOnlyEditingMode && ! hasParentPattern ) ||
-						isSynced ) && (
+					! hasParentPattern && (
 						<div
 							ref={ nodeRef }
 							{ ...showHoveredOrFocusedGestures }
 						>
 							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-								<BlockSwitcher
+								<BlockSwitcher clientIds={ blockClientIds } />
+								{ ! isMultiToolbar && isDefaultEditingMode && (
+									<BlockLockToolbar
+										clientId={ blockClientId }
+									/>
+								) }
+								<BlockMover
 									clientIds={ blockClientIds }
-									disabled={ ! isDefaultEditingMode }
-									isUsingBindings={ isUsingBindings }
+									hideDragHandle={ hideDragHandle }
 								/>
-								{ isDefaultEditingMode && (
-									<>
-										{ ! isMultiToolbar && (
-											<BlockLockToolbar
-												clientId={ blockClientId }
-											/>
-										) }
-										<BlockMover
-											clientIds={ blockClientIds }
-											hideDragHandle={ hideDragHandle }
-										/>
-									</>
-								) }
 							</ToolbarGroup>
 						</div>
 					) }
@@ -242,9 +232,7 @@ export function PrivateBlockToolbar( {
 					</>
 				) }
 				<BlockEditVisuallyButton clientIds={ blockClientIds } />
-				{ isDefaultEditingMode && (
-					<BlockSettingsMenu clientIds={ blockClientIds } />
-				) }
+				<BlockSettingsMenu clientIds={ blockClientIds } />
 			</div>
 		</NavigableToolbar>
 	);

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

@@ -59,9 +59,18 @@
 
 	> :last-child,
 	> :last-child .components-toolbar-group,
-	> :last-child .components-toolbar {
+	> :last-child .components-toolbar,
+	// If the last toolbar group is empty,
+	// we need to remove the double border from the penultimate one.
+	&:has(> :last-child:empty) > :nth-last-child(2),
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group,
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
 		border-right: none;
 	}
+
+	.components-toolbar-group:empty {
+		display: none;
+	}
 }
 
 .block-editor-block-contextual-toolbar {

package/src/components/block-toolbar/use-has-block-toolbar.js

@@ -7,7 +7,6 @@ import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
 /**
  * Returns true if the block toolbar should be shown.
@@ -15,40 +14,29 @@ import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const { isToolbarEnabled, isDefaultEditingMode } = useSelect(
-		( select ) => {
-			const {
-				getBlockEditingMode,
-				getBlockName,
-				getBlockSelectionStart,
-			} = select( blockEditorStore );
+	const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => {
+		const { getBlockEditingMode, getBlockName, getBlockSelectionStart } =
+			select( blockEditorStore );
 
-			// we only care about the 1st selected block
-			// for the toolbar, so we use getBlockSelectionStart
-			// instead of getSelectedBlockClientIds
-			const selectedBlockClientId = getBlockSelectionStart();
+		// we only care about the 1st selected block
+		// for the toolbar, so we use getBlockSelectionStart
+		// instead of getSelectedBlockClientIds
+		const selectedBlockClientId = getBlockSelectionStart();
 
-			const blockType =
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) );
+		const blockType =
+			selectedBlockClientId &&
+			getBlockType( getBlockName( selectedBlockClientId ) );
 
-			return {
-				isToolbarEnabled:
-					blockType &&
-					hasBlockSupport( blockType, '__experimentalToolbar', true ),
-				isDefaultEditingMode:
-					getBlockEditingMode( selectedBlockClientId ) === 'default',
-			};
-		},
-		[]
-	);
+		return {
+			isToolbarEnabled:
+				blockType &&
+				hasBlockSupport( blockType, '__experimentalToolbar', true ),
+			isBlockDisabled:
+				getBlockEditingMode( selectedBlockClientId ) === 'disabled',
+		};
+	}, [] );
 
-	const hasAnyBlockControls = useHasAnyBlockControls();
-
-	if (
-		! isToolbarEnabled ||
-		( ! isDefaultEditingMode && ! hasAnyBlockControls )
-	) {
+	if ( ! isToolbarEnabled || isBlockDisabled ) {
 		return false;
 	}