@wordpress/block-editor 12.2.0 → 12.3.1

package/src/components/spacing-sizes-control/test/utils.js

@@ -2,15 +2,22 @@
  * Internal dependencies
  */
 import {
-	isValueSpacingPreset,
+	ALL_SIDES,
+	getAllRawValue,
 	getCustomValueFromPreset,
+	getInitialView,
 	getPresetValueFromCustomValue,
+	getSliderValueFromPreset,
 	getSpacingPresetCssVar,
 	getSpacingPresetSlug,
-	getSliderValueFromPreset,
-	getAllRawValue,
-	isValuesMixed,
+	getSupportedMenuItems,
+	hasAxisSupport,
+	hasBalancedSidesSupport,
 	isValuesDefined,
+	isValuesMixed,
+	isValueSpacingPreset,
+	LABELS,
+	VIEWS,
 } from '../utils';
 
 describe( 'isValueSpacingPreset', () => {
@@ -180,3 +187,225 @@ describe( 'isValuesDefined', () => {
 		expect( isValuesDefined( definedValues ) ).toBe( true );
 	} );
 } );
+
+describe( 'hasAxisSupport', () => {
+	it( 'should return true for horizontal support if it is in sides', () => {
+		expect( hasAxisSupport( [ 'horizontal' ], 'horizontal' ) ).toBe( true );
+	} );
+	it( 'should return true for horizontal support if both left and right are in sides', () => {
+		expect( hasAxisSupport( [ 'left', 'right' ], 'horizontal' ) ).toBe(
+			true
+		);
+	} );
+	it( 'should return false for horizontal when not supported', () => {
+		expect( hasAxisSupport( [ 'left' ], 'horizontal' ) ).toBe( false );
+	} );
+	it( 'should return true for vertical support if it is in sides', () => {
+		expect( hasAxisSupport( [ 'vertical' ], 'vertical' ) ).toBe( true );
+	} );
+	it( 'should return true for vertical support if both top and bottom are in sides', () => {
+		expect( hasAxisSupport( [ 'top', 'bottom' ], 'vertical' ) ).toBe(
+			true
+		);
+	} );
+	it( 'should return false for vertical when not supported', () => {
+		expect( hasAxisSupport( [ 'top' ], 'vertical' ) ).toBe( false );
+	} );
+	it( 'should return true when either horizontal or vertical axes are supported and no axis supplied', () => {
+		expect( hasAxisSupport( [ 'horizontal' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'vertical' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'left', 'right' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'top', 'bottom' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'top', 'left' ] ) ).toBe( false );
+	} );
+} );
+
+describe( 'getSupportedMenuItems', () => {
+	it( 'returns no items when sides are not configured', () => {
+		expect( getSupportedMenuItems( [] ) ).toEqual( {} );
+		expect( getSupportedMenuItems() ).toEqual( {} );
+	} );
+
+	const sideConfigs = [
+		[ LABELS.axial, [ 'horizontal', 'vertical' ] ],
+		[ LABELS.axial, [ 'top', 'right', 'bottom', 'left' ] ],
+		[ LABELS.horizontal, [ 'horizontal' ] ],
+		[ LABELS.horizontal, [ 'left', 'right' ] ],
+		[ LABELS.vertical, [ 'vertical' ] ],
+		[ LABELS.vertical, [ 'top', 'bottom' ] ],
+		[ LABELS.horizontal, [ 'horizontal' ] ],
+	];
+
+	test.each( sideConfigs )(
+		'should include %s axial menu with %s sides',
+		( label, sides ) => {
+			expect( getSupportedMenuItems( sides ) ).toHaveProperty(
+				'axial.label',
+				label
+			);
+		}
+	);
+
+	it( 'returns no axial item when not not supported', () => {
+		expect( getSupportedMenuItems( [ 'left', 'top' ] ) ).not.toHaveProperty(
+			'axial'
+		);
+	} );
+
+	it( 'should include the correct individual side options', () => {
+		expect( getSupportedMenuItems( [ 'top' ] ) ).toHaveProperty(
+			'top.label',
+			LABELS.top
+		);
+		expect( getSupportedMenuItems( [ 'right' ] ) ).toHaveProperty(
+			'right.label',
+			LABELS.right
+		);
+		expect( getSupportedMenuItems( [ 'bottom' ] ) ).toHaveProperty(
+			'bottom.label',
+			LABELS.bottom
+		);
+		expect( getSupportedMenuItems( [ 'left' ] ) ).toHaveProperty(
+			'left.label',
+			LABELS.left
+		);
+	} );
+	it( 'should include the custom option only when applicable', () => {
+		expect( getSupportedMenuItems( [ 'top', 'left' ] ) ).toHaveProperty(
+			'custom.label',
+			LABELS.custom
+		);
+		expect( getSupportedMenuItems( [ 'top' ] ) ).not.toHaveProperty(
+			'custom'
+		);
+		expect(
+			getSupportedMenuItems( [ 'horizontal', 'vertical' ] )
+		).not.toHaveProperty( 'custom.label' );
+	} );
+} );
+
+describe( 'hasBalancedSidesSupport', () => {
+	it( 'should determine balanced sides', () => {
+		expect( hasBalancedSidesSupport( ALL_SIDES ) ).toBe( true );
+		expect( hasBalancedSidesSupport( [ 'top', 'bottom' ] ) ).toBe( true );
+		expect( hasBalancedSidesSupport( [ 'left', 'right' ] ) ).toBe( true );
+		expect( hasBalancedSidesSupport() ).toBe( true );
+	} );
+	it( 'should determine unbalanced sides', () => {
+		expect( hasBalancedSidesSupport( [ 'top' ] ) ).toBe( false );
+		expect( hasBalancedSidesSupport( [ 'left' ] ) ).toBe( false );
+		expect( hasBalancedSidesSupport( [ 'top', 'right' ] ) ).toBe( false );
+	} );
+} );
+
+describe( 'getInitialView', () => {
+	describe( 'Axial view (Horizontal & vertical, Horizontal, or Vertical)', () => {
+		it( 'should return axial view when no values defined with balanced sides config', () => {
+			expect( getInitialView( {}, ALL_SIDES ) ).toBe( VIEWS.axial );
+			expect( getInitialView( undefined, ALL_SIDES ) ).toBe(
+				VIEWS.axial
+			);
+		} );
+		it( 'should return axial view when horizontal & vertical axes are supported and have axial values', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', right: '2em', bottom: '1em', left: '2em' },
+					ALL_SIDES
+				)
+			).toBe( VIEWS.axial );
+		} );
+		it( 'should return axial view when horizontal axis is supported, horizontal values set and no vertical supported or values', () => {
+			expect(
+				getInitialView( { left: '1em', right: '1em' }, ALL_SIDES )
+			).toBe( VIEWS.axial );
+		} );
+		it( 'should return axial view when vertical axis is supported and vertical values are set without horizontal values', () => {
+			expect(
+				getInitialView( { top: '1em', bottom: '1em' }, ALL_SIDES )
+			).toBe( VIEWS.axial );
+		} );
+		it( 'should not return axial view when axial values do not match', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', bottom: '1.5em', left: '1em', right: '1em' },
+					ALL_SIDES
+				)
+			).not.toBe( VIEWS.axial );
+		} );
+	} );
+
+	describe( 'Custom sides view', () => {
+		it( 'should return custom view when no values and unbalanced sides config with > 1 side', () => {
+			expect( getInitialView( {}, [ 'top', 'left' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect(
+				getInitialView( undefined, [ 'right', 'bottom', 'left' ] )
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should return custom sides view when all values match and unbalanced sides config', () => {
+			expect(
+				getInitialView( { top: '1em', right: '1em', bottom: '1em' }, [
+					'top',
+					'right',
+					'bottom',
+				] )
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should return custom view if there is more than one side with differing values', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', bottom: '1.5em', left: '1em', right: '1em' },
+					ALL_SIDES
+				)
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should return custom view if mixed partial subset of values is provided', () => {
+			expect(
+				getInitialView( { top: '1em', right: '10px' }, ALL_SIDES )
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should not return custom view if there is only a single side value', () => {
+			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).not.toBe(
+				VIEWS.custom
+			);
+		} );
+	} );
+
+	describe( 'Single side view', () => {
+		it( 'should return single side when only single side supported', () => {
+			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
+				VIEWS.top
+			);
+		} );
+
+		it( 'should return the single side view if there is only a single side value set and supported sides > 1', () => {
+			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).toBe(
+				VIEWS.top
+			);
+			expect( getInitialView( { right: '1em' }, ALL_SIDES ) ).toBe(
+				VIEWS.right
+			);
+			expect( getInitialView( { bottom: '1em' }, ALL_SIDES ) ).toBe(
+				VIEWS.bottom
+			);
+			expect( getInitialView( { left: '1em' }, ALL_SIDES ) ).toBe(
+				VIEWS.left
+			);
+		} );
+		it( 'should return single side view when only one side is supported', () => {
+			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
+				VIEWS.top
+			);
+			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
+				VIEWS.right
+			);
+			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
+				VIEWS.bottom
+			);
+			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
+				VIEWS.left
+			);
+		} );
+	} );
+} );

