@wordpress/block-editor 9.3.0 → 9.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.3.0",
+	"version": "9.4.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.11.0",
-		"@wordpress/api-fetch": "^6.8.0",
-		"@wordpress/blob": "^3.11.0",
-		"@wordpress/blocks": "^11.10.0",
-		"@wordpress/components": "^19.13.0",
-		"@wordpress/compose": "^5.9.0",
-		"@wordpress/data": "^6.11.0",
-		"@wordpress/date": "^4.11.0",
-		"@wordpress/deprecated": "^3.11.0",
-		"@wordpress/dom": "^3.11.0",
-		"@wordpress/element": "^4.9.0",
-		"@wordpress/hooks": "^3.11.0",
-		"@wordpress/html-entities": "^3.11.0",
-		"@wordpress/i18n": "^4.11.0",
-		"@wordpress/icons": "^9.2.0",
-		"@wordpress/is-shallow-equal": "^4.11.0",
-		"@wordpress/keyboard-shortcuts": "^3.9.0",
-		"@wordpress/keycodes": "^3.11.0",
-		"@wordpress/notices": "^3.11.0",
-		"@wordpress/rich-text": "^5.9.0",
-		"@wordpress/shortcode": "^3.11.0",
-		"@wordpress/style-engine": "^0.10.0",
-		"@wordpress/token-list": "^2.11.0",
-		"@wordpress/url": "^3.12.0",
-		"@wordpress/warning": "^2.11.0",
-		"@wordpress/wordcount": "^3.11.0",
+		"@wordpress/a11y": "^3.12.0",
+		"@wordpress/api-fetch": "^6.9.0",
+		"@wordpress/blob": "^3.12.0",
+		"@wordpress/blocks": "^11.11.0",
+		"@wordpress/components": "^19.14.0",
+		"@wordpress/compose": "^5.10.0",
+		"@wordpress/data": "^6.12.0",
+		"@wordpress/date": "^4.12.0",
+		"@wordpress/deprecated": "^3.12.0",
+		"@wordpress/dom": "^3.12.0",
+		"@wordpress/element": "^4.10.0",
+		"@wordpress/hooks": "^3.12.0",
+		"@wordpress/html-entities": "^3.12.0",
+		"@wordpress/i18n": "^4.12.0",
+		"@wordpress/icons": "^9.3.0",
+		"@wordpress/is-shallow-equal": "^4.12.0",
+		"@wordpress/keyboard-shortcuts": "^3.10.0",
+		"@wordpress/keycodes": "^3.12.0",
+		"@wordpress/notices": "^3.12.0",
+		"@wordpress/rich-text": "^5.10.0",
+		"@wordpress/shortcode": "^3.12.0",
+		"@wordpress/style-engine": "^0.11.0",
+		"@wordpress/token-list": "^2.12.0",
+		"@wordpress/url": "^3.13.0",
+		"@wordpress/warning": "^2.12.0",
+		"@wordpress/wordcount": "^3.12.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
 }

package/src/components/block-draggable/test/helpers.native.js

@@ -7,7 +7,7 @@ import {
 	initializeEditor,
 	waitForStoreResolvers,
 	within,
-	advanceAnimationByFrame,
+	advanceAnimationByFrames,
 } from 'test/helpers';
 import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
 import { State } from 'react-native-gesture-handler';
@@ -135,7 +135,7 @@ export const fireLongPress = (
 	}
 	// Advance timers one frame to ensure that shared values
 	// are updated and trigger animation reactions.
-	act( () => advanceAnimationByFrame( 1 ) );
+	act( () => advanceAnimationByFrames( 1 ) );
 };
 
 /**
@@ -162,7 +162,7 @@ export const firePanGesture = (
 	] );
 	// Advance timers one frame to ensure that shared values
 	// are updated and trigger animation reactions.
-	act( () => advanceAnimationByFrame( 1 ) );
+	act( () => advanceAnimationByFrames( 1 ) );
 };
 
 /**

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

@@ -293,7 +293,7 @@
 
 // Spotlight mode. Fade out blocks unless they contain a selected block.
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-	opacity: 0.5;
+	opacity: 0.2;
 	transition: opacity 0.1s linear;
 	@include reduce-motion("transition");
 

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

@@ -145,19 +145,17 @@ const BlockPatternSetup = ( {
 	clientId,
 	blockName,
 	filterPatternsFn,
-	startBlankComponent = null,
 	onBlockPatternSelect,
 } ) => {
 	const [ viewMode, setViewMode ] = useState( VIEWMODES.carousel );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
-	const [ showBlank, setShowBlank ] = useState( false );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
 
-	if ( ! patterns?.length || showBlank ) {
-		return startBlankComponent;
+	if ( ! patterns?.length ) {
+		return null;
 	}
 
 	const onBlockPatternSelectDefault = ( blocks ) => {
@@ -166,11 +164,6 @@ const BlockPatternSetup = ( {
 	};
 	const onPatternSelectCallback =
 		onBlockPatternSelect || onBlockPatternSelectDefault;
-	const onStartBlank = startBlankComponent
-		? () => {
-				setShowBlank( true );
-		  }
-		: undefined;
 	return (
 		<>
 			{ contentResizeListener }
@@ -200,7 +193,6 @@ const BlockPatternSetup = ( {
 							patterns[ activeSlide ].blocks
 						);
 					} }
-					onStartBlank={ onStartBlank }
 				/>
 			</div>
 		</>

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

@@ -15,11 +15,8 @@ import {
  */
 import { VIEWMODES } from './constants';
 
