@wordpress/block-editor 12.23.0 → 12.25.0

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;
@@ -228,7 +228,7 @@ $block-inserter-tabs-height: 44px;
 		display: block;
 	}
 
-	.block-editor-block-preview__container {
+	.block-editor-inserter__media-list__list-item {
 		height: 100%;
 	}
 
@@ -239,63 +239,81 @@ $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__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
+	padding: $grid-unit-20;
 	height: 100%;
-	nav {
-		height: 100%;
-	}
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 
-.block-editor-inserter__block-patterns-tabs {
+.block-editor-inserter__category-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__category-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__category-panel {
 	background: $gray-100;
 	border-left: $border-width solid $gray-200;
 	border-right: $border-width solid $gray-200;
@@ -304,35 +322,30 @@ $block-inserter-tabs-height: 44px;
 	left: 0;
 	height: 100%;
 	width: 100%;
+	padding: 0 $grid-unit-20;
+	display: flex;
+	flex-direction: column;
 
 	@include break-medium {
+		padding: 0;
 		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-header {
+	padding: 16px $grid-unit-30;
+}
+.block-editor-inserter__patterns-category-no-results {
+	margin-top: $grid-unit-30;
 }
 
-.block-editor-inserter__patterns-category-panel {
-	padding: 0 $grid-unit-20;
-	display: flex;
-	flex-direction: column;
+.block-editor-inserter__media-list,
+.block-editor-block-patterns-list {
+	overflow-y: auto;
+	flex-grow: 1;
 	height: 100%;
-	@include break-medium {
-		padding: 0;
-	}
-	.block-editor-inserter__patterns-category-panel-header {
-		padding: 16px $grid-unit-30;
-	}
-	.block-editor-inserter__patterns-category-no-results {
-		margin-top: $grid-unit-30;
-	}
+	padding: $grid-unit-20 $grid-unit-30;
 }
 
 .block-editor-inserter__preview-content {
@@ -392,7 +405,7 @@ $block-inserter-tabs-height: 44px;
 		.block-editor-block-patterns-list__list-item {
 			margin-bottom: 0;
 		}
-		.block-editor-block-preview__container {
+		.block-editor-inserter__media-list__list-item {
 			min-height: 100px;
 		}
 	}
@@ -485,7 +498,7 @@ $block-inserter-tabs-height: 44px;
 			min-height: 240px;
 		}
 
-		.block-editor-block-preview__container {
+		.block-editor-inserter__media-list__list-item {
 			height: inherit;
 			min-height: 100px;
 			max-height: 800px;
@@ -497,14 +510,9 @@ $block-inserter-tabs-height: 44px;
 	font-size: calc(1.25 * 13px);
 }
 
-.block-editor-inserter__media-tabs-container {
-	height: 100%;
-
-	nav {
-		height: 100%;
-	}
-
-	.block-editor-inserter__media-library-button {
+.block-editor-inserter__patterns-explore-button,
+.block-editor-inserter__media-library-button {
+	&.components-button {
 		padding: $grid-unit-20;
 		justify-content: center;
 		margin-top: $grid-unit-20;
@@ -512,76 +520,6 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__media-tabs {
-	display: flex;
-	flex-direction: column;
-	padding: $grid-unit-20;
-	overflow-y: auto;
-	height: 100%;
-
-	// Push the listitem wrapping the "open media library" button to the bottom of the panel.
-	div[role="listitem"]:last-child {
-		margin-top: auto;
-	}
-
-	.block-editor-inserter__media-tabs__media-category {
-		// Account for the icon on the right so that it's visually balanced.
-		padding-right: $grid-unit-05;
-
-		&.is-selected {
-			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__media-dialog {
-	background: $gray-100;
-	border-left: $border-width solid $gray-200;
-	border-right: $border-width solid $gray-200;
-	position: absolute;
-	padding: $grid-unit-20 $grid-unit-30;
-	top: 0;
-	left: 0;
-	height: 100%;
-	width: 100%;
-	overflow-y: auto;
-	scrollbar-gutter: stable both-edges;
-
-	@include break-medium {
-		left: 100%;
-		display: block;
-		width: 300px;
-	}
-
-	.block-editor-block-preview__container {
-		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
-		&:hover {
-			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-		}
-	}
-}
-
 .block-editor-inserter__media-panel {
 	min-height: 100%;
 	padding: 0 $grid-unit-20;
@@ -601,6 +539,7 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
+		padding: $grid-unit-20 $grid-unit-30 0;
 		// TODO: Consider using the Theme component to automatically adapt to a gray background.
 		&:not(:focus-within) {
 			--wp-components-color-background: #{$white};
@@ -608,90 +547,88 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__media-list {
-	margin-top: $grid-unit-20;
-	.block-editor-inserter__media-list__list-item {
-		position: relative;
-		cursor: pointer;
-		margin-bottom: $grid-unit-30;
+.block-editor-inserter__media-list__list-item {
+	position: relative;
+	cursor: pointer;
+	margin-bottom: $grid-unit-30;
+	box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
 
-		&.is-placeholder {
-			min-height: 100px;
-		}
+	&.is-placeholder {
+		min-height: 100px;
+	}
 
-		&[draggable="true"] .block-editor-block-preview__container {
-			cursor: grab;
+	&[draggable="true"] .block-editor-inserter__media-list__list-item {
+		cursor: grab;
+	}
+
+	&.is-hovered {
+		.block-editor-inserter__media-list__item-preview {
+			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
 		}
 
-		&.is-hovered {
-			.block-editor-inserter__media-list__item-preview {
-				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-			}
+		.block-editor-inserter__media-list__item-preview-options > button {
+			display: block;
+		}
+	}
 
-			.block-editor-inserter__media-list__item-preview-options > button {
+	.block-editor-inserter__media-list__item-preview-options {
+		position: absolute;
+		right: $grid-unit-10;
+		top: $grid-unit-10;
+
+		> button {
+			background: $white;
+			border-radius: $radius-block-ui;
+			display: none;
+
+			// These styles are important so as focus isn't lost
+			// when the button is focused and we hover away.
+			&.is-opened,
+			&:focus {
 				display: block;
 			}
-		}
-
-		.block-editor-inserter__media-list__item-preview-options {
-			position: absolute;
-			right: $grid-unit-10;
-			top: $grid-unit-10;
 
-			> button {
-				background: $white;
-				border-radius: $radius-block-ui;
-				display: none;
-
-				// These styles are important so as focus isn't lost
-				// when the button is focused and we hover away.
-				&.is-opened,
-				&:focus {
-					display: block;
-				}
-
-				&:hover {
-					box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			&:hover {
+				box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
-					// Windows High Contrast mode will show this outline, but not the box-shadow.
-					outline: 2px solid transparent;
-				}
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
 			}
 		}
 	}
+}
 
-	.block-editor-inserter__media-list__item {
-		height: 100%;
+.block-editor-inserter__media-list__item {
+	height: 100%;
 
-		.block-editor-inserter__media-list__item-preview {
-			display: flex;
-			align-items: center;
-			overflow: hidden;
-			border-radius: 2px;
+	.block-editor-inserter__media-list__item-preview {
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+		border-radius: 2px;
 
-			> * {
-				margin: 0 auto;
-				max-width: 100%;
-			}
+		> * {
+			margin: 0 auto;
+			max-width: 100%;
+		}
 
-			.block-editor-inserter__media-list__item-preview-spinner {
-				display: flex;
-				height: 100%;
-				width: 100%;
-				position: absolute;
-				justify-content: center;
-				background: rgba($white, 0.7);
-				align-items: center;
-				pointer-events: none;
-			}
+		.block-editor-inserter__media-list__item-preview-spinner {
+			display: flex;
+			height: 100%;
+			width: 100%;
+			position: absolute;
+			justify-content: center;
+			background: rgba($white, 0.7);
+			align-items: center;
+			pointer-events: none;
 		}
+	}
 
-		&:focus .block-editor-inserter__media-list__item-preview {
-			box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	&:focus .block-editor-inserter__media-list__item-preview {
+		box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent;
-		}
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
 	}
 }
 
@@ -758,16 +695,23 @@ $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;
-	}
-
-	.block-editor-inserter__media-dialog {
-		position: static;
+	.show-panel::after {
+		// Makes space for the inserter flyout panel
+		@include break-medium {
+			content: "";
+			display: block;
+			width: 300px;
+			height: 100%;
+		}
 	}
 }

package/src/components/inserter/tabs.js

@@ -3,6 +3,7 @@
  */
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,24 +29,19 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( {
-	showPatterns = false,
-	showMedia = false,
-	onSelect,
-	tabsContents,
-} ) {
-	const tabs = [
-		blocksTab,
-		showPatterns && patternsTab,
-		showMedia && mediaTab,
-	].filter( Boolean );
+function InserterTabs( { onSelect, tabsContents }, ref ) {
+	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
-		<div className="block-editor-inserter__tabs">
+		<div className="block-editor-inserter__tabs" ref={ ref }>
 			<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 +51,7 @@ function InserterTabs( {
 						key={ tab.name }
 						tabId={ tab.name }
 						focusable={ false }
+						className="block-editor-inserter__tabpanel"
 					>
 						{ tabsContents[ tab.name ] }
 					</Tabs.TabPanel>
@@ -64,4 +61,4 @@ function InserterTabs( {
 	);
 }
 
-export default InserterTabs;
+export default forwardRef( InserterTabs );

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/line-height-control/index.js

@@ -28,7 +28,9 @@ const LineHeightControl = ( {
 
 	const adjustNextValue = ( nextValue, wasTypedOrPasted ) => {
 		// Set the next value without modification if lineHeight has been defined.
-		if ( isDefined ) return nextValue;
+		if ( isDefined ) {
+			return nextValue;
+		}
 
 		/**
 		 * The following logic handles the initial spin up/down action
@@ -47,7 +49,9 @@ const LineHeightControl = ( {
 			case '0': {
 				// This means the user explicitly input '0', rather than using the
 				// spin down action from an undefined value state.
-				if ( wasTypedOrPasted ) return nextValue;
+				if ( wasTypedOrPasted ) {
+					return nextValue;
+				}
 				// Decrement by spin value.
 				return BASE_DEFAULT_VALUE - spin;
 			}

package/src/components/link-control/search-item.js

@@ -63,7 +63,9 @@ function SearchItemIcon( { isURL, suggestion } ) {
 function addLeadingSlash( url ) {
 	const trimmedURL = url?.trim();
 
-	if ( ! trimmedURL?.length ) return url;
+	if ( ! trimmedURL?.length ) {
+		return url;
+	}
 
 	return url?.replace( /^\/?/, '/' );
 }
@@ -71,7 +73,9 @@ function addLeadingSlash( url ) {
 function removeTrailingSlash( url ) {
 	const trimmedURL = url?.trim();
 
-	if ( ! trimmedURL?.length ) return url;
+	if ( ! trimmedURL?.length ) {
+		return url;
+	}
 
 	return url?.replace( /\/$/, '' );
 }
@@ -95,7 +99,9 @@ const defaultTo = ( d ) => ( v ) => {
  * @return {string} the processed url to display.
  */
 function getURLForDisplay( url ) {
-	if ( ! url ) return url;
+	if ( ! url ) {
+		return url;
+	}
 
 	return pipe(
 		safeDecodeURI,

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'
 		);
 	} );