@wordpress/block-editor 16.2.0 → 17.0.2-next.v.202608281122.0

package/src/components/inserter/style.scss

@@ -203,10 +203,6 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__preview-container__popover {
-	top: $grid-unit-20 !important;
-}
-
 .block-editor-inserter__preview-container {
 	display: none;
 	width: $sidebar-width;
@@ -369,89 +365,71 @@ $block-inserter-tabs-height: 44px;
 	padding: 0;
 }
 
-.block-editor-inserter__quick-inserter-expand.components-button {
-	display: block;
-	background: $gray-900;
-	color: $white;
-	width: 100%;
-	border-radius: 0;
-
-	&:hover {
-		color: $white;
-	}
-
-	&:active {
-		color: $gray-400;
-	}
+.block-editor-inserter__quick-inserter-expand {
+	padding: 0 $grid-unit-20 $grid-unit-20;
+}
 
-	// Specificity is needed for the border color.
-	&.components-button:focus:not(:disabled) {
-		box-shadow: none;
-		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
-	}
+.block-editor-inserter__quick-inserter-expand-toggle {
+	width: 100%;
+	justify-content: center;
 }
 
-.block-editor-block-patterns-explorer {
-	&__sidebar {
+.block-editor-block-patterns-explorer__sidebar {
+	padding-bottom: $grid-unit-30;
+
+	@include break-medium() {
 		position: absolute;
 		top: $header-height + $grid-unit-10;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;
-		padding: $grid-unit-30 $grid-unit-30 $grid-unit-30;
+		padding: $grid-unit-30;
 		overflow-x: visible;
 		overflow-y: auto;
-
-		&__categories-list__item {
-			display: block;
-			width: 100%;
-			height: 48px;
-			text-align: left;
-		}
 	}
+}
 
-	&__search {
-		margin-bottom: $grid-unit-40;
+.block-editor-block-patterns-explorer__panel {
+	@include break-medium() {
+		margin-inline-start: $sidebar-width;
 	}
+}
 
-	&__search-results-count {
-		padding-bottom: $grid-unit-40;
-	}
+.block-editor-block-patterns-explorer__no-results {
+	padding: $grid-unit-40;
+	text-align: center;
+}
 
-	&__list {
-		margin-left: $sidebar-width;
-		padding: $grid-unit-30 0 $grid-unit-40;
-		.block-editor-patterns__sync-status-filter {
-			.components-input-control__container {
-				width: 380px;
-			}
-		}
+.block-editor-block-patterns-explorer__list {
+	padding: $grid-unit-30 0 $grid-unit-40;
+
+	.block-editor-patterns__sync-status-filter .components-input-control__container {
+		width: 380px;
 	}
+}
 
-	.block-editor-block-patterns-list {
-		display: grid;
-		grid-gap: $grid-unit-40;
-		grid-template-columns: repeat(1, 1fr);
-		margin-bottom: $grid-unit-20;
+.block-editor-block-patterns-explorer .block-editor-block-patterns-list {
+	display: grid;
+	grid-gap: $grid-unit-40;
+	grid-template-columns: repeat(1, 1fr);
+	margin-bottom: $grid-unit-20;
 
-		@include break-xlarge() {
-			grid-template-columns: repeat(2, 1fr);
-		}
+	@include break-xlarge() {
+		grid-template-columns: repeat(2, 1fr);
+	}
 
-		@include break-huge() {
-			grid-template-columns: repeat(3, 1fr);
-		}
+	@include break-huge() {
+		grid-template-columns: repeat(3, 1fr);
+	}
 
-		.block-editor-block-patterns-list__list-item {
-			min-height: 240px;
-		}
+	.block-editor-block-patterns-list__list-item {
+		min-height: 240px;
+	}
 
-		.block-editor-inserter__media-list__list-item {
-			height: inherit;
-			min-height: 100px;
-			max-height: 800px;
-		}
+	.block-editor-inserter__media-list__list-item {
+		height: inherit;
+		min-height: 100px;
+		max-height: 800px;
 	}
 }
 

package/src/components/inspector-controls/groups.js

@@ -18,6 +18,7 @@ const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
+const InspectorControlsViewport = createSlotFill( 'InspectorControlsViewport' );
 const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
 const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
 const InspectorControlsEffects = createSlotFill( 'InspectorControlsEffects' );
@@ -41,6 +42,7 @@ const groups = {
 	settings: InspectorControlsDefault, // Alias for default.
 	styles: InspectorControlsStyles,
 	typography: InspectorControlsTypography,
+	viewport: InspectorControlsViewport,
 };
 
 export default groups;

package/src/components/inspector-controls-tabs/README.md

@@ -0,0 +1,92 @@
+# Inspector Controls Tabs
+
+The `InspectorControlsTabs` component splits the block inspector sidebar into tabs, so a block's content, list view, settings and styles are grouped instead of being stacked in a single scrolling column.
+
+_Note:_ This component is internal to the `@wordpress/block-editor` package. It is not exported from the package and is not part of the public API. It is rendered by [`BlockInspector`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md), which decides whether tabs are shown at all.
+
+## Development guidelines
+
+The tabs are not authored by the block. Each tab renders [`InspectorControls`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md) slots, so a block populates a tab simply by rendering `InspectorControls` with the matching `group`. There are four tabs, rendered in this order when available: Content (the `content` group), List View (the `list` group), Settings (the default and `bindings` groups, plus the Advanced panel) and Styles (the `typography`, `color`, `background`, `filter`, `layout`, `dimensions`, `border`, `elements`, `position` and `styles` groups).
+
+Which tabs exist is determined by the `useInspectorControlsTabs` hook, which returns a tab when fills have been rendered into its groups. `BlockInspector` renders this component only when the hook returns more than one tab; with a single tab the sections are rendered flat instead. The hook also honors the `blockInspectorTabs` block editor setting, which can disable tabs globally or per block name.
+
+Tab labels are rendered as icons with a tooltip. When the `showIconLabels` preference from `@wordpress/preferences` is enabled, the tab title is rendered as text instead.
+
+### Usage
+
+```jsx
+import InspectorControlsTabs from '../inspector-controls-tabs';
+import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
+
+function MyBlockInspector( {
+	blockName,
+	clientId,
+	hasBlockStyles,
+	isSectionBlock,
+	contentClientIds,
+} ) {
+	const availableTabs = useInspectorControlsTabs(
+		blockName,
+		contentClientIds,
+		isSectionBlock,
+		hasBlockStyles
+	);
+
+	if ( availableTabs.length <= 1 ) {
+		return null;
+	}
+
+	return (
+		<InspectorControlsTabs
+			blockName={ blockName }
+			clientId={ clientId }
+			hasBlockStyles={ hasBlockStyles }
+			tabs={ availableTabs }
+			isSectionBlock={ isSectionBlock }
+			contentClientIds={ contentClientIds }
+		/>
+	);
+}
+```
+
+### Props
+
+#### `blockName`
+
+-   **Type:** `String`
+
+The name of the block being inspected, for example `core/group`. It is used to resolve the border panel label, and `core/template-part` is excluded from the curated section styles described under `isSectionBlock`. When omitted, the Advanced panel is not rendered in the Settings tab.
+
+#### `clientId`
+
+-   **Type:** `String`
+
+The client ID of the block being inspected. It is used as the key of the tabs panel so that selecting a different block resets the selected tab, and it is passed to the block styles preview in the Styles tab.
+
+#### `hasBlockStyles`
+
+-   **Type:** `Boolean`
+
+Whether the block has registered block styles. When `true`, the Styles tab renders the block style previews above the block support panels.
+
+#### `tabs`
+
+-   **Type:** `Array`
+
+The tabs to render in the tab list, in display order. Each entry is an object with `name`, `title` and `icon`. Pass the value returned by `useInspectorControlsTabs`; only tabs matching the `content`, `list`, `settings` and `styles` names have a corresponding panel.
+
+#### `isSectionBlock`
+
+-   **Type:** `Boolean`
+
+Whether the block being inspected is a section. When `true`, the Styles tab replaces the full set of block support panels with a curated subset — typography, background and elements — restricted to the supports a section should expose. Template parts are excluded and keep the full panel set.
+
+#### `contentClientIds`
+
+-   **Type:** `Array`
+
+The client IDs of the content blocks within a section. The Content tab lists them as quick navigation links to select a nested block, and the Styles tab uses them to decide which element color controls to show by default.
+
+## Related components
+
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/inspector-controls-tabs/{styles-tab.js → styles-tab.jsx}

@@ -103,7 +103,7 @@ const StylesTab = ( {
 	isSectionBlock,
 	contentClientIds,
 } ) => {
-	const borderPanelLabel = useBorderPanelLabel( { blockName } );
+	const borderPanelLabel = useBorderPanelLabel( { clientId } );
 
 	return (
 		<>

package/src/components/link-control/test/{index.js → index.jsx}

@@ -15,6 +15,7 @@ import {
 	fetchFauxEntitySuggestions,
 	uniqueId,
 } from './fixtures';
+import { expectValidatedInputControlDeprecationIfCalled } from '../../url-input/test/fixtures/validated-input-control-deprecation';
 
 const mockFetchSearchSuggestions = jest.fn();
 
@@ -3255,6 +3256,10 @@ describe( 'URL validation', () => {
 		mockOnChange.mockClear();
 	} );
 
+	afterEach( () => {
+		expectValidatedInputControlDeprecationIfCalled();
+	} );
+
 	it.each( [
 		{
 			description: 'URLs with spaces',

package/src/components/list-view/{index.js → index.jsx}

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import {
 	useInstanceId,
 	useMergeRefs,
+	useRefEffect,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
 import { isShallowEqual } from '@wordpress/is-shallow-equal';
@@ -80,6 +81,7 @@ const expansion = ( state, action ) => {
  * @param {?boolean}       props.showBlockMovers        Flag to enable block movers. Defaults to `false`.
  * @param {?boolean}       props.isExpanded             Flag to determine whether nested levels are expanded by default. Defaults to `false`.
  * @param {?boolean}       props.showAppender           Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?boolean}       props.focusOnMount           Flag to move focus into the list when it mounts. Defaults to `false`.
  * @param {?ComponentType} props.blockSettingsMenu      Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
  * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.
  * @param {string}         props.description            Optional accessible description for the tree grid component.
@@ -95,6 +97,7 @@ function ListViewComponent(
 		showBlockMovers = false,
 		isExpanded = false,
 		showAppender = false,
+		focusOnMount = false,
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
 		rootClientId,
 		description,
@@ -174,21 +177,61 @@ function ListViewComponent(
 		selectBlock: selectEditorBlock,
 	} );
 
-	const focusSelectedBlock = useCallback(
+	const focusOnMountRef = useRefEffect(
 		( node ) => {
+			// A list that mounts as a side effect of selecting a block, the
+			// block inspector's for one, would pull focus out of whatever the
+			// user is editing, so taking focus is opt-in.
+			if ( ! focusOnMount ) {
+				return;
+			}
+
+			const controller = new window.AbortController();
+			const focusRow = ( clientId ) =>
+				focusListItem( clientId, node, controller.signal ).then( () =>
+					controller.abort()
+				);
+
+			// Anything that takes focus first has a better claim to it. The row
+			// is not always there yet either, because a nested block waits on
+			// its ancestors expanding.
+			node.ownerDocument.addEventListener(
+				'focusin',
+				() => controller.abort(),
+				{ once: true, signal: controller.signal }
+			);
+
 			const [ firstSelectedClientId ] = getSelectedBlockClientIds();
-			// If a blocks are already selected when the list view is initially
-			// mounted, shift focus to the first selected block.
-			if ( firstSelectedClientId && node ) {
-				focusListItem( firstSelectedClientId, node );
+
+			if ( firstSelectedClientId ) {
+				focusRow( firstSelectedClientId );
+				return () => controller.abort();
 			}
+
+			// With nothing selected the top of the list gets focus, but only
+			// once the click that opened the list is over. Focusing a row costs
+			// a style and layout pass, and inside that commit it lands on a
+			// document that is still dirty.
+			const timerId = setTimeout( () => {
+				const firstClientId = node.querySelector(
+					'[role=row][data-block]'
+				)?.dataset.block;
+				if ( firstClientId ) {
+					focusRow( firstClientId );
+				}
+			}, 0 );
+
+			return () => {
+				clearTimeout( timerId );
+				controller.abort();
+			};
 		},
-		[ getSelectedBlockClientIds ]
+		[ focusOnMount, getSelectedBlockClientIds ]
 	);
 
 	const treeGridRef = useMergeRefs( [
 		clipBoardRef,
-		focusSelectedBlock,
+		focusOnMountRef,
 		elementRef,
 		dropZoneRef,
 		ref,

package/src/components/list-view/utils.js

@@ -80,8 +80,9 @@ export function getCommonDepthClientIds(
  *
  * @param {string}       focusClientId   The client ID of the block to focus.
  * @param {?HTMLElement} treeGridElement The container element to search within.
+ * @param {?AbortSignal} signal          Optional signal to stop waiting for the row and leave focus alone.
  */
-export function focusListItem( focusClientId, treeGridElement ) {
+export function focusListItem( focusClientId, treeGridElement, signal ) {
 	if ( ! treeGridElement ) {
 		return;
 	}
@@ -108,12 +109,26 @@ export function focusListItem( focusClientId, treeGridElement ) {
 			subtree: true,
 		} );
 
+		signal?.addEventListener(
+			'abort',
+			() => {
+				clearTimeout( timer );
+				observer.disconnect();
+				resolve( null );
+			},
+			{ once: true }
+		);
+
 		// Stop trying after 3 seconds.
 		timer = setTimeout( () => {
 			observer.disconnect();
 			resolve( null );
 		}, 3000 );
 	} ).then( ( element ) => {
+		if ( signal?.aborted ) {
+			return;
+		}
+
 		if ( element && element.isConnected ) {
 			// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
 			focus.focusable.find( element )?.[ 0 ]?.focus();

package/src/components/media-placeholder/{index.js → index.jsx}

@@ -4,7 +4,7 @@ import {
 	FormFileUpload,
 	Placeholder,
 	DropZone,
-	__experimentalInputControl as InputControl,
+	__experimentalInputControl as WCInputControl,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 	withFilters,
 } from '@wordpress/components';
@@ -19,7 +19,6 @@ import URLPopover from '../url-popover';
 import { store as blockEditorStore } from '../../store';
 import { parseDropEvent } from '../use-on-block-drop';
 import { getComputedAcceptAttribute } from './utils';
-
 const noop = () => {};
 
 const InsertFromURLPopover = ( {
@@ -34,7 +33,7 @@ const InsertFromURLPopover = ( {
 			className="block-editor-media-placeholder__url-input-form"
 			onSubmit={ onSubmit }
 		>
-			<InputControl
+			<WCInputControl
 				label={ __( 'URL' ) }
 				type="text" // Use text instead of URL to allow relative paths (e.g., /image/image.jpg)
 				hideLabelFromVision
@@ -373,6 +372,10 @@ export function MediaPlaceholder( {
 				onFilesDrop={ onFilesUpload }
 				onDrop={ handleBlocksDrop }
 				isEligible={ ( dataTransfer ) => {
+					// This dropzone only accepts block drags from the inserter, not
+					// canvas block drags. Only the inserter publishes the dragged
+					// blocks' names, as wp-block:core/{name}, so no matches means it
+					// isn't an inserter drag.
 					const prefix = 'wp-block:core/';
 					const types = [];
 					for ( const type of dataTransfer.types ) {
@@ -381,9 +384,11 @@ export function MediaPlaceholder( {
 						}
 					}
 					return (
+						types.length > 0 &&
 						types.every( ( type ) =>
 							allowedTypes.includes( type )
-						) && ( multiple ? true : types.length === 1 )
+						) &&
+						( multiple ? true : types.length === 1 )
 					);
 				} }
 			/>

package/src/components/plain-text/stories/index.story.jsx

@@ -5,6 +5,9 @@ const meta = {
 	title: 'BlockEditor/PlainText',
 	component: PlainText,
 	parameters: {
+		// FIXME: Story renders PlainText without a label (label).
+		// See: https://github.com/WordPress/gutenberg/issues/81596
+		a11y: { test: 'todo' },
 		docs: {
 			canvas: { sourceState: 'shown' },
 			description: {

package/src/components/provider/{index.js → index.jsx}

@@ -1,6 +1,7 @@
 import { useDispatch } from '@wordpress/data';
 import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import {
 	MediaUploadProvider,
 	store as uploadStore,
@@ -13,6 +14,7 @@ import { store as blockEditorStore } from '../../store';
 import { BlockRefsProvider } from './block-refs-provider';
 import { unlock } from '../../lock-unlock';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import BlockKeyboardShortcuts from '../block-keyboard-shortcuts';
 import useMediaUploadSettings from './use-media-upload-settings';
 import { mediaUploadOnSuccessKey } from '../../store/private-keys';
 import { SelectionContext } from './selection-context';
@@ -43,6 +45,30 @@ let isHeicCanvasEnabledCache = null;
  */
 const HEIC_MIME_TYPES = [ 'image/heic', 'image/heif' ];
 
+/**
+ * Refuses a batch of more than one file on behalf of a caller that only takes
+ * one - a Cover block's placeholder, say.
+ *
+ * `uploadMedia()` in `@wordpress/media-utils` refuses such a batch with the
+ * same wording, but the `@wordpress/upload-media` pipeline below is a separate
+ * transport that never reaches that function. Without this check every dropped
+ * file uploads and the caller keeps whichever one lands last (gutenberg#82041).
+ *
+ * @param {Array<File>} filesList List of files.
+ * @param {boolean}     multiple  Whether the caller accepts more than one file.
+ * @param {Function}    onError   Function called when an error happens.
+ *
+ * @return {boolean} Whether the batch was refused.
+ */
+function refuseExtraFiles( filesList, multiple, onError ) {
+	if ( ! multiple && filesList.length > 1 ) {
+		onError( __( 'Only one file can be used here.' ) );
+		return true;
+	}
+
+	return false;
+}
+
 /**
  * Checks if client-side media processing should be enabled.
  *
@@ -142,6 +168,7 @@ function shouldEnableHeicCanvasProcessing() {
  * @param {Function}       $3.onFileChange   Function called each time a file or a temporary representation of the file is available.
  * @param {Function}       $3.onSuccess      Function called once a file has completely finished uploading, including thumbnails.
  * @param {Function}       $3.onBatchSuccess Function called once all files in a group have completely finished uploading, including thumbnails.
+ * @param {boolean}        $3.multiple       Whether the caller accepts more than one file.
  */
 function mediaUpload(
 	registry,
@@ -154,8 +181,13 @@ function mediaUpload(
 		onFileChange,
 		onSuccess,
 		onBatchSuccess,
+		multiple = true,
 	}
 ) {
+	if ( refuseExtraFiles( filesList, multiple, onError ) ) {
+		return;
+	}
+
 	void registry.dispatch( uploadStore ).addItems( {
 		files: Array.from( filesList ),
 		onChange: onFileChange,
@@ -188,6 +220,7 @@ function mediaUpload(
  * @param {Function}       $3.onFileChange   Function called each time a file or a temporary representation of the file is available.
  * @param {Function}       $3.onSuccess      Function called once a file has completely finished uploading, including thumbnails.
  * @param {Function}       $3.onBatchSuccess Function called once all files in a group have completely finished uploading, including thumbnails.
+ * @param {boolean}        $3.multiple       Whether the caller accepts more than one file.
  */
 function heicMediaUpload(
 	registry,
@@ -200,8 +233,13 @@ function heicMediaUpload(
 		onFileChange,
 		onSuccess,
 		onBatchSuccess,
+		multiple = true,
 	}
 ) {
+	if ( refuseExtraFiles( filesList, multiple, onError ) ) {
+		return;
+	}
+
 	const files = Array.from( filesList );
 	const heicFiles = files.filter( ( file ) =>
 		HEIC_MIME_TYPES.includes( file.type )
@@ -253,6 +291,7 @@ function heicMediaUpload(
 			onFileChange,
 			onSuccess,
 			onBatchSuccess: coordinatedBatchSuccess,
+			multiple,
 		} );
 	}
 }
@@ -361,7 +400,12 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		const children = (
 			<SlotFillProvider passthrough>
-				{ ! settings?.isPreviewMode && <KeyboardShortcuts.Register /> }
+				{ ! settings?.isPreviewMode && (
+					<>
+						<KeyboardShortcuts.Register />
+						<BlockKeyboardShortcuts />
+					</>
+				) }
 				<BlockRefsProvider>{ props.children }</BlockRefsProvider>
 			</SlotFillProvider>
 		);

package/src/components/publish-date-time-picker/README.md

@@ -59,3 +59,13 @@ Called when the user presses the close button.
 
 - Type: `Function`
 - Required: No
+
+### showPopoverHeader
+
+Whether to render the popover header, which holds the title, the close button
+and a "Reset" action. Set it to `false` when the picker is rendered inline,
+where the surrounding UI already provides a heading.
+
+- Type: `Boolean`
+- Required: No
+- Default: `true`

package/src/components/publish-date-time-picker/{index.js → index.jsx}

@@ -8,6 +8,7 @@ export function PublishDateTimePicker(
 	{
 		onClose,
 		onChange,
+		showPopoverHeader = true,
 		showPopoverHeaderActions,
 		isCompact,
 		currentDate,
@@ -26,20 +27,22 @@ export function PublishDateTimePicker(
 	const DatePickerComponent = isCompact ? TimePicker : DateTimePicker;
 	return (
 		<div ref={ ref } className="block-editor-publish-date-time-picker">
-			<InspectorPopoverHeader
-				title={ title || __( 'Publish' ) }
-				actions={
-					showPopoverHeaderActions
-						? [
-								{
-									label: __( 'Now' ),
-									onClick: () => onChange?.( null ),
-								},
-						  ]
-						: undefined
-				}
-				onClose={ onClose }
-			/>
+			{ showPopoverHeader && (
+				<InspectorPopoverHeader
+					title={ title || __( 'Publish' ) }
+					actions={
+						showPopoverHeaderActions
+							? [
+									{
+										label: __( 'Reset' ),
+										onClick: () => onChange?.( null ),
+									},
+							  ]
+							: undefined
+					}
+					onClose={ onClose }
+				/>
+			) }
 			<DatePickerComponent { ...datePickerProps } />
 		</div>
 	);

package/src/components/rich-text/content.scss

@@ -54,3 +54,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .rich-text [contenteditable="false"]::selection {
 	background-color: transparent;
 }
+
+.is-selected .non-breaking-space {
+	outline: 1px solid currentColor;
+	outline-offset: -1px;
+	opacity: 0.8;
+}