@wordpress/block-editor 12.4.0 → 12.6.0

package/src/components/block-toolbar/index.native.js

@@ -1,23 +1,60 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import BlockActionsMenu from './block-toolbar-menu';
 import BlockControls from '../block-controls';
+import BlockMover from '../block-mover';
 import UngroupButton from '../ungroup-button';
+import { BlockSettingsButton } from '../block-settings';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockToolbar() {
-	const { isSelected, isValidAndVisual } = useSelect( ( select ) => {
-		const { getBlockMode, getSelectedBlockClientIds, isBlockValid } =
-			select( blockEditorStore );
+const REMOVE_EMPY_PARENT_BLOCKS = [
+	'core/buttons',
+	'core/columns',
+	'core/social-links',
+];
+
+export default function BlockToolbar( { anchorNodeRef } ) {
+	const {
+		rootClientId,
+		blockClientId,
+		isSelected,
+		isValidAndVisual,
+		isStackedHorizontally,
+		parentBlockName,
+		parentNumberOfInnerBlocks,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockListSettings,
+			getBlockMode,
+			getBlockName,
+			getBlockCount,
+			getBlockRootClientId,
+			getSelectedBlockClientIds,
+			isBlockValid,
+		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
+		const blockListSettings = getBlockListSettings( blockRootClientId );
+		const orientation = blockListSettings?.orientation;
+		const isBlockStackedHorizontally = orientation === 'horizontal';
+		const parentName = getBlockName( blockRootClientId );
+		const numberOfInnerBlocks = getBlockCount( blockRootClientId );
 
 		return {
+			rootClientId: blockRootClientId,
+			blockClientId: selectedBlockClientId,
 			isSelected: selectedBlockClientIds.length > 0,
+			isStackedHorizontally: isBlockStackedHorizontally,
+			parentBlockName: parentName,
+			parentNumberOfInnerBlocks: numberOfInnerBlocks,
 			isValidAndVisual:
 				selectedBlockClientIds.length === 1
 					? isBlockValid( selectedBlockClientIds[ 0 ] ) &&
@@ -26,6 +63,28 @@ export default function BlockToolbar() {
 		};
 	}, [] );
 
+	const { removeBlock } = useDispatch( blockEditorStore );
+	const onRemove = useCallback( () => {
+		// Temp: remove parent block for specific cases where they don't
+		// have inner blocks, ideally we should match the behavior as in
+		// the Web editor and show a placeholder instead of removing the parent.
+		if (
+			REMOVE_EMPY_PARENT_BLOCKS.includes( parentBlockName ) &&
+			parentNumberOfInnerBlocks === 1
+		) {
+			removeBlock( rootClientId );
+			return;
+		}
+
+		removeBlock( blockClientId );
+	}, [
+		blockClientId,
+		parentBlockName,
+		parentNumberOfInnerBlocks,
+		removeBlock,
+		rootClientId,
+	] );
+
 	if ( ! isSelected ) {
 		return null;
 	}
@@ -34,11 +93,32 @@ export default function BlockToolbar() {
 		<>
 			{ isValidAndVisual && (
 				<>
-					<UngroupButton />
+					<BlockSettingsButton.Slot>
+						{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }
+						{ ( fills = [ null ] ) => {
+							if ( ! fills?.length > 0 ) {
+								return null;
+							}
+							return fills[ 0 ];
+						} }
+					</BlockSettingsButton.Slot>
 					<BlockControls.Slot group="block" />
 					<BlockControls.Slot />
 					<BlockControls.Slot group="inline" />
 					<BlockControls.Slot group="other" />
+					<UngroupButton />
+
+					<BlockMover
+						clientIds={ [ blockClientId ] }
+						isStackedHorizontally={ isStackedHorizontally }
+					/>
+
+					<BlockActionsMenu
+						clientId={ blockClientId }
+						isStackedHorizontally={ isStackedHorizontally }
+						onDelete={ onRemove }
+						anchorNodeRef={ anchorNodeRef }
+					/>
 				</>
 			) }
 		</>

package/src/components/{block-mobile-toolbar/test/block-actions-menu.native.js → block-toolbar/test/block-toolbar-menu.native.js}

@@ -9,6 +9,7 @@ import {
 	within,
 	getEditorHtml,
 	typeInRichText,
+	openBlockActionsMenu,
 } from 'test/helpers';
 
 /**
@@ -36,15 +37,14 @@ describe( 'Block Actions Menu', () => {
             <p></p>
             <!-- /wp:paragraph -->`,
 		} );
-		const { getByLabelText, getByRole } = screen;
+		const { getByRole } = screen;
 
 		// Get block
 		const paragraphBlock = await getBlock( screen, 'Paragraph' );
 		fireEvent.press( paragraphBlock );
 
 		// Open block actions menu
-		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
-		fireEvent.press( blockActionsButton );
+		await openBlockActionsMenu( screen );
 
 		// Get Picker title
 		const pickerHeader = getByRole( 'header' );
@@ -56,10 +56,8 @@ describe( 'Block Actions Menu', () => {
 
 	describe( 'moving blocks', () => {
 		it( 'moves blocks up and down', async () => {
-			const screen = await initializeEditor( {
-				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
-			} );
-			const { getByLabelText, getByTestId } = screen;
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
 
 			// Add Paragraph block
 			await addBlock( screen, 'Paragraph' );
@@ -85,16 +83,8 @@ describe( 'Block Actions Menu', () => {
 			} );
 			fireEvent.press( spacerBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			let blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Tap on the Move Down button
-			fireEvent.press(
-				within( blockActionsMenu ).getByLabelText( 'Move block down' )
-			);
+			fireEvent.press( getByLabelText( /Move block down/ ) );
 
 			// Get Heading block
 			const headingBlock = await getBlock( screen, 'Heading', {
@@ -102,25 +92,15 @@ describe( 'Block Actions Menu', () => {
 			} );
 			fireEvent.press( headingBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Tap on the Move Up button
-			fireEvent.press(
-				within( blockActionsMenu ).getByLabelText( 'Move block up' )
-			);
+			fireEvent.press( getByLabelText( /Move block up/ ) );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
 		it( 'disables the Move Up button for the first block', async () => {
-			const screen = await initializeEditor( {
-				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
-			} );
-			const { getByLabelText, getByTestId } = screen;
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
 
 			// Add Paragraph block
 			await addBlock( screen, 'Paragraph' );
@@ -144,15 +124,8 @@ describe( 'Block Actions Menu', () => {
 			paragraphBlock = await getBlock( screen, 'Paragraph' );
 			fireEvent.press( paragraphBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Get the Move Up button
-			const upButton =
-				within( blockActionsMenu ).getByLabelText( 'Move block up' );
+			const upButton = getByLabelText( /Move block up/ );
 			const isUpButtonDisabled =
 				upButton.props.accessibilityState?.disabled;
 			expect( isUpButtonDisabled ).toBe( true );
@@ -167,7 +140,7 @@ describe( 'Block Actions Menu', () => {
 			const screen = await initializeEditor( {
 				screenWidth: 100,
 			} );
-			const { getByLabelText, getByTestId } = screen;
+			const { getByLabelText } = screen;
 
 			// Add Paragraph block
 			await addBlock( screen, 'Paragraph' );
@@ -193,15 +166,8 @@ describe( 'Block Actions Menu', () => {
 			} );
 			fireEvent.press( headingBlock );
 
-			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
-
-			// Get block actions modal
-			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
-
 			// Get the Move Down button
-			const downButton =
-				within( blockActionsMenu ).getByLabelText( 'Move block down' );
+			const downButton = getByLabelText( /Move block down/ );
 			const isDownButtonDisabled =
 				downButton.props.accessibilityState?.disabled;
 			expect( isDownButtonDisabled ).toBe( true );
@@ -243,7 +209,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( headingBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Copy button
 			fireEvent.press( getByLabelText( /Copy/ ) );
@@ -253,7 +219,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Paste block after button
 			fireEvent.press( getByLabelText( /Paste block after/ ) );
@@ -290,7 +256,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( headingBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Copy button
 			fireEvent.press( getByLabelText( /Copy/ ) );
@@ -300,7 +266,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Past block after button
 			fireEvent.press( getByLabelText( /Paste block after/ ) );
@@ -335,7 +301,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Cut button
 			fireEvent.press( getByLabelText( /Cut block/ ) );
@@ -346,7 +312,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( headingBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Cut button
 			fireEvent.press( getByLabelText( /Paste block after/ ) );
@@ -383,7 +349,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( spacerBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Duplicate button
 			fireEvent.press( getByLabelText( /Duplicate block/ ) );
@@ -418,7 +384,7 @@ describe( 'Block Actions Menu', () => {
 			fireEvent.press( paragraphBlock );
 
 			// Open block actions menu
-			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+			await openBlockActionsMenu( screen );
 
 			// Tap on the Transform block button
 			fireEvent.press( getByLabelText( /Transform block…/ ) );

package/src/components/block-toolbar/test/index.native.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	getBlock,
+	initializeEditor,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+describe( 'Block Toolbar', () => {
+	it( "doesn't render the block settings button if there aren't any settings for the current selected block", async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Image' );
+
+		// Act
+		fireEvent(
+			screen.getByTestId( 'media-options-picker' ),
+			'backdropPress'
+		);
+
+		// Assert
+		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeNull();
+	} );
+
+	it( 'renders the block settings button for the current selected block', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = await getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Assert
+		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeVisible();
+	} );
+} );

package/src/components/block-tools/block-contextual-toolbar.js

@@ -15,7 +15,7 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { levelUp } from '@wordpress/icons';
+import { next, previous } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -24,7 +24,6 @@ import { useViewportMatch } from '@wordpress/compose';
 import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
-import BlockIcon from '../block-icon';
 import { unlock } from '../../lock-unlock';
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
@@ -57,6 +56,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 				hasParents: parents.length,
 				showParentSelector:
 					parentBlockType &&
+					getBlockEditingMode( firstParentClientId ) === 'default' &&
 					hasBlockSupport(
 						parentBlockType,
 						'__experimentalParentSelector',
@@ -93,6 +93,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
+			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 			{ isFixed && isLargeViewport && blockType && (
 				<ToolbarGroup
 					className={
@@ -104,13 +105,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					<ToolbarItem
 						as={ ToolbarButton }
 						ref={ toolbarButtonRef }
-						icon={
-							isCollapsed ? (
-								<BlockIcon icon={ blockType.icon } />
-							) : (
-								levelUp
-							)
-						}
+						icon={ isCollapsed ? next : previous }
 						onClick={ () => {
 							setIsCollapsed( ( collapsed ) => ! collapsed );
 							toolbarButtonRef.current.focus();
@@ -118,12 +113,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 						label={
 							isCollapsed
 								? __( 'Show block tools' )
-								: __( 'Show document tools' )
+								: __( 'Hide block tools' )
 						}
 					/>
 				</ToolbarGroup>
 			) }
-			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 		</NavigableToolbar>
 	);
 }

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

@@ -121,17 +121,21 @@
 		}
 	}
 
+	&:has(.block-editor-block-toolbar:empty) {
+		display: none;
+	}
+
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
 
 	@include break-medium() {
 		&.is-fixed {
 
-			// leave room for block inserter
-			margin-left: $grid-unit-80;
+			// leave room for block inserter, undo and redo, list view
+			margin-left: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
 			// position on top of interface header
 			position: fixed;
-			top: $admin-bar-height + $grid-unit;
+			top: $admin-bar-height + $grid-unit - $border-width;
 			// Don't fill up when empty
 			min-height: initial;
 			// remove the border
@@ -141,32 +145,63 @@
 
 			&.is-collapsed {
 				width: initial;
-				margin-left: $grid-unit-80 * 3 + $grid-unit-30;
 			}
 
 			.is-fullscreen-mode & {
-				// leave room for block inserter
-				margin-left: $grid-unit-80 + $grid-unit-70;
-				top: $grid-unit;
+				// leave room for block inserter, undo and redo, list view
+				// and some margin left
+				margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
+				top: $grid-unit - $border-width;
 				&.is-collapsed {
 					width: initial;
-					margin-left: $grid-unit-80 * 4 + $grid-unit-30;
+				}
+			}
+
+			& > .block-editor-block-toolbar.is-showing-movers {
+				flex-grow: initial;
+				width: initial;
+
+				// Add a border as separator in the block toolbar.
+				&::before {
+					content: "";
+					width: $border-width;
+					height: 3 * $grid-unit;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-right: 0;
+					background-color: $gray-300;
+					position: relative;
+					left: math.div(-$grid-unit-05, 2);
+					top: -1px;
 				}
 			}
 
 			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
 				border: none;
 
+				.show-icon-labels & {
+					.components-button.has-icon {
+						// Hide the button icons when labels are set to display...
+						svg {
+							display: none;
+						}
+						// ... and display labels.
+						&::after {
+							content: attr(aria-label);
+							font-size: $helptext-font-size;
+						}
+					}
+				}
+
 				// Add a border as separator in the block toolbar.
-				&::after {
+				&::before {
 					content: "";
 					width: $border-width;
-					height: 24px;
+					height: 3 * $grid-unit;
 					margin-top: $grid-unit + $grid-unit-05;
-					margin-bottom: $grid-unit + $grid-unit-05;
+					margin-right: $grid-unit-10;
 					background-color: $gray-300;
-					position: absolute;
-					left: 44px;
+					position: relative;
+					left: 0;
 					top: -1px;
 				}
 			}
@@ -174,6 +209,21 @@
 			& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
 				border: none;
 
+				.show-icon-labels & {
+					width: $grid-unit-80 * 4;
+					.components-button.has-icon {
+						// Hide the button icons when labels are set to display...
+						svg {
+							display: none;
+						}
+						// ... and display labels.
+						&::after {
+							content: attr(aria-label);
+							font-size: $helptext-font-size;
+						}
+					}
+				}
+
 				// Add a border as separator in the block toolbar.
 				&::before {
 					content: "";
@@ -182,27 +232,20 @@
 					margin-bottom: $grid-unit + $grid-unit-05;
 					background-color: $gray-300;
 					position: relative;
-					left: -12px; //the padding of buttons
-					height: 24px;
+					left: -8px;
+					height: 3 * $grid-unit;
+					top: -1px;
 				}
 			}
 
 			.show-icon-labels & {
 
-				margin-left: $grid-unit-80;
-
-				&.is-collapsed {
-					margin-left: $grid-unit-80 * 6;
-				}
+				margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin ;
 
 				.is-fullscreen-mode & {
-					margin-left: $grid-unit-80 + $grid-unit-80;
-					&.is-collapsed {
-						margin-left: $grid-unit-80 * 7;
-					}
+					margin-left: $grid-unit * 18; // site hub, inserter and margin
 				}
 
-
 				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
 					left: 0;
 				}
@@ -230,12 +273,14 @@
 		}
 
 		&.is-fixed .block-editor-block-parent-selector {
+
 			.block-editor-block-parent-selector__button {
 				position: relative;
 				top: -1px;
 				border: 0;
 				padding-right: 6px;
 				padding-left: 6px;
+
 				&::after {
 					content: "\00B7";
 					font-size: 16px;
@@ -277,7 +322,9 @@
 	// for the block inserter the publish button
 	@include break-large() {
 		&.is-fixed {
-			width: initial;
+			// the combined with of the tools at the right of the header and the margin left
+			// of the toolbar which includes four buttons
+			width: calc(100% - 240px - #{4 * $grid-unit-80});
 		}
 	}
 

package/src/components/button-block-appender/styles.native.scss

@@ -3,8 +3,8 @@
 	align-items: center;
 	justify-content: center;
 	padding: 9px;
-	margin-left: 0;
-	margin-right: 0;
+	margin-left: $grid-unit;
+	margin-right: $grid-unit;
 	border-radius: 4px;
 }
 

package/src/components/caption/README.md

@@ -0,0 +1,49 @@
+## Caption
+
+The `Caption` component renders the [caption part](https://wordpress.org/documentation/article/gallery-block/#caption) of some blocks (image, gallery...).
+
+This component encapsulates the "caption" behaviour and styles over a `<RichText>` so it can be used in other components such as the `BlockCaption` component.
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Renders a Caption area:
+
+```jsx
+import { Caption } from '@wordpress/block-editor';
+const BlockCaption = ( {
+	onBlur,
+	onChange,
+	onFocus,
+	isSelected,
+	shouldDisplay,
+	text,
+	insertBlocksAfter,
+} ) => (
+	<View >
+		<Caption
+			isSelected={ isSelected }
+			onBlur={ onBlur }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			shouldDisplay={ shouldDisplay }
+			value={ text }
+			insertBlocksAfter={ insertBlocksAfter }
+		/>
+	</View>
+);
+```
+
+### Props
+
+The properties `isSelected`, `onBlur`, `onChange`, `onFocus`, `shouldDisplay`, `value`, `insertBlocksAfter` of this component are passed directly to their related props of its inner `<RichText>` component ([see detailed info about the RichText component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)).
+
+## Related components
+
+Caption components is mostly used by the [`BlockCaption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-caption) component.

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
@@ -28,12 +29,12 @@ const colorsAndGradientKeys = [
 
 const TAB_COLOR = {
 	name: 'color',
-	title: 'Solid',
+	title: __( 'Solid' ),
 	value: 'color',
 };
 const TAB_GRADIENT = {
 	name: 'gradient',
-	title: 'Gradient',
+	title: __( 'Gradient' ),
 	value: 'gradient',
 };