@wordpress/block-editor 11.0.0 → 11.2.0

package/src/components/block-pattern-setup/index.js

@@ -28,6 +28,7 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
+	showTitles,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -67,6 +68,7 @@ const SetupContent = ( {
 						pattern={ pattern }
 						onSelect={ onBlockPatternSelect }
 						composite={ composite }
+						showTitles={ showTitles }
 					/>
 				) ) }
 			</Composite>
@@ -74,7 +76,7 @@ const SetupContent = ( {
 	);
 };
 
-function BlockPattern( { pattern, onSelect, composite } ) {
+function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
 	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
@@ -98,12 +100,17 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 				/>
+				{ showTitles && (
+					<div className={ `${ baseClassName }__item-title` }>
+						{ pattern.title }
+					</div>
+				) }
+				{ !! description && (
+					<VisuallyHidden id={ descriptionId }>
+						{ description }
+					</VisuallyHidden>
+				) }
 			</CompositeItem>
-			{ !! description && (
-				<VisuallyHidden id={ descriptionId }>
-					{ description }
-				</VisuallyHidden>
-			) }
 		</div>
 	);
 }
@@ -139,6 +146,7 @@ const BlockPatternSetup = ( {
 	filterPatternsFn,
 	onBlockPatternSelect,
 	initialViewMode = VIEWMODES.carousel,
+	showTitles = false,
 } ) => {
 	const [ viewMode, setViewMode ] = useState( initialViewMode );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
@@ -165,6 +173,7 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
+					showTitles={ showTitles }
 				/>
 				<SetupToolbar
 					viewMode={ viewMode }

package/src/components/block-pattern-setup/style.scss

@@ -6,8 +6,9 @@
 	width: 100%;
 	border-radius: $radius-block-ui;
 
-	// TODO change to check parent.
 	&.view-mode-grid {
+		padding-top: $grid-unit-05;
+
 		.block-editor-block-pattern-setup__toolbar {
 			justify-content: center;
 		}
@@ -30,10 +31,33 @@
 				cursor: pointer;
 			}
 
+			.block-editor-block-pattern-setup-list__item {
+				&:hover .block-editor-block-preview__container {
+					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+				}
+
+				&:focus .block-editor-block-preview__container {
+					box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+					// Windows High Contrast mode will show this outline, but not the box-shadow.
+					outline: 2px solid transparent;
+				}
+				&:hover .block-editor-block-pattern-setup-list__item-title,
+				&:focus .block-editor-block-pattern-setup-list__item-title {
+					color: var(--wp-admin-theme-color);
+				}
+			}
 			.block-editor-block-pattern-setup-list__list-item {
 				break-inside: avoid-column;
 				margin-bottom: $grid-unit-30;
 
+				.block-editor-block-pattern-setup-list__item-title {
+					padding-top: $grid-unit-10;
+					font-size: 12px;
+					text-align: center;
+					cursor: pointer;
+				}
+
 				.block-editor-block-preview__container {
 					min-height: 100px;
 					border-radius: $radius-block-ui;
@@ -84,6 +108,7 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
+		height: 100%;
 		box-sizing: border-box;
 
 		.carousel-container {
@@ -91,6 +116,7 @@
 			position: relative;
 			padding: 0;
 			margin: 0;
+			height: 100%;
 			list-style: none;
 			transform-style: preserve-3d;
 			* {
@@ -100,6 +126,8 @@
 				position: absolute;
 				top: 0;
 				width: 100%;
+				height: 100%;
+				background-color: $white;
 				margin: auto;
 				padding: 0;
 				transition: transform 0.5s, z-index 0.5s;

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

@@ -33,11 +33,10 @@ function ScaledBlockPreview( {
 
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const { styles, assets, duotone } = useSelect( ( select ) => {
+	const { styles, duotone } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
-			assets: settings.__unstableResolvedAssets,
 			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
@@ -49,7 +48,7 @@ function ScaledBlockPreview( {
 				...styles,
 				...__experimentalStyles,
 				{
-					css: 'body{height:auto;overflow:hidden;}',
+					css: 'body{height:auto;overflow:hidden;border:none;}',
 					__unstableType: 'presets',
 				},
 			];
@@ -79,7 +78,6 @@ function ScaledBlockPreview( {
 		>
 			<Iframe
 				head={ <EditorStyles styles={ editorStyles } /> }
-				assets={ assets }
 				contentRef={ useRefEffect( ( bodyElement ) => {
 					const {
 						ownerDocument: { documentElement },

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -209,6 +209,7 @@ export function BlockSettingsDropdown( {
 				onInsertBefore,
 				onRemove,
 				onCopy,
+				onPasteStyles,
 				onMoveTo,
 				blocks,
 			} ) => (
@@ -262,6 +263,9 @@ export function BlockSettingsDropdown( {
 									blocks={ blocks }
 									onCopy={ onCopy }
 								/>
+								<MenuItem onClick={ onPasteStyles }>
+									{ __( 'Paste styles' ) }
+								</MenuItem>
 								{ canDuplicate && (
 									<MenuItem
 										onClick={ pipe(

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

@@ -14,6 +14,7 @@ import {
 	Popover,
 } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -64,7 +65,9 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		<div className="block-editor-block-styles">
 			<div className="block-editor-block-styles__variants">
 				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.label || style.name;
+					const buttonText = style.isDefault
+						? __( 'Default' )
+						: style.label || style.name;
 
 					return (
 						<Button

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { ScrollView } from 'react-native';
-import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,7 +34,7 @@ function BlockStyles( { clientId, url } ) {
 
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const renderedStyles = find( styles, 'isDefault' )
+	const renderedStyles = styles?.find( ( style ) => style.isDefault )
 		? styles
 		: [
 				{

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

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -23,13 +19,15 @@ export function getActiveStyle( styles, className ) {
 		}
 
 		const potentialStyleName = style.substring( 9 );
-		const activeStyle = find( styles, { name: potentialStyleName } );
+		const activeStyle = styles?.find(
+			( { name } ) => name === potentialStyleName
+		);
 		if ( activeStyle ) {
 			return activeStyle;
 		}
 	}
 
-	return find( styles, 'isDefault' );
+	return getDefaultStyle( styles );
 }
 
 /**
@@ -88,5 +86,5 @@ export function getRenderedStyles( styles ) {
  * @return {Object?}        The default style object, if found.
  */
 export function getDefaultStyle( styles ) {
-	return find( styles, 'isDefault' );
+	return styles?.find( ( style ) => style.isDefault );
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -15,7 +15,8 @@ import { copy } from '@wordpress/icons';
  * Internal dependencies
  */
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
-import { act } from 'react-test-renderer';
+
+jest.useFakeTimers();
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../block-title/use-block-display-title', () =>

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

@@ -11,31 +11,28 @@ import UngroupButton from '../ungroup-button';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockToolbar() {
-	const { blockClientIds, isValid, mode } = useSelect( ( select ) => {
+	const { isSelected, isValidAndVisual } = useSelect( ( select ) => {
 		const { getBlockMode, getSelectedBlockClientIds, isBlockValid } =
 			select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 
 		return {
-			blockClientIds: selectedBlockClientIds,
-			isValid:
+			isSelected: selectedBlockClientIds.length > 0,
+			isValidAndVisual:
 				selectedBlockClientIds.length === 1
-					? isBlockValid( selectedBlockClientIds[ 0 ] )
-					: null,
-			mode:
-				selectedBlockClientIds.length === 1
-					? getBlockMode( selectedBlockClientIds[ 0 ] )
-					: null,
+					? isBlockValid( selectedBlockClientIds[ 0 ] ) &&
+					  getBlockMode( selectedBlockClientIds[ 0 ] ) === 'visual'
+					: false,
 		};
 	}, [] );
 
-	if ( blockClientIds.length === 0 ) {
+	if ( ! isSelected ) {
 		return null;
 	}
 
 	return (
 		<>
-			{ mode === 'visual' && isValid && (
+			{ isValidAndVisual && (
 				<>
 					<UngroupButton />
 					<BlockControls.Slot group="block" />

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -240,8 +239,7 @@ function wrapperSelector( select ) {
 	);
 
 	// Get the clientId of the topmost parent with the capture toolbars setting.
-	const capturingClientId = find(
-		blockParentsClientIds,
+	const capturingClientId = blockParentsClientIds.find(
 		( parentClientId ) =>
 			parentBlockListSettings[ parentClientId ]
 				?.__experimentalCaptureToolbars

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-variation-picker/index.js

@@ -43,7 +43,11 @@ function BlockVariationPicker( {
 					<li key={ variation.name }>
 						<Button
 							variant="secondary"
-							icon={ variation.icon }
+							icon={
+								variation.icon && variation.icon.src
+									? variation.icon.src
+									: variation.icon
+							}
 							iconSize={ 48 }
 							onClick={ () => onSelect( variation ) }
 							className="block-editor-block-variation-picker__variation"

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

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockVerticalAlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'BlockVerticalAlignmentUI', () => {
 	const alignment = 'top';
 	const onChange = jest.fn();

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

@@ -9,6 +9,8 @@ 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( [

package/src/components/colors/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -26,7 +26,9 @@ export const getColorObjectByAttributeValues = (
 	customColor
 ) => {
 	if ( definedColor ) {
-		const colorObj = find( colors, { slug: definedColor } );
+		const colorObj = colors?.find(
+			( color ) => color.slug === definedColor
+		);
 
 		if ( colorObj ) {
 			return colorObj;
@@ -47,7 +49,7 @@ export const getColorObjectByAttributeValues = (
  *                   Returns undefined if no color object matches this requirement.
  */
 export const getColorObjectByColorValue = ( colors, colorValue ) => {
-	return find( colors, { color: colorValue } );
+	return colors?.find( ( color ) => color.color === colorValue );
 };
 
 /**

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

@@ -45,7 +45,6 @@ function ColorGradientControlInner( {
 	gradients,
 	disableCustomColors,
 	disableCustomGradients,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	className,
 	label,
@@ -80,9 +79,6 @@ function ColorGradientControlInner( {
 						: onColorChange
 				}
 				{ ...{ colors, disableCustomColors } }
-				__experimentalHasMultipleOrigins={
-					__experimentalHasMultipleOrigins
-				}
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar
 				}
@@ -103,9 +99,6 @@ function ColorGradientControlInner( {
 						: onGradientChange
 				}
 				{ ...{ gradients, disableCustomGradients } }
-				__experimentalHasMultipleOrigins={
-					__experimentalHasMultipleOrigins
-				}
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar
 				}

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

@@ -111,7 +111,6 @@ export default function ColorGradientSettingsDropdown( {
 	enableAlpha,
 	gradients,
 	settings,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	...props
 } ) {
@@ -140,7 +139,6 @@ export default function ColorGradientSettingsDropdown( {
 					onColorChange: setting.onColorChange,
 					onGradientChange: setting.onGradientChange,
 					showTitle: false,
-					__experimentalHasMultipleOrigins,
 					__experimentalIsRenderedInSidebar,
 					...setting,
 				};

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

@@ -18,9 +18,7 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import ColorGradientSettingsDropdown from './dropdown';
-import useSetting from '../use-setting';
-import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
-import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
+import useColorsAndGradientsPalettes from './use-multiple-origin-colors-and-gradients';
 
 const colorsAndGradientKeys = [
 	'colors',
@@ -39,7 +37,6 @@ export const PanelColorGradientSettingsInner = ( {
 	settings,
 	title,
 	showTitle = true,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	enableAlpha,
 } ) => {
@@ -100,7 +97,6 @@ export const PanelColorGradientSettingsInner = ( {
 					gradients,
 					disableCustomColors,
 					disableCustomGradients,
-					__experimentalHasMultipleOrigins,
 					__experimentalIsRenderedInSidebar,
 					enableAlpha,
 				} }
@@ -114,19 +110,8 @@ export const PanelColorGradientSettingsInner = ( {
 	);
 };
 
-const PanelColorGradientSettingsSingleSelect = ( props ) => {
-	const colorGradientSettings = useCommonSingleMultipleSelects();
-	colorGradientSettings.colors = useSetting( 'color.palette' );
-	colorGradientSettings.gradients = useSetting( 'color.gradients' );
-	return (
-		<PanelColorGradientSettingsInner
-			{ ...{ ...colorGradientSettings, ...props } }
-		/>
-	);
-};
-
-const PanelColorGradientSettingsMultipleSelect = ( props ) => {
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+const PanelColorGradientSettingsSelect = ( props ) => {
+	const colorGradientSettings = useColorsAndGradientsPalettes();
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }
@@ -140,10 +125,7 @@ const PanelColorGradientSettings = ( props ) => {
 	) {
 		return <PanelColorGradientSettingsInner { ...props } />;
 	}
-	if ( props.__experimentalHasMultipleOrigins ) {
-		return <PanelColorGradientSettingsMultipleSelect { ...props } />;
-	}
-	return <PanelColorGradientSettingsSingleSelect { ...props } />;
+	return <PanelColorGradientSettingsSelect { ...props } />;
 };
 
 export default PanelColorGradientSettings;

package/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js

@@ -8,7 +8,6 @@ import { _x } from '@wordpress/i18n';
  * Internal dependencies
  */
 import useSetting from '../use-setting';
-import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
 
 /**
  * Retrieves color and gradient related settings.
@@ -19,7 +18,10 @@ import useCommonSingleMultipleSelects from './use-common-single-multiple-selects
  * @return {Object} Color and gradient related settings.
  */
 export default function useMultipleOriginColorsAndGradients() {
-	const colorGradientSettings = useCommonSingleMultipleSelects();
+	const colorGradientSettings = {
+		disableCustomColors: ! useSetting( 'color.custom' ),
+		disableCustomGradients: ! useSetting( 'color.customGradient' ),
+	};
 	const customColors = useSetting( 'color.palette.custom' );
 	const themeColors = useSetting( 'color.palette.theme' );
 	const defaultColors = useSetting( 'color.palette.default' );