@wordpress/block-editor 12.25.0 → 13.0.0

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

@@ -17,13 +17,26 @@
 	}
 }
 
+@mixin selectedOutline() {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	outline-color: var(--wp-admin-theme-color);
+	outline-style: solid;
+	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+	outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+}
 
 // Hide selections on this element, otherwise Safari will include it stacked
 // under your actual selection.
 // This uses a CSS hack to show the rules to Safari only. Failing here is okay,
 // it just makes the selection indication slightly less precise. That makes this
-// hack a progressive enhancement. Stylelint is disabled to allow the hack to work.
-/* stylelint-disable */
+// hack a progressive enhancement.
+/* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
 _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
 	background-color: transparent;
@@ -39,12 +52,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	position: relative;
 
 	// Block multi selection
-	// Apply a rounded radius to the entire block when multi selected, but with low specificity
-	// so explicit radii set by tools are preserved.
-	&:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
-		border-radius: $radius-block-ui;
-	}
-
 	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
 		// Hide the native selection indicator, for the selection, and children.
 		&::selection,
@@ -64,7 +71,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 			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;
@@ -77,7 +83,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 		// Don't show the highlight focus style when multi selected.
 		&.is-highlighted::after {
-			box-shadow: none;
+			outline-color: transparent;
 		}
 	}
 
@@ -95,21 +101,12 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		// We're using a pseudo element to overflow placeholder borders
 		// and any border inside the block itself.
 		&::after {
-			content: "";
-			position: absolute;
+			@include selectedOutline();
 			z-index: 1;
-			pointer-events: none;
-			top: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			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;
+				outline-color: $dark-theme-focus;
 			}
 		}
 	}
@@ -270,22 +267,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.is-outline-mode .block-editor-block-list__block {
-	&.is-hovered {
-		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-radius: $radius-block-ui - $border-width;
-		}
-	}
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 
 	&.is-selected {
 		cursor: default;
@@ -293,17 +275,35 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		&.rich-text {
 			cursor: unset;
 		}
+	}
+
+	&.is-hovered:not(.is-selected),
+	&:not(.rich-text):not([contenteditable="true"]).is-selected {
 
 		&::after {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui;
+			@include selectedOutline();
+		}
+	}
+}
+
+// Colorize outlines for template parts and synced patterns (.is-reusable).
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
+
+	&.is-hovered::after,
+	&.is-selected::after,
+	&.is-highlighted::after {
+		outline-color: var(--wp-block-synced-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			outline-color: var(--wp-block-synced-color);
+
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				outline-color: $dark-theme-focus;
+			}
 		}
 	}
 }
@@ -336,7 +336,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	animation-timing-function: ease-out;
 	animation-delay: 0.1s;
 	animation-fill-mode: backwards;
-	border-radius: $radius-block-ui;
 	bottom: 0;
 	content: "";
 	left: 0;
@@ -385,22 +384,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }
 
-body.is-zoomed-out {
-	display: flex;
-	flex-direction: column;
-
-	> .is-root-container {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-
-		> main {
-			flex: 1;
-		}
-	}
-}
-
 .wp-site-blocks > [data-align="left"] {
 	float: left;
 	margin-right: 2em;
@@ -493,13 +476,3 @@ body.is-zoomed-out {
 		margin-bottom: auto;
 	}
 }
-
-.block-editor-iframe__html {
-	transform-origin: top center;
-	transition: all 0.3s;
-	@include reduce-motion("transition");
-}
-
-.block-editor-iframe__html[style*="scale"] {
-	background-color: $gray-300;
-}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -111,7 +111,7 @@ function Root( { className, ...settings } ) {
 				useInBetweenInserter(),
 				useTypingObserver(),
 			] ),
-			className: classnames( 'is-root-container', className, {
+			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode && isLargeViewport,
 				'is-navigate-mode': editorMode === 'navigation',

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -28,6 +28,7 @@ import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
+import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
 import { canBindBlock } from '../../../hooks/use-bindings-attributes';
 
@@ -122,6 +123,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			clientId,
 			isEnabled: name === 'core/block' || templateLock === 'contentOnly',
 		} ),
+		useScrollIntoView( { isSelected } ),
 	] );
 
 	const blockEditContext = useBlockEditContext();
@@ -164,7 +166,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-type': name,
 		'data-title': blockTitle,
 		inert: isSubtreeDisabled ? 'true' : undefined,
-		className: classnames(
+		className: clsx(
 			'block-editor-block-list__block',
 			{
 				// The wp-block className is important for editor styles.

package/src/components/block-list/use-block-props/use-scroll-into-view.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useReducedMotion, useRefEffect } from '@wordpress/compose';
+
+export function useScrollIntoView( { isSelected } ) {
+	const prefersReducedMotion = useReducedMotion();
+	return useRefEffect(
+		( node ) => {
+			if ( isSelected ) {
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+				if ( ! defaultView.IntersectionObserver ) {
+					return;
+				}
+				const observer = new defaultView.IntersectionObserver(
+					( entries ) => {
+						// Once observing starts, we always get an initial
+						// entry with the intersecting state.
+						if ( ! entries[ 0 ].isIntersecting ) {
+							node.scrollIntoView( {
+								behavior: prefersReducedMotion
+									? 'instant'
+									: 'smooth',
+							} );
+						}
+						observer.disconnect();
+					}
+				);
+				observer.observe( node );
+				return () => {
+					observer.disconnect();
+				};
+			}
+		},
+		[ isSelected ]
+	);
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -76,7 +76,7 @@ export default function BlockListAppender( {
 			//
 			// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 			tabIndex={ -1 }
-			className={ classnames( 'block-list-appender wp-block', className, {
+			className={ clsx( 'block-list-appender wp-block', className, {
 				'is-drag-over': isDragOver,
 			} ) }
 			// Needed in case the whole editor is content editable (for multi

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -130,7 +130,7 @@ const BlockMoverButton = forwardRef(
 			<>
 				<Button
 					ref={ ref }
-					className={ classnames(
+					className={ clsx(
 						'block-editor-block-mover-button',
 						`is-${ direction }-button`
 					) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -64,7 +64,7 @@ function BlockMover( {
 
 	return (
 		<ToolbarGroup
-			className={ classnames( 'block-editor-block-mover', {
+			className={ clsx( 'block-editor-block-mover', {
 				'is-horizontal': orientation === 'horizontal',
 			} ) }
 		>

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

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneBlock } from '@wordpress/blocks';
+import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	Tooltip,
@@ -47,16 +48,38 @@ function BlockPattern( {
 	onHover,
 	showTitle = true,
 	showTooltip,
+	category,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
 
+	// When we have a selected category and the pattern is draggable, we need to update the
+	// pattern's categories in metadata to only contain the selected category, and pass this to
+	// InserterDraggableBlocks component. We do that because we use this information for pattern
+	// shuffling and it makes more sense to show only the ones from the initially selected category during insertion.
+	const patternBlocks = useMemo( () => {
+		if ( ! category || ! isDraggable ) {
+			return blocks;
+		}
+		return ( blocks ?? [] ).map( ( block ) => {
+			const clonedBlock = cloneBlock( block );
+			if (
+				clonedBlock.attributes.metadata?.categories?.includes(
+					category
+				)
+			) {
+				clonedBlock.attributes.metadata.categories = [ category ];
+			}
+			return clonedBlock;
+		} );
+	}, [ blocks, isDraggable, category ] );
+
 	return (
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable }
-			blocks={ blocks }
+			blocks={ patternBlocks }
 			pattern={ pattern }
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
@@ -94,7 +117,7 @@ function BlockPattern( {
 											? descriptionId
 											: undefined
 									}
-									className={ classnames(
+									className={ clsx(
 										'block-editor-block-patterns-list__item',
 										{
 											'block-editor-block-patterns-list__list-item-synced':
@@ -124,7 +147,10 @@ function BlockPattern( {
 							/>
 
 							{ showTitle && (
-								<HStack className="block-editor-patterns__pattern-details">
+								<HStack
+									className="block-editor-patterns__pattern-details"
+									spacing={ 2 }
+								>
 									{ pattern.type ===
 										INSERTER_PATTERN_TYPES.user &&
 										! pattern.syncStatus && (
@@ -173,6 +199,7 @@ function BlockPatternsList(
 		onClickPattern,
 		orientation,
 		label = __( 'Block patterns' ),
+		category,
 		showTitle = true,
 		showTitlesAsTooltip,
 		pagingProps,
@@ -209,6 +236,7 @@ function BlockPatternsList(
 						isDraggable={ isDraggable }
 						showTitle={ showTitle }
 						showTooltip={ showTitlesAsTooltip }
+						category={ category }
 					/>
 				) : (
 					<BlockPatternPlaceholder key={ pattern.name } />

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

@@ -1,6 +1,6 @@
 .block-editor-block-patterns-list__list-item {
 	cursor: pointer;
-	margin-bottom: $grid-unit-30;
+	margin-bottom: $grid-unit-20;
 
 	// The list item contains absolutely positioned visually hidden text,
 	// so make this container relative. This prevents the bug experienced in
@@ -26,38 +26,41 @@
 	// the bottom margin set on `...__list-item` above
 	scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30);
 
+	.block-editor-block-patterns-list__item-title {
+		flex-grow: 1;
+		font-size: $helptext-font-size;
+		text-align: left;
+	}
+
 	.block-editor-block-preview__container {
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: 4px;
-	}
+		border-radius: $radius-block-ui;
 
-	.block-editor-block-patterns-list__item-title {
-		text-align: left;
-		flex-grow: 1;
-	}
-
-	&:hover .block-editor-block-preview__container {
-		box-shadow: 0 0 0 2px $gray-900;
+		&::after {
+			outline: $border-width solid rgba($black, 0.1);
+			outline-offset: -$border-width;
+			border-radius: $radius-block-ui;
+		}
 	}
 
-	&:focus .block-editor-block-preview__container {
-		@include button-style-outset__focus($gray-900);
+	&:hover:not(:focus) .block-editor-block-preview__container::after {
+		outline-color: rgba($black, 0.3);
 	}
 
-	&.block-editor-block-patterns-list__list-item-synced {
-		&:hover,
-		&:focus {
-			.block-editor-block-preview__container {
-				box-shadow: 0 0 0 2px var(--wp-block-synced-color);
-			}
-		}
+	&:focus .block-editor-block-preview__container::after {
+		outline-color: var(--wp-admin-theme-color);
+		outline-width: var(--wp-admin-border-width-focus);
+		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
+		transition: outline 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
-	.block-editor-patterns__pattern-details {
+	.block-editor-patterns__pattern-details:not(:empty) {
 		align-items: center;
 		margin-top: $grid-unit-10;
+		padding-bottom: $grid-unit-05; // Add more space for labels on user-created patterns.
 	}
 
 	.block-editor-patterns__pattern-icon-wrapper {

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

@@ -30,7 +30,7 @@ This determines whether the block popover always shifts into the viewport or rem
 -	Required: No
 -	Default: `true`
 
-## BlockPopoverInbetween
+## BlockPopoverInbetween - Private Component
 
 ### Props
 

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

@@ -7,10 +7,17 @@ import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import BlockPopover from '.';
+import { PrivateBlockPopover } from '.';
 
 function BlockPopoverCover(
-	{ clientId, bottomClientId, children, shift = false, ...props },
+	{
+		clientId,
+		bottomClientId,
+		children,
+		shift = false,
+		additionalStyles,
+		...props
+	},
 	ref
 ) {
 	bottomClientId ??= clientId;
@@ -18,7 +25,7 @@ function BlockPopoverCover(
 	const selectedElement = useBlockElement( clientId );
 
 	return (
-		<BlockPopover
+		<PrivateBlockPopover
 			ref={ ref }
 			clientId={ clientId }
 			bottomClientId={ bottomClientId }
@@ -26,17 +33,24 @@ function BlockPopoverCover(
 			{ ...props }
 		>
 			{ selectedElement && clientId === bottomClientId ? (
-				<CoverContainer selectedElement={ selectedElement }>
+				<CoverContainer
+					selectedElement={ selectedElement }
+					additionalStyles={ additionalStyles }
+				>
 					{ children }
 				</CoverContainer>
 			) : (
 				children
 			) }
-		</BlockPopover>
+		</PrivateBlockPopover>
 	);
 }
 
-function CoverContainer( { selectedElement, children } ) {
+function CoverContainer( {
+	selectedElement,
+	additionalStyles = {},
+	children,
+} ) {
 	const [ width, setWidth ] = useState( selectedElement.offsetWidth );
 	const [ height, setHeight ] = useState( selectedElement.offsetHeight );
 
@@ -54,8 +68,9 @@ function CoverContainer( { selectedElement, children } ) {
 			position: 'absolute',
 			width,
 			height,
+			...additionalStyles,
 		};
-	}, [ width, height ] );
+	}, [ width, height, additionalStyles ] );
 
 	return <div style={ style }>{ children }</div>;
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -241,7 +241,7 @@ function BlockPopoverInbetween( {
 			// This makes sure the popover doesn't animate from its previous position.
 			key={ nextClientId + '--' + rootClientId }
 			{ ...props }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-block-popover',
 				'block-editor-block-popover__inbetween',
 				props.className

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -144,10 +144,7 @@ function BlockPopover(
 			flip={ false }
 			shift={ shift }
 			{ ...props }
-			className={ classnames(
-				'block-editor-block-popover',
-				props.className
-			) }
+			className={ clsx( 'block-editor-block-popover', props.className ) }
 			variant="unstyled"
 		>
 			{ children }
@@ -155,4 +152,25 @@ function BlockPopover(
 	);
 }
 
-export default forwardRef( BlockPopover );
+export const PrivateBlockPopover = forwardRef( BlockPopover );
+
+const PublicBlockPopover = (
+	{ clientId, bottomClientId, children, ...props },
+	ref
+) => (
+	<PrivateBlockPopover
+		{ ...props }
+		bottomClientId={ bottomClientId }
+		clientId={ clientId }
+		__unstableContentRef={ undefined }
+		__unstablePopoverSlot={ undefined }
+		ref={ ref }
+	>
+		{ children }
+	</PrivateBlockPopover>
+);
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-popover/README.md
+ */
+export default forwardRef( PublicBlockPopover );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -148,7 +148,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 	return {
 		...props,
 		ref,
-		className: classnames(
+		className: clsx(
 			props.className,
 			'block-editor-block-preview__live-content',
 			'components-disabled'