@wordpress/block-editor 8.3.0 → 8.5.0

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

@@ -6,12 +6,17 @@ import { castArray, flow, noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { getBlockType, serialize } from '@wordpress/blocks';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import { Children, cloneElement, useCallback } from '@wordpress/element';
-import { serialize } from '@wordpress/blocks';
+import {
+	Children,
+	cloneElement,
+	useCallback,
+	useRef,
+} from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -19,12 +24,14 @@ import { useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
+import BlockIcon from '../block-icon';
 import BlockModeToggle from './block-mode-toggle';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { useShowMoversGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -46,11 +53,40 @@ export function BlockSettingsDropdown( {
 	const blockClientIds = castArray( clientIds );
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
-	const { onlyBlock } = useSelect(
+	const {
+		firstParentClientId,
+		hasReducedUI,
+		onlyBlock,
+		parentBlockType,
+		previousBlockClientId,
+		nextBlockClientId,
+		selectedBlockClientIds,
+	} = useSelect(
 		( select ) => {
-			const { getBlockCount } = select( blockEditorStore );
+			const {
+				getBlockCount,
+				getBlockName,
+				getBlockParents,
+				getPreviousBlockClientId,
+				getNextBlockClientId,
+				getSelectedBlockClientIds,
+				getSettings,
+			} = select( blockEditorStore );
+
+			const parents = getBlockParents( firstBlockClientId );
+			const _firstParentClientId = parents[ parents.length - 1 ];
+			const parentBlockName = getBlockName( _firstParentClientId );
+
 			return {
+				firstParentClientId: _firstParentClientId,
+				hasReducedUI: getSettings().hasReducedUI,
 				onlyBlock: 1 === getBlockCount(),
+				parentBlockType: getBlockType( parentBlockName ),
+				previousBlockClientId: getPreviousBlockClientId(
+					firstBlockClientId
+				),
+				nextBlockClientId: getNextBlockClientId( firstBlockClientId ),
+				selectedBlockClientIds: getSelectedBlockClientIds(),
 			};
 		},
 		[ firstBlockClientId ]
@@ -72,7 +108,11 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 
-	const updateSelection = useCallback(
+	const { selectBlock, toggleBlockHighlight } = useDispatch(
+		blockEditorStore
+	);
+
+	const updateSelectionAfterDuplicate = useCallback(
 		__experimentalSelectBlock
 			? async ( clientIdsPromise ) => {
 					const ids = await clientIdsPromise;
@@ -86,6 +126,33 @@ export function BlockSettingsDropdown( {
 
 	const blockTitle = useBlockDisplayTitle( firstBlockClientId, 25 );
 
+	const updateSelectionAfterRemove = useCallback(
+		__experimentalSelectBlock
+			? () => {
+					const blockToSelect =
+						previousBlockClientId || nextBlockClientId;
+
+					if (
+						blockToSelect &&
+						// From the block options dropdown, it's possible to remove a block that is not selected,
+						// in this case, it's not necessary to update the selection since the selected block wasn't removed.
+						selectedBlockClientIds.includes( firstBlockClientId ) &&
+						// Don't update selection when next/prev block also is in the selection ( and gets removed ),
+						// In case someone selects all blocks and removes them at once.
+						! selectedBlockClientIds.includes( blockToSelect )
+					) {
+						__experimentalSelectBlock( blockToSelect );
+					}
+			  }
+			: noop,
+		[
+			__experimentalSelectBlock,
+			previousBlockClientId,
+			nextBlockClientId,
+			selectedBlockClientIds,
+		]
+	);
+
 	const label = sprintf(
 		/* translators: %s: block name */
 		__( 'Remove %s' ),
@@ -93,6 +160,19 @@ export function BlockSettingsDropdown( {
 	);
 	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
 
+	// Allows highlighting the parent block outline when focusing or hovering
+	// the parent block selector within the child.
+	const selectParentButtonRef = useRef();
+	const { gestures: showParentOutlineGestures } = useShowMoversGestures( {
+		ref: selectParentButtonRef,
+		onChange( isFocused ) {
+			if ( isFocused && hasReducedUI ) {
+				return;
+			}
+			toggleBlockHighlight( firstParentClientId, isFocused );
+		},
+	} );
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -125,6 +205,26 @@ export function BlockSettingsDropdown( {
 								<__unstableBlockSettingsMenuFirstItem.Slot
 									fillProps={ { onClose } }
 								/>
+								{ firstParentClientId !== undefined && (
+									<MenuItem
+										{ ...showParentOutlineGestures }
+										ref={ selectParentButtonRef }
+										icon={
+											<BlockIcon
+												icon={ parentBlockType.icon }
+											/>
+										}
+										onClick={ () =>
+											selectBlock( firstParentClientId )
+										}
+									>
+										{ sprintf(
+											/* translators: %s: Name of the block's parent. */
+											__( 'Select parent block (%s)' ),
+											parentBlockType.title
+										) }
+									</MenuItem>
+								) }
 								{ count === 1 && (
 									<BlockHTMLConvertButton
 										clientId={ firstBlockClientId }
@@ -139,7 +239,7 @@ export function BlockSettingsDropdown( {
 										onClick={ flow(
 											onClose,
 											onDuplicate,
-											updateSelection
+											updateSelectionAfterDuplicate
 										) }
 										shortcut={ shortcuts.duplicate }
 									>
@@ -197,7 +297,7 @@ export function BlockSettingsDropdown( {
 										onClick={ flow(
 											onClose,
 											onRemove,
-											updateSelection
+											updateSelectionAfterRemove
 										) }
 										shortcut={ shortcuts.remove }
 									>

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

@@ -20,16 +20,19 @@ import {
 	useConvertToGroupButtonProps,
 	ConvertToGroupButton,
 } from '../convert-to-group-buttons';
+import { BlockLockMenuItem } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
-	const { selectedBlocks, selectedClientIds } = useSelect(
+	const { selectedBlocks, selectedClientIds, canRemove } = useSelect(
 		( select ) => {
-			const { getBlocksByClientId, getSelectedBlockClientIds } = select(
-				blockEditorStore
-			);
+			const {
+				getBlocksByClientId,
+				getSelectedBlockClientIds,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
@@ -38,30 +41,48 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 					( block ) => block.name
 				),
 				selectedClientIds: ids,
+				canRemove: canRemoveBlocks( ids ),
 			};
 		},
 		[ clientIds ]
 	);
 
+	const showLockButton = selectedClientIds.length === 1;
+
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
 	const convertToGroupButtonProps = useConvertToGroupButtonProps();
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
-	const showConvertToGroupButton = isGroupable || isUngroupable;
+	const showConvertToGroupButton =
+		( isGroupable || isUngroupable ) && canRemove;
+
 	return (
 		<Slot fillProps={ { ...fillProps, selectedBlocks, selectedClientIds } }>
 			{ ( fills ) => {
-				if ( fills?.length > 0 || showConvertToGroupButton ) {
-					return (
-						<MenuGroup>
-							{ fills }
+				if (
+					! fills?.length > 0 &&
+					! showConvertToGroupButton &&
+					! showLockButton
+				) {
+					return null;
+				}
+
+				return (
+					<MenuGroup>
+						{ showLockButton && (
+							<BlockLockMenuItem
+								clientId={ selectedClientIds[ 0 ] }
+							/>
+						) }
+						{ fills }
+						{ showConvertToGroupButton && (
 							<ConvertToGroupButton
 								{ ...convertToGroupButtonProps }
 								onClose={ fillProps?.onClose }
 							/>
-						</MenuGroup>
-					);
-				}
+						) }
+					</MenuGroup>
+				);
 			} }
 		</Slot>
 	);

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

@@ -20,7 +20,7 @@ import {
 	isTemplatePart,
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { stack } from '@wordpress/icons';
+import { copy } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -69,7 +69,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				// appropriate icon to communicate the non-uniformity.
 				_icon = isSelectionOfSameType
 					? getBlockType( firstBlockName )?.icon
-					: stack;
+					: copy;
 			}
 			return {
 				possibleBlockTransformations: getBlockTransformItems(

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

@@ -1,5 +1,13 @@
 .block-editor-block-switcher {
 	position: relative;
+	padding: 0 ($grid-unit-15 * 0.5);
+
+	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+	// This is best fixed by making the mover control area a proper single toolbar group.
+	// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
+	.components-button.components-dropdown-menu__toggle.has-icon.has-icon {
+		min-width: $button-size;
+	}
 }
 
 // Show an indicator triangle.
@@ -8,7 +16,6 @@
 	position: relative;
 }
 
-
 .components-button.block-editor-block-switcher__toggle,
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	margin: 0;

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

@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import { DOWN } from '@wordpress/keycodes';
 import { Button } from '@wordpress/components';
-import { stack } from '@wordpress/icons';
+import { copy } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -131,7 +131,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 	test( 'should render disabled block switcher with multi block of different types when no transforms', () => {
 		useSelect.mockImplementation( () => ( {
 			possibleBlockTransformations: [],
-			icon: stack,
+			icon: copy,
 		} ) );
 		const wrapper = shallow(
 			<BlockSwitcherDropdownMenu

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

@@ -1,6 +1,11 @@
 # Block Title
 
-Renders the block's configured title as a string, or empty if the title cannot be determined.
+The Block Title component renders a block's configured title as a string.
+
+It prioritizes contextual titles such as block variation and reusable block labels when returning a value. If none is found, it will return the display title specified in the block's metadata.
+
+The component will be empty if a title cannot be determined.
+
 
 ## Usage
 

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

@@ -14,8 +14,8 @@ import useBlockDisplayTitle from './use-block-display-title';
  * <BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" maximumLength={ 17 }/>
  * ```
  *
- * @param {Object} props
- * @param {string} props.clientId Client ID of block.
+ * @param {Object}           props
+ * @param {string}           props.clientId      Client ID of block.
  * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
  *
  * @return {JSX.Element} Block title.

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

@@ -26,6 +26,9 @@ jest.mock( '@wordpress/blocks', () => {
 				case 'name-with-label':
 					return { title: 'Block With Label' };
 
+				case 'name-with-custom-label':
+					return { title: 'Block With Custom Label' };
+
 				case 'name-with-long-label':
 					return { title: 'Block With Long Label' };
 			}
@@ -38,6 +41,9 @@ jest.mock( '@wordpress/blocks', () => {
 				case 'Block With Long Label':
 					return 'This is a longer label than typical for blocks to have.';
 
+				case 'Block With Custom Label':
+					return 'A Custom Label like a Block Variation Label';
+
 				default:
 					return title;
 			}
@@ -61,7 +67,7 @@ jest.mock( '@wordpress/data/src/components/use-select', () => {
 } );
 
 describe( 'BlockTitle', () => {
-	it( 'renders nothing if name is falsey2', () => {
+	it( 'renders nothing if name is falsey', () => {
 		useSelect.mockImplementation( () => ( {
 			name: null,
 			attributes: null,
@@ -106,6 +112,42 @@ describe( 'BlockTitle', () => {
 		expect( wrapper.text() ).toBe( 'Test Label' );
 	} );
 
+	it( 'should prioritize reusable block title over title', () => {
+		useSelect.mockImplementation( () => ( {
+			name: 'name-with-label',
+			reusableBlockTitle: 'Reuse me!',
+			attributes: null,
+		} ) );
+
+		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+
+		expect( wrapper.text() ).toBe( 'Reuse me!' );
+	} );
+
+	it( 'should prioritize block label over title', () => {
+		useSelect.mockImplementation( () => ( {
+			name: 'name-with-custom-label',
+			attributes: null,
+		} ) );
+
+		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+
+		expect( wrapper.text() ).toBe(
+			'A Custom Label like a Block Variation Label'
+		);
+	} );
+
+	it( 'should default to block information title if no reusable title or block name is available', () => {
+		useSelect.mockImplementation( () => ( {
+			name: 'some-rando-name',
+			attributes: null,
+		} ) );
+
+		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+
+		expect( wrapper.text() ).toBe( 'Block With Label' );
+	} );
+
 	it( 'truncates the label with custom truncate length', () => {
 		useSelect.mockImplementation( () => ( {
 			name: 'name-with-long-label',

package/src/components/block-title/use-block-display-title.js

@@ -29,7 +29,7 @@ import { store as blockEditorStore } from '../../store';
  * useBlockDisplayTitle( 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', 17 );
  * ```
  *
- * @param {string} clientId Client ID of block.
+ * @param {string}           clientId      Client ID of block.
  * @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.
  * @return {?string} Block title.
  */
@@ -70,14 +70,17 @@ export default function useBlockDisplayTitle( clientId, maximumLength ) {
 	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
+	// label context. If the label is defined we prioritize it over a
 	// possible block variation title match.
-	if ( label && label !== blockType.title ) {
-		return maximumLength && maximumLength > 0
-			? truncate( label, { length: maximumLength } )
-			: label;
+	const blockTitle =
+		label && label !== blockType.title ? label : blockInformation.title;
+
+	if ( maximumLength && maximumLength > 0 ) {
+		return truncate( blockTitle, { length: maximumLength } );
 	}
-	return blockInformation.title;
+
+	return blockTitle;
 }

package/src/components/block-toolbar/block-name-context.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const __unstableBlockNameContext = createContext( '' );
+
+export default __unstableBlockNameContext;

package/src/components/block-toolbar/block-toolbar-last-item.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableBlockToolbarLastItem, Slot } = createSlotFill(
+	'__unstableBlockToolbarLastItem'
+);
+
+__unstableBlockToolbarLastItem.Slot = Slot;
+
+export default __unstableBlockToolbarLastItem;

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

@@ -19,11 +19,15 @@ import BlockMover from '../block-mover';
 import BlockParentSelector from '../block-parent-selector';
 import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
+import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
+import { BlockLockToolbar } from '../block-lock';
+import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
+import __unstableBlockNameContext from './block-name-context';
 
-export default function BlockToolbar( { hideDragHandle } ) {
+const BlockToolbar = ( { hideDragHandle } ) => {
 	const {
 		blockClientIds,
 		blockClientId,
@@ -114,6 +118,11 @@ export default function BlockToolbar( { hideDragHandle } ) {
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
 					<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 						<BlockSwitcher clientIds={ blockClientIds } />
+						{ ! isMultiToolbar && (
+							<BlockLockToolbar
+								clientId={ blockClientIds[ 0 ] }
+							/>
+						) }
 						<BlockMover
 							clientIds={ blockClientIds }
 							hideDragHandle={ hideDragHandle || hasReducedUI }
@@ -121,6 +130,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
 					</ToolbarGroup>
 				) }
 			</div>
+			{ shouldShowVisualToolbar && isMultiToolbar && (
+				<BlockGroupToolbar />
+			) }
 			{ shouldShowVisualToolbar && (
 				<>
 					<BlockControls.Slot
@@ -140,9 +152,19 @@ export default function BlockToolbar( { hideDragHandle } ) {
 						group="other"
 						className="block-editor-block-toolbar__slot"
 					/>
+					<__unstableBlockNameContext.Provider
+						value={ blockType?.name }
+					>
+						<__unstableBlockToolbarLastItem.Slot />
+					</__unstableBlockNameContext.Provider>
 				</>
 			) }
 			<BlockSettingsMenu clientIds={ blockClientIds } />
 		</div>
 	);
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
+ */
+export default BlockToolbar;

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

@@ -91,6 +91,16 @@
 	.block-editor-block-mover {
 		margin-left: -$grid-unit-15 * 0.5;
 	}
+
+	.block-editor-block-lock-toolbar {
+		margin-left: -$grid-unit-15 * 0.5 !important;
+	}
+
+	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+	// This is best fixed by making the mover control area a proper single toolbar group.
+	.components-toolbar-group {
+		padding: 0;
+	}
 }
 
 .block-editor-block-toolbar,

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

@@ -92,25 +92,6 @@ export default function BlockTools( {
 				event.preventDefault();
 				insertBeforeBlock( first( clientIds ) );
 			}
-		} else if (
-			isMatch( 'core/block-editor/delete-multi-selection', event )
-		) {
-			/**
-			 * Check if the target element is a text area, input or
-			 * event.defaultPrevented and return early. In all these
-			 * cases backspace could be handled elsewhere.
-			 */
-			if (
-				[ 'INPUT', 'TEXTAREA' ].includes( event.target.nodeName ) ||
-				event.defaultPrevented
-			) {
-				return;
-			}
-			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length > 1 ) {
-				event.preventDefault();
-				removeBlocks( clientIds );
-			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length > 1 ) {

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

@@ -307,3 +307,30 @@
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
+
+
+// Size multiple sequential buttons to be optically balanced.
+// Icons are 36px, as set by a 24px icon and 12px padding.
+.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class.
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed.
+.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button.
+.block-editor-block-toolbar .components-toolbar-group {
+	padding-left: $grid-unit-15 * 0.5; // 6px.
+	padding-right: $grid-unit-15 * 0.5;
+
+	.components-button,
+	.components-button.has-icon.has-icon {
+		min-width: $block-toolbar-height - $grid-unit-15;
+		padding-left: $grid-unit-15 * 0.5; // 6px.
+		padding-right: $grid-unit-15 * 0.5;
+
+		svg {
+			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
+		}
+
+		&::before {
+			left: 2px;
+			right: 2px;
+		}
+	}
+}