@wordpress/block-editor 8.3.1 → 8.5.1

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/block-html.js

@@ -12,8 +12,8 @@ import {
 	getBlockAttributes,
 	getBlockContent,
 	getBlockType,
-	isValidBlockContent,
 	getSaveContent,
+	validateBlock,
 } from '@wordpress/blocks';
 
 /**
@@ -43,9 +43,13 @@ function BlockHTML( { clientId } ) {
 
 		// If html is empty  we reset the block to the default HTML and mark it as valid to avoid triggering an error
 		const content = html ? html : getSaveContent( blockType, attributes );
-		const isValid = html
-			? isValidBlockContent( blockType, attributes, content )
-			: true;
+		const [ isValid ] = html
+			? validateBlock( {
+					...block,
+					attributes,
+					originalContent: content,
+			  } )
+			: [ true ];
 
 		updateBlock( clientId, {
 			attributes,

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

@@ -17,6 +17,7 @@ import {
 	getBlockType,
 	getSaveContent,
 	isUnmodifiedDefaultBlock,
+	serializeRawBlock,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -74,6 +75,7 @@ function Block( { children, isHtml, ...props } ) {
 }
 
 function BlockListBlock( {
+	block: { __unstableBlockSource },
 	mode,
 	isLocked,
 	canRemove,
@@ -155,7 +157,9 @@ function BlockListBlock( {
 	let block;
 
 	if ( ! isValid ) {
-		const saveContent = getSaveContent( blockType, attributes );
+		const saveContent = __unstableBlockSource
+			? serializeRawBlock( __unstableBlockSource )
+			: getSaveContent( blockType, attributes );
 
 		block = (
 			<Block className="has-warning">

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;
 			}
 
@@ -63,8 +66,14 @@ function useInitialPosition( clientId ) {
 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;
 		}
@@ -96,10 +105,22 @@ export function useFocusFirstElement( clientId ) {
 			return;
 		}
 
-		setContentEditableWrapper( ref.current, false );
+		// Check to see if element is focussable before a generic caret insert.
+		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 &&
+				isInsideRootBlock( ref.current, focusElement ) &&
+				isFormElement( focusElement )
+			) {
+				focusElement.focus();
+				return;
+			}
+		}
 
 		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

@@ -0,0 +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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useReducer } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { lock, unlock } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import useBlockLock from './use-block-lock';
+import BlockLockModal from './modal';
+
+export default function BlockLockMenuItem( { clientId } ) {
+	const { canLock, isLocked } = useBlockLock( clientId, true );
+
+	const [ isModalOpen, toggleModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
+
+	if ( ! canLock ) {
+		return null;
+	}
+
+	const label = isLocked ? __( 'Unlock' ) : __( 'Lock' );
+
+	return (
+		<>
+			<MenuItem icon={ isLocked ? unlock : lock } onClick={ toggleModal }>
+				{ label }
+			</MenuItem>
+			{ isModalOpen && (
+				<BlockLockModal clientId={ clientId } onClose={ toggleModal } />
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,194 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import {
+	Button,
+	CheckboxControl,
+	Flex,
+	FlexItem,
+	Icon,
+	Modal,
+} from '@wordpress/components';
+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 { canEdit, canMove, canRemove } = useBlockLock( clientId, true );
+	const { isReusable } = useSelect(
+		( select ) => {
+			const { getBlockName } = select( blockEditorStore );
+			const blockName = getBlockName( clientId );
+
+			return {
+				isReusable: isReusableBlock( getBlockType( blockName ) ),
+			};
+		},
+		[ 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,
+			...( isReusable ? { edit: ! canEdit } : {} ),
+		} );
+	}, [ canEdit, canMove, canRemove, isReusable ] );
+
+	const isAllChecked = Object.values( lock ).every( Boolean );
+	const isMixed = Object.values( lock ).some( Boolean ) && ! isAllChecked;
+
+	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 }
+						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={
+												lock.move
+													? lockIcon
+													: unlockIcon
+											}
+										/>
+									</>
+								}
+								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={
+												lock.remove
+													? lockIcon
+													: unlockIcon
+											}
+										/>
+									</>
+								}
+								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,70 @@
+.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 {
+	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 {
+	margin-bottom: 0;
+	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-40;
+
+	.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;
+		}
+	}
+
+	&:hover {
+		background-color: $gray-100;
+		border-radius: $radius-block-ui;
+	}
+}
+
+.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,51 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useReducer } from '@wordpress/element';
+import { lock } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BlockLockModal from './modal';
+import useBlockLock from './use-block-lock';
+import useBlockDisplayInformation from '../use-block-display-information';
+
+export default function BlockLockToolbar( { clientId } ) {
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
+
+	const [ isModalOpen, toggleModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
+
+	if ( ! canLock ) {
+		return null;
+	}
+
+	if ( canEdit && 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 } />
+			) }
+		</>
+	);
+}