@wordpress/block-editor 11.1.0 → 11.3.0

package/src/components/block-tools/selected-block-popover.js

@@ -21,6 +21,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
+import { unlock } from '../../experiments';
 
 function selector( select ) {
 	const {
@@ -28,13 +29,14 @@ function selector( select ) {
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
-		__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
+		isBlockInterfaceHidden,
 		getSettings,
 		getLastMultiSelectedBlockClientId,
-	} = select( blockEditorStore );
+	} = unlock( select( blockEditorStore ) );
 
 	return {
 		editorMode: __unstableGetEditorMode(),
+		hasMultiSelection: hasMultiSelection(),
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
 		isBlockInterfaceHidden: isBlockInterfaceHidden(),
@@ -57,6 +59,7 @@ function SelectedBlockPopover( {
 } ) {
 	const {
 		editorMode,
+		hasMultiSelection,
 		isMultiSelecting,
 		isTyping,
 		isBlockInterfaceHidden,
@@ -89,7 +92,8 @@ function SelectedBlockPopover( {
 	const showEmptyBlockSideInserter =
 		! isTyping && editorMode === 'edit' && isEmptyDefaultBlock;
 	const shouldShowBreadcrumb =
-		editorMode === 'navigation' || editorMode === 'zoom-out';
+		! hasMultiSelection &&
+		( editorMode === 'navigation' || editorMode === 'zoom-out' );
 	const shouldShowContextualToolbar =
 		editorMode === 'edit' &&
 		! hasFixedToolbar &&
@@ -129,86 +133,79 @@ function SelectedBlockPopover( {
 		clientId,
 	} );
 
-	if (
-		! shouldShowBreadcrumb &&
-		! shouldShowContextualToolbar &&
-		! showEmptyBlockSideInserter
-	) {
-		return null;
+	if ( showEmptyBlockSideInserter ) {
+		return (
+			<BlockPopover
+				clientId={ capturingClientId || clientId }
+				__unstableCoverTarget
+				bottomClientId={ lastClientId }
+				className={ classnames(
+					'block-editor-block-list__block-side-inserter-popover',
+					{
+						'is-insertion-point-visible': isInsertionPointVisible,
+					}
+				) }
+				__unstablePopoverSlot={ __unstablePopoverSlot }
+				__unstableContentRef={ __unstableContentRef }
+				resize={ false }
+				shift={ false }
+				{ ...popoverProps }
+			>
+				<div className="block-editor-block-list__empty-block-inserter">
+					<Inserter
+						position="bottom right"
+						rootClientId={ rootClientId }
+						clientId={ clientId }
+						__experimentalIsQuick
+					/>
+				</div>
+			</BlockPopover>
+		);
 	}
 
-	return (
-		<>
-			{ showEmptyBlockSideInserter && (
-				<BlockPopover
-					clientId={ capturingClientId || clientId }
-					__unstableCoverTarget
-					bottomClientId={ lastClientId }
-					className={ classnames(
-						'block-editor-block-list__block-side-inserter-popover',
-						{
-							'is-insertion-point-visible':
-								isInsertionPointVisible,
-						}
-					) }
-					__unstablePopoverSlot={ __unstablePopoverSlot }
-					__unstableContentRef={ __unstableContentRef }
-					resize={ false }
-					shift={ false }
-					{ ...popoverProps }
-				>
-					<div className="block-editor-block-list__empty-block-inserter">
-						<Inserter
-							position="bottom right"
-							rootClientId={ rootClientId }
-							clientId={ clientId }
-							__experimentalIsQuick
-						/>
-					</div>
-				</BlockPopover>
-			) }
-			{ ( shouldShowBreadcrumb || shouldShowContextualToolbar ) && (
-				<BlockPopover
-					clientId={ capturingClientId || clientId }
-					bottomClientId={ lastClientId }
-					className={ classnames(
-						'block-editor-block-list__block-popover',
-						{
-							'is-insertion-point-visible':
-								isInsertionPointVisible,
+	if ( shouldShowBreadcrumb || shouldShowContextualToolbar ) {
+		return (
+			<BlockPopover
+				clientId={ capturingClientId || clientId }
+				bottomClientId={ lastClientId }
+				className={ classnames(
+					'block-editor-block-list__block-popover',
+					{
+						'is-insertion-point-visible': isInsertionPointVisible,
+					}
+				) }
+				__unstablePopoverSlot={ __unstablePopoverSlot }
+				__unstableContentRef={ __unstableContentRef }
+				resize={ false }
+				{ ...popoverProps }
+			>
+				{ shouldShowContextualToolbar && showContents && (
+					<BlockContextualToolbar
+						// If the toolbar is being shown because of being forced
+						// it should focus the toolbar right after the mount.
+						focusOnMount={ isToolbarForced.current }
+						__experimentalInitialIndex={
+							initialToolbarItemIndexRef.current
 						}
-					) }
-					__unstablePopoverSlot={ __unstablePopoverSlot }
-					__unstableContentRef={ __unstableContentRef }
-					resize={ false }
-					{ ...popoverProps }
-				>
-					{ shouldShowContextualToolbar && showContents && (
-						<BlockContextualToolbar
-							// If the toolbar is being shown because of being forced
-							// it should focus the toolbar right after the mount.
-							focusOnMount={ isToolbarForced.current }
-							__experimentalInitialIndex={
-								initialToolbarItemIndexRef.current
-							}
-							__experimentalOnIndexChange={ ( index ) => {
-								initialToolbarItemIndexRef.current = index;
-							} }
-							// Resets the index whenever the active block changes so
-							// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-							key={ clientId }
-						/>
-					) }
-					{ shouldShowBreadcrumb && (
-						<BlockSelectionButton
-							clientId={ clientId }
-							rootClientId={ rootClientId }
-						/>
-					) }
-				</BlockPopover>
-			) }
-		</>
-	);
+						__experimentalOnIndexChange={ ( index ) => {
+							initialToolbarItemIndexRef.current = index;
+						} }
+						// Resets the index whenever the active block changes so
+						// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+						key={ clientId }
+					/>
+				) }
+				{ shouldShowBreadcrumb && (
+					<BlockSelectionButton
+						clientId={ clientId }
+						rootClientId={ rootClientId }
+					/>
+				) }
+			</BlockPopover>
+		);
+	}
+
+	return null;
 }
 
 function wrapperSelector( select ) {

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

@@ -59,7 +59,6 @@
 
 // Sibling inserter / "inbetweenserter".
 .block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -3,13 +3,20 @@
  */
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useCallback, useLayoutEffect, useState } from '@wordpress/element';
+import { getScrollContainer } from '@wordpress/dom';
+import {
+	useCallback,
+	useLayoutEffect,
+	useMemo,
+	useState,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { hasStickyOrFixedPositionValue } from '../../hooks/position';
 
 const COMMON_PROPS = {
 	placement: 'top-start',
@@ -40,28 +47,50 @@ const RESTRICTED_HEIGHT_PROPS = {
  *
  * @param {Element} contentElement       The DOM element that represents the editor content or canvas.
  * @param {Element} selectedBlockElement The outer DOM element of the first selected block.
+ * @param {Element} scrollContainer      The scrollable container for the contentElement.
  * @param {number}  toolbarHeight        The height of the toolbar in pixels.
+ * @param {boolean} isSticky             Whether or not the selected block is sticky or fixed.
  *
  * @return {Object} The popover props used to determine the position of the toolbar.
  */
-function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
+function getProps(
+	contentElement,
+	selectedBlockElement,
+	scrollContainer,
+	toolbarHeight,
+	isSticky
+) {
 	if ( ! contentElement || ! selectedBlockElement ) {
 		return DEFAULT_PROPS;
 	}
 
+	// Get how far the content area has been scrolled.
+	const scrollTop = scrollContainer?.scrollTop || 0;
+
 	const blockRect = selectedBlockElement.getBoundingClientRect();
 	const contentRect = contentElement.getBoundingClientRect();
 
+	// Get the vertical position of top of the visible content area.
+	const topOfContentElementInViewport = scrollTop + contentRect.top;
+
 	// The document element's clientHeight represents the viewport height.
 	const viewportHeight =
 		contentElement.ownerDocument.documentElement.clientHeight;
 
-	const hasSpaceForToolbarAbove =
-		blockRect.top - contentRect.top > toolbarHeight;
+	// The restricted height area is calculated as the sum of the
+	// vertical position of the visible content area, plus the height
+	// of the block toolbar.
+	const restrictedTopArea = topOfContentElementInViewport + toolbarHeight;
+	const hasSpaceForToolbarAbove = blockRect.top > restrictedTopArea;
+
 	const isBlockTallerThanViewport =
 		blockRect.height > viewportHeight - toolbarHeight;
 
-	if ( hasSpaceForToolbarAbove || isBlockTallerThanViewport ) {
+	// Sticky blocks are treated as if they will never have enough space for the toolbar above.
+	if (
+		! isSticky &&
+		( hasSpaceForToolbarAbove || isBlockTallerThanViewport )
+	) {
 		return DEFAULT_PROPS;
 	}
 
@@ -83,13 +112,34 @@ export default function useBlockToolbarPopoverProps( {
 } ) {
 	const selectedBlockElement = useBlockElement( clientId );
 	const [ toolbarHeight, setToolbarHeight ] = useState( 0 );
-	const [ props, setProps ] = useState( () =>
-		getProps( contentElement, selectedBlockElement, toolbarHeight )
-	);
-	const blockIndex = useSelect(
-		( select ) => select( blockEditorStore ).getBlockIndex( clientId ),
+	const { blockIndex, isSticky } = useSelect(
+		( select ) => {
+			const { getBlockIndex, getBlockAttributes } =
+				select( blockEditorStore );
+			return {
+				blockIndex: getBlockIndex( clientId ),
+				isSticky: hasStickyOrFixedPositionValue(
+					getBlockAttributes( clientId )
+				),
+			};
+		},
 		[ clientId ]
 	);
+	const scrollContainer = useMemo( () => {
+		if ( ! contentElement ) {
+			return;
+		}
+		return getScrollContainer( contentElement );
+	}, [ contentElement ] );
+	const [ props, setProps ] = useState( () =>
+		getProps(
+			contentElement,
+			selectedBlockElement,
+			scrollContainer,
+			toolbarHeight,
+			isSticky
+		)
+	);
 
 	const popoverRef = useRefEffect( ( popoverNode ) => {
 		setToolbarHeight( popoverNode.offsetHeight );
@@ -98,9 +148,15 @@ export default function useBlockToolbarPopoverProps( {
 	const updateProps = useCallback(
 		() =>
 			setProps(
-				getProps( contentElement, selectedBlockElement, toolbarHeight )
+				getProps(
+					contentElement,
+					selectedBlockElement,
+					scrollContainer,
+					toolbarHeight,
+					isSticky
+				)
 			),
-		[ contentElement, selectedBlockElement, toolbarHeight ]
+		[ contentElement, selectedBlockElement, scrollContainer, toolbarHeight ]
 	);
 
 	// Update props when the block is moved. This also ensures the props are

package/src/components/block-vertical-alignment-control/icons.js

@@ -20,3 +20,15 @@ export const alignTop = (
 		<Path d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z" />
 	</SVG>
 );
+
+export const alignStretch = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4 4L20 4L20 5.5L4 5.5L4 4ZM10 7L14 7L14 17L10 17L10 7ZM20 18.5L4 18.5L4 20L20 20L20 18.5Z" />
+	</SVG>
+);
+
+export const spaceBetween = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M7 4H17V8L7 8V4ZM7 16L17 16V20L7 20V16ZM20 11.25H4V12.75H20V11.25Z" />
+	</SVG>
+);

package/src/components/block-vertical-alignment-control/test/index.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockVerticalAlignmentUI from '../ui';
 
-jest.useFakeTimers();
-
 describe( 'BlockVerticalAlignmentUI', () => {
 	const alignment = 'top';
 	const onChange = jest.fn();
@@ -43,9 +41,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 	} );
 
 	test( 'should expand controls when toggled', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { unmount } = render(
 			<BlockVerticalAlignmentUI
@@ -78,9 +74,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 	} );
 
 	it( 'should call onChange with undefined, when the control is already active', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<BlockVerticalAlignmentUI
@@ -104,9 +98,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 
 	it( 'should call onChange with alignment value when the control is inactive', async () => {
 		// note "middle" alias for "center"
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<BlockVerticalAlignmentUI

package/src/components/block-vertical-alignment-control/ui.js

@@ -7,7 +7,13 @@ import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { alignTop, alignCenter, alignBottom } from './icons';
+import {
+	alignTop,
+	alignCenter,
+	alignBottom,
+	alignStretch,
+	spaceBetween,
+} from './icons';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	top: {
@@ -22,15 +28,19 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 		icon: alignBottom,
 		title: _x( 'Align bottom', 'Block vertical alignment setting' ),
 	},
+	stretch: {
+		icon: alignStretch,
+		title: _x( 'Stretch to fill', 'Block vertical alignment setting' ),
+	},
+	'space-between': {
+		icon: spaceBetween,
+		title: _x( 'Space between', 'Block vertical alignment setting' ),
+	},
 };
 
 const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
 const DEFAULT_CONTROL = 'top';
 
-const POPOVER_PROPS = {
-	variant: 'toolbar',
-};
-
 function BlockVerticalAlignmentUI( {
 	value,
 	onChange,
@@ -49,7 +59,7 @@ function BlockVerticalAlignmentUI( {
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
 	const extraProps = isToolbar
 		? { isCollapsed }
-		: { popoverProps: { POPOVER_PROPS } };
+		: { popoverProps: { variant: 'toolbar' } };
 
 	return (
 		<UIComponent

package/src/components/color-style-selector/index.js

@@ -87,7 +87,7 @@ const BlockColorsStyleSelector = ( { children, ...other } ) => {
 
 	return (
 		<Dropdown
-			position="bottom right"
+			popoverProps={ { placement: 'bottom-start' } }
 			className="block-library-colors-selector"
 			contentClassName="block-library-colors-selector__popover"
 			renderToggle={ renderToggleComponent( other ) }

package/src/components/colors/test/with-colors.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { createCustomColorsHOC } from '../with-colors';
 
-jest.useFakeTimers();
-
 describe( 'createCustomColorsHOC', () => {
 	it( 'provides the wrapped component with color values and setter functions as props', () => {
 		const withCustomColors = createCustomColorsHOC( [
@@ -44,9 +42,7 @@ describe( 'createCustomColorsHOC', () => {
 	} );
 
 	it( 'setting the color to a value in the provided custom color array updated the backgroundColor attribute', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
@@ -76,9 +72,7 @@ describe( 'createCustomColorsHOC', () => {
 	} );
 
 	it( 'setting the color to a value not in the provided custom color array updates customBackgroundColor attribute', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );

package/src/components/date-format-picker/index.js

@@ -9,8 +9,8 @@ import {
 	ExternalLink,
 	VisuallyHidden,
 	CustomSelectControl,
-	BaseControl,
 	ToggleControl,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 // So that we can illustrate the different formats in the dropdown properly,
@@ -110,31 +110,30 @@ function NonDefaultControls( { format, onChange } ) {
 	);
 
 	return (
-		<>
-			<BaseControl className="block-editor-date-format-picker__custom-format-select-control">
-				<CustomSelectControl
-					__nextUnconstrainedWidth
-					label={ __( 'Choose a format' ) }
-					options={ [ ...suggestedOptions, customOption ] }
-					value={
-						isCustom
-							? customOption
-							: suggestedOptions.find(
-									( option ) => option.format === format
-							  ) ?? customOption
+		<VStack>
+			<CustomSelectControl
+				__nextUnconstrainedWidth
+				label={ __( 'Choose a format' ) }
+				options={ [ ...suggestedOptions, customOption ] }
+				value={
+					isCustom
+						? customOption
+						: suggestedOptions.find(
+								( option ) => option.format === format
+						  ) ?? customOption
+				}
+				onChange={ ( { selectedItem } ) => {
+					if ( selectedItem === customOption ) {
+						setIsCustom( true );
+					} else {
+						setIsCustom( false );
+						onChange( selectedItem.format );
 					}
-					onChange={ ( { selectedItem } ) => {
-						if ( selectedItem === customOption ) {
-							setIsCustom( true );
-						} else {
-							setIsCustom( false );
-							onChange( selectedItem.format );
-						}
-					} }
-				/>
-			</BaseControl>
+				} }
+			/>
 			{ isCustom && (
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Custom format' ) }
 					hideLabelFromVision
 					help={ createInterpolateElement(
@@ -155,6 +154,6 @@ function NonDefaultControls( { format, onChange } ) {
 					onChange={ ( value ) => onChange( value ) }
 				/>
 			) }
-		</>
+		</VStack>
 	);
 }

package/src/components/date-format-picker/style.scss

@@ -7,12 +7,6 @@
 	display: block;
 }
 
-.block-editor-date-format-picker__custom-format-select-control {
-	&.components-base-control {
-		margin-bottom: 0;
-	}
-}
-
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
 	border-top: 1px solid $gray-300;
 

package/src/components/default-block-appender/content.scss

@@ -30,6 +30,23 @@
 	.components-drop-zone__content-icon {
 		display: none;
 	}
+
+	.block-editor-inserter__toggle.components-button.has-icon {
+		// Basic look
+		background: $gray-900;
+		border-radius: $radius-block-ui;
+		color: $white;
+		padding: 0;
+
+		// Special dimensions for this button.
+		min-width: $button-size-small;
+		height: $button-size-small;
+
+		&:hover {
+			color: $white;
+			background: var(--wp-admin-theme-color);
+		}
+	}
 }
 
 // The black plus that shows up on the right side of an empty paragraph block, or the initial appender
@@ -78,6 +95,7 @@
 		box-shadow: none;
 		height: $button-size-small;
 		width: $button-size-small;
+		min-width: $button-size-small;
 
 		// Hide by default, then we unhide it when the selected block is a direct ancestor.
 		display: none;

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

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { DefaultBlockAppender, ZWNBSP } from '../';
 
-jest.useFakeTimers();
-
 describe( 'DefaultBlockAppender', () => {
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
@@ -23,9 +21,7 @@ describe( 'DefaultBlockAppender', () => {
 	} );
 
 	it( 'should append a default block when input focused', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onAppend = jest.fn();
 
 		const { container } = render(
@@ -44,9 +40,7 @@ describe( 'DefaultBlockAppender', () => {
 	} );
 
 	it( 'should optionally show without prompt', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onAppend = jest.fn();
 
 		const { container } = render(

package/src/components/default-style-picker/index.js

@@ -58,6 +58,7 @@ export default function DefaultStylePicker( { blockName } ) {
 		onUpdatePreferredStyleVariations && (
 			<div className="default-style-picker__default-switcher">
 				<SelectControl
+					__nextHasNoMarginBottom
 					options={ selectOptions }
 					value={ preferredStyle || '' }
 					label={ __( 'Default Style' ) }

package/src/components/font-family/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -25,7 +20,7 @@ export default function FontFamilyControl( {
 		fontFamilies = blockLevelFontFamilies;
 	}
 
-	if ( isEmpty( fontFamilies ) ) {
+	if ( ! fontFamilies || fontFamilies.length === 0 ) {
 		return null;
 	}