@wordpress/block-editor 9.3.0 → 9.6.0

package/src/components/rich-text/use-input-rules.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { findKey } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,21 +12,17 @@ import { useDispatch } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 import { preventEventDiscovery } from './prevent-event-discovery';
-
-// A robust way to retain selection position through various
-// transforms is to insert a special character at the position and
-// then recover it.
-const START_OF_SELECTED_AREA = '\u0086';
+import {
+	retrieveSelectedAttribute,
+	START_OF_SELECTED_AREA,
+} from '../../utils/selection';
 
 function findSelection( blocks ) {
 	let i = blocks.length;
 
 	while ( i-- ) {
-		const attributeKey = findKey(
-			blocks[ i ].attributes,
-			( v ) =>
-				typeof v === 'string' &&
-				v.indexOf( START_OF_SELECTED_AREA ) !== -1
+		const attributeKey = retrieveSelectedAttribute(
+			blocks[ i ].attributes
 		);
 
 		if ( attributeKey ) {

package/src/components/rich-text/use-paste-handler.js

@@ -254,17 +254,29 @@ export function usePasteHandler( props ) {
 }
 
 /**
- * Normalizes a given string of HTML to remove the Windows specific "Fragment" comments
- * and any preceeding and trailing whitespace.
+ * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
+ * comments and any preceeding and trailing content.
  *
  * @param {string} html the html to be normalized
  * @return {string} the normalized html
  */
 function removeWindowsFragments( html ) {
-	const startReg = /.*<!--StartFragment-->/s;
-	const endReg = /<!--EndFragment-->.*/s;
+	const startStr = '<!--StartFragment-->';
+	const startIdx = html.indexOf( startStr );
+	if ( startIdx > -1 ) {
+		html = html.substring( startIdx + startStr.length );
+	} else {
+		// No point looking for EndFragment
+		return html;
+	}
+
+	const endStr = '<!--EndFragment-->';
+	const endIdx = html.indexOf( endStr );
+	if ( endIdx > -1 ) {
+		html = html.substring( 0, endIdx );
+	}
 
-	return html.replace( startReg, '' ).replace( endReg, '' );
+	return html;
 }
 
 /**

package/src/components/url-popover/index.js

@@ -33,6 +33,7 @@ function URLPopover( {
 			className="block-editor-url-popover"
 			focusOnMount={ focusOnMount }
 			position={ position }
+			__unstableShift
 			{ ...popoverProps }
 		>
 			<div className="block-editor-url-popover__input-container">

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

@@ -2,6 +2,7 @@
 
 exports[`URLPopover matches the snapshot in its default state 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
@@ -38,6 +39,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
 
 exports[`URLPopover matches the snapshot when the settings are toggled open 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
@@ -81,6 +83,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
 
 exports[`URLPopover matches the snapshot when there are no settings 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"

package/src/components/writing-flow/use-arrow-nav.js

@@ -11,7 +11,7 @@ import {
 	isRTL,
 } from '@wordpress/dom';
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -131,12 +131,15 @@ export function getClosestTabbable(
 export default function useArrowNav() {
 	const {
 		getSelectedBlockClientId,
+		getMultiSelectedBlocksStartClientId,
 		getMultiSelectedBlocksEndClientId,
 		getPreviousBlockClientId,
 		getNextBlockClientId,
 		getSettings,
 		hasMultiSelection,
+		__unstableIsFullySelected,
 	} = useSelect( blockEditorStore );
+	const { selectBlock } = useDispatch( blockEditorStore );
 	return useRefEffect( ( node ) => {
 		// Here a DOMRect is stored while moving the caret vertically so
 		// vertical position of the start position can be restored. This is to
@@ -186,7 +189,35 @@ export default function useArrowNav() {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			// If there is a multi-selection, the arrow keys should collapse the
+			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {
+				// Only handle if we have a full selection (not a native partial
+				// selection).
+				if ( ! __unstableIsFullySelected() ) {
+					return;
+				}
+
+				if ( event.defaultPrevented ) {
+					return;
+				}
+
+				if ( ! isNav ) {
+					return;
+				}
+
+				if ( isShift ) {
+					return;
+				}
+
+				event.preventDefault();
+
+				if ( isReverse ) {
+					selectBlock( getMultiSelectedBlocksStartClientId() );
+				} else {
+					selectBlock( getMultiSelectedBlocksEndClientId(), -1 );
+				}
+
 				return;
 			}
 

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,7 +8,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
 function selector( select ) {
 	const {
@@ -44,10 +38,6 @@ export default function useMultiSelection() {
 		selectedBlockClientId,
 		isFullSelection,
 	} = useSelect( selector, [] );
-	const selectedRef = useBlockRef( selectedBlockClientId );
-	// These must be in the right DOM order.
-	const startRef = useBlockRef( first( multiSelectedBlockClientIds ) );
-	const endRef = useBlockRef( last( multiSelectedBlockClientIds ) );
 
 	/**
 	 * When the component updates, and there is multi selection, we need to
@@ -66,26 +56,6 @@ export default function useMultiSelection() {
 			}
 
 			if ( ! hasMultiSelection || isMultiSelecting ) {
-				if ( ! selectedBlockClientId || isMultiSelecting ) {
-					return;
-				}
-
-				const selection = defaultView.getSelection();
-
-				if ( selection.rangeCount && ! selection.isCollapsed ) {
-					const blockNode = selectedRef.current;
-					const { startContainer, endContainer } =
-						selection.getRangeAt( 0 );
-
-					if (
-						!! blockNode &&
-						( ! blockNode.contains( startContainer ) ||
-							! blockNode.contains( endContainer ) )
-					) {
-						selection.removeAllRanges();
-					}
-				}
-
 				return;
 			}
 
@@ -105,25 +75,8 @@ export default function useMultiSelection() {
 			// able to select across instances immediately.
 			node.contentEditable = true;
 
-			// For some browsers, like Safari, it is important that focus happens
-			// BEFORE selection.
+			defaultView.getSelection().removeAllRanges();
 			node.focus();
-
-			// The block refs might not be immediately available
-			// when dragging blocks into another block.
-			if ( ! startRef.current || ! endRef.current ) {
-				return;
-			}
-
-			const selection = defaultView.getSelection();
-			const range = ownerDocument.createRange();
-
-			// These must be in the right DOM order.
-			range.setStartBefore( startRef.current );
-			range.setEndAfter( endRef.current );
-
-			selection.removeAllRanges();
-			selection.addRange( range );
 		},
 		[
 			hasMultiSelection,

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

@@ -84,12 +84,11 @@ export default function useSelectionObserver() {
 
 			function onSelectionChange( event ) {
 				const selection = defaultView.getSelection();
-				// If no selection is found, end multi selection and disable the
-				// contentEditable wrapper.
+
 				if ( ! selection.rangeCount ) {
-					setContentEditableWrapper( node, false );
 					return;
 				}
+
 				// If selection is collapsed and we haven't used `shift+click`,
 				// end multi selection and disable the contentEditable wrapper.
 				// We have to check about `shift+click` case because elements

package/src/components/writing-flow/use-tab-nav.js

@@ -75,7 +75,7 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
+			if ( event.keyCode === ESCAPE ) {
 				event.preventDefault();
 				setNavigationMode( true );
 				return;

package/src/elements/index.js

@@ -1 +1,8 @@
-export const __experimentalElementButtonClassName = 'wp-element-button';
+const ELEMENT_CLASS_NAMES = {
+	button: 'wp-element-button',
+	caption: 'wp-element-caption',
+};
+
+export const __experimentalGetElementClassName = ( element ) => {
+	return ELEMENT_CLASS_NAMES[ element ] ? ELEMENT_CLASS_NAMES[ element ] : '';
+};

package/src/elements/test/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGetElementClassName } from '@wordpress/block-editor';
+
+describe( 'element class names', () => {
+	it( 'should return the correct class name for button', () => {
+		expect( __experimentalGetElementClassName( 'button' ) ).toEqual(
+			'wp-element-button'
+		);
+	} );
+
+	it( 'should return an empty string for an unknown element', () => {
+		expect(
+			__experimentalGetElementClassName( 'unknown-element' )
+		).toEqual( '' );
+	} );
+} );

package/src/hooks/aria-label.js

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+const ARIA_LABEL_SCHEMA = {
+	type: 'string',
+	source: 'attribute',
+	attribute: 'aria-label',
+	selector: '*',
+};
+
+/**
+ * Filters registered block settings, extending attributes with ariaLabel using aria-label
+ * of the first node.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addAttribute( settings ) {
+	// Allow blocks to specify their own attribute definition with default values if needed.
+	if ( settings?.attributes?.ariaLabel?.type ) {
+		return settings;
+	}
+	if ( hasBlockSupport( settings, 'ariaLabel' ) ) {
+		// Gracefully handle if settings.attributes is undefined.
+		settings.attributes = {
+			...settings.attributes,
+			ariaLabel: ARIA_LABEL_SCHEMA,
+		};
+	}
+
+	return settings;
+}
+
+/**
+ * Override props assigned to save component to inject aria-label, if block
+ * supports ariaLabel. This is only applied if the block's save result is an
+ * element and not a markup string.
+ *
+ * @param {Object} extraProps Additional props applied to save element.
+ * @param {Object} blockType  Block type.
+ * @param {Object} attributes Current block attributes.
+ *
+ * @return {Object} Filtered props applied to save element.
+ */
+export function addSaveProps( extraProps, blockType, attributes ) {
+	if ( hasBlockSupport( blockType, 'ariaLabel' ) ) {
+		extraProps[ 'aria-label' ] =
+			attributes.ariaLabel === '' ? null : attributes.ariaLabel;
+	}
+
+	return extraProps;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/ariaLabel/attribute',
+	addAttribute
+);
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'core/ariaLabel/save-props',
+	addSaveProps
+);

package/src/hooks/color.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isObject } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -55,13 +54,21 @@ const hasLinkColorSupport = ( blockType ) => {
 
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
-	return isObject( colorSupport ) && !! colorSupport.link;
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.link
+	);
 };
 
 const hasGradientSupport = ( blockType ) => {
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
-	return isObject( colorSupport ) && !! colorSupport.gradients;
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.gradients
+	);
 };
 
 const hasBackgroundColorSupport = ( blockType ) => {

package/src/hooks/duotone.js

@@ -2,14 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { colord, extend } from 'colord';
+import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { SVG } from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useContext, createPortal } from '@wordpress/element';
@@ -23,145 +22,34 @@ import {
 	useSetting,
 } from '../components';
 import BlockList from '../components/block-list';
