@wordpress/block-editor 12.18.2 → 12.19.0

package/src/components/block-title/test/index.js

@@ -13,65 +13,40 @@ import { useSelect } from '@wordpress/data';
  */
 import BlockTitle from '../';
 
+const blockTypeMap = {
+	'name-not-exists': null,
+	'name-exists': { title: 'Block Title' },
+	'name-with-label': { title: 'Block With Label' },
+	'name-with-custom-label': { title: 'Block With Custom Label' },
+	'name-with-long-label': { title: 'Block With Long Label' },
+	'reusable-block': { title: 'Reusable Block' },
+};
+
+const blockLabelMap = {
+	'Block With Label': 'Test Label',
+	'Block With Long Label':
+		'This is a longer label than typical for blocks to have.',
+	'Block With Custom Label': 'A Custom Label like a Block Variation Label',
+	'Reusable Block': 'Reuse me!',
+};
+
 jest.mock( '@wordpress/blocks', () => {
 	return {
-		getBlockType( name ) {
-			switch ( name ) {
-				case 'name-not-exists':
-					return null;
-
-				case 'name-exists':
-					return { title: 'Block Title' };
-
-				case 'name-with-label':
-					return { title: 'Block With Label' };
-
-				case 'name-with-custom-label':
-					return { title: 'Block With Custom Label' };
-
-				case 'name-with-long-label':
-					return { title: 'Block With Long Label' };
-			}
+		isReusableBlock( { title } ) {
+			return title === 'Reusable Block';
 		},
 		__experimentalGetBlockLabel( { title } ) {
-			switch ( title ) {
-				case 'Block With Label':
-					return 'Test Label';
-
-				case 'Block With Long Label':
-					return 'This is a longer label than typical for blocks to have.';
-
-				case 'Block With Custom Label':
-					return 'A Custom Label like a Block Variation Label';
-
-				default:
-					return title;
-			}
+			return blockLabelMap[ title ] || title;
 		},
 	};
 } );
 
-jest.mock( '../../use-block-display-information', () => {
-	const resultsMap = {
-		'id-name-exists': { title: 'Block Title' },
-		'id-name-with-label': { title: 'Block With Label' },
-		'id-name-with-long-label': { title: 'Block With Long Label' },
-	};
-	return jest.fn( ( clientId ) => resultsMap[ clientId ] );
-} );
-
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
-} );
+// This allows us to tweak the returned value on each test.
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 
 describe( 'BlockTitle', () => {
 	it( 'renders nothing if name is falsey', () => {
-		useSelect.mockImplementation( () => ( {
-			name: null,
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( () => null );
 
 		const { container } = render( <BlockTitle /> );
 
@@ -79,10 +54,12 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'renders nothing if block type does not exist', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-not-exists',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-not-exists',
+				getBlockType: () => null,
+			} ) )
+		);
 
 		const { container } = render(
 			<BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
@@ -92,10 +69,14 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'renders title if block type exists', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-exists',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-exists',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+				getActiveBlockVariation: () => null,
+			} ) )
+		);
 
 		render( <BlockTitle clientId="id-name-exists" /> );
 
@@ -103,10 +84,13 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'renders label if it is set', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-with-label',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-with-label',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+			} ) )
+		);
 
 		render( <BlockTitle clientId="id-name-with-label" /> );
 
@@ -114,23 +98,28 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'should prioritize reusable block title over title', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-with-label',
-			reusableBlockTitle: 'Reuse me!',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'reusable-block',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => ( { ref: 1 } ),
+			} ) )
+		);
 
-		render( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-reusable-block" /> );
 
 		expect( screen.queryByText( 'Test Label' ) ).not.toBeInTheDocument();
 		expect( screen.getByText( 'Reuse me!' ) ).toBeVisible();
 	} );
 
 	it( 'should prioritize block label over title', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-with-custom-label',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-with-custom-label',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+			} ) )
+		);
 
 		render( <BlockTitle clientId="id-name-with-label" /> );
 
@@ -140,22 +129,31 @@ describe( 'BlockTitle', () => {
 		).toBeVisible();
 	} );
 
-	it( 'should default to block information title if no reusable title or block name is available', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'some-rando-name',
-			attributes: null,
-		} ) );
+	it( 'should default to block variation title if no reusable title or block name is available', () => {
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-exists',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+				getActiveBlockVariation: () => ( {
+					title: 'Block Variation Label',
+				} ),
+			} ) )
+		);
 
