@wordpress/block-editor 10.2.0 → 10.4.0

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

@@ -8,8 +8,19 @@
  * Cross-Block Selection
  */
 
+@keyframes selection-overlay__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 0.4;
+	}
+}
+
 // Note to developers refactoring this, please test navigation mode, and
 // multi selection and hovering the block switcher to highlight the block.
+// Also be sure to test partial selections in Safari, as it draws the
+// selection marker with an entirely different model than Blink.
 .block-editor-block-list__layout {
 	position: relative;
 
@@ -19,63 +30,93 @@
 		background: transparent;
 	}
 
-	// The primary indicator of selection in text is the native selection marker.
-	// When selecting multiple blocks, we provide an additional selection indicator.
-	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
-	.block-editor-block-list__block.is-highlighted,
-	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
+	.has-multi-selection &::selection {
+		background: transparent;
+	}
+
+	// Block multi selection
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
+		// Apply a rounded radius to the entire block.
+		border-radius: $radius-block-ui;
+		overflow: hidden;
+
+		// Hide the native selection indicator, for the selection, and children.
+		&::selection,
+		& ::selection {
+			background: transparent;
+		}
+
+		// Draw a spot color overlay.
 		&::after {
-			// Show selection borders around every non-nested block's actual footprint.
+			content: "";
 			position: absolute;
 			z-index: 1;
 			pointer-events: none;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			background: var(--wp-admin-theme-color);
+			opacity: 0.4;
+			border-radius: $radius-block-ui;
+
+			// Animate.
+			animation: selection-overlay__fade-in-animation 0.1s ease-out;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
+
+			// Show outline in high contrast mode.
+			outline: 2px solid transparent;
+		}
+	}
+
+	// Block highlight, and navigation mode, not focus.
+	// By not using a pseudo element, we can limit ourselves to only
+	// using ::after, leaving ::before free. Otherwise, highlight + multi-select
+	// would require the opacity-changing overlay to be on ::before.
+	.block-editor-block-list__block.is-highlighted,
+	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
+	&.is-navigate-mode .block-editor-block-list__block.is-selected,
+	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
+		border-radius: $radius-block-ui;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+		// Show outline in high contrast mode.
+		outline: 2px solid transparent;
+	}
+
+	// Block focus.
+	.block-editor-block-list__block:not([contenteditable]):focus {
+		outline: none;
+
+		// We're using a pseudo element to overflow placeholder borders
+		// and any border inside the block itself.
+		&::after {
 			content: "";
+			position: absolute;
+			z-index: 1;
+			pointer-events: none;
 			top: $border-width;
+			right: $border-width;
 			bottom: $border-width;
 			left: $border-width;
-			right: $border-width;
-
-			// Everything else.
 			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.
+			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
 
-			// Windows High Contrast mode will show this outline.
-			outline: 2px solid transparent;
-
-			// Show a lighter color for dark themes.
+			// Show a light color for dark themes.
 			.is-dark-theme & {
-				box-shadow: 0 0 0 $border-width $dark-theme-focus;
-			}
-		}
-
-		// Provide exceptions for placeholders.
-		.components-placeholder,
-		.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
-			::selection {
-				background: transparent;
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
 			}
 		}
 	}
 
-	// Hide the selection indicator on .block-editor-block-list__layout, else Safari will show it stacked.
-	.has-multi-selection &::selection {
-		background: transparent;
-	}
-
-	.block-editor-block-list__block.is-highlighted::after {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		outline: $border-width solid transparent;
-	}
-
-	&.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);
-		outline: 2px solid transparent;
-	}
-
+	// Moving blocks using keyboard (Ellipsis > Move).
 	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
+		box-shadow: none;
+		outline: none;
 
-		&::before {
+		&::after {
 			content: "";
 			position: absolute;
 			z-index: 0;
@@ -90,14 +131,10 @@
 			border-radius: $radius-block-ui;
 			border-top: 4px solid $gray-400;
 		}
-
-		&::after {
-			content: none;
-		}
 	}
 
 	& .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected {
-		&::before {
+		&::after {
 			border-color: var(--wp-admin-theme-color);
 		}
 	}
@@ -134,29 +171,16 @@
 }
 
 .block-editor-block-list__layout .block-editor-block-list__block {
+	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
+	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
+	// Blink based browsers, but it also does "crop" the marker, which can result in a small line
+	// from the preceding paragraph showing, which is effectively the above selection bleeding in.
+	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
 	position: relative;
 
 	// Re-enable text-selection on editable blocks.
 	user-select: text;
 
-	// Hide the select style pseudo element as otherwise it gets shwon as "selected" in Safari.
-	&.is-partially-selected::after {
-		// By positioning this pseudo element outside the boundaries of the parent block,
-		// when partially selected it hides the pseudo element selection in Safari.
-		top: -0.5px;
-		right: -0.5px;
-		bottom: -0.5px;
-		left: -0.5px;
-	}
-
-	&.is-highlighted::after,
-	&.is-highlighted ~ .is-multi-selected::after {
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
@@ -167,7 +191,6 @@
 	/**
 	 * Notices
 	 */
-
 	.components-placeholder .components-with-notices-ui {
 		margin: -10px 0 12px 0;
 	}
@@ -186,56 +209,6 @@
 		}
 	}
 
