@wordpress/block-editor 16.2.0 → 17.0.0

package/src/components/inserter/style.scss

@@ -369,89 +369,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-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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -13,6 +13,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';
@@ -361,7 +362,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

@@ -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/event-listeners/enter.js

@@ -11,19 +11,66 @@ const { subscribeOwnedListener, ownsSelection } = unlock( richTextPrivateApis );
 const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
-	function onKeyDownDeprecated( event ) {
+	function onKeyDown( event ) {
 		if ( event.keyCode !== ENTER ) {
 			return;
 		}
 
-		const { onReplace, onSplit } = props.current;
+		const {
+			onReplace,
+			onSplit,
+			supportsSplitting,
+			disableLineBreaks,
+			onChange,
+			getValue,
+			onSplitAtDoubleLineEnd,
+			registry,
+			onSplitAtEnd,
+		} = props.current;
+		// The rendered value can lag the record: the capture phase listener
+		// that syncs the selection runs on this event, and a re-render with
+		// the new selection has not happened yet.
+		const value = getValue();
+		const { text, start, end } = value;
 
-		if ( onReplace && onSplit ) {
+		if ( event.shiftKey ) {
+			if ( ! disableLineBreaks ) {
+				event.preventDefault();
+				onChange( insert( value, '\n' ) );
+			}
+		} else if ( onSplitAtEnd && start === end && end === text.length ) {
+			event.preventDefault();
+			onSplitAtEnd();
+		} else if ( onReplace && onSplit ) {
 			event.__deprecatedOnSplit = true;
+		} else if (
+			! supportsSplitting &&
+			! disableLineBreaks &&
+			! event.defaultPrevented
+		) {
+			event.preventDefault();
+			if (
+				// For some blocks it's desirable to split at the end of the
+				// block when there are two line breaks at the end of the
+				// block, so triple Enter exits the block.
+				onSplitAtDoubleLineEnd &&
+				start === end &&
+				end === text.length &&
+				text.slice( -2 ) === '\n\n'
+			) {
+				registry.batch( () => {
+					const _value = { ...value };
+					_value.start = _value.end - 2;
+					onChange( remove( _value ) );
+					onSplitAtDoubleLineEnd();
+				} );
+			} else {
+				onChange( insert( value, '\n' ) );
+			}
 		}
 	}
 
-	function onKeyDown( event ) {
+	function onDefaultKeyDown( event ) {
 		if ( event.defaultPrevented ) {
 			return;
 		}
@@ -39,64 +86,30 @@ export default ( props ) => ( element ) => {
 			return;
 		}
 
-		const {
-			value,
-			onChange,
-			disableLineBreaks,
-			onSplitAtEnd,
-			onSplitAtDoubleLineEnd,
-			registry,
-		} = props.current;
-
+		// On ENTER, we ALWAYS want to prevent the default browser behaviour
+		// at this last interception point.
 		event.preventDefault();
-
-		const { text, start, end } = value;
-
-		if ( event.shiftKey ) {
-			if ( ! disableLineBreaks ) {
-				onChange( insert( value, '\n' ) );
-			}
-		} else if ( onSplitAtEnd && start === end && end === text.length ) {
-			onSplitAtEnd();
-		} else if (
-			// For some blocks it's desirable to split at the end of the
-			// block when there are two line breaks at the end of the
-			// block, so triple Enter exits the block.
-			onSplitAtDoubleLineEnd &&
-			start === end &&
-			end === text.length &&
-			text.slice( -2 ) === '\n\n'
-		) {
-			registry.batch( () => {
-				const _value = { ...value };
-				_value.start = _value.end - 2;
-				onChange( remove( _value ) );
-				onSplitAtDoubleLineEnd();
-			} );
-		} else if ( ! disableLineBreaks ) {
-			onChange( insert( value, '\n' ) );
-		}
 	}
 
 	const { defaultView } = element.ownerDocument;
 
 	// Attach the listener to the window so parent elements have the chance to
 	// prevent the default behavior.
-	const unsubscribeKeyDown = subscribeDelegatedListener(
+	const unsubscribeDefaultKeyDown = subscribeDelegatedListener(
 		defaultView,
 		'keydown',
-		onKeyDown
+		onDefaultKeyDown
 	);
 	// Capture phase so this runs before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listener.
-	const unsubscribeKeyDownDeprecated = subscribeOwnedListener(
+	const unsubscribeKeyDown = subscribeOwnedListener(
 		element,
 		'keydown',
-		onKeyDownDeprecated,
+		onKeyDown,
 		true
 	);
 	return () => {
+		unsubscribeDefaultKeyDown();
 		unsubscribeKeyDown();
-		unsubscribeKeyDownDeprecated();
 	};
 };