@wordpress/block-editor 12.24.0 → 12.26.0

package/src/components/block-tools/use-show-block-tools.js

@@ -8,7 +8,6 @@ import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { useHasBlockToolbar } from '../block-toolbar/use-has-block-toolbar';
 
 /**
  * Source of truth for which block tools are showing in the block editor.
@@ -16,55 +15,44 @@ import { useHasBlockToolbar } from '../block-toolbar/use-has-block-toolbar';
  * @return {Object} Object of which block tools will be shown.
  */
 export function useShowBlockTools() {
-	const hasBlockToolbar = useHasBlockToolbar();
+	return useSelect( ( select ) => {
+		const {
+			getSelectedBlockClientId,
+			getFirstMultiSelectedBlockClientId,
+			getBlock,
+			getSettings,
+			hasMultiSelection,
+			__unstableGetEditorMode,
+			isTyping,
+		} = select( blockEditorStore );
 
-	return useSelect(
-		( select ) => {
-			const {
-				getSelectedBlockClientId,
-				getFirstMultiSelectedBlockClientId,
-				getBlock,
-				getSettings,
-				hasMultiSelection,
-				__unstableGetEditorMode,
-				isTyping,
-			} = select( blockEditorStore );
+		const clientId =
+			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
-			const clientId =
-				getSelectedBlockClientId() ||
-				getFirstMultiSelectedBlockClientId();
+		const block = getBlock( clientId ) || { name: '', attributes: {} };
+		const editorMode = __unstableGetEditorMode();
+		const hasSelectedBlock = clientId && block?.name;
+		const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( block );
+		const _showEmptyBlockSideInserter =
+			clientId &&
+			! isTyping() &&
+			editorMode === 'edit' &&
+			isEmptyDefaultBlock;
+		const maybeShowBreadcrumb =
+			hasSelectedBlock &&
+			! hasMultiSelection() &&
+			( editorMode === 'navigation' || editorMode === 'zoom-out' );
 
-			const block = getBlock( clientId ) || { name: '', attributes: {} };
-			const editorMode = __unstableGetEditorMode();
-			const hasSelectedBlock = clientId && block?.name;
-			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( block );
-			const _showEmptyBlockSideInserter =
-				clientId &&
-				! isTyping() &&
-				editorMode === 'edit' &&
-				isEmptyDefaultBlock;
-			const maybeShowBreadcrumb =
+		return {
+			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+			showBreadcrumb:
+				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
+			showBlockToolbarPopover:
+				! getSettings().hasFixedToolbar &&
+				! _showEmptyBlockSideInserter &&
 				hasSelectedBlock &&
-				! hasMultiSelection() &&
-				( editorMode === 'navigation' || editorMode === 'zoom-out' );
-
-			return {
-				showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
-				showBreadcrumb:
-					! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
-				showBlockToolbarPopover:
-					hasBlockToolbar &&
-					! getSettings().hasFixedToolbar &&
-					! _showEmptyBlockSideInserter &&
-					hasSelectedBlock &&
-					! isEmptyDefaultBlock &&
-					! maybeShowBreadcrumb,
-				showFixedToolbar:
-					editorMode !== 'zoom-out' &&
-					hasBlockToolbar &&
-					getSettings().hasFixedToolbar,
-			};
-		},
-		[ hasBlockToolbar ]
-	);
+				! isEmptyDefaultBlock &&
+				! maybeShowBreadcrumb,
+		};
+	}, [] );
 }

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -2,21 +2,56 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { plus } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import { store as blockEditorStore } from '../../store';
-import Inserter from '../inserter';
+import { unlock } from '../../lock-unlock';
 