-
-	/**
-	 * Block Layout
-	 */
-
-	// Navigate mode & Focused wrapper.
-	// We're using a pseudo element to overflow placeholder borders
-	// and any border inside the block itself.
-	&:not([contenteditable]):focus {
-		outline: none;
-
-		&::after {
-			position: absolute;
-			z-index: 1;
-			pointer-events: none;
-			content: "";
-			top: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			right: $border-width;
-
-			// 2px outside.
-			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.
-			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
-			}
-		}
-	}
-
-	/**
-	* Block styles and alignments
-	*/
-	&::after {
-		content: "";
-		pointer-events: none;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		border-radius: $radius-block-ui;
-		box-shadow: 0 0 0 0 transparent;
-		transition: box-shadow 0.1s linear;
-		@include reduce-motion("transition");
-	}
-
 	// Warnings
 	&.has-warning {
 		min-height: $grid-unit-60;
@@ -282,7 +255,7 @@
 		}
 	}
 
-	// Reusable blocks parent borer.
+	// Reusable blocks parent border.
 	&.is-reusable.has-child-selected::after {
 		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 	}
@@ -298,12 +271,14 @@
 		cursor: default;
 
 		&::after {
+			content: "";
+			position: absolute;
+			pointer-events: none;
 			top: $border-width;
 			left: $border-width;
 			right: $border-width;
 			bottom: $border-width;
 			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-			// Border is outset, so subtract the width to achieve correct radius.
 			border-radius: $radius-block-ui - $border-width;
 		}
 	}
@@ -315,19 +290,11 @@
 			cursor: unset;
 		}
 
-		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
-		}
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
+		border-radius: $radius-block-ui;
 
 		&:focus {
-			&::after {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			}
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
 }

package/src/components/block-list/use-in-between-inserter.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRefEffect, useDebounce } from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
 
@@ -15,7 +15,7 @@ export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
 	const isInBetweenInserterDisabled = useSelect(
 		( select ) =>
-			select( blockEditorStore ).getSettings().hasReducedUI ||
+			select( blockEditorStore ).getSettings().isDistractionFree ||
 			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
 		[]
 	);
