@wordpress/block-editor 8.3.1 → 8.5.1

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(
@@ -108,7 +108,19 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					disabled
 					className="block-editor-block-switcher__no-switcher-icon"
 					title={ blockTitle }
-					icon={ <BlockIcon icon={ icon } showColors /> }
+					icon={
+						<>
+							<BlockIcon icon={ icon } showColors />
+							{ ( isReusable || isTemplate ) && (
+								<span className="block-editor-block-switcher__toggle-text">
+									<BlockTitle
+										clientId={ clientIds }
+										maximumLength={ 35 }
+									/>
+								</span>
+							) }
+						</>
+					}
 				/>
 			</ToolbarGroup>
 		);

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;
@@ -39,11 +46,15 @@
 }
 
 .components-button.block-editor-block-switcher__no-switcher-icon {
-	width: $block-toolbar-height;
+	display: flex;
+	// The `!important` is used to vastly simplify the overriding of an inherited selector.
+	// Can be removed if we refactor .block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon
+	padding: ($grid-unit-15 * 0.5) $grid-unit-15 !important;
 
-	.block-editor-blocks-icon {
+	.block-editor-block-icon {
 		margin-right: auto;
 		margin-left: auto;
+		min-width: $icon-size !important;
 	}
 }
 
@@ -165,7 +176,7 @@
 // The block switcher in the contextual toolbar should be bigger.
 .block-editor-block-contextual-toolbar {
 	.components-button.block-editor-block-switcher__no-switcher-icon {
-		width: $grid-unit-60;
+		min-width: $button-size;
 	}
 
 	.components-button.block-editor-block-switcher__no-switcher-icon,

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

@@ -6,19 +6,21 @@ exports[`BlockSwitcherDropdownMenu should render disabled block switcher with mu
     className="block-editor-block-switcher__no-switcher-icon"
     disabled={true}
     icon={
-      <Memo(BlockIcon)
-        icon={
-          <SVG
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <Path
-              d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
-            />
-          </SVG>
-        }
-        showColors={true}
-      />
+      <React.Fragment>
+        <Memo(BlockIcon)
+          icon={
+            <SVG
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <Path
+                d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
+              />
+            </SVG>
+          }
+          showColors={true}
+        />
+      </React.Fragment>
     }
   />
 </ToolbarGroup>

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;
+		}
+	}
+}