@wordpress/block-editor 9.2.0 → 9.5.0

package/src/components/use-setting/index.js

@@ -128,9 +128,10 @@ export default function useSetting( path ) {
 				clientId, // The current block is added last, so it overwrites any ancestor.
 			];
 			candidates.forEach( ( candidateClientId ) => {
-				const candidateBlockName = select(
-					blockEditorStore
-				).getBlockName( candidateClientId );
+				const candidateBlockName =
+					select( blockEditorStore ).getBlockName(
+						candidateClientId
+					);
 				if (
 					hasBlockSupport(
 						candidateBlockName,
@@ -138,9 +139,10 @@ export default function useSetting( path ) {
 						false
 					)
 				) {
-					const candidateAtts = select(
-						blockEditorStore
-					).getBlockAttributes( candidateClientId );
+					const candidateAtts =
+						select( blockEditorStore ).getBlockAttributes(
+							candidateClientId
+						);
 					const candidateResult =
 						get(
 							candidateAtts,

package/src/components/writing-flow/test/index.js

@@ -12,7 +12,13 @@ describe( 'isNavigationCandidate', () => {
 	let elements;
 	beforeAll( () => {
 		elements = {};
-		elements.input = document.createElement( 'input' );
+
+		elements.inputText = document.createElement( 'input' );
+		elements.inputText.setAttribute( 'type', 'text' );
+
+		elements.inputCheckbox = document.createElement( 'input' );
+		elements.inputCheckbox.setAttribute( 'type', 'checkbox' );
+
 		elements.contentEditable = document.createElement( 'p' );
 		elements.contentEditable.contentEditable = true;
 	} );
@@ -20,7 +26,7 @@ describe( 'isNavigationCandidate', () => {
 	it( 'should return true if vertically navigating input without modifier', () => {
 		[ UP, DOWN ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
-				elements.input,
+				elements.inputText,
 				keyCode,
 				false
 			);
@@ -32,7 +38,7 @@ describe( 'isNavigationCandidate', () => {
 	it( 'should return false if vertically navigating input with modifier', () => {
 		[ UP, DOWN ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
-				elements.input,
+				elements.inputText,
 				keyCode,
 				true
 			);
@@ -44,7 +50,7 @@ describe( 'isNavigationCandidate', () => {
 	it( 'should return false if horizontally navigating input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
-				elements.input,
+				elements.inputText,
 				keyCode,
 				false
 			);
@@ -53,6 +59,18 @@ describe( 'isNavigationCandidate', () => {
 		} );
 	} );
 
+	it( 'should return true if horizontally navigating simple inputs like checkboxes', () => {
+		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
+			const result = isNavigationCandidate(
+				elements.inputCheckbox,
+				keyCode,
+				false
+			);
+
+			expect( result ).toBe( true );
+		} );
+	} );
+
 	it( 'should return true if horizontally navigating non-input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find, reverse } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,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';
 
 /**
@@ -43,9 +38,25 @@ export function isNavigationCandidate( element, keyCode, hasModifier ) {
 		return true;
 	}
 
-	// Native inputs should not navigate horizontally.
 	const { tagName } = element;
-	return tagName !== 'INPUT' && tagName !== 'TEXTAREA';
+
+	// Native inputs should not navigate horizontally, unless they are simple types that don't need left/right arrow keys.
+	if ( tagName === 'INPUT' ) {
+		const simpleInputTypes = [
+			'button',
+			'checkbox',
+			'color',
+			'file',
+			'image',
+			'radio',
+			'reset',
+			'submit',
+		];
+		return simpleInputTypes.includes( element.getAttribute( 'type' ) );
+	}
+
+	// Native textareas should not navigate horizontally.
+	return tagName !== 'TEXTAREA';
 }
 
 /**
@@ -73,7 +84,7 @@ export function getClosestTabbable(
 	let focusableNodes = focus.focusable.find( containerElement );
 
 	if ( isReverse ) {
-		focusableNodes = reverse( focusableNodes );
+		focusableNodes.reverse();
 	}
 
 	// Consider as candidates those focusables after the current target. It's
@@ -114,18 +125,21 @@ export function getClosestTabbable(
 		return true;
 	}
 
-	return find( focusableNodes, isTabCandidate );
+	return focusableNodes.find( isTabCandidate );
 }
 
 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
@@ -175,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;
 			}
 
@@ -215,7 +257,8 @@ export default function useArrowNav() {
 			const selectedBlockClientId = getSelectedBlockClientId();
 
 			if ( isShift ) {
-				const selectionEndClientId = getMultiSelectedBlocksEndClientId();
+				const selectionEndClientId =
+					getMultiSelectedBlocksEndClientId();
 				const selectionBeforeEndClientId = getPreviousBlockClientId(
 					selectionEndClientId || selectedBlockClientId
 				);

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

@@ -12,11 +12,8 @@ import { getBlockClientId } from '../../utils/dom';
 
 export default function useClickSelection() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const {
-		isSelectionEnabled,
-		getBlockSelectionStart,
-		hasMultiSelection,
-	} = useSelect( blockEditorStore );
+	const { isSelectionEnabled, getBlockSelectionStart, hasMultiSelection } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			function onMouseDown( event ) {

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

@@ -25,12 +25,10 @@ function setContentEditableWrapper( node, value ) {
  * Sets a multi-selection based on the native selection across blocks.
  */
 export default function useDragSelection() {
-	const { startMultiSelect, stopMultiSelect } = useDispatch(
-		blockEditorStore
-	);
-	const { isSelectionEnabled, hasMultiSelection } = useSelect(
-		blockEditorStore
-	);
+	const { startMultiSelect, stopMultiSelect } =
+		useDispatch( blockEditorStore );
+	const { isSelectionEnabled, hasMultiSelection } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -61,9 +59,8 @@ export default function useDragSelection() {
 					const selection = defaultView.getSelection();
 
 					if ( selection.rangeCount ) {
-						const {
-							commonAncestorContainer,
-						} = selection.getRangeAt( 0 );
+						const { commonAncestorContainer } =
+							selection.getRangeAt( 0 );
 
 						if (
 							anchorElement.contains( commonAncestorContainer )

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,28 +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;
 			}
 
@@ -107,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-select-all.js

@@ -17,11 +17,8 @@ import { useRefEffect } from '@wordpress/compose';
 import { store as blockEditorStore } from '../../store';
 
 export default function useSelectAll() {
-	const {
-		getBlockOrder,
-		getSelectedBlockClientIds,
-		getBlockRootClientId,
-	} = useSelect( blockEditorStore );
+	const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const { multiSelect } = useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
 

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

@@ -73,12 +73,10 @@ function setContentEditableWrapper( node, value ) {
  * Sets a multi-selection based on the native selection across blocks.
  */
 export default function useSelectionObserver() {
-	const { multiSelect, selectBlock, selectionChange } = useDispatch(
-		blockEditorStore
-	);
-	const { getBlockParents, getBlockSelectionStart } = useSelect(
-		blockEditorStore
-	);
+	const { multiSelect, selectBlock, selectionChange } =
+		useDispatch( blockEditorStore );
+	const { getBlockParents, getBlockSelectionStart } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -86,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

@@ -17,11 +17,8 @@ export default function useTabNav() {
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
 	const lastFocus = useRef();
-	const {
-		hasMultiSelection,
-		getSelectedBlockClientId,
-		getBlockCount,
-	} = useSelect( blockEditorStore );
+	const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
+		useSelect( blockEditorStore );
 	const { setNavigationMode } = useDispatch( blockEditorStore );
 	const isNavigationMode = useSelect(
 		( select ) => select( blockEditorStore ).isNavigationMode(),

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-panel.js

@@ -43,8 +43,8 @@ export default function ColorPanel( {
 		}
 
 		let backgroundColorNode = ref.current;
-		let backgroundColor = getComputedStyle( backgroundColorNode )
-			.backgroundColor;
+		let backgroundColor =
+			getComputedStyle( backgroundColorNode ).backgroundColor;
 		while (
 			backgroundColor === 'rgba(0, 0, 0, 0)' &&
 			backgroundColorNode.parentNode &&
@@ -52,8 +52,8 @@ export default function ColorPanel( {
 				backgroundColorNode.parentNode.ELEMENT_NODE
 		) {
 			backgroundColorNode = backgroundColorNode.parentNode;
-			backgroundColor = getComputedStyle( backgroundColorNode )
-				.backgroundColor;
+			backgroundColor =
+				getComputedStyle( backgroundColorNode ).backgroundColor;
 		}
 
 		setDetectedBackgroundColor( backgroundColor );

package/src/hooks/color-panel.native.js

@@ -23,8 +23,8 @@ const ColorPanel = ( { settings } ) => {
 	const { baseGlobalStyles } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return {
-			baseGlobalStyles: getSettings()
-				?.__experimentalGlobalStylesBaseStyles?.color,
+			baseGlobalStyles:
+				getSettings()?.__experimentalGlobalStylesBaseStyles?.color,
 		};
 	} );
 

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 ) => {
@@ -503,8 +510,8 @@ export function ColorEdit( props ) {
 									allSolids,
 									style?.elements?.link?.color?.text
 								),
-								clearable: !! style?.elements?.link?.color
-									?.text,
+								clearable:
+									!! style?.elements?.link?.color?.text,
 								isShownByDefault: defaultColorControls?.link,
 								resetAllFilter: resetAllLinkFilter,
 							},