@@ -32,10 +32,6 @@ export function useInBetweenInserter() {
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
-	const delayedShowInsertionPoint = useDebounce( showInsertionPoint, 500, {
-		trailing: true,
-	} );
-
 	return useRefEffect(
 		( node ) => {
 			if ( isInBetweenInserterDisabled ) {
@@ -56,10 +52,7 @@ export function useInBetweenInserter() {
 						'block-editor-block-list__layout'
 					)
 				) {
-					delayedShowInsertionPoint.cancel();
-					if ( isBlockInsertionPointVisible() ) {
-						hideInsertionPoint();
-					}
+					hideInsertionPoint();
 					return;
 				}
 
@@ -100,6 +93,7 @@ export function useInBetweenInserter() {
 				} );
 
 				if ( ! element ) {
+					hideInsertionPoint();
 					return;
 				}
 
@@ -109,6 +103,7 @@ export function useInBetweenInserter() {
 					element = element.firstElementChild;
 
 					if ( ! element ) {
+						hideInsertionPoint();
 						return;
 					}
 				}
@@ -138,10 +133,7 @@ export function useInBetweenInserter() {
 						( event.clientX > elementRect.right ||
 							event.clientX < elementRect.left ) )
 				) {
-					delayedShowInsertionPoint.cancel();
-					if ( isBlockInsertionPointVisible() ) {
-						hideInsertionPoint();
-					}
+					hideInsertionPoint();
 					return;
 				}
 
@@ -150,14 +142,11 @@ export function useInBetweenInserter() {
 				// Don't show the in-between inserter before the first block in
 				// the list (preserves the original behaviour).
 				if ( index === 0 ) {
-					delayedShowInsertionPoint.cancel();
-					if ( isBlockInsertionPointVisible() ) {
-						hideInsertionPoint();
-					}
+					hideInsertionPoint();
 					return;
 				}
 
-				delayedShowInsertionPoint( rootClientId, index, {
+				showInsertionPoint( rootClientId, index, {
 					__unstableWithInserter: true,
 				} );
 			}

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

@@ -15,7 +15,7 @@ import {
 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';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -24,6 +24,9 @@ import useBlockLock from './use-block-lock';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
+// Entity based blocks which allow edit locking
+const ALLOWS_EDIT_LOCKING = [ 'core/block', 'core/navigation' ];
+
 function getTemplateLockValue( lock ) {
 	// Prevents all operations.
 	if ( lock.remove && lock.move ) {
@@ -41,7 +44,7 @@ function getTemplateLockValue( lock ) {
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
 	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
-	const { isReusable, templateLock, hasTemplateLock } = useSelect(
+	const { allowsEditLocking, templateLock, hasTemplateLock } = useSelect(
 		( select ) => {
 			const { getBlockName, getBlockAttributes } =
 				select( blockEditorStore );
@@ -49,7 +52,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			const blockType = getBlockType( blockName );
 
 			return {
-				isReusable: isReusableBlock( blockType ),
+				allowsEditLocking: ALLOWS_EDIT_LOCKING.includes( blockName ),
 				templateLock: getBlockAttributes( clientId )?.templateLock,
 				hasTemplateLock: !! blockType?.attributes?.templateLock,
 			};
@@ -70,9 +73,9 @@ export default function BlockLockModal( { clientId, onClose } ) {
 		setLock( {
 			move: ! canMove,
 			remove: ! canRemove,
-			...( isReusable ? { edit: ! canEdit } : {} ),
+			...( allowsEditLocking ? { edit: ! canEdit } : {} ),
 		} );
-	}, [ canEdit, canMove, canRemove, isReusable ] );
+	}, [ canEdit, canMove, canRemove, allowsEditLocking ] );
 
 	const isAllChecked = Object.values( lock ).every( Boolean );
 	const isMixed = Object.values( lock ).some( Boolean ) && ! isAllChecked;
@@ -121,12 +124,14 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							setLock( {
 								move: newValue,
 								remove: newValue,
-								...( isReusable ? { edit: newValue } : {} ),
+								...( allowsEditLocking
+									? { edit: newValue }
+									: {} ),
 							} )
 						}
 					/>
 					<ul className="block-editor-block-lock-modal__checklist">
-						{ isReusable && (
+						{ allowsEditLocking && (
 							<li className="block-editor-block-lock-modal__checklist-item">
 								<CheckboxControl
 									label={

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

@@ -70,7 +70,7 @@ function BlockMoverStory() {
 			</Toolbar>
 
 			<p style={ { marginTop: 36 } }>
-				But it can also accomodate horizontal blocks.
+				But it can also accommodate horizontal blocks.
 			</p>
 			<Toolbar label="Block Mover">
 				<BlockMover

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

@@ -6,7 +6,6 @@
 	@include break-small() {
 		.block-editor-block-mover:not(.is-horizontal) & {
 			flex-direction: column;
-			width: $block-toolbar-height - $grid-unit-15;
 
 			> * {
 				height: $block-toolbar-height * 0.5;
@@ -62,3 +61,38 @@
 		overflow: hidden;
 	}
 }
+
+// Specificity is necessary to override block toolbar button styles.
+.components-button.block-editor-block-mover-button {
+	// Focus and toggle pseudo elements.
+	&::before {
+		content: "";
+		position: absolute;
+		display: block;
+		border-radius: $radius-block-ui;
+		height: $grid-unit-40;
+
+		// Position the focus rectangle.
+		left: $grid-unit-10;
+		right: $grid-unit-10;
+		z-index: -1;
+
+		// Animate in.
+		animation: components-button__appear-animation 0.1s ease;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+	}
+
+	// Don't show the focus inherited by the Button component.
+	&:focus,
+	&:focus:enabled,
+	// Override focus styles from the block toolbar
+	&:focus::before {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible::before {
+		@include block-toolbar-button-style__focus();
+	}
+}

package/src/components/block-parent-selector/index.js

@@ -24,7 +24,7 @@ import { store as blockEditorStore } from '../../store';
 export default function BlockParentSelector() {
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
-	const { firstParentClientId, shouldHide, hasReducedUI } = useSelect(
+	const { firstParentClientId, shouldHide, isDistractionFree } = useSelect(
 		( select ) => {
 			const {
 				getBlockName,
@@ -46,7 +46,7 @@ export default function BlockParentSelector() {
 					'__experimentalParentSelector',
 					true
 				),
-				hasReducedUI: settings.hasReducedUI,
+				isDistractionFree: settings.isDistractionFree,
 			};
 		},
 		[]
@@ -59,7 +59,7 @@ export default function BlockParentSelector() {
 	const { gestures: showMoversGestures } = useShowMoversGestures( {
 		ref: nodeRef,
 		onChange( isFocused ) {
-			if ( isFocused && hasReducedUI ) {
+			if ( isFocused && isDistractionFree ) {
 				return;
 			}
 			toggleBlockHighlight( firstParentClientId, isFocused );

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

@@ -22,14 +22,14 @@ function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
 
 	return (
-		<InserterDraggableBlocks isEnabled={ isDraggable } blocks={ blocks }>
+		<InserterDraggableBlocks
+			isEnabled={ isDraggable }
+			blocks={ blocks }
+			isPattern={ !! pattern }
+		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
 					className="block-editor-block-patterns-list__list-item"
-					aria-label={ pattern.title }
-					aria-describedby={
-						pattern.description ? descriptionId : undefined
-					}
 					draggable={ draggable }
 					onDragStart={ onDragStart }
 					onDragEnd={ onDragEnd }
@@ -40,6 +40,10 @@ function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
 						{ ...composite }
 						className="block-editor-block-patterns-list__item"
 						onClick={ () => onClick( pattern, blocks ) }
+						aria-label={ pattern.title }
+						aria-describedby={
+							pattern.description ? descriptionId : undefined
+						}
 					>
 						<BlockPreview
 							blocks={ blocks }

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

@@ -2,6 +2,11 @@
 	cursor: pointer;
 	margin-bottom: $grid-unit-30;
 
+	// The list item contains absolutely positioned visually hidden text,
+	// so make this container relative. This prevents the bug experienced in
+	// https://github.com/WordPress/gutenberg/issues/44842.
+	position: relative;
+
 	&.is-placeholder {
 		min-height: 100px;
 	}
@@ -18,8 +23,7 @@
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: $radius-block-ui;
-		border: $border-width solid $gray-100;
+		border-radius: 4px;
 	}
 
 	.block-editor-block-patterns-list__item-title {
@@ -29,7 +33,7 @@
 	}
 
 	&:hover .block-editor-block-preview__container {
-		border: $border-width solid var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 	}
 
 	&:focus .block-editor-block-preview__container {

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

@@ -22,6 +22,14 @@ The client ID of the block representing the bottom position of the popover.
 -   Type: `String`
 -   Required: No
 
+#### shift
+
+This determines whether the block popover always shifts into the viewport or remains at its original position. See FloatingUI for more details on shift.
+
+-	Type: `Boolean`
+-	Required: No
+-	Default: `true`
+
 ## BlockPopoverInbetween
 
 ### Props

package/src/components/block-popover/drop-zone.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useReducedMotion } from '@wordpress/compose';
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockPopover from './index';
+
+const animateVariants = {
+	hide: { opacity: 0, scaleY: 0.75 },
+	show: { opacity: 1, scaleY: 1 },
+	exit: { opacity: 0, scaleY: 0.9 },
+};
+
+function BlockDropZonePopover( {
+	__unstablePopoverSlot,
+	__unstableContentRef,
+} ) {
+	const { clientId } = useSelect( ( select ) => {
+		const { getBlockOrder, getBlockInsertionPoint } =
+			select( blockEditorStore );
+		const insertionPoint = getBlockInsertionPoint();
+		const order = getBlockOrder( insertionPoint.rootClientId );
+
+		if ( ! order.length ) {
+			return {};
+		}
+
+		return {
+			clientId: order[ insertionPoint.index ],
+		};
+	}, [] );
+	const reducedMotion = useReducedMotion();
+
+	return (
+		<BlockPopover
+			clientId={ clientId }
+			__unstableCoverTarget
+			__unstablePopoverSlot={ __unstablePopoverSlot }
+			__unstableContentRef={ __unstableContentRef }
+			className="block-editor-block-popover__drop-zone"
+		>
+			<motion.div
+				data-testid="block-popover-drop-zone"
+				initial={
+					reducedMotion ? animateVariants.show : animateVariants.hide
+				}
+				animate={ animateVariants.show }
+				exit={
+					reducedMotion ? animateVariants.show : animateVariants.exit
+				}
+				className="block-editor-block-popover__drop-zone-foreground"
+			/>
+		</BlockPopover>
+	);
+}
+
+export default BlockDropZonePopover;

package/src/components/block-popover/inbetween.js

@@ -268,6 +268,7 @@ function BlockPopoverInbetween( {
 			resize={ false }
 			flip={ false }
 			placement="bottom-start"
+			variant="unstyled"
 		>
 			<div
 				className="block-editor-block-popover__inbetween-container"