@wordpress/block-editor 8.4.0 → 8.5.2

package/src/components/block-content-overlay/index.js

@@ -25,6 +25,7 @@ export default function BlockContentOverlay( {
 	const [ isHovered, setIsHovered ] = useState( false );
 
 	const {
+		canEdit,
 		isParentSelected,
 		hasChildSelected,
 		isDraggingBlocks,
@@ -36,8 +37,10 @@ export default function BlockContentOverlay( {
 				hasSelectedInnerBlock,
 				isDraggingBlocks: _isDraggingBlocks,
 				isBlockHighlighted,
+				canEditBlock,
 			} = select( blockEditorStore );
 			return {
+				canEdit: canEditBlock( clientId ),
 				isParentSelected: isBlockSelected( clientId ),
 				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
 				isDraggingBlocks: _isDraggingBlocks(),
@@ -59,6 +62,12 @@ export default function BlockContentOverlay( {
 	);
 
 	useEffect( () => {
+		// The overlay is always active when editing is locked.
+		if ( ! canEdit ) {
+			setIsOverlayActive( true );
+			return;
+		}
+
 		// Reenable when blocks are not in use.
 		if ( ! isParentSelected && ! hasChildSelected && ! isOverlayActive ) {
 			setIsOverlayActive( true );
@@ -75,7 +84,13 @@ export default function BlockContentOverlay( {
 		if ( hasChildSelected && isOverlayActive ) {
 			setIsOverlayActive( false );
 		}
-	}, [ isParentSelected, hasChildSelected, isOverlayActive, isHovered ] );
+	}, [
+		isParentSelected,
+		hasChildSelected,
+		isOverlayActive,
+		isHovered,
+		canEdit,
+	] );
 
 	// Disabled because the overlay div doesn't actually have a role or functionality
 	// as far as the a11y is concerned. We're just catching the first click so that
@@ -88,7 +103,9 @@ export default function BlockContentOverlay( {
 			onMouseEnter={ () => setIsHovered( true ) }
 			onMouseLeave={ () => setIsHovered( false ) }
 			onMouseUp={
-				isOverlayActive ? () => setIsOverlayActive( false ) : undefined
+				isOverlayActive && canEdit
+					? () => setIsOverlayActive( false )
+					: undefined
 			}
 		>
 			{ wrapperProps?.children }

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

@@ -23,19 +23,16 @@ const BlockDraggable = ( {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
 			const {
+				canMoveBlocks,
 				getBlockRootClientId,
-				getTemplateLock,
 				getBlockName,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-			const templateLock = rootClientId
-				? getTemplateLock( rootClientId )
-				: null;
 			const blockName = getBlockName( clientIds[ 0 ] );
 
 			return {
 				srcRootClientId: rootClientId,
-				isDraggable: 'all' !== templateLock,
+				isDraggable: canMoveBlocks( clientIds, rootClientId ),
 				icon: getBlockType( blockName )?.icon,
 			};
 		},

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

@@ -37,4 +37,7 @@ function BlockIcon( { icon, showColors = false, className } ) {
 	);
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-icon/README.md
+ */
 export default memo( BlockIcon );

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

@@ -70,6 +70,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 				<InspectorControls.Slot
 					__experimentalGroup="color"
 					label={ __( 'Color' ) }
+					className="color-block-support-panel__inner-wrapper"
 				/>
 				<InspectorControls.Slot
 					__experimentalGroup="typography"
@@ -187,4 +188,7 @@ const AdvancedControls = () => {
 	);
 };
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
+ */
 export default BlockInspector;

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

@@ -26,9 +26,9 @@
 	// When selecting multiple blocks, we provide an additional selection indicator.
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-hovered,
+	.block-editor-block-list__block.is-multi-selected:not([contenteditable]),
 	.block-editor-block-list__block.is-highlighted,
-	.block-editor-block-list__block.is-multi-selected {
-
+	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
 		&::after {
 			// Show selection borders around every non-nested block's actual footprint.
 			position: absolute;
@@ -41,7 +41,7 @@
 			right: $border-width;
 
 			// Everything else.
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
 
 			// Windows High Contrast mode will show this outline.
@@ -66,11 +66,10 @@
 	}
 
 	.block-editor-block-list__block.is-highlighted::after {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		outline: $border-width solid transparent;
 	}
 
-	.block-editor-block-list__block.is-multi-selected::after,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

package/src/components/block-list/use-block-props/index.js

@@ -31,9 +31,7 @@ import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-name
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
-import { useScrollIntoView } from './use-scroll-into-view';
 import { useBlockRefProvider } from './use-block-refs';
-import { useMultiSelection } from './use-multi-selection';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { store as blockEditorStore } from '../../../store';
 
@@ -115,11 +113,8 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const mergedRefs = useMergeRefs( [
 		props.ref,
 		useFocusFirstElement( clientId ),
-		// Must happen after focus because we check for focus in the block.
-		useScrollIntoView( clientId ),
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
-		useMultiSelection( clientId ),
 		useEventHandlers( clientId ),
 		useNavModeExit( clientId ),
 		useIsHovered(),

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -7,7 +7,12 @@ import { first, last } from 'lodash';
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
+import {
+	focus,
+	isFormElement,
+	isTextField,
+	placeCaretAtHorizontalEdge,
+} from '@wordpress/dom';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -15,7 +20,6 @@ import { useSelect } from '@wordpress/data';
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
-import { setContentEditableWrapper } from './use-multi-selection';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
@@ -32,7 +36,6 @@ function useInitialPosition( clientId ) {
 		( select ) => {
 			const {
 				getSelectedBlocksInitialCaretPosition,
-				isMultiSelecting,
 				isNavigationMode,
 				isBlockSelected,
 			} = select( blockEditorStore );
@@ -41,7 +44,7 @@ function useInitialPosition( clientId ) {
 				return;
 			}
 
-			if ( isMultiSelecting() || isNavigationMode() ) {
+			if ( isNavigationMode() ) {
 				return;
 			}
 
@@ -52,16 +55,6 @@ function useInitialPosition( clientId ) {
 	);
 }
 
-function isFormElement( element ) {
-	const { tagName } = element;
-	return (
-		tagName === 'INPUT' ||
-		tagName === 'BUTTON' ||
-		tagName === 'SELECT' ||
-		tagName === 'TEXTAREA'
-	);
-}
-
 /**
  * Transitions focus to the block or inner tabbable when the block becomes
  * selected and an initial position is set.
@@ -73,8 +66,14 @@ function isFormElement( element ) {
 export function useFocusFirstElement( clientId ) {
 	const ref = useRef();
 	const initialPosition = useInitialPosition( clientId );
+	const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );
 
 	useEffect( () => {
+		// Check if the block is still selected at the time this effect runs.
+		if ( ! isBlockSelected( clientId ) || isMultiSelecting() ) {
+			return;
+		}
+
 		if ( initialPosition === undefined || initialPosition === null ) {
 			return;
 		}
@@ -107,27 +106,21 @@ export function useFocusFirstElement( clientId ) {
 		}
 
 		// Check to see if element is focussable before a generic caret insert.
-		if ( ! target.getAttribute( 'contenteditable' ) ) {
-			const focusElement = focus.tabbable.findNext( target );
-			// Make sure focusElement is valid, form field, and within the current target element.
-			// Ensure is not block inserter trigger, don't want to focus that in the event of the group block which doesn't contain any other focussable elements.
+		if ( ! ref.current.getAttribute( 'contenteditable' ) ) {
+			const focusElement = focus.tabbable.findNext( ref.current );
+			// Make sure focusElement is valid, contained in the same block, and a form field.
 			if (
 				focusElement &&
-				isFormElement( focusElement ) &&
-				target.contains( focusElement ) &&
-				! focusElement.classList.contains(
-					'block-editor-button-block-appender'
-				)
+				isInsideRootBlock( ref.current, focusElement ) &&
+				isFormElement( focusElement )
 			) {
 				focusElement.focus();
 				return;
 			}
 		}
 
-		setContentEditableWrapper( ref.current, false );
-
 		placeCaretAtHorizontalEdge( target, isReverse );
-	}, [ initialPosition ] );
+	}, [ initialPosition, clientId ] );
 
 	return ref;
 }

package/src/components/block-list/use-block-props/use-focus-handler.js

@@ -30,6 +30,14 @@ export function useFocusHandler( clientId ) {
 			 * @param {FocusEvent} event Focus event.
 			 */
 			function onFocus( event ) {
+				// When the whole editor is editable, let writing flow handle
+				// selection.
+				if (
+					node.parentElement.closest( '[contenteditable="true"]' )
+				) {
+					return;
+				}
+
 				// Check synchronously because a non-selected block might be
 				// getting data through `useSelect` asynchronously.
 				if ( isBlockSelected( clientId ) ) {

package/src/components/block-list-appender/index.js

@@ -73,6 +73,11 @@ function BlockListAppender( {
 				'block-list-appender wp-block',
 				className
 			) }
+			// Needed in case the whole editor is content editable (for multi
+			// selection). It fixes an edge case where ArrowDown and ArrowRight
+			// should collapse the selection to the end of that selection and
+			// not into the appender.
+			contentEditable={ false }
 			// The appender exists to let you add the first Paragraph before
 			// any is inserted. To that end, this appender should visually be
 			// presented as a block. That means theme CSS should style it as if

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

@@ -1,3 +1,4 @@
 export { default as BlockLockMenuItem } from './menu-item';
 export { default as BlockLockModal } from './modal';
 export { default as BlockLockToolbar } from './toolbar';
+export { default as useBlockLock } from './use-block-lock';

package/src/components/block-lock/menu-item.js

@@ -4,39 +4,26 @@
 import { __ } from '@wordpress/i18n';
 import { useReducer } from '@wordpress/element';
 import { MenuItem } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import { lock, unlock } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
+import useBlockLock from './use-block-lock';
 import BlockLockModal from './modal';
-import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockMenuItem( { clientId } ) {
-	const { isLocked } = useSelect(
-		( select ) => {
-			const {
-				canMoveBlock,
-				canRemoveBlock,
-				getBlockRootClientId,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
-
-			return {
-				isLocked:
-					! canMoveBlock( clientId, rootClientId ) ||
-					! canRemoveBlock( clientId, rootClientId ),
-			};
-		},
-		[ clientId ]
-	);
+	const { canLock, isLocked } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
 		false
 	);
 
+	if ( ! canLock ) {
+		return null;
+	}
+
 	const label = isLocked ? __( 'Unlock' ) : __( 'Lock' );
 
 	return (

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

@@ -11,30 +11,28 @@ import {
 	Icon,
 	Modal,
 } from '@wordpress/components';
-import { dragHandle, trash } from '@wordpress/icons';
+import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { isReusableBlock, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
+import useBlockLock from './use-block-lock';
 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(
+	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
+	const { isReusable } = useSelect(
 		( select ) => {
-			const {
-				canMoveBlock,
-				canRemoveBlock,
-				getBlockRootClientId,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
+			const { getBlockName } = select( blockEditorStore );
+			const blockName = getBlockName( clientId );
 
 			return {
-				canMove: canMoveBlock( clientId, rootClientId ),
-				canRemove: canRemoveBlock( clientId, rootClientId ),
+				isReusable: isReusableBlock( getBlockType( blockName ) ),
 			};
 		},
 		[ clientId ]
@@ -50,19 +48,12 @@ export default function BlockLockModal( { clientId, onClose } ) {
 		setLock( {
 			move: ! canMove,
 			remove: ! canRemove,
+			...( isReusable ? { edit: ! canEdit } : {} ),
 		} );
-	}, [ canMove, canRemove ] );
+	}, [ canEdit, canMove, canRemove, isReusable ] );
 
 	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';
-	}
+	const isMixed = Object.values( lock ).some( Boolean ) && ! isAllChecked;
 
 	return (
 		<Modal
@@ -98,21 +89,53 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
 						}
 						checked={ isAllChecked }
-						aria-checked={ ariaChecked }
+						indeterminate={ isMixed }
 						onChange={ ( newValue ) =>
 							setLock( {
 								move: newValue,
 								remove: newValue,
+								...( isReusable ? { edit: newValue } : {} ),
 							} )
 						}
 					/>
 					<ul className="block-editor-block-lock-modal__checklist">
+						{ isReusable && (
+							<li className="block-editor-block-lock-modal__checklist-item">
+								<CheckboxControl
+									label={
+										<>
+											{ __( 'Restrict editing' ) }
+											<Icon
+												icon={
+													lock.edit
+														? lockIcon
+														: unlockIcon
+												}
+											/>
+										</>
+									}
+									checked={ !! lock.edit }
+									onChange={ ( edit ) =>
+										setLock( ( prevLock ) => ( {
+											...prevLock,
+											edit,
+										} ) )
+									}
+								/>
+							</li>
+						) }
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
 								label={
 									<>
 										{ __( 'Disable movement' ) }
-										<Icon icon={ dragHandle } />
+										<Icon
+											icon={
+												lock.move
+													? lockIcon
+													: unlockIcon
+											}
+										/>
 									</>
 								}
 								checked={ lock.move }
@@ -129,7 +152,13 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								label={
 									<>
 										{ __( 'Prevent removal' ) }
-										<Icon icon={ trash } />
+										<Icon
+											icon={
+												lock.remove
+													? lockIcon
+													: unlockIcon
+											}
+										/>
 									</>
 								}
 								checked={ lock.remove }

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

@@ -13,7 +13,6 @@
 }
 
 .block-editor-block-lock-modal__options-title {
-	border-bottom: 1px solid $gray-300;
 	padding: $grid-unit-15 0;
 
 	.components-checkbox-control__label {
@@ -27,9 +26,8 @@
 	}
 }
 .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;
+	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-40;
 
 	.components-base-control__field {
 		align-items: center;
@@ -48,6 +46,11 @@
 			fill: $gray-900;
 		}
 	}
+
+	&:hover {
+		background-color: $gray-100;
+		border-radius: $radius-block-ui;
+	}
 }
 
 .block-editor-block-lock-modal__actions {
@@ -60,8 +63,7 @@
 		padding-left: 0 !important;
 
 		&:focus::before {
-			left: 0 !important;
-			right: $grid-unit-15 !important;
+			right: $grid-unit-10 !important;
 		}
 	}
 }

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

@@ -5,35 +5,28 @@ 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 useBlockLock from './use-block-lock';
 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 { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
 		false
 	);
 
-	if ( canMove && canRemove ) {
+	if ( ! canLock ) {
+		return null;
+	}
+
+	if ( canEdit && canMove && canRemove ) {
 		return null;
 	}
 

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

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Return details about the block lock status.
+ *
+ * @param {string} clientId The block client Id.
+ *
+ * @return {Object} Block lock status
+ */
+export default function useBlockLock( clientId ) {
+	return useSelect(
+		( select ) => {
+			const {
+				canEditBlock,
+				canMoveBlock,
+				canRemoveBlock,
+				canLockBlockType,
+				getBlockName,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			const canEdit = canEditBlock( clientId );
+			const canMove = canMoveBlock( clientId, rootClientId );
+			const canRemove = canRemoveBlock( clientId, rootClientId );
+
+			return {
+				canEdit,
+				canMove,
+				canRemove,
+				canLock: canLockBlockType( getBlockName( clientId ) ),
+				isLocked: ! canEdit || ! canMove || ! canRemove,
+			};
+		},
+		[ clientId ]
+	);
+}

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

@@ -95,6 +95,9 @@ function BlockMover( {
 	);
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-mover/README.md
+ */
 export default withSelect( ( select, { clientIds } ) => {
 	const {
 		getBlock,

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

@@ -22,6 +22,10 @@
 		@include break-small() {
 			flex-direction: column;
 		}
+
+		// @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.
+		padding: 0;
 	}
 
 	&.is-horizontal .block-editor-block-mover__move-button-container,