@wordpress/block-editor 12.23.0 → 12.24.0

package/src/components/image-editor/cropper.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Spinner } from '@wordpress/components';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -20,7 +21,6 @@ export default function ImageCropper( {
 	url,
 	width,
 	height,
-	clientWidth,
 	naturalHeight,
 	naturalWidth,
 	borderProps,
@@ -36,6 +36,8 @@ export default function ImageCropper( {
 		setZoom,
 		rotation,
 	} = useImageEditingContext();
+	const [ contentResizeListener, { width: clientWidth } ] =
+		useResizeObserver();
 
 	let editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;
 
@@ -43,7 +45,7 @@ export default function ImageCropper( {
 		editedHeight = ( clientWidth * naturalWidth ) / naturalHeight;
 	}
 
-	return (
+	const area = (
 		<div
 			className={ classnames(
 				'wp-block-image__crop-area',
@@ -79,4 +81,11 @@ export default function ImageCropper( {
 			{ isInProgress && <Spinner /> }
 		</div>
 	);
+
+	return (
+		<>
+			{ contentResizeListener }
+			{ area }
+		</>
+	);
 }

package/src/components/image-editor/index.js

@@ -19,7 +19,6 @@ export default function ImageEditor( {
 	url,
 	width,
 	height,
-	clientWidth,
 	naturalHeight,
 	naturalWidth,
 	onSaveImage,
@@ -40,7 +39,6 @@ export default function ImageEditor( {
 				url={ url }
 				width={ width }
 				height={ height }
-				clientWidth={ clientWidth }
 				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
 			/>

package/src/components/inserter/block-patterns-tab/index.js

@@ -5,11 +5,10 @@ import { useState } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalHStack as HStack,
 	FlexBlock,
 	Button,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
@@ -20,41 +19,48 @@ import PatternsExplorerModal from '../block-patterns-explorer';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 function BlockPatternsTab( {
 	onSelectCategory,
 	selectedCategory,
 	onInsert,
 	rootClientId,
+	children,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 
 	const categories = usePatternCategories( rootClientId );
 
-	const initialCategory = selectedCategory || categories[ 0 ];
 	const isMobile = useViewportMatch( 'medium', '<' );
 
 	return (
 		<>
 			{ ! isMobile && (
 				<div className="block-editor-inserter__block-patterns-tabs-container">
-					<nav
-						aria-label={ __( 'Block pattern categories' ) }
-						className="block-editor-inserter__block-patterns-tabs"
+					<Tabs
+						selectOnMove={ false }
+						selectedTabId={
+							selectedCategory ? selectedCategory.name : null
+						}
+						orientation={ 'vertical' }
+						onSelect={ ( categoryId ) => {
+							// Pass the full category object
+							onSelectCategory(
+								categories.find(
+									( category ) => category.name === categoryId
+								)
+							);
+						} }
 					>
-						<ItemGroup role="list">
+						<Tabs.TabList className="block-editor-inserter__block-patterns-tablist">
 							{ categories.map( ( category ) => (
-								<Item
-									role="listitem"
+								<Tabs.Tab
 									key={ category.name }
-									onClick={ () =>
-										onSelectCategory( category )
-									}
-									className={
-										category === selectedCategory
-											? 'block-editor-inserter__patterns-category block-editor-inserter__patterns-selected-category'
-											: 'block-editor-inserter__patterns-category'
-									}
+									tabId={ category.name }
+									className="block-editor-inserter__patterns-tab"
 									aria-label={ category.label }
 									aria-current={
 										category === selectedCategory
@@ -74,39 +80,47 @@ function BlockPatternsTab( {
 											}
 										/>
 									</HStack>
-								</Item>
+								</Tabs.Tab>
 							) ) }
-							<div role="listitem">
-								<Button
-									className="block-editor-inserter__patterns-explore-button"
-									onClick={ () =>
-										setShowPatternsExplorer( true )
-									}
-									variant="secondary"
-								>
-									{ __( 'Explore all patterns' ) }
-								</Button>
-							</div>
-						</ItemGroup>
-					</nav>
+						</Tabs.TabList>
+						{ categories.map( ( category ) => (
+							<Tabs.TabPanel
+								key={ category.name }
+								tabId={ category.name }
+								focusable={ false }
+								className="block-editor-inserter__patterns-category-panel"
+							>
+								{ children }
+							</Tabs.TabPanel>
+						) ) }
+					</Tabs>
+					<Button
+						className="block-editor-inserter__patterns-explore-button"
+						onClick={ () => setShowPatternsExplorer( true ) }
+						variant="secondary"
+					>
+						{ __( 'Explore all patterns' ) }
+					</Button>
 				</div>
 			) }
 			{ isMobile && (
 				<MobileTabNavigation categories={ categories }>
 					{ ( category ) => (
-						<PatternCategoryPreviews
-							key={ category.name }
-							onInsert={ onInsert }
-							rootClientId={ rootClientId }
-							category={ category }
-							showTitlesAsTooltip={ false }
-						/>
+						<div className="block-editor-inserter__patterns-category-panel">
+							<PatternCategoryPreviews
+								key={ category.name }
+								onInsert={ onInsert }
+								rootClientId={ rootClientId }
+								category={ category }
+								showTitlesAsTooltip={ false }
+							/>
+						</div>
 					) }
 				</MobileTabNavigation>
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal
-					initialCategory={ initialCategory }
+					initialCategory={ selectedCategory || categories[ 0 ] }
 					patternCategories={ categories }
 					onModalClose={ () => setShowPatternsExplorer( false ) }
 					rootClientId={ rootClientId }

package/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js

@@ -1,16 +1,8 @@
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect } from '@wordpress/element';
-
-import { focus } from '@wordpress/dom';
-
 /**
  * Internal dependencies
  */
 
 import { PatternCategoryPreviews } from './pattern-category-previews';
-import { useZoomOut } from '../../../hooks/use-zoom-out';
 
 export function PatternCategoryPreviewPanel( {
 	rootClientId,
@@ -20,34 +12,15 @@ export function PatternCategoryPreviewPanel( {
 	showTitlesAsTooltip,
 	patternFilter,
 } ) {
-	const container = useRef();
-
-	useEffect( () => {
-		const timeout = setTimeout( () => {
-			const [ firstTabbable ] = focus.tabbable.find( container.current );
-			firstTabbable?.focus();
-		} );
-		return () => clearTimeout( timeout );
-	}, [ category ] );
-
-	// Move to zoom out mode when this component is mounted
-	// and back to the previous mode when unmounted.
-	useZoomOut();
-
 	return (
-		<div
-			ref={ container }
-			className="block-editor-inserter__patterns-category-dialog"
-		>
-			<PatternCategoryPreviews
-				key={ category.name }
-				rootClientId={ rootClientId }
-				onInsert={ onInsert }
-				onHover={ onHover }
-				category={ category }
-				showTitlesAsTooltip={ showTitlesAsTooltip }
-				patternFilter={ patternFilter }
-			/>
-		</div>
+		<PatternCategoryPreviews
+			key={ category.name }
+			rootClientId={ rootClientId }
+			onInsert={ onInsert }
+			onHover={ onHover }
+			category={ category }
+			showTitlesAsTooltip={ showTitlesAsTooltip }
+			patternFilter={ patternFilter }
+		/>
 	);
 }

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -128,7 +128,7 @@ export function PatternCategoryPreviews( {
 	);
 
 	return (
-		<div className="block-editor-inserter__patterns-category-panel">
+		<>
 			<VStack
 				spacing={ 2 }
 				className="block-editor-inserter__patterns-category-panel-header"
@@ -174,6 +174,6 @@ export function PatternCategoryPreviews( {
 					pagingProps={ pagingProps }
 				/>
 			) }
-		</div>
+		</>
 	);
 }

package/src/components/inserter/menu.js

@@ -33,6 +33,7 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
+import { useZoomOut } from '../../hooks/use-zoom-out';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -125,6 +126,11 @@ function InserterMenu(
 		[ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ]
 	);
 
+	const showPatternPanel =
+		selectedTab === 'patterns' &&
+		! delayedFilterValue &&
+		selectedPatternCategory;
+
 	const blocksTab = useMemo(
 		() => (
 			<>
@@ -162,13 +168,25 @@ function InserterMenu(
 				onInsert={ onInsertPattern }
 				onSelectCategory={ onClickPatternCategory }
 				selectedCategory={ selectedPatternCategory }
-			/>
+			>
+				{ showPatternPanel && (
+					<PatternCategoryPreviewPanel
+						rootClientId={ destinationRootClientId }
+						onInsert={ onInsertPattern }
+						onHover={ onHoverPattern }
+						category={ selectedPatternCategory }
+						patternFilter={ patternFilter }
+						showTitlesAsTooltip
+					/>
+				) }
+			</BlockPatternsTab>
 		),
 		[
 			destinationRootClientId,
 			onInsertPattern,
 			onClickPatternCategory,
 			selectedPatternCategory,
+			showPatternPanel,
 		]
 	);
 
@@ -205,16 +223,15 @@ function InserterMenu(
 		},
 	} ) );
 
-	const showPatternPanel =
-		selectedTab === 'patterns' &&
-		! delayedFilterValue &&
-		selectedPatternCategory;
 	const showAsTabs = ! delayedFilterValue && ( showPatterns || showMedia );
 	const showMediaPanel =
 		selectedTab === 'media' &&
 		! delayedFilterValue &&
 		selectedMediaCategory;
 
+	// When the pattern panel is showing, we want to use zoom out mode
+	useZoomOut( showPatternPanel );
+
 	const handleSetSelectedTab = ( value ) => {
 		// If no longer on patterns tab remove the category setting.
 		if ( value !== 'patterns' ) {
@@ -224,7 +241,11 @@ function InserterMenu(
 	};
 
 	return (
-		<div className="block-editor-inserter__menu">
+		<div
+			className={ classnames( 'block-editor-inserter__menu', {
+				'show-panel': showPatternPanel,
+			} ) }
+		>
 			<div
 				className={ classnames( 'block-editor-inserter__main-area', {
 					'show-as-tabs': showAsTabs,
@@ -292,16 +313,6 @@ function InserterMenu(
 					<InserterPreviewPanel item={ hoveredItem } />
 				</Popover>
 			) }
-			{ showPatternPanel && (
-				<PatternCategoryPreviewPanel
-					rootClientId={ destinationRootClientId }
-					onInsert={ onInsertPattern }
-					onHover={ onHoverPattern }
-					category={ selectedPatternCategory }
-					patternFilter={ patternFilter }
-					showTitlesAsTooltip
-				/>
-			) }
 		</div>
 	);
 }

package/src/components/inserter/style.scss

@@ -62,7 +62,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__popover .block-editor-inserter__menu {
 	margin: -$grid-unit-15;
 
-	.block-editor-inserter__tabs div[role="tablist"] {
+	.block-editor-inserter__tablist {
 		top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60 - $grid-unit-15;
 	}
 
@@ -115,7 +115,7 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	overflow: hidden;
 
-	div[role="tablist"] {
+	.block-editor-inserter__tablist {
 		border-bottom: $border-width solid $gray-300;
 
 		button[role="tab"] {
@@ -130,7 +130,7 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 
-	div[role="tabpanel"] {
+	.block-editor-inserter__tabpanel {
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
@@ -242,60 +242,79 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__patterns-explore-button.components-button {
 	padding: $grid-unit-20;
 	justify-content: center;
-	margin-top: $grid-unit-20;
 	width: 100%;
 }
 
-.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category {
-	color: var(--wp-admin-theme-color);
-	position: relative;
-
-	.components-flex-item {
-		filter: brightness(0.95);
-	}
-
-	svg {
-		fill: var(--wp-admin-theme-color);
-	}
-
-	&::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		border-radius: $radius-block-ui;
-		opacity: 0.04;
-		background: var(--wp-admin-theme-color);
-	}
-}
-
 .block-editor-inserter__block-patterns-tabs-container {
-	height: 100%;
-	nav {
-		height: 100%;
-	}
+	padding: $grid-unit-20;
 }
 
-.block-editor-inserter__block-patterns-tabs {
+.block-editor-inserter__block-patterns-tablist {
 	display: flex;
 	flex-direction: column;
-	padding: $grid-unit-20;
-	overflow-y: auto;
-	height: 100%;
+	border: none;
+	margin-bottom: $grid-unit-10;
 	// Push the listitem wrapping the "explore" button to the bottom of the panel.
 	div[role="listitem"]:last-child {
 		margin-top: auto;
 	}
 
-	.block-editor-inserter__patterns-category {
+	.block-editor-inserter__patterns-tab {
 		// Account for the icon on the right so that it's visually balanced.
-		padding-right: $grid-unit-05;
+		padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15;
+		text-align: left;
+		font-weight: inherit;
+		display: block;
+		position: relative;
+		height: auto;
+
+		&[aria-selected="true"] {
+			color: var(--wp-admin-theme-color);
+
+			.components-flex-item {
+				filter: brightness(0.95);
+			}
+
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+
+			&::after {
+				content: "";
+				display: block;
+				outline: none;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				border-radius: $radius-block-ui;
+				opacity: 0.04;
+				background: var(--wp-admin-theme-color);
+				height: 100%;
+			}
+		}
+
+		&:focus-visible,
+		&:focus:not(:disabled) {
+			border-radius: 2px;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			// Windows high contrast mode.
+			outline: 2px solid transparent;
+			outline-offset: 0;
+		}
+
+		&::before {
+			display: none;
+		}
+
+		&::after {
+			display: none;
+		}
 	}
 }
 
-.block-editor-inserter__patterns-category-dialog {
+.block-editor-inserter__patterns-category-panel {
 	background: $gray-100;
 	border-left: $border-width solid $gray-200;
 	border-right: $border-width solid $gray-200;
@@ -304,35 +323,29 @@ $block-inserter-tabs-height: 44px;
 	left: 0;
 	height: 100%;
 	width: 100%;
-
-	@include break-medium {
-		left: 100%;
-		display: block;
-		width: 300px;
-	}
-
-	.block-editor-block-patterns-list {
-		overflow-y: auto;
-		flex-grow: 1;
-		height: 100%;
-		padding: $grid-unit-20 $grid-unit-30;
-	}
-}
-
-.block-editor-inserter__patterns-category-panel {
 	padding: 0 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
-	height: 100%;
+
 	@include break-medium {
 		padding: 0;
+		left: 100%;
+		width: 300px;
 	}
+
 	.block-editor-inserter__patterns-category-panel-header {
 		padding: 16px $grid-unit-30;
 	}
 	.block-editor-inserter__patterns-category-no-results {
 		margin-top: $grid-unit-30;
 	}
+
+	.block-editor-block-patterns-list {
+		overflow-y: auto;
+		flex-grow: 1;
+		height: 100%;
+		padding: $grid-unit-20 $grid-unit-30;
+	}
 }
 
 .block-editor-inserter__preview-content {
@@ -758,13 +771,24 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+// Only relevant in zoom-out-mode
+.block-editor-inserter__pattern-panel-placeholder {
+	display: none;
+}
+
 .is-zoom-out {
 	.block-editor-inserter__menu {
 		display: flex;
 	}
 
-	.block-editor-inserter__patterns-category-dialog {
-		position: static;
+	.show-panel::after {
+		// Makes space for the inserter flyout panel
+		@include break-medium {
+			content: "";
+			display: block;
+			width: 300px;
+			height: 100%;
+		}
 	}
 
 	.block-editor-inserter__media-dialog {

package/src/components/inserter/tabs.js

@@ -43,9 +43,13 @@ function InserterTabs( {
 	return (
 		<div className="block-editor-inserter__tabs">
 			<Tabs onSelect={ onSelect }>
-				<Tabs.TabList>
+				<Tabs.TabList className="block-editor-inserter__tablist">
 					{ tabs.map( ( tab ) => (
-						<Tabs.Tab key={ tab.name } tabId={ tab.name }>
+						<Tabs.Tab
+							key={ tab.name }
+							tabId={ tab.name }
+							className="block-editor-inserter__tab"
+						>
 							{ tab.title }
 						</Tabs.Tab>
 					) ) }
@@ -55,6 +59,7 @@ function InserterTabs( {
 						key={ tab.name }
 						tabId={ tab.name }
 						focusable={ false }
+						className="block-editor-inserter__tabpanel"
 					>
 						{ tabsContents[ tab.name ] }
 					</Tabs.TabPanel>

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -30,7 +30,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 			/>
 			<InspectorControls.Slot
 				group="background"
-				label={ __( 'Background' ) }
+				label={ __( 'Background image' ) }
 			/>
 			<InspectorControls.Slot group="filter" />
 			<InspectorControls.Slot

package/src/components/link-control/style.scss

@@ -249,6 +249,7 @@ $block-editor-link-control-number-of-actions: 1;
 		border-radius: $radius-block-ui;
 		line-height: 1.1;
 
+
 		&:focus {
 			box-shadow: none;
 		}
@@ -268,8 +269,15 @@ $block-editor-link-control-number-of-actions: 1;
 			font-weight: normal;
 		}
 
-		svg {
-			display: none; // specifically requested to be removed visually as well.
+		.components-external-link__icon {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0); // specifically requested to be removed visually as well.
+			border: 0;
 		}
 	}
 }

package/src/components/link-control/test/index.js

@@ -2166,7 +2166,7 @@ describe( 'Rich link previews', () => {
 		const titlePreview = screen.getByText( selectedLink.title );
 
 		// eslint-disable-next-line testing-library/no-node-access
-		expect( titlePreview.parentElement ).toHaveClass(
+		expect( titlePreview.parentElement.parentElement ).toHaveClass(
 			'block-editor-link-control__search-item-title'
 		);
 	} );