package/src/components/spacing-sizes-control/utils.js

@@ -2,6 +2,58 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	sidesAll,
+	sidesAxial,
+	sidesBottom,
+	sidesHorizontal,
+	sidesLeft,
+	sidesRight,
+	sidesTop,
+	sidesVertical,
+} from '@wordpress/icons';
+
+export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+
+export const DEFAULT_VALUES = {
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+
+export const ICONS = {
+	custom: sidesAll,
+	axial: sidesAxial,
+	horizontal: sidesHorizontal,
+	vertical: sidesVertical,
+	top: sidesTop,
+	right: sidesRight,
+	bottom: sidesBottom,
+	left: sidesLeft,
+};
+
+export const LABELS = {
+	default: __( 'Spacing control' ),
+	top: __( 'Top' ),
+	bottom: __( 'Bottom' ),
+	left: __( 'Left' ),
+	right: __( 'Right' ),
+	mixed: __( 'Mixed' ),
+	vertical: __( 'Vertical' ),
+	horizontal: __( 'Horizontal' ),
+	axial: __( 'Horizontal & vertical' ),
+	custom: __( 'Custom' ),
+};
+
+export const VIEWS = {
+	axial: 'axial',
+	top: 'top',
+	right: 'right',
+	bottom: 'bottom',
+	left: 'left',
+	custom: 'custom',
+};
 
 /**
  * Checks is given value is a spacing preset.
@@ -131,26 +183,6 @@ export function getSliderValueFromPreset( presetValue, spacingSizes ) {
 	return sliderValue !== -1 ? sliderValue : NaN;
 }
 
-export const LABELS = {
-	all: __( 'All sides' ),
-	top: __( 'Top' ),
-	bottom: __( 'Bottom' ),
-	left: __( 'Left' ),
-	right: __( 'Right' ),
-	mixed: __( 'Mixed' ),
-	vertical: __( 'Vertical' ),
-	horizontal: __( 'Horizontal' ),
-};
-
-export const DEFAULT_VALUES = {
-	top: undefined,
-	right: undefined,
-	bottom: undefined,
-	left: undefined,
-};
-
-export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
-
 /**
  * Gets an items with the most occurrence within an array
  * https://stackoverflow.com/a/20762713
@@ -208,3 +240,154 @@ export function isValuesDefined( values ) {
 	}
 	return Object.values( values ).filter( ( value ) => !! value ).length > 0;
 }
+
+/**
+ * Determines whether a particular axis has support. If no axis is
+ * specified, this function checks if either axis is supported.
+ *
+ * @param {Array}  sides Supported sides.
+ * @param {string} axis  Which axis to check.
+ *
+ * @return {boolean} Whether there is support for the specified axis or both axes.
+ */
+export function hasAxisSupport( sides, axis ) {
+	if ( ! sides || ! sides.length ) {
+		return false;
+	}
+
+	const hasHorizontalSupport =
+		sides.includes( 'horizontal' ) ||
+		( sides.includes( 'left' ) && sides.includes( 'right' ) );
+
+	const hasVerticalSupport =
+		sides.includes( 'vertical' ) ||
+		( sides.includes( 'top' ) && sides.includes( 'bottom' ) );
+
+	if ( axis === 'horizontal' ) {
+		return hasHorizontalSupport;
+	}
+
+	if ( axis === 'vertical' ) {
+		return hasVerticalSupport;
+	}
+
+	return hasHorizontalSupport || hasVerticalSupport;
+}
+
+/**
+ * Determines which menu options should be included in the SidePicker.
+ *
+ * @param {Array} sides Supported sides.
+ *
+ * @return {Object} Menu options with each option containing label & icon.
+ */
+export function getSupportedMenuItems( sides ) {
+	if ( ! sides || ! sides.length ) {
+		return {};
+	}
+
+	const menuItems = {};
+
+	// Determine the primary "side" menu options.
+	const hasHorizontalSupport = hasAxisSupport( sides, 'horizontal' );
+	const hasVerticalSupport = hasAxisSupport( sides, 'vertical' );
+
+	if ( hasHorizontalSupport && hasVerticalSupport ) {
+		menuItems.axial = { label: LABELS.axial, icon: ICONS.axial };
+	} else if ( hasHorizontalSupport ) {
+		menuItems.axial = { label: LABELS.horizontal, icon: ICONS.horizontal };
+	} else if ( hasVerticalSupport ) {
+		menuItems.axial = { label: LABELS.vertical, icon: ICONS.vertical };
+	}
+
+	// Track whether we have any individual sides so we can omit the custom
+	// option if required.
+	let numberOfIndividualSides = 0;
+
+	ALL_SIDES.forEach( ( side ) => {
+		if ( sides.includes( side ) ) {
+			numberOfIndividualSides += 1;
+			menuItems[ side ] = {
+				label: LABELS[ side ],
+				icon: ICONS[ side ],
+			};
+		}
+	} );
+
+	// Add custom item if there are enough sides to warrant a separated view.
+	if ( numberOfIndividualSides > 1 ) {
+		menuItems.custom = { label: LABELS.custom, icon: ICONS.custom };
+	}
+
+	return menuItems;
+}
+
+/**
+ * Checks if the supported sides are balanced for each axis.
+ * - Horizontal - both left and right sides are supported.
+ * - Vertical - both top and bottom are supported.
+ *
+ * @param {Array} sides The supported sides which may be axes as well.
+ *
+ * @return {boolean} Whether or not the supported sides are balanced.
+ */
+export function hasBalancedSidesSupport( sides = [] ) {
+	const counts = { top: 0, right: 0, bottom: 0, left: 0 };
+	sides.forEach( ( side ) => ( counts[ side ] += 1 ) );
+
+	return (
+		( counts.top + counts.bottom ) % 2 === 0 &&
+		( counts.left + counts.right ) % 2 === 0
+	);
+}
+
+/**
+ * Determines which view the SpacingSizesControl should default to on its
+ * first render; Axial, Custom, or Single side.
+ *
+ * @param {Object} values Current side values.
+ * @param {Array}  sides  Supported sides.
+ *
+ * @return {string} View to display.
+ */
+export function getInitialView( values = {}, sides ) {
+	const { top, right, bottom, left } = values;
+	const sideValues = [ top, right, bottom, left ].filter( Boolean );
+
+	// Axial ( Horizontal & vertical ).
+	// - Has axial side support
+	// - Has axial side values which match
+	// - Has no values and the supported sides are balanced
+	const hasMatchingAxialValues =
+		top === bottom && left === right && ( !! top || !! left );
+	const hasNoValuesAndBalancedSides =
+		! sideValues.length && hasBalancedSidesSupport( sides );
+
+	if (
+		hasAxisSupport( sides ) &&
+		( hasMatchingAxialValues || hasNoValuesAndBalancedSides )
+	) {
+		return VIEWS.axial;
+	}
+
+	// Single side.
+	// - Ensure the side returned is the first side that has a value.
+	if ( sideValues.length === 1 ) {
+		let side;
+
+		Object.entries( values ).some( ( [ key, value ] ) => {
+			side = key;
+			return value !== undefined;
+		} );
+
+		return side;
+	}
+
+	// Only single side supported and no value defined.
+	if ( sides?.length === 1 && ! sideValues.length ) {
+		return sides[ 0 ];
+	}
+
+	// Default to the Custom (separated sides) view.
+	return VIEWS.custom;
+}

package/src/components/ungroup-button/index.native.js

@@ -6,11 +6,11 @@ import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { ungroup } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import UngroupIcon from './icon';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
@@ -24,7 +24,7 @@ export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 		<ToolbarGroup>
 			<ToolbarButton
 				title={ __( 'Ungroup' ) }
-				icon={ UngroupIcon }
+				icon={ ungroup }
 				onClick={ onConvertFromGroup }
 			/>
 		</ToolbarGroup>

package/src/components/url-popover/image-url-input-ui.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useState, useCallback } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 import {
 	ToolbarButton,
 	Button,
@@ -50,16 +50,16 @@ const ImageURLInputUI = ( {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	const openLinkUI = useCallback( () => {
+	const openLinkUI = () => {
 		setIsOpen( true );
-	} );
+	};
 
 	const [ isEditingLink, setIsEditingLink ] = useState( false );
 	const [ urlInput, setUrlInput ] = useState( null );
 
 	const autocompleteRef = useRef( null );
 
-	const startEditLink = useCallback( () => {
+	const startEditLink = () => {
 		if (
 			linkDestination === LINK_DESTINATION_MEDIA ||
 			linkDestination === LINK_DESTINATION_ATTACHMENT
@@ -67,17 +67,17 @@ const ImageURLInputUI = ( {
 			setUrlInput( '' );
 		}
 		setIsEditingLink( true );
-	} );
+	};
 
-	const stopEditLink = useCallback( () => {
+	const stopEditLink = () => {
 		setIsEditingLink( false );
-	} );
+	};
 
-	const closeLinkUI = useCallback( () => {
+	const closeLinkUI = () => {
 		setUrlInput( null );
 		stopEditLink();
 		setIsOpen( false );
-	} );
+	};
 
 	const getUpdatedLinkTargetSettings = ( value ) => {
 		const newLinkTarget = value ? '_blank' : undefined;
@@ -106,7 +106,7 @@ const ImageURLInputUI = ( {
 		};
 	};
 
-	const onFocusOutside = useCallback( () => {
+	const onFocusOutside = () => {
 		return ( event ) => {
 			// The autocomplete suggestions list renders in a separate popover (in a portal),
 			// so onFocusOutside fails to detect that a click on a suggestion occurred in the
@@ -123,9 +123,9 @@ const ImageURLInputUI = ( {
 			setUrlInput( null );
 			stopEditLink();
 		};
-	} );
+	};
 
-	const onSubmitLinkChange = useCallback( () => {
+	const onSubmitLinkChange = () => {
 		return ( event ) => {
 			if ( urlInput ) {
 				// It is possible the entered URL actually matches a named link destination.
@@ -144,14 +144,14 @@ const ImageURLInputUI = ( {
 			setUrlInput( null );
 			event.preventDefault();
 		};
-	} );
+	};
 
-	const onLinkRemove = useCallback( () => {
+	const onLinkRemove = () => {
 		onChangeUrl( {
 			linkDestination: LINK_DESTINATION_NONE,
 			href: '',
 		} );
-	} );
+	};
 
 	const getLinkDestinations = () => {
 		const linkDestinations = [

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
@@ -53,7 +53,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
@@ -108,7 +108,7 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div

package/src/components/use-block-display-information/index.js

@@ -7,6 +7,7 @@ import {
 	isReusableBlock,
 	isTemplatePart,
 } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -27,6 +28,26 @@ import { store as blockEditorStore } from '../../store';
  * @property {string}  anchor      HTML anchor.
  */
 
+/**
+ * Get the display label for a block's position type.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {string} The position type label.
+ */
+function getPositionTypeLabel( attributes ) {
+	const positionType = attributes?.style?.position?.type;
+
+	if ( positionType === 'sticky' ) {
+		return __( 'Sticky' );
+	}
+
+	if ( positionType === 'fixed' ) {
+		return __( 'Fixed' );
+	}
+
+	return null;
+}
+
 /**
  * Hook used to try to find a matching block variation and return
  * the appropriate information for display reasons. In order to
@@ -57,12 +78,15 @@ export default function useBlockDisplayInformation( clientId ) {
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isSynced =
 				isReusableBlock( blockType ) || isTemplatePart( blockType );
+			const positionLabel = getPositionTypeLabel( attributes );
 			const blockTypeInfo = {
 				isSynced,
 				title: blockType.title,
 				icon: blockType.icon,
 				description: blockType.description,
 				anchor: attributes?.anchor,
+				positionLabel,
+				positionType: attributes?.style?.position?.type,
 			};
 			if ( ! match ) return blockTypeInfo;
 
@@ -72,6 +96,8 @@ export default function useBlockDisplayInformation( clientId ) {
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,
 				anchor: attributes?.anchor,
+				positionLabel,
+				positionType: attributes?.style?.position?.type,
 			};
 		},
 		[ clientId ]

package/src/components/writing-flow/use-drag-selection.js

@@ -88,7 +88,7 @@ export default function useDragSelection() {
 				// child elements of the content editable wrapper are editable
 				// and return true for this property. We only want to start
 				// multi selecting when the mouse leaves the wrapper.
-				if ( ! target.getAttribute( 'contenteditable' ) ) {
+				if ( target.getAttribute( 'contenteditable' ) !== 'true' ) {
 					return;
 				}