+import {
+	__unstableDuotoneFilter as DuotoneFilter,
+	__unstableDuotoneStylesheet as DuotoneStylesheet,
+	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
+} from '../components/duotone';
 
 const EMPTY_ARRAY = [];
 
 extend( [ namesPlugin ] );
 
-/**
- * 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;
-}
-
-/**
- * Values for the SVG `feComponentTransfer`.
- *
- * @typedef Values {Object}
- * @property {number[]} r Red values.
- * @property {number[]} g Green values.
- * @property {number[]} b Blue values.
- * @property {number[]} a Alpha values.
- */
-
-/**
- * Stylesheet 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.
- */
-function DuotoneStylesheet( { selector, id } ) {
-	const css = `
-${ selector } {
-	filter: url( #${ id } );
-}
-`;
-	return <style>{ css }</style>;
-}
-
-/**
- * SVG for rendering the duotone filter.
- *
- * @param {Object} props        Duotone props.
- * @param {string} props.id     Unique id for this duotone filter.
- * @param {Values} props.values R, G, B, and A values to filter with.
- *
- * @return {WPElement} Duotone element.
- */
-function DuotoneFilter( { id, values } ) {
-	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 and stylesheet needed for rendering the duotone filter.
  *
- * @param {Object} props          Duotone props.
+ * @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.
- * @param {Values} props.values   R, G, B, and A values to filter with.
+ * @param {string} props.id Unique id for this duotone filter.
+ * @param {string[]|"unset"} props.colors Array of RGB color strings ordered from dark to light.
  *
  * @return {WPElement} Duotone element.
  */
-function InlineDuotone( { selector, id, values } ) {
+function InlineDuotone( { selector, id, colors } ) {
+	if ( colors === 'unset' ) {
+		return <DuotoneUnsetStylesheet selector={ selector } />;
+	}
+
 	return (
 		<>
-			<DuotoneFilter id={ id } values={ values } />
+			<DuotoneFilter id={ id } colors={ colors } />
 			<DuotoneStylesheet id={ id } selector={ selector } />
 		</>
 	);
@@ -324,9 +212,9 @@ const withDuotoneStyles = createHigherOrderComponent(
 			props.name,
 			'color.__experimentalDuotone'
 		);
-		const values = props?.attributes?.style?.color?.duotone;
+		const colors = props?.attributes?.style?.color?.duotone;
 
-		if ( ! duotoneSupport || ! values ) {
+		if ( ! duotoneSupport || ! colors ) {
 			return <BlockListBlock { ...props } />;
 		}
 
@@ -351,7 +239,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 						<InlineDuotone
 							selector={ selectorsGroup }
 							id={ id }
-							values={ getValuesFromColors( values ) }
+							colors={ colors }
 						/>,
 						element
 					) }
@@ -362,15 +250,6 @@ const withDuotoneStyles = createHigherOrderComponent(
 	'withDuotoneStyles'
 );
 
-export function PresetDuotoneFilter( { preset } ) {
-	return (
-		<DuotoneFilter
-			id={ `wp-duotone-${ preset.slug }` }
-			values={ getValuesFromColors( preset.colors ) }
-		/>
-	);
-}
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/editor/duotone/add-attributes',

package/src/hooks/index.js

@@ -5,6 +5,7 @@ import './compat';
 import './align';
 import './lock';
 import './anchor';
+import './aria-label';
 import './custom-class-name';
 import './generated-class-name';
 import './style';
@@ -19,5 +20,5 @@ export { useCustomSides } from './dimensions';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
-export { PresetDuotoneFilter } from './duotone';