@wordpress/block-editor 12.24.0 → 12.26.0

package/src/components/inserter/style.scss

@@ -116,7 +116,7 @@ $block-inserter-tabs-height: 44px;
 	overflow: hidden;
 
 	.block-editor-inserter__tablist {
-		border-bottom: $border-width solid $gray-300;
+		width: 100%;
 
 		button[role="tab"] {
 			flex-grow: 1;
@@ -187,7 +187,8 @@ $block-inserter-tabs-height: 44px;
 	width: 100%;
 }
 
-.block-editor-inserter__no-results {
+.block-editor-inserter__no-results,
+.block-editor-inserter__patterns-loading {
 	padding: $grid-unit-40;
 	text-align: center;
 }
@@ -228,7 +229,7 @@ $block-inserter-tabs-height: 44px;
 		display: block;
 	}
 
-	.block-editor-block-preview__container {
+	.block-editor-inserter__media-list__list-item {
 		height: 100%;
 	}
 
@@ -239,17 +240,16 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__patterns-explore-button.components-button {
-	padding: $grid-unit-20;
-	justify-content: center;
-	width: 100%;
-}
-
+.block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
 	padding: $grid-unit-20;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 
-.block-editor-inserter__block-patterns-tablist {
+.block-editor-inserter__category-tablist {
 	display: flex;
 	flex-direction: column;
 	border: none;
@@ -259,7 +259,7 @@ $block-inserter-tabs-height: 44px;
 		margin-top: auto;
 	}
 
-	.block-editor-inserter__patterns-tab {
+	.block-editor-inserter__category-tab {
 		// Account for the icon on the right so that it's visually balanced.
 		padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15;
 		text-align: left;
@@ -314,7 +314,7 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__patterns-category-panel {
+.block-editor-inserter__category-panel {
 	background: $gray-100;
 	border-left: $border-width solid $gray-200;
 	border-right: $border-width solid $gray-200;
@@ -332,20 +332,21 @@ $block-inserter-tabs-height: 44px;
 		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-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__media-list,
+.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 {
@@ -405,7 +406,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;
 		}
 	}
@@ -498,7 +499,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;
@@ -510,14 +511,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;
@@ -525,76 +521,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;
@@ -614,6 +540,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};
@@ -621,90 +548,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 {
+			display: block;
 		}
+	}
 
-		.block-editor-inserter__media-list__item-preview-options {
-			position: absolute;
-			right: $grid-unit-10;
-			top: $grid-unit-10;
+	.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;
+		> 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;
-				}
+			// 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;
 	}
 }
 
@@ -776,12 +701,9 @@ $block-inserter-tabs-height: 44px;
 	display: none;
 }
 
-.is-zoom-out {
-	.block-editor-inserter__menu {
-		display: flex;
-	}
-
-	.show-panel::after {
+.block-editor-inserter__menu.is-zoom-out {
+	display: flex;
+	&.show-panel::after {
 		// Makes space for the inserter flyout panel
 		@include break-medium {
 			content: "";
@@ -790,8 +712,4 @@ $block-inserter-tabs-height: 44px;
 			height: 100%;
 		}
 	}
-
-	.block-editor-inserter__media-dialog {
-		position: static;
-	}
 }

package/src/components/inserter/tabs.js

@@ -1,8 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -28,32 +33,33 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( {
-	showPatterns = false,
-	showMedia = false,
-	onSelect,
-	tabsContents,
-} ) {
-	const tabs = [
-		blocksTab,
-		showPatterns && patternsTab,
-		showMedia && mediaTab,
-	].filter( Boolean );
+function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
+	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
-		<div className="block-editor-inserter__tabs">
-			<Tabs onSelect={ onSelect }>
-				<Tabs.TabList className="block-editor-inserter__tablist">
-					{ tabs.map( ( tab ) => (
-						<Tabs.Tab
-							key={ tab.name }
-							tabId={ tab.name }
-							className="block-editor-inserter__tab"
-						>
-							{ tab.title }
-						</Tabs.Tab>
-					) ) }
-				</Tabs.TabList>
+		<div className="block-editor-inserter__tabs" ref={ ref }>
+			<Tabs onSelect={ onSelect } selectedTabId={ selectedTab }>
+				<div className="block-editor-inserter-sidebar__header">
+					<Button
+						className="block-editor-inserter-sidebar__close-button"
+						icon={ closeSmall }
+						label={ __( 'Close block inserter' ) }
+						onClick={ () => onClose() }
+						size="small"
+					/>
+
+					<Tabs.TabList className="block-editor-inserter__tablist">
+						{ tabs.map( ( tab ) => (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className="block-editor-inserter__tab"
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+				</div>
 				{ tabs.map( ( tab ) => (
 					<Tabs.TabPanel
 						key={ tab.name }
@@ -61,7 +67,7 @@ function InserterTabs( {
 						focusable={ false }
 						className="block-editor-inserter__tabpanel"
 					>
-						{ tabsContents[ tab.name ] }
+						{ children }
 					</Tabs.TabPanel>
 				) ) }
 			</Tabs>
@@ -69,4 +75,4 @@ function InserterTabs( {
 	);
 }
 
-export default InserterTabs;
+export default forwardRef( InserterTabs );

package/src/components/inserter-list-item/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -62,7 +62,7 @@ function InserterListItem( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className={ classnames(
+					className={ clsx(
 						'block-editor-block-types-list__list-item',
 						{
 							'is-synced': isSynced,
@@ -85,7 +85,7 @@ function InserterListItem( {
 				>
 					<InserterListboxItem
 						isFirst={ isFirst }
-						className={ classnames(
+						className={ clsx(
 							'block-editor-block-types-list__item',
 							className
 						) }

package/src/components/keyboard-shortcuts/index.js

@@ -143,6 +143,18 @@ function KeyboardShortcutsRegister() {
 				character: 'l',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/block-editor/group',
+			category: 'block',
+			description: __(
+				'Create a group block from the selected multiple blocks.'
+			),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'g',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

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

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { UP, DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -29,35 +29,37 @@ const ControlledLineHeightControl = () => {
 };
 
 describe( 'LineHeightControl', () => {
-	it( 'should immediately step up from the default value if up-arrowed from an unset state', () => {
+	it( 'should immediately step up from the default value if up-arrowed from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.keyDown( input, { keyCode: UP } );
+		await user.click( input );
+		await user.keyboard( '{ArrowUp}' );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
-	it( 'should immediately step down from the default value if down-arrowed from an unset state', () => {
+	it( 'should immediately step down from the default value if down-arrowed from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.keyDown( input, { keyCode: DOWN } );
+		await user.click( input );
+		await user.keyboard( '{ArrowDown}' );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 
-	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', () => {
+	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.change( input, { target: { value: 0.1 } } ); // simulates click on spin button up
+		await user.click( screen.getByRole( 'button', { name: 'Increment' } ) );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
-	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', () => {
+	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.change( input, { target: { value: 0 } } ); // simulates click on spin button down
+		await user.click( screen.getByRole( 'button', { name: 'Decrement' } ) );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 } );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -359,7 +359,7 @@ function LinkControl( {
 			{ isEditing && (
 				<>
 					<div
-						className={ classnames( {
+						className={ clsx( {
 							'block-editor-link-control__search-input-wrapper': true,
 							'has-text-control': showTextControl,
 							'has-actions': showActions,

package/src/components/link-control/link-preview.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ export default function LinkPreview( {
 	return (
 		<div
 			aria-label={ __( 'Currently selected' ) }
-			className={ classnames( 'block-editor-link-control__search-item', {
+			className={ clsx( 'block-editor-link-control__search-item', {
 				'is-current': true,
 				'is-rich': hasRichData,
 				'is-fetching': !! isFetching,
@@ -92,7 +92,7 @@ export default function LinkPreview( {
 			<div className="block-editor-link-control__search-item-top">
 				<span className="block-editor-link-control__search-item-header">
 					<span
-						className={ classnames(
+						className={ clsx(
 							'block-editor-link-control__search-item-icon',
 							{
 								'is-image': richData?.icon,