-		render( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-name-exists" /> );
 
-		expect( screen.getByText( 'Block With Label' ) ).toBeVisible();
+		expect( screen.getByText( 'Block Variation Label' ) ).toBeVisible();
 	} );
 
 	it( 'truncates the label with custom truncate length', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-with-long-label',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-with-long-label',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+			} ) )
+		);
 
 		render(
 			<BlockTitle
@@ -168,10 +166,13 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'should not truncate the label if maximum length is undefined', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-with-long-label',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-with-long-label',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+			} ) )
+		);
 
 		render( <BlockTitle clientId="id-name-with-long-label" /> );
 

package/src/components/block-title/use-block-display-title.js

@@ -3,15 +3,13 @@
  */
 import { useSelect } from '@wordpress/data';
 import {
-	getBlockType,
 	__experimentalGetBlockLabel as getBlockLabel,
-	isReusableBlock,
+	store as blocksStore,
 } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
 /**
@@ -35,49 +33,40 @@ export default function useBlockDisplayTitle( {
 	maximumLength,
 	context,
 } ) {
-	const { attributes, name, reusableBlockTitle } = useSelect(
+	const blockTitle = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
-				return {};
+				return null;
 			}
-			const {
-				getBlockName,
-				getBlockAttributes,
-				__experimentalGetReusableBlockTitle,
-			} = select( blockEditorStore );
+
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
+
 			const blockName = getBlockName( clientId );
-			if ( ! blockName ) {
-				return {};
+			const blockType = getBlockType( blockName );
+			if ( ! blockType ) {
+				return null;
+			}
+
+			const attributes = getBlockAttributes( clientId );
+			const label = getBlockLabel( blockType, attributes, context );
+			// If the label is defined we prioritize it over a possible block variation title match.
+			if ( label !== blockType.title ) {
+				return label;
 			}
-			const isReusable = isReusableBlock( getBlockType( blockName ) );
-			return {
-				attributes: getBlockAttributes( clientId ),
-				name: blockName,
-				reusableBlockTitle:
-					isReusable &&
-					__experimentalGetReusableBlockTitle(
-						getBlockAttributes( clientId ).ref
-					),
-			};
+
+			const match = getActiveBlockVariation( blockName, attributes );
+			// Label will fallback to the title if no label is defined for the current label context.
+			return match?.title || blockType.title;
 		},
-		[ clientId ]
+		[ clientId, context ]
 	);
 
-	const blockInformation = useBlockDisplayInformation( clientId );
-	if ( ! name || ! blockInformation ) {
+	if ( ! blockTitle ) {
 		return null;
 	}
-	const blockType = getBlockType( name );
-	const blockLabel = blockType
-		? getBlockLabel( blockType, attributes, context )
-		: null;
-
-	const label = reusableBlockTitle || blockLabel;
-	// Label will fallback to the title if no label is defined for the current
-	// label context. If the label is defined we prioritize it over a
-	// possible block variation title match.
-	const blockTitle =
-		label && label !== blockType.title ? label : blockInformation.title;
 
 	if (
 		maximumLength &&

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

@@ -76,6 +76,10 @@
 	.block-editor-block-toolbar {
 		overflow: auto;
 		overflow-y: hidden;
+		@include custom-scrollbars-on-hover($gray-200, $gray-600);
+
+		// Prevents padding from being applied to the left and right sides of the element.
+		scrollbar-gutter: auto;
 
 		> :last-child,
 		> :last-child .components-toolbar-group,
@@ -109,7 +113,10 @@
 			position: absolute;
 			font-size: 16px;
 			right: 0;
-			bottom: $grid-unit-20;
+			height: $button-size-compact;
+			top: 0;
+			display: inline-flex;
+			align-items: center;
 		}
 	}
 }

package/src/components/block-tools/block-selection-button.js

@@ -23,8 +23,8 @@ import {
 	SPACE,
 } from '@wordpress/keycodes';
 import {
-	getBlockType,
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { focus } from '@wordpress/dom';
@@ -37,7 +37,6 @@ import BlockTitle from '../block-title';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
-import useBlockDisplayInformation from '../use-block-display-information';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockMover from '../block-mover';
 
@@ -52,7 +51,6 @@ import BlockMover from '../block-mover';
  * @return {Component} The component to be rendered.
  */
 function BlockSelectionButton( { clientId, rootClientId } ) {
-	const blockInformation = useBlockDisplayInformation( clientId );
 	const selected = useSelect(
 		( select ) => {
 			const {
@@ -62,39 +60,33 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				getBlockListSettings,
 				__unstableGetEditorMode,
 			} = select( blockEditorStore );
+			const { getActiveBlockVariation, getBlockType } =
+				select( blocksStore );
 			const index = getBlockIndex( clientId );
 			const { name, attributes } = getBlock( clientId );
-			const blockMovingMode = hasBlockMovingClientId();
+			const blockType = getBlockType( name );
+			const orientation =
+				getBlockListSettings( rootClientId )?.orientation;
+			const match = getActiveBlockVariation( name, attributes );
+
 			return {
-				index,
-				name,
-				attributes,
-				blockMovingMode,
-				orientation: getBlockListSettings( rootClientId )?.orientation,
+				blockMovingMode: hasBlockMovingClientId(),
 				editorMode: __unstableGetEditorMode(),
+				icon: match?.icon || blockType.icon,
+				label: getAccessibleBlockLabel(
+					blockType,
+					attributes,
+					index + 1,
+					orientation
+				),
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const {
-		index,
-		name,
-		attributes,
-		blockMovingMode,
-		orientation,
-		editorMode,
-	} = selected;
+	const { label, icon, blockMovingMode, editorMode } = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
-	const blockType = getBlockType( name );
-	const label = getAccessibleBlockLabel(
-		blockType,
-		attributes,
-		index + 1,
-		orientation
-	);
-
 	// Focus the breadcrumb in navigation mode.
 	useEffect( () => {
 		ref.current.focus();
@@ -131,6 +123,11 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 		const isEnter = keyCode === ENTER;
 		const isSpace = keyCode === SPACE;
 		const isShift = event.shiftKey;
+		if ( isEscape && editorMode === 'navigation' ) {
+			setNavigationMode( false );
+			event.preventDefault();
+			return;
+		}
 
 		if ( keyCode === BACKSPACE || keyCode === DELETE ) {
 			removeBlock( clientId );
@@ -251,7 +248,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				className="block-editor-block-list__block-selection-button__content"
 			>
 				<FlexItem>
-					<BlockIcon icon={ blockInformation?.icon } showColors />
+					<BlockIcon icon={ icon } showColors />
 				</FlexItem>
 				<FlexItem>
 					{ editorMode === 'zoom-out' && (

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

@@ -99,7 +99,6 @@ export default function BlockTools( {
 		removeBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
-		clearSelectedBlock,
 		selectBlock,
 		moveBlocksUp,
 		moveBlocksDown,
@@ -157,21 +156,12 @@ export default function BlockTools( {
 			}
 
 			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length ) {
+			if ( clientIds.length > 1 ) {
 				event.preventDefault();
-
 				// If there is more than one block selected, select the first
 				// block so that focus is directed back to the beginning of the selection.
 				// In effect, to the user this feels like deselecting the multi-selection.
-				if ( clientIds.length > 1 ) {
-					selectBlock( clientIds[ 0 ] );
-				} else {
-					clearSelectedBlock();
-				}
-				event.target.ownerDocument.defaultView
-					.getSelection()
-					.removeAllRanges();
-				__unstableContentRef?.current.focus();
+				selectBlock( clientIds[ 0 ] );
 			}
 		}
 	}

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

@@ -81,7 +81,6 @@ function ColorGradientControlInner( {
 		),
 		[ TAB_IDS.gradient ]: (
 			<GradientPicker
-				__nextHasNoMargin
 				value={ gradientValue }
 				onChange={
 					canChooseAColor

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

@@ -7,9 +7,8 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
@@ -24,13 +23,26 @@ import { store as blockEditorStore } from '../../store';
  */
 export const ZWNBSP = '\ufeff';
 
-export function DefaultBlockAppender( {
-	isLocked,
-	onAppend,
-	showPrompt,
-	placeholder,
-	rootClientId,
-} ) {
+export default function DefaultBlockAppender( { rootClientId } ) {
+	const { showPrompt, isLocked, placeholder } = useSelect(
+		( select ) => {
+			const { getBlockCount, getSettings, getTemplateLock } =
+				select( blockEditorStore );
+
+			const isEmpty = ! getBlockCount( rootClientId );
+			const { bodyPlaceholder } = getSettings();
+
+			return {
+				showPrompt: isEmpty,
+				isLocked: !! getTemplateLock( rootClientId ),
+				placeholder: bodyPlaceholder,
+			};
+		},
+		[ rootClientId ]
+	);
+
+	const { insertDefaultBlock, startTyping } = useDispatch( blockEditorStore );
+
 	if ( isLocked ) {
 		return null;
 	}
@@ -38,6 +50,11 @@ export function DefaultBlockAppender( {
 	const value =
 		decodeEntities( placeholder ) || __( 'Type / to choose a block' );
 
+	const onAppend = () => {
+		insertDefaultBlock( undefined, rootClientId );
+		startTyping();
+	};
+
 	return (
 		<div
 			data-root-client-id={ rootClientId || '' }
@@ -76,32 +93,3 @@ export function DefaultBlockAppender( {
 		</div>
 	);
 }
-
-export default compose(
-	withSelect( ( select, ownProps ) => {
-		const { getBlockCount, getSettings, getTemplateLock } =
-			select( blockEditorStore );
-
-		const isEmpty = ! getBlockCount( ownProps.rootClientId );
-		const { bodyPlaceholder } = getSettings();
-
-		return {
-			showPrompt: isEmpty,
-			isLocked: !! getTemplateLock( ownProps.rootClientId ),
-			placeholder: bodyPlaceholder,
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => {
-		const { insertDefaultBlock, startTyping } =
-			dispatch( blockEditorStore );
-
-		return {
-			onAppend() {
-				const { rootClientId } = ownProps;
-
-				insertDefaultBlock( undefined, rootClientId );
-				startTyping();
-			},
-		};
-	} )
-)( DefaultBlockAppender );

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

@@ -7,26 +7,36 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import { DefaultBlockAppender, ZWNBSP } from '../';
+import DefaultBlockAppender, { ZWNBSP } from '../';
+import * as blockEditorActions from '../../../store/actions';
+import * as blockEditorSelectors from '../../../store/selectors';
+jest.mock( '../../../store/actions', () => {
+	const actions = jest.requireActual( '../../../store/actions' );
+	return {
+		...actions,
+		startTyping: jest.fn( actions.startTyping ),
+	};
+} );
+jest.mock( '../../../store/selectors', () => {
+	const selectors = jest.requireActual( '../../../store/selectors' );
+	return {
+		...selectors,
+		getBlockCount: jest.fn( selectors.getBlockCount ),
+	};
+} );
 
 describe( 'DefaultBlockAppender', () => {
 	it( 'should match snapshot', () => {
-		const onAppend = jest.fn();
-
-		const { container } = render(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
-		);
+		const { container } = render( <DefaultBlockAppender /> );
 
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should append a default block when input focused', async () => {
+		const startTyping = jest.spyOn( blockEditorActions, 'startTyping' );
 		const user = userEvent.setup();
-		const onAppend = jest.fn();
 
-		const { container } = render(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
-		);
+		const { container } = render( <DefaultBlockAppender /> );
 
 		await user.click(
 			screen.getByRole( 'button', { name: 'Add default block' } )
@@ -35,17 +45,15 @@ describe( 'DefaultBlockAppender', () => {
 		expect( container ).toMatchSnapshot();
 
 		// Called once for focusing and once for clicking.
-		expect( onAppend ).toHaveBeenCalledTimes( 2 );
-		expect( onAppend ).toHaveBeenCalledWith();
+		expect( startTyping ).toHaveBeenCalledTimes( 2 );
+		expect( startTyping ).toHaveBeenCalledWith();
 	} );
 
 	it( 'should optionally show without prompt', async () => {
+		blockEditorSelectors.getBlockCount.mockImplementation( () => 1 );
 		const user = userEvent.setup();
-		const onAppend = jest.fn();
 
-		const { container } = render(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt={ false } />
-		);
+		const { container } = render( <DefaultBlockAppender /> );
 
 		const appender = screen.getByRole( 'button', {
 			name: 'Add default block',

package/src/components/font-sizes/README.MD

@@ -31,7 +31,6 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
-			__nextHasNoMarginBottom
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
 			onChange={ ( newFontSize ) => {
@@ -80,11 +79,3 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 - Type: `Boolean`
 - Required: no
 - Default: `false`
-
-### __nextHasNoMarginBottom
-
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
-
--   Type: `Boolean`
--   Required: no
--   Default: `false`