@wordpress/block-editor 16.2.0 → 17.0.0

package/src/components/block-parent-selector/index.js

@@ -1,9 +1,12 @@
-import { ToolbarButton } from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
+import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import { plus } from '@wordpress/icons';
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
+import Inserter from '../inserter';
 import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
@@ -16,23 +19,51 @@ import { unlock } from '../../lock-unlock';
  */
 export default function BlockParentSelector() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { parentClientId } = useSelect( ( select ) => {
-		const {
-			getBlockParents,
-			getSelectedBlockClientIds,
-			getParentSectionBlock,
-		} = unlock( select( blockEditorStore ) );
-		// Not getSelectedBlockClientId: a text selection crossing into a
-		// nested block resolves to the ancestor alone, but its selection
-		// start and end differ.
-		const [ selectedBlockClientId ] = getSelectedBlockClientIds();
-		const parentSection = getParentSectionBlock( selectedBlockClientId );
-		const parents = getBlockParents( selectedBlockClientId );
-		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
-		return {
-			parentClientId: _parentClientId,
-		};
-	}, [] );
+	const { parentClientId, nextSiblingClientId, showInserter } = useSelect(
+		( select ) => {
+			const {
+				getBlockParents,
+				getSelectedBlockClientIds,
+				getParentSectionBlock,
+				getBlockName,
+				getNextBlockClientId,
+			} = unlock( select( blockEditorStore ) );
+			// Not getSelectedBlockClientId: a text selection crossing into a
+			// nested block resolves to the ancestor alone, but its selection
+			// start and end differ.
+			const [ selectedBlockClientId ] = getSelectedBlockClientIds();
+			const parentSection = getParentSectionBlock(
+				selectedBlockClientId
+			);
+			const parents = getBlockParents( selectedBlockClientId );
+			const immediateParentClientId = parents[ parents.length - 1 ];
+			const _parentClientId = parentSection ?? immediateParentClientId;
+			const parentBlockType = getBlockType(
+				getBlockName( _parentClientId )
+			);
+			// A wrapper that merges with the text flow (list, quote) grows
+			// by typing: Enter continues it, and users know that. Any
+			// other parent gets a plus button to add a child; the Inserter
+			// hides itself when nothing is insertable.
+			const isTextFlowWrapper =
+				parentBlockType?.merge ||
+				hasBlockSupport( parentBlockType, '__experimentalOnMerge' );
+			return {
+				parentClientId: _parentClientId,
+				nextSiblingClientId: getNextBlockClientId(
+					selectedBlockClientId
+				),
+				// When the shown parent is a section further up the tree
+				// rather than the direct parent, its content is locked and
+				// nothing can be inserted, so no button.
+				showInserter:
+					!! _parentClientId &&
+					_parentClientId === immediateParentClientId &&
+					! isTextFlowWrapper,
+			};
+		},
+		[]
+	);
 	const blockInformation = useBlockDisplayInformation( parentClientId );
 
 	// Allows highlighting the parent block outline when focusing or hovering
@@ -43,6 +74,20 @@ export default function BlockParentSelector() {
 		highlightParent: true,
 	} );
 
+	const parentButton = (
+		<ToolbarButton
+			className="block-editor-block-parent-selector__button"
+			onClick={ () => selectBlock( parentClientId ) }
+			label={ sprintf(
+				/* translators: %s: Name of the block's parent. */
+				__( 'Select parent block: %s' ),
+				blockInformation?.title
+			) }
+			showTooltip
+			icon={ <BlockIcon icon={ blockInformation?.icon } /> }
+		/>
+	);
+
 	return (
 		<div
 			className="block-editor-block-parent-selector"
@@ -50,17 +95,53 @@ export default function BlockParentSelector() {
 			ref={ nodeRef }
 			{ ...showHoveredOrFocusedGestures }
 		>
-			<ToolbarButton
-				className="block-editor-block-parent-selector__button"
-				onClick={ () => selectBlock( parentClientId ) }
-				label={ sprintf(
-					/* translators: %s: Name of the block's parent. */
-					__( 'Select parent block: %s' ),
-					blockInformation?.title
-				) }
-				showTooltip
-				icon={ <BlockIcon icon={ blockInformation?.icon } /> }
-			/>
+			{ ! showInserter && parentButton }
+			{ showInserter && (
+				// A real toolbar group, so the buttons get the standard
+				// toolbar sizing, and the group overlaps the container
+				// border the way toolbar groups overlap the toolbar box.
+				<ToolbarGroup>
+					{ parentButton }
+					<Inserter
+						position="bottom right"
+						rootClientId={ parentClientId }
+						clientId={ nextSiblingClientId }
+						isAppender={ ! nextSiblingClientId }
+						__experimentalIsQuick
+						renderToggle={ ( {
+							onToggle,
+							isOpen,
+							disabled,
+							blockTitle,
+							hasSingleBlockType,
+						} ) => (
+							<ToolbarButton
+								className="block-editor-block-parent-selector__inserter"
+								onClick={ onToggle }
+								aria-expanded={ isOpen }
+								disabled={ disabled }
+								label={
+									hasSingleBlockType
+										? sprintf(
+												// translators: %s: the name of the block when there is only one
+												_x(
+													'Add %s',
+													'directly add the only allowed block'
+												),
+												blockTitle.toLowerCase()
+										  )
+										: _x(
+												'Add block',
+												'Generic label for block inserter button'
+										  )
+								}
+								showTooltip
+								icon={ plus }
+							/>
+						) }
+					/>
+				</ToolbarGroup>
+			) }
 		</div>
 	);
 }

