@wordpress/block-editor 8.3.0-next.e230fbab09.0 → 8.4.0

package/src/components/block-lock/modal.js

@@ -0,0 +1,165 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import {
+	Button,
+	CheckboxControl,
+	Flex,
+	FlexItem,
+	Icon,
+	Modal,
+} from '@wordpress/components';
+import { dragHandle, trash } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useBlockDisplayInformation from '../use-block-display-information';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockLockModal( { clientId, onClose } ) {
+	const [ lock, setLock ] = useState( { move: false, remove: false } );
+	const { canMove, canRemove } = useSelect(
+		( select ) => {
+			const {
+				canMoveBlock,
+				canRemoveBlock,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return {
+				canMove: canMoveBlock( clientId, rootClientId ),
+				canRemove: canRemoveBlock( clientId, rootClientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const instanceId = useInstanceId(
+		BlockLockModal,
+		'block-editor-block-lock-modal__options-title'
+	);
+
+	useEffect( () => {
+		setLock( {
+			move: ! canMove,
+			remove: ! canRemove,
+		} );
+	}, [ canMove, canRemove ] );
+
+	const isAllChecked = Object.values( lock ).every( Boolean );
+
+	let ariaChecked;
+	if ( isAllChecked ) {
+		ariaChecked = 'true';
+	} else if ( Object.values( lock ).some( Boolean ) ) {
+		ariaChecked = 'mixed';
+	} else {
+		ariaChecked = 'false';
+	}
+
+	return (
+		<Modal
+			title={ sprintf(
+				/* translators: %s: Name of the block. */
+				__( 'Lock %s' ),
+				blockInformation.title
+			) }
+			overlayClassName="block-editor-block-lock-modal"
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ onClose }
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					updateBlockAttributes( [ clientId ], { lock } );
+					onClose();
+				} }
+			>
+				<p>
+					{ __(
+						'Choose specific attributes to restrict or lock all available options.'
+					) }
+				</p>
+				<div
+					role="group"
+					aria-labelledby={ instanceId }
+					className="block-editor-block-lock-modal__options"
+				>
+					<CheckboxControl
+						className="block-editor-block-lock-modal__options-title"
+						label={
+							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
+						}
+						checked={ isAllChecked }
+						aria-checked={ ariaChecked }
+						onChange={ ( newValue ) =>
+							setLock( {
+								move: newValue,
+								remove: newValue,
+							} )
+						}
+					/>
+					<ul className="block-editor-block-lock-modal__checklist">
+						<li className="block-editor-block-lock-modal__checklist-item">
+							<CheckboxControl
+								label={
+									<>
+										{ __( 'Disable movement' ) }
+										<Icon icon={ dragHandle } />
+									</>
+								}
+								checked={ lock.move }
+								onChange={ ( move ) =>
+									setLock( ( prevLock ) => ( {
+										...prevLock,
+										move,
+									} ) )
+								}
+							/>
+						</li>
+						<li className="block-editor-block-lock-modal__checklist-item">
+							<CheckboxControl
+								label={
+									<>
+										{ __( 'Prevent removal' ) }
+										<Icon icon={ trash } />
+									</>
+								}
+								checked={ lock.remove }
+								onChange={ ( remove ) =>
+									setLock( ( prevLock ) => ( {
+										...prevLock,
+										remove,
+									} ) )
+								}
+							/>
+						</li>
+					</ul>
+				</div>
+				<Flex
+					className="block-editor-block-lock-modal__actions"
+					justify="flex-end"
+					expanded={ false }
+				>
+					<FlexItem>
+						<Button variant="tertiary" onClick={ onClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button variant="primary" type="submit">
+							{ __( 'Apply' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}

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

@@ -0,0 +1,67 @@
+.block-editor-block-lock-modal {
+	z-index: z-index(".block-editor-block-lock-modal");
+
+	.components-modal__frame {
+		@include break-small() {
+			max-width: $break-mobile;
+		}
+	}
+}
+
+.block-editor-block-lock-modal__checklist {
+	margin: 0;
+}
+
+.block-editor-block-lock-modal__options-title {
+	border-bottom: 1px solid $gray-300;
+	padding: $grid-unit-15 0;
+
+	.components-checkbox-control__label {
+		font-weight: 600;
+	}
+
+	.components-base-control__field {
+		align-items: center;
+		display: flex;
+		margin: 0;
+	}
+}
+.block-editor-block-lock-modal__checklist-item {
+	border-bottom: 1px solid $gray-300;
+	margin-bottom: 0;
+	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
+
+	.components-base-control__field {
+		align-items: center;
+		display: flex;
+		margin: 0;
+	}
+
+	.components-checkbox-control__label {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-grow: 1;
+
+		svg {
+			margin-right: $grid-unit-15;
+			fill: $gray-900;
+		}
+	}
+}
+
+.block-editor-block-lock-modal__actions {
+	margin-top: $grid-unit-30;
+}
+
+.block-editor-block-lock-toolbar {
+	.components-button.has-icon {
+		min-width: $button-size-small + $grid-unit-15 !important;
+		padding-left: 0 !important;
+
+		&:focus::before {
+			left: 0 !important;
+			right: $grid-unit-15 !important;
+		}
+	}
+}

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

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useReducer } from '@wordpress/element';
+import { lock } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockLockModal from './modal';
+import useBlockDisplayInformation from '../use-block-display-information';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockLockToolbar( { clientId } ) {
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const { canMove, canRemove } = useSelect(
+		( select ) => {
+			const { canMoveBlock, canRemoveBlock } = select( blockEditorStore );
+
+			return {
+				canMove: canMoveBlock( clientId ),
+				canRemove: canRemoveBlock( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const [ isModalOpen, toggleModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
+
+	if ( canMove && canRemove ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ToolbarGroup className="block-editor-block-lock-toolbar">
+				<ToolbarButton
+					icon={ lock }
+					label={ sprintf(
+						/* translators: %s: block name */
+						__( 'Unlock %s' ),
+						blockInformation.title
+					) }
+					onClick={ toggleModal }
+				/>
+			</ToolbarGroup>
+			{ isModalOpen && (
+				<BlockLockModal clientId={ clientId } onClose={ toggleModal } />
+			) }
+		</>
+	);
+}

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

@@ -46,11 +46,26 @@ export function BlockSettingsDropdown( {
 	const blockClientIds = castArray( clientIds );
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
-	const { onlyBlock } = useSelect(
+	const {
+		onlyBlock,
+		previousBlockClientId,
+		nextBlockClientId,
+		selectedBlockClientIds,
+	} = useSelect(
 		( select ) => {
-			const { getBlockCount } = select( blockEditorStore );
+			const {
+				getBlockCount,
+				getPreviousBlockClientId,
+				getNextBlockClientId,
+				getSelectedBlockClientIds,
+			} = select( blockEditorStore );
 			return {
 				onlyBlock: 1 === getBlockCount(),
+				previousBlockClientId: getPreviousBlockClientId(
+					firstBlockClientId
+				),
+				nextBlockClientId: getNextBlockClientId( firstBlockClientId ),
+				selectedBlockClientIds: getSelectedBlockClientIds(),
 			};
 		},
 		[ firstBlockClientId ]
@@ -72,7 +87,7 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 
-	const updateSelection = useCallback(
+	const updateSelectionAfterDuplicate = useCallback(
 		__experimentalSelectBlock
 			? async ( clientIdsPromise ) => {
 					const ids = await clientIdsPromise;
@@ -86,6 +101,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' ),
@@ -139,7 +181,7 @@ export function BlockSettingsDropdown( {
 										onClick={ flow(
 											onClose,
 											onDuplicate,
-											updateSelection
+											updateSelectionAfterDuplicate
 										) }
 										shortcut={ shortcuts.duplicate }
 									>
@@ -197,7 +239,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-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/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

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

@@ -20,6 +20,7 @@ import BlockParentSelector from '../block-parent-selector';
 import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
 import BlockSettingsMenu from '../block-settings-menu';
+import { BlockLockToolbar } from '../block-lock';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 
@@ -114,6 +115,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 }

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

@@ -91,6 +91,10 @@
 	.block-editor-block-mover {
 		margin-left: -$grid-unit-15 * 0.5;
 	}
+
+	.block-editor-block-lock-toolbar {
+		margin-left: -$grid-unit-15 * 0.5 !important;
+	}
 }
 
 .block-editor-block-toolbar,

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

@@ -307,3 +307,32 @@
 .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 > .components-toolbar-group > .block-editor-block-toolbar__slot, // When no plugin adds to slots, the segment has a `components-toolbar-group` 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 .block-editor-block-toolbar__slot .components-toolbar-group { // Inline formatting tools use this class.
+	padding-left: $grid-unit-15 * 0.5; // 6px.
+	padding-right: $grid-unit-15 * 0.5;
+
+	> .components-button,
+	> div > .components-button,
+	> .components-dropdown .components-button {
+		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;
+		}
+	}
+}

package/src/components/border-radius-control/index.js

@@ -79,7 +79,6 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							values={ values }
 							min={ MIN_BORDER_RADIUS_VALUE }
 							onChange={ onChange }
-							unit={ unit }
 							units={ units }
 						/>
 						<RangeControl

package/src/components/border-radius-control/test/utils.js

@@ -150,6 +150,10 @@ describe( 'hasMixedValues', () => {
 		expect( hasMixedValues( '2px' ) ).toBe( false );
 	} );
 
+	it( 'should return false when passed a string value containing a unit with no quantity', () => {
+		expect( hasMixedValues( 'em' ) ).toBe( false );
+	} );
+
 	it( 'should return true when passed mixed values', () => {
 		const values = {
 			bottomLeft: '1em',

package/src/components/border-radius-control/utils.js

@@ -91,7 +91,8 @@ export function getAllValue( values = {} ) {
  */
 export function hasMixedValues( values = {} ) {
 	const allValue = getAllValue( values );
-	const isMixed = isNaN( parseFloat( allValue ) );
+	const isMixed =
+		typeof values === 'string' ? false : isNaN( parseFloat( allValue ) );
 
 	return isMixed;
 }