-function ZoomOutModeInserters( { __unstableContentRef } ) {
+function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
-	const blockOrder = useSelect( ( select ) => {
-		return select( blockEditorStore ).getBlockOrder();
+	const {
+		blockOrder,
+		sectionRootClientId,
+		insertionPoint,
+		setInserterIsOpened,
+	} = useSelect( ( select ) => {
+		const { getSettings, getBlockOrder } = select( blockEditorStore );
+		const { sectionRootClientId: root } = unlock( getSettings() );
+		// To do: move ZoomOutModeInserters to core/editor.
+		// Or we perhaps we should move the insertion point state to the
+		// block-editor store. I'm not sure what it was ever moved to the editor
+		// store, because all the inserter components all live in the
+		// block-editor package.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const editor = select( 'core/editor' );
+		return {
+			blockOrder: getBlockOrder( root ),
+			insertionPoint: unlock( editor ).getInsertionPoint(),
+			sectionRootClientId: root,
+			setInserterIsOpened:
+				getSettings().__experimentalSetIsInserterOpened,
+		};
 	}, [] );
 
+	const isMounted = useRef( false );
+
+	useEffect( () => {
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
+		// reset insertion point when the block order changes
+		setInserterIsOpened( true );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ blockOrder ] );
+
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
 		const timeout = setTimeout( () => {
@@ -31,24 +66,45 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 		return null;
 	}
 
-	return blockOrder.map( ( clientId, index ) => {
-		if ( index === blockOrder.length - 1 ) {
-			return null;
-		}
+	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
 		return (
 			<BlockPopoverInbetween
-				key={ clientId }
+				key={ index }
 				previousClientId={ clientId }
-				nextClientId={ blockOrder[ index + 1 ] }
-				__unstableContentRef={ __unstableContentRef }
+				nextClientId={ blockOrder[ index ] }
 			>
-				<div className="block-editor-block-list__insertion-point-inserter is-with-inserter">
-					<Inserter
-						position="bottom center"
-						clientId={ blockOrder[ index + 1 ] }
-						__experimentalIsQuick
+				{ insertionPoint.insertionIndex === index && (
+					<div
+						style={ {
+							borderRadius: '0',
+							height: '12px',
+							opacity: 1,
+							transform: 'translateY(-50%)',
+							width: '100%',
+						} }
+						className="block-editor-block-list__insertion-point-indicator"
+					/>
+				) }
+				{ insertionPoint.insertionIndex !== index && (
+					<Button
+						variant="primary"
+						icon={ plus }
+						size="compact"
+						className="block-editor-button-pattern-inserter__button"
+						onClick={ () => {
+							setInserterIsOpened( {
+								rootClientId: sectionRootClientId,
+								insertionIndex: index,
+								tab: 'patterns',
+								category: 'all',
+							} );
+						} }
+						label={ _x(
+							'Add pattern',
+							'Generic label for pattern inserter button'
+						) }
 					/>
-				</div>
+				) }
 			</BlockPopoverInbetween>
 		);
 	} );

package/src/components/block-variation-picker/content.scss

@@ -1,89 +1,39 @@
-.block-editor-block-variation-picker {
-	.components-placeholder__instructions {
-		// Defer to vertical margins applied by template picker options.
-		margin-bottom: 0;
-	}
-
-	.components-placeholder__fieldset {
-		// Options will render horizontally, but the immediate children of the
-		// fieldset are the options and the skip button, oriented vertically.
-		flex-direction: column;
-	}
-
-	&.has-many-variations .components-placeholder__fieldset {
-		// Allow options to occupy a greater amount of the available space if
-		// many options exist.
-		max-width: 90%;
-	}
-}
-
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
+.block-editor-block-variation-picker__variations,
+.block-editor-block-variation-picker__skip,
+.wp-block-group-placeholder__variations {
+	list-style: none;
 	display: flex;
 	justify-content: flex-start;
 	flex-direction: row;
 	flex-wrap: wrap;
 	width: 100%;
-	margin: $grid-unit-20 0;
 	padding: 0;
-	list-style: none;
+	margin: 0;
+	gap: $grid-unit-10;
+	font-size: $helptext-font-size;
 
-	> li {
-		list-style: none;
-		margin: $grid-unit-10 ( $grid-unit-10 + $grid-unit-15 ) 0 0;
-		flex-shrink: 1;
-		width: 75px;
-		text-align: center;
-
-		button {
-			display: inline-flex;
-			margin-right: 0;
-		}
+	svg {
+		fill: $gray-400 !important;
 	}
 
-	.block-editor-block-variation-picker__variation {
-		padding: $grid-unit-10;
+	.components-button {
+		padding: 4px;
 	}
 
-	.block-editor-block-variation-picker__variation-label {
-		font-family: $default-font;
-		font-size: 12px;
-		display: block;
-		line-height: 1.4;
+	.components-button:hover {
+		background: none !important; // !important to simplify the selector.
 	}
-}
 
-.block-editor-block-variation-picker__variation {
-	width: 100%;
-
-	&.components-button.has-icon {
-		// Override default styles inherited from <Button /> to center
-		// icon horizontally.
-		justify-content: center;
-		width: auto;
-
-		&.is-secondary {
-			background-color: $white;
-		}
-	}
-
-	&.components-button {
-		// Override default styles inherited from <Button /> to allow button
-		// to grow vertically.
-		height: auto;
-		padding: 0;
-	}
-
-	&::before {
-		// Use `padding-bottom` trick to style element as perfect square.
-		content: "";
-		padding-bottom: 100%;
-	}
-
-	&:first-child {
-		margin-left: 0;
+	.components-button:hover svg {
+		fill: var(--wp-admin-theme-color) !important;
 	}
 
-	&:last-child {
-		margin-right: 0;
+	& > li {
+		width: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $grid-unit-05;
 	}
 }
+

package/src/components/block-variation-picker/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,12 +13,12 @@ import { layout } from '@wordpress/icons';
 function BlockVariationPicker( {
 	icon = layout,
 	label = __( 'Choose variation' ),
-	instructions = __( 'Select a variation to start with.' ),
+	instructions = __( 'Select a variation to start with:' ),
 	variations,
 	onSelect,
 	allowSkip,
 } ) {
-	const classes = classnames( 'block-editor-block-variation-picker', {
+	const classes = clsx( 'block-editor-block-variation-picker', {
 		'has-many-variations': variations.length > 4,
 	} );
 
@@ -42,7 +42,8 @@ function BlockVariationPicker( {
 				{ variations.map( ( variation ) => (
 					<li key={ variation.name }>
 						<Button
-							variant="secondary"
+							__next40pxDefaultSize
+							variant="tertiary"
 							icon={
 								variation.icon && variation.icon.src
 									? variation.icon.src

package/src/components/block-variation-transforms/index.js

@@ -180,7 +180,9 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	};
 
 	// Skip rendering if there are no variations
-	if ( ! variations?.length ) return null;
+	if ( ! variations?.length ) {
+		return null;
+	}
 
 	const baseClass = 'block-editor-block-variation-transforms';
 

package/src/components/button-block-appender/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -53,7 +53,7 @@ function ButtonBlockAppender(
 						ref={ ref }
 						onFocus={ onFocus }
 						tabIndex={ tabIndex }
-						className={ classnames(
+						className={ clsx(
 							className,
 							'block-editor-button-block-appender'
 						) }

package/src/components/child-layout-control/index.js

@@ -223,7 +223,13 @@ export default function ChildLayoutControl( {
 									} }
 									value={ columnStart }
 									min={ 1 }
-									max={ parentLayout?.columnCount }
+									max={
+										parentLayout?.columnCount
+											? parentLayout.columnCount -
+											  ( columnSpan ?? 1 ) +
+											  1
+											: undefined
+									}
 								/>
 							</FlexItem>
 							<FlexItem style={ { width: '50%' } }>
@@ -241,7 +247,13 @@ export default function ChildLayoutControl( {
 									} }
 									value={ rowStart }
 									min={ 1 }
-									max={ parentLayout?.columnCount }
+									max={
+										parentLayout?.rowCount
+											? parentLayout.rowCount -
+											  ( rowSpan ?? 1 ) +
+											  1
+											: undefined
+									}
 								/>
 							</FlexItem>
 						</Flex>

package/src/components/colors-gradients/control.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -114,7 +114,7 @@ function ColorGradientControlInner( {
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
-			className={ classnames(
+			className={ clsx(
 				'block-editor-color-gradient-control',
 				className
 			) }
@@ -141,7 +141,7 @@ function ColorGradientControlInner( {
 							>
 								<Tabs.TabList>
 									<Tabs.Tab tabId={ TAB_IDS.color }>
-										{ __( 'Solid' ) }
+										{ __( 'Color' ) }
 									</Tabs.Tab>
 									<Tabs.Tab tabId={ TAB_IDS.gradient }>
 										{ __( 'Gradient' ) }

package/src/components/colors-gradients/dropdown.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ const renderToggle =
 
 		const toggleProps = {
 			onClick: onToggle,
-			className: classnames(
+			className: clsx(
 				'block-editor-panel-color-gradient-settings__dropdown',
 				{ 'is-open': isOpen }
 			),

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -61,7 +61,7 @@ export const PanelColorGradientSettingsInner = ( {
 
 	return (
 		<ToolsPanel
-			className={ classnames(
+			className={ clsx(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }

package/src/components/colors-gradients/test/control.js

@@ -43,7 +43,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is showing the two tab buttons.
 		expect(
-			screen.getByRole( 'tab', { name: 'Solid' } )
+			screen.getByRole( 'tab', { name: 'Color' } )
 		).toBeInTheDocument();
 		expect(
 			screen.getByRole( 'tab', { name: 'Gradient' } )
@@ -72,7 +72,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid' } )
+			screen.queryByRole( 'tab', { name: 'Color' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )
@@ -111,7 +111,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid' } )
+			screen.queryByRole( 'tab', { name: 'Color' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )

package/src/components/convert-to-group-buttons/index.js

@@ -4,7 +4,8 @@
 import { MenuItem } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
 import { switchToBlockType } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -22,6 +23,7 @@ function ConvertToGroupButton( {
 	groupingBlockName,
 	onClose = () => {},
 } ) {
+	const { getSelectedBlockClientIds } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const onConvertToGroup = () => {
 		// Activate the `transform` on the Grouping Block which does the conversion.
@@ -52,10 +54,17 @@ function ConvertToGroupButton( {
 		return null;
 	}
 
+	const selectedBlockClientIds = getSelectedBlockClientIds();
+
 	return (
 		<>
 			{ isGroupable && (
 				<MenuItem
+					shortcut={
+						selectedBlockClientIds.length > 1
+							? displayShortcut.primary( 'g' )
+							: undefined
+					}
 					onClick={ () => {
 						onConvertToGroup();
 						onClose();

package/src/components/default-block-appender/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ export default function DefaultBlockAppender( { rootClientId } ) {
 	return (
 		<div
 			data-root-client-id={ rootClientId || '' }
-			className={ classnames( 'block-editor-default-block-appender', {
+			className={ clsx( 'block-editor-default-block-appender', {
 				'has-visible-prompt': showPrompt,
 			} ) }
 		>