package/src/components/block-popover/README.md

@@ -26,9 +26,16 @@ The client ID of the block representing the bottom position of the popover.
 
 This determines whether the block popover always shifts into the viewport or remains at its original position. See FloatingUI for more details on shift.
 
--	Type: `Boolean`
--	Required: No
--	Default: `true`
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+
+#### children
+
+The content rendered inside the popover.
+
+-   Type: `ReactNode`
+-   Required: No
 
 ## BlockPopoverInbetween - Private Component
 

package/src/components/block-popover/inbetween.js

@@ -101,12 +101,18 @@ function BlockPopoverInbetween( {
 				} else if ( isVertical ) {
 					// vertical
 					top = previousRect ? previousRect.bottom : nextRect.top;
-					width = previousRect ? previousRect.width : nextRect.width;
+					width =
+						nextRect && previousRect
+							? ( previousRect.width + nextRect.width ) / 2
+							: ( previousRect || nextRect ).width;
 					height =
 						nextRect && previousRect
 							? nextRect.top - previousRect.bottom
 							: 0;
-					left = previousRect ? previousRect.left : nextRect.left;
+					left =
+						nextRect && previousRect
+							? ( previousRect.left + nextRect.left ) / 2
+							: ( previousRect || nextRect ).left;
 				} else {
 					top = previousRect ? previousRect.top : nextRect.top;
 					height = previousRect

package/src/components/block-popover/stories/index.story.jsx

@@ -0,0 +1,143 @@
+import {
+	createBlock,
+	registerBlockType,
+	getBlockType,
+} from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+import BlockPopover from '../';
+import BlockList from '../../block-list';
+import { ExperimentalBlockEditorProvider } from '../../provider';
+
+// A minimal block type, so that the story doesn't depend on the block library.
+const BLOCK_NAME = 'storybook/example';
+const BLOCK_LABELS = [ 'First', 'Second', 'Third' ];
+
+// The client IDs are hardcoded instead of using the generated ones, so that a
+// client ID picked in the controls is still valid after a page reload.
+const clientIds = BLOCK_LABELS.map(
+	( label, index ) => `example-block-${ index + 1 }`
+);
+
+// Registered when the story renders rather than when this file loads, so that
+// the example block type doesn't leak into the registry shared with the other
+// stories.
+function useExampleBlocks() {
+	return useMemo( () => {
+		if ( ! getBlockType( BLOCK_NAME ) ) {
+			registerBlockType( BLOCK_NAME, {
+				title: 'Example',
+				category: 'text',
+				attributes: {
+					content: { type: 'string' },
+				},
+				edit: ( { attributes } ) => attributes.content,
+				save: () => null,
+			} );
+		}
+
+		return BLOCK_LABELS.map( ( label, index ) => ( {
+			...createBlock( BLOCK_NAME, {
+				content: `${ label } example block.`,
+			} ),
+			clientId: clientIds[ index ],
+		} ) );
+	}, [] );
+}
+
+// Makes the blocks and the popover distinguishable from each other, so that it
+// is easier to see which block the popover is anchored to.
+const storyStyles = `
+	.block-popover-story {
+		position: relative;
+		padding: 48px 0;
+	}
+	.block-popover-story .block-editor-block-list__block {
+		border: 1px dashed #949494;
+		padding: 8px;
+		margin-bottom: 16px;
+	}
+	.block-popover-story .block-editor-block-popover .components-popover__content {
+		background: #fff;
+		border: 1px solid #1e1e1e;
+		padding: 8px;
+	}
+`;
+
+const clientIdLabels = Object.fromEntries(
+	clientIds.map( ( clientId, index ) => [ clientId, `Block ${ index + 1 }` ] )
+);
+
+const meta = {
+	title: 'BlockEditor/BlockPopover',
+	component: BlockPopover,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					"BlockPopover renders editor UI by the block in a popover, positioned outside the canvas so that it doesn't interfere with the block list layout. The popover is anchored to the block matching `clientId`, so that block has to be rendered by a block list within a block editor provider. When a `bottomClientId` is passed as well, the popover is anchored to the area covered by both blocks.",
+			},
+		},
+	},
+	decorators: [
+		( Story ) => {
+			const blocks = useExampleBlocks();
+
+			return (
+				<ExperimentalBlockEditorProvider value={ blocks }>
+					<style>{ storyStyles }</style>
+					<div className="block-popover-story">
+						<BlockList />
+						<Story />
+					</div>
+				</ExperimentalBlockEditorProvider>
+			);
+		},
+	],
+	argTypes: {
+		clientId: {
+			control: { type: 'select', labels: clientIdLabels },
+			options: clientIds,
+			description:
+				'The client ID of the block representing the top position of the popover.',
+			type: { name: 'string', required: true },
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		bottomClientId: {
+			control: { type: 'select', labels: clientIdLabels },
+			options: clientIds,
+			description:
+				'The client ID of the block representing the bottom position of the popover.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		shift: {
+			control: { type: 'boolean' },
+			description:
+				'Determines whether the block popover always shifts into the viewport or remains at its original position.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+		children: {
+			control: { type: 'text' },
+			description: 'The content rendered inside the popover.',
+			table: {
+				type: { summary: 'ReactNode' },
+			},
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		clientId: clientIds[ 1 ],
+		children: 'This is a block popover example.',
+	},
+};

package/src/components/block-preview/index.js

@@ -48,7 +48,6 @@ export function BlockPreview( {
 	const settings = useMemo(
 		() => ( {
 			...originalSettings,
-			focusMode: false, // Disable "Spotlight mode".
 			isPreviewMode: true,
 		} ),
 		[ originalSettings ]
@@ -117,7 +116,6 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 		() => ( {
 			...originalSettings,
 			styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
-			focusMode: false, // Disable "Spotlight mode".
 			isPreviewMode: true,
 		} ),
 		[ originalSettings ]

package/src/components/block-styles/index.js

@@ -1,13 +1,14 @@
-import clsx from 'clsx';
 import { useState, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { debounce } from '@wordpress/compose';
+import { debounce, useInstanceId } from '@wordpress/compose';
 import {
-	Button,
+	Composite,
 	__experimentalTruncate as Truncate,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+// eslint-disable-next-line @wordpress/use-recommended-components
+import { Button } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
 import PreviewBlockPopover from '../block-switcher/preview-block-popover';
 import useStylesForBlocks from './use-styles-for-block';
@@ -17,6 +18,9 @@ import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
+const getCompositeItemId = ( instanceId, style ) =>
+	`${ instanceId }-${ style.name }`;
+
 // Block Styles component for the Settings Sidebar.
 function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 	const canEdit = useSelect(
@@ -36,6 +40,18 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 	const [ hoveredStyle, setHoveredStyle ] = useState( null );
 	const [ blockStylesAnchor, setBlockStylesAnchor ] = useState( null );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const instanceId = useInstanceId(
+		BlockStyles,
+		'block-editor-block-styles'
+	);
+
+	const styleRows = useMemo( () => {
+		const rows = [];
+		for ( let i = 0; i < ( stylesToRender?.length ?? 0 ); i += 2 ) {
+			rows.push( stylesToRender.slice( i, i + 2 ) );
+		}
+		return rows;
+	}, [ stylesToRender ] );
 
 	const previewBlocks = useMemo( () => {
 		if ( ! hoveredStyle || ! genericPreviewBlock ) {
@@ -79,6 +95,16 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		onHoverClassName( item?.name ?? null );
 	};
 
+	const onSetActiveId = ( nextActiveId ) => {
+		const nextStyle = stylesToRender.find(
+			( style ) =>
+				getCompositeItemId( instanceId, style ) === nextActiveId
+		);
+		if ( nextStyle && nextStyle.name !== activeStyle.name ) {
+			onSelectStylePreview( nextStyle );
+		}
+	};
+
 	const defaultStyle = getDefaultStyle( stylesToRender );
 
 	const hasValue = () => {
@@ -108,48 +134,74 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 					ref={ setBlockStylesAnchor }
 					className="block-editor-block-styles"
 				>
-					<div className="block-editor-block-styles__variants">
-						{ stylesToRender.map( ( style ) => {
-							const buttonText = style.label || style.name;
-
-							return (
-								<Button
-									__next40pxDefaultSize
-									className={ clsx(
-										'block-editor-block-styles__item',
-										{
-											'is-active':
-												activeStyle.name === style.name,
+					<Composite
+						role="radiogroup"
+						aria-label={ __( 'Styles' ) }
+						className="block-editor-block-styles__variants"
+						activeId={ getCompositeItemId(
+							instanceId,
+							activeStyle
+						) }
+						setActiveId={ onSetActiveId }
+						focusLoop
+						focusWrap
+						focusShift
+					>
+						{ styleRows.map( ( row, rowIndex ) => (
+							<Composite.Row
+								key={ rowIndex }
+								className="block-editor-block-styles__row"
+							>
+								{ row.map( ( style ) => (
+									<Composite.Item
+										key={ style.name }
+										id={ getCompositeItemId(
+											instanceId,
+											style
+										) }
+										render={
+											<Button
+												className="block-editor-block-styles__item"
+												tone="neutral"
+												variant={
+													activeStyle.name ===
+													style.name
+														? 'solid'
+														: 'outline'
+												}
+											/>
+										}
+										role="radio"
+										aria-checked={
+											activeStyle.name === style.name
+										}
+										onMouseEnter={ () =>
+											styleItemHandler( style )
+										}
+										onFocus={ () =>
+											styleItemHandler( style )
+										}
+										onMouseLeave={ () =>
+											styleItemHandler( null )
+										}
+										onBlur={ () =>
+											styleItemHandler( null )
+										}
+										onClick={ () =>
+											onSelectStylePreview( style )
 										}
-									) }
-									key={ style.name }
-									variant="secondary"
-									label={ buttonText }
-									onMouseEnter={ () =>
-										styleItemHandler( style )
-									}
-									onFocus={ () => styleItemHandler( style ) }
-									onMouseLeave={ () =>
-										styleItemHandler( null )
-									}
-									onBlur={ () => styleItemHandler( null ) }
-									onClick={ () =>
-										onSelectStylePreview( style )
-									}
-									aria-current={
-										activeStyle.name === style.name
-									}
-								>
-									<Truncate
-										numberOfLines={ 1 }
-										className="block-editor-block-styles__item-text"
 									>
-										{ buttonText }
-									</Truncate>
-								</Button>
-							);
-						} ) }
-					</div>
+										<Truncate
+											numberOfLines={ 3 }
+											className="block-editor-block-styles__item-text"
+										>
+											{ style.label || style.name }
+										</Truncate>
+									</Composite.Item>
+								) ) }
+							</Composite.Row>
+						) ) }
+					</Composite>
 					{ previewBlocks && (
 						<PreviewBlockPopover
 							blocks={ previewBlocks }

package/src/components/block-styles/style.scss

@@ -1,6 +1,5 @@
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/z-index" as *;
 
 .block-editor-block-styles__preview-panel {
@@ -23,44 +22,16 @@
 }
 
 .block-editor-block-styles__variants {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
+	display: grid;
 	gap: $grid-unit-10;
 
-	button.components-button.block-editor-block-styles__item {
-		color: $gray-900;
-		border-color: $gray-300;
-		display: inline-block;
-		width: calc(50% - #{$grid-unit-05});
-
-		&:hover {
-			color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 $border-width $gray-300;
-		}
-
-		&.is-active,
-		&.is-active:hover {
-			background-color: $gray-900;
-			box-shadow: none;
-		}
-
-		&.is-active .block-editor-block-styles__item-text,
-		&.is-active:hover .block-editor-block-styles__item-text {
-			color: $white;
-		}
-
-		&:focus,
-		&.is-active:focus {
-			@include outset-ring__focus();
-		}
+	.block-editor-block-styles__row {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: $grid-unit-10;
 	}
 
 	.block-editor-block-styles__item-text {
-		word-break: break-all;
-		// The Button component is white-space: nowrap, and that won't work with line-clamp.
-		white-space: normal;
-
 		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
 		text-align: start;
 		text-align-last: center;