-const Actions = ( { onStartBlank, onBlockPatternSelect } ) => (
+const Actions = ( { onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
-		{ onStartBlank && (
-			<Button onClick={ onStartBlank }>{ __( 'Start blank' ) }</Button>
-		) }
 		<Button variant="primary" onClick={ onBlockPatternSelect }>
 			{ __( 'Choose' ) }
 		</Button>
@@ -56,7 +53,6 @@ const SetupToolbar = ( {
 	activeSlide,
 	totalSlides,
 	onBlockPatternSelect,
-	onStartBlank,
 } ) => {
 	const isCarouselView = viewMode === VIEWMODES.carousel;
 	const displayControls = (
@@ -87,10 +83,7 @@ const SetupToolbar = ( {
 			) }
 			{ displayControls }
 			{ isCarouselView && (
-				<Actions
-					onBlockPatternSelect={ onBlockPatternSelect }
-					onStartBlank={ onStartBlank }
-				/>
+				<Actions onBlockPatternSelect={ onBlockPatternSelect } />
 			) }
 		</div>
 	);

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

@@ -12,6 +12,7 @@ import { useMemo } from '@wordpress/element';
 import BlockList from '../block-list';
 import Iframe from '../iframe';
 import EditorStyles from '../editor-styles';
+import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '../../components/duotone';
 import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
@@ -28,11 +29,12 @@ function AutoBlockPreview( {
 		useResizeObserver();
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const { styles, assets } = useSelect( ( select ) => {
+	const { styles, assets, duotone } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
 			assets: settings.__unstableResolvedAssets,
+			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
 
@@ -51,11 +53,14 @@ function AutoBlockPreview( {
 		return styles;
 	}, [ styles ] );
 
+	const svgFilters = useMemo( () => {
+		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
+	}, [ duotone ] );
+
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
 	const scale = containerWidth / viewportWidth;
-
 	return (
 		<div className="block-editor-block-preview__container">
 			{ containerResizeListener }
@@ -100,12 +105,21 @@ function AutoBlockPreview( {
 						// See: https://github.com/WordPress/gutenberg/pull/38175.
 						maxHeight: MAX_HEIGHT,
 						minHeight:
-							scale < 1 && __experimentalMinHeight
+							scale !== 0 && scale < 1 && __experimentalMinHeight
 								? __experimentalMinHeight / scale
 								: __experimentalMinHeight,
 					} }
 				>
 					{ contentResizeListener }
+					{
+						/* Filters need to be rendered before children to avoid Safari rendering issues. */
+						svgFilters.map( ( preset ) => (
+							<PresetDuotoneFilter
+								preset={ preset }
+								key={ preset.slug }
+							/>
+						) )
+					}
 					<MemoizedBlockList renderAppender={ false } />
 				</Iframe>
 			</Disabled>

package/src/components/block-settings-menu/block-edit-visually-button.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { rawHandler, getBlockContent } from '@wordpress/blocks';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockEditVisuallyButton( { clientIds, ...props } ) {
+	const { block, shouldRender } = useSelect(
+		( select ) => {
+			const firstBlockClientId = clientIds[ 0 ];
+			const { isBlockMultiSelected, getBlockMode, getBlock } =
+				select( blockEditorStore );
+			const isSingleSelected =
+				! isBlockMultiSelected( firstBlockClientId );
+			const isHtmlMode = getBlockMode( firstBlockClientId ) === 'html';
+
+			return {
+				block: getBlock( firstBlockClientId ),
+				shouldRender: isSingleSelected && isHtmlMode,
+			};
+		},
+		[ clientIds[ 0 ] ]
+	);
+
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const onClick = useCallback( () => {
+		replaceBlocks(
+			block.clientId,
+			rawHandler( { HTML: getBlockContent( block ) } )
+		);
+	}, [ block ] );
+
+	if ( ! shouldRender ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton onClick={ onClick } { ...props }>
+				{ __( 'Edit visually' ) }
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}

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

@@ -16,7 +16,7 @@ import {
 	useCallback,
 	useRef,
 } from '@wordpress/element';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -42,7 +42,8 @@ const POPOVER_PROPS = {
 
 function CopyMenuItem( { blocks, onCopy } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
-	const copyMenuItemLabel = _n( 'Copy block', 'Copy blocks', blocks.length );
+	const copyMenuItemLabel =
+		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 

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

@@ -7,20 +7,24 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
+import BlockEditVisuallyButton from './block-edit-visually-button';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
-		<ToolbarGroup>
-			<ToolbarItem>
-				{ ( toggleProps ) => (
-					<BlockSettingsDropdown
-						clientIds={ clientIds }
-						toggleProps={ toggleProps }
-						{ ...props }
-					/>
-				) }
-			</ToolbarItem>
-		</ToolbarGroup>
+		<>
+			<BlockEditVisuallyButton clientIds={ clientIds } { ...props } />
+			<ToolbarGroup>
+				<ToolbarItem>
+					{ ( toggleProps ) => (
+						<BlockSettingsDropdown
+							clientIds={ clientIds }
+							toggleProps={ toggleProps }
+							{ ...props }
+						/>
+					) }
+				</ToolbarItem>
+			</ToolbarGroup>
+		</>
 	);
 }
 

package/src/components/block-settings-menu-controls/index.js

@@ -20,7 +20,7 @@ import {
 	useConvertToGroupButtonProps,
 	ConvertToGroupButton,
 } from '../convert-to-group-buttons';
-import { BlockLockMenuItem } from '../block-lock';
+import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
@@ -47,7 +47,8 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 		[ clientIds ]
 	);
 
-	const showLockButton = selectedClientIds.length === 1;
+	const { canLock } = useBlockLock( selectedClientIds[ 0 ] );
+	const showLockButton = selectedClientIds.length === 1 && canLock;
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { truncate } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -78,8 +73,15 @@ export default function useBlockDisplayTitle( clientId, maximumLength ) {
 	const blockTitle =
 		label && label !== blockType.title ? label : blockInformation.title;
 
-	if ( maximumLength && maximumLength > 0 ) {
-		return truncate( blockTitle, { length: maximumLength } );
+	if (
+		maximumLength &&
+		maximumLength > 0 &&
+		blockTitle.length > maximumLength
+	) {
+		const omission = '...';
+		return (
+			blockTitle.slice( 0, maximumLength - omission.length ) + omission
+		);
 	}
 
 	return blockTitle;

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

@@ -114,6 +114,7 @@ export default function ColorGradientSettingsDropdown( {
 		popoverProps = {
 			placement: 'left-start',
 			offset: 36,
+			__unstableShift: true,
 		};
 	}
 

package/src/components/duotone/components.js

@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableGetValuesFromColors as getValuesFromColors } from './index';
+
+/**
+ * SVG and stylesheet needed for rendering the duotone filter.
+ *
+ * @param {Object}   props          Duotone props.
+ * @param {string}   props.selector Selector to apply the filter to.
+ * @param {string}   props.id       Unique id for this duotone filter.
+ *
+ * @return {WPElement} Duotone element.
+ */
+export function DuotoneStylesheet( { selector, id } ) {
+	const css = `
+${ selector } {
+	filter: url( #${ id } );
+}
+`;
+	return <style>{ css }</style>;
+}
+
+/**
+ * Stylesheet for disabling a global styles duotone filter.
+ *
+ * @param {Object}   props          Duotone props.
+ * @param {string}   props.selector Selector to disable the filter for.
+ *
+ * @return {WPElement} Filter none style element.
+ */
+export function DuotoneUnsetStylesheet( { selector } ) {
+	const css = `
+${ selector } {
+	filter: none;
+}
+`;
+	return <style>{ css }</style>;
+}
+
+/**
+ * The SVG part of the duotone filter.
+ *
+ * @param {Object}   props        Duotone props.
+ * @param {string}   props.id     Unique id for this duotone filter.
+ * @param {string[]} props.colors Color strings from dark to light.
+ *
+ * @return {WPElement} Duotone SVG.
+ */
+export function DuotoneFilter( { id, colors } ) {
+	const values = getValuesFromColors( colors );
+	return (
+		<SVG
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+			viewBox="0 0 0 0"
+			width="0"
+			height="0"
+			focusable="false"
+			role="none"
+			style={ {
+				visibility: 'hidden',
+				position: 'absolute',
+				left: '-9999px',
+				overflow: 'hidden',
+			} }
+		>
+			<defs>
+				<filter id={ id }>
+					<feColorMatrix
+						// Use sRGB instead of linearRGB so transparency looks correct.
+						colorInterpolationFilters="sRGB"
+						type="matrix"
+						// Use perceptual brightness to convert to grayscale.
+						values="
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+						"
+					/>
+					<feComponentTransfer
+						// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
+						colorInterpolationFilters="sRGB"
+					>
+						<feFuncR
+							type="table"
+							tableValues={ values.r.join( ' ' ) }
+						/>
+						<feFuncG
+							type="table"
+							tableValues={ values.g.join( ' ' ) }
+						/>
+						<feFuncB
+							type="table"
+							tableValues={ values.b.join( ' ' ) }
+						/>
+						<feFuncA
+							type="table"
+							tableValues={ values.a.join( ' ' ) }
+						/>
+					</feComponentTransfer>
+					<feComposite
+						// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
+						in2="SourceGraphic"
+						operator="in"
+					/>
+				</filter>
+			</defs>
+		</SVG>
+	);
+}
+
+/**
+ * SVG from a duotone preset
+ *
+ * @param {Object} props        Duotone props.
+ * @param {Object} props.preset Duotone preset settings.
+ *
+ * @return {WPElement} Duotone element.
+ */
+export function PresetDuotoneFilter( { preset } ) {
+	return (
+		<DuotoneFilter
+			id={ `wp-duotone-${ preset.slug }` }
+			colors={ preset.colors }
+		/>
+	);
+}

package/src/components/duotone/index.js

@@ -0,0 +1,7 @@
+export { getValuesFromColors as __unstableGetValuesFromColors } from './utils';
+export {
+	DuotoneFilter as __unstableDuotoneFilter,
+	PresetDuotoneFilter as __unstablePresetDuotoneFilter,
+	DuotoneStylesheet as __unstableDuotoneStylesheet,
+	DuotoneUnsetStylesheet as __unstableDuotoneUnsetStylesheet,
+} from './components';

package/src/components/duotone/utils.js

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { colord } from 'colord';
+
+/**
+ * Convert a list of colors to an object of R, G, and B values.
+ *
+ * @param {string[]} colors Array of RBG color strings.
+ *
+ * @return {Object} R, G, and B values.
+ */
+export function getValuesFromColors( colors = [] ) {
+	const values = { r: [], g: [], b: [], a: [] };
+
+	colors.forEach( ( color ) => {
+		const rgbColor = colord( color ).toRgb();
+		values.r.push( rgbColor.r / 255 );
+		values.g.push( rgbColor.g / 255 );
+		values.b.push( rgbColor.b / 255 );
+		values.a.push( rgbColor.a );
+	} );
+
+	return values;
+}

package/src/components/duotone-control/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	ColorIndicator,
 	Dropdown,
 	DuotonePicker,
 	DuotoneSwatch,
@@ -20,6 +21,16 @@ function DuotoneControl( {
 	value,
 	onChange,
 } ) {
+	let toolbarIcon;
+	if ( value === 'unset' ) {
+		toolbarIcon = (
+			<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
+		);
+	} else if ( value ) {
+		toolbarIcon = <DuotoneSwatch values={ value } />;
+	} else {
+		toolbarIcon = <Icon icon={ filter } />;
+	}
 	return (
 		<Dropdown
 			popoverProps={ {
@@ -42,13 +53,7 @@ function DuotoneControl( {
 						aria-expanded={ isOpen }
 						onKeyDown={ openOnArrowDown }
 						label={ __( 'Apply duotone filter' ) }
-						icon={
-							value ? (
-								<DuotoneSwatch values={ value } />
-							) : (
-								<Icon icon={ filter } />
-							)
-						}
+						icon={ toolbarIcon }
 					/>
 				);
 			} }

package/src/components/duotone-control/style.scss

@@ -34,3 +34,8 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 	margin: $grid-unit-20 0;
 	font-size: $helptext-font-size;
 }
+
+.block-editor-duotone-control__unset-indicator {
+	// Show a diagonal line (crossed out) for empty swatches.
+	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+}

package/src/components/index.js

@@ -5,6 +5,7 @@
 export * from './colors';
 export * from './gradients';
 export * from './font-sizes';
+export * from './duotone';
 export { AlignmentControl, AlignmentToolbar } from './alignment-control';
 export { default as Autocomplete } from './autocomplete';
 export {

package/src/components/inserter/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { size } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -233,10 +232,9 @@ export default compose( [
 		const settings = getSettings();
 
 		const hasSingleBlockType =
-			size( allowedBlocks ) === 1 &&
-			size(
-				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
-			) === 0;
+			allowedBlocks?.length === 1 &&
+			getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
+				?.length === 0;
 
 		let allowedBlockType = false;
 		if ( hasSingleBlockType ) {

package/src/components/link-control/test/fixtures/index.js

@@ -1,7 +1,6 @@
-/**
- * External dependencies
- */
-import { uniqueId } from 'lodash';
+let uniqueIdCounter = 1;
+
+export const uniqueId = () => uniqueIdCounter++;
 
 export const fauxEntitySuggestions = [
 	{