@wordpress/block-editor 9.2.0 → 9.3.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { debounce, isFunction } from 'lodash';
+import { debounce } from 'lodash';
 import classnames from 'classnames';
 import scrollIntoView from 'dom-scroll-into-view';
 
@@ -27,6 +27,16 @@ import { isURL } from '@wordpress/url';
  */
 import { store as blockEditorStore } from '../../store';
 
+/**
+ * Whether the argument is a function.
+ *
+ * @param {*} maybeFunc The argument to check.
+ * @return {boolean} True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc ) {
+	return typeof maybeFunc === 'function';
+}
+
 class URLInput extends Component {
 	constructor( props ) {
 		super( props );
@@ -60,10 +70,8 @@ class URLInput extends Component {
 
 	componentDidUpdate( prevProps ) {
 		const { showSuggestions, selectedSuggestion } = this.state;
-		const {
-			value,
-			__experimentalShowInitialSuggestions = false,
-		} = this.props;
+		const { value, __experimentalShowInitialSuggestions = false } =
+			this.props;
 
 		// Only have to worry about scrolling selected suggestion into view
 		// when already expanded.
@@ -122,10 +130,8 @@ class URLInput extends Component {
 
 	shouldShowInitialSuggestions() {
 		const { suggestions } = this.state;
-		const {
-			__experimentalShowInitialSuggestions = false,
-			value,
-		} = this.props;
+		const { __experimentalShowInitialSuggestions = false, value } =
+			this.props;
 		return (
 			! this.isUpdatingSuggestions &&
 			__experimentalShowInitialSuggestions &&
@@ -257,12 +263,8 @@ class URLInput extends Component {
 	}
 
 	onKeyDown( event ) {
-		const {
-			showSuggestions,
-			selectedSuggestion,
-			suggestions,
-			loading,
-		} = this.state;
+		const { showSuggestions, selectedSuggestion, suggestions, loading } =
+			this.state;
 
 		// If the suggestions are not shown or loading, we shouldn't handle the arrow keys
 		// We shouldn't preventDefault to allow block arrow keys navigation.
@@ -315,9 +317,8 @@ class URLInput extends Component {
 			return;
 		}
 
-		const suggestion = this.state.suggestions[
-			this.state.selectedSuggestion
-		];
+		const suggestion =
+			this.state.suggestions[ this.state.selectedSuggestion ];
 
 		switch ( event.keyCode ) {
 			case UP: {
@@ -590,8 +591,8 @@ export default compose(
 		}
 		const { getSettings } = select( blockEditorStore );
 		return {
-			__experimentalFetchLinkSuggestions: getSettings()
-				.__experimentalFetchLinkSuggestions,
+			__experimentalFetchLinkSuggestions:
+				getSettings().__experimentalFetchLinkSuggestions,
 		};
 	} )
 )( URLInput );

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

@@ -41,12 +41,10 @@ export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
 			if ( ! clientId ) return null;
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
-			const { getBlockType, getActiveBlockVariation } = select(
-				blocksStore
-			);
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const blockType = getBlockType( blockName );
 			if ( ! blockType ) return null;

package/src/components/use-block-drop-zone/index.js

@@ -101,9 +101,8 @@ export default function useBlockDropZone( {
 	);
 
 	const { getBlockListSettings } = useSelect( blockEditorStore );
-	const { showInsertionPoint, hideInsertionPoint } = useDispatch(
-		blockEditorStore
-	);
+	const { showInsertionPoint, hideInsertionPoint } =
+		useDispatch( blockEditorStore );
 
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
 	const throttled = useThrottle(

package/src/components/use-block-drop-zone/index.native.js

@@ -113,10 +113,8 @@ export default function useBlockDropZone( {
 	const targetBlockIndex = useSharedValue( null );
 
 	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
-	const {
-		blocksLayouts,
-		getBlockLayoutsOrderedByYCoord,
-	} = useBlockListContext();
+	const { blocksLayouts, getBlockLayoutsOrderedByYCoord } =
+		useBlockListContext();
 
 	const getSortedBlocksLayouts = useCallback( () => {
 		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );

package/src/components/use-block-drop-zone/test/index.js

@@ -39,30 +39,29 @@ const createMockClassList = ( classes ) => {
 	};
 };
 
-const mapElements = ( orientation ) => (
-	{ top, right, bottom, left },
-	index
-) => {
-	return {
-		dataset: { block: index + 1 },
-		getBoundingClientRect() {
-			return orientation === 'vertical'
-				? {
-						top,
-						right,
-						bottom,
-						left,
-				  }
-				: {
-						top: left,
-						bottom: right,
-						left: top,
-						right: bottom,
-				  };
-		},
-		classList: createMockClassList( 'wp-block' ),
+const mapElements =
+	( orientation ) =>
+	( { top, right, bottom, left }, index ) => {
+		return {
+			dataset: { block: index + 1 },
+			getBoundingClientRect() {
+				return orientation === 'vertical'
+					? {
+							top,
+							right,
+							bottom,
+							left,
+					  }
+					: {
+							top: left,
+							bottom: right,
+							left: top,
+							right: bottom,
+					  };
+			},
+			classList: createMockClassList( 'wp-block' ),
+		};
 	};
-};
 
 const verticalElements = elementData.map( mapElements( 'vertical' ) );
 // Flip the elementData to make a horizontal block list.

package/src/components/use-display-block-controls/index.native.js

@@ -14,9 +14,8 @@ export default function useDisplayBlockControls() {
 	const { isSelected, clientId, name } = useBlockEditContext();
 	return useSelect(
 		( select ) => {
-			const { getBlockName, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const { getBlockName, getBlockRootClientId } =
+				select( blockEditorStore );
 
 			const parentId = getBlockRootClientId( clientId );
 			const parentBlockName = getBlockName( parentId );

package/src/components/use-no-recursive-renders/test/use-no-recursive-renders.js

@@ -16,9 +16,8 @@ import {
 // of calling itself depending on its `uniqueId` attribute.
 function Edit( { attributes: { uniqueId } } ) {
 	const { name } = useBlockEditContext();
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		uniqueId
-	);
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( uniqueId );
 
 	if ( hasAlreadyRendered ) {
 		return <div className={ `wp-block__${ name }--halted` }>Halt</div>;

package/src/components/use-on-block-drop/index.js

@@ -217,11 +217,8 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
 	);
-	const {
-		canInsertBlockType,
-		getBlockIndex,
-		getClientIdsOfDescendants,
-	} = useSelect( blockEditorStore );
+	const { canInsertBlockType, getBlockIndex, getClientIdsOfDescendants } =
+		useSelect( blockEditorStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,

package/src/components/use-on-block-drop/index.native.js

@@ -100,14 +100,10 @@ export function onBlockDrop(
  * @return {Function} The event handler for a block drop event.
  */
 export default function useOnBlockDrop() {
-	const { getBlockIndex, getClientIdsOfDescendants } = useSelect(
-		blockEditorStore
-	);
-	const {
-		insertBlocks,
-		moveBlocksToPosition,
-		clearSelectedBlock,
-	} = useDispatch( blockEditorStore );
+	const { getBlockIndex, getClientIdsOfDescendants } =
+		useSelect( blockEditorStore );
+	const { insertBlocks, moveBlocksToPosition, clearSelectedBlock } =
+		useDispatch( blockEditorStore );
 
 	return onBlockDrop(
 		getBlockIndex,

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
  */
@@ -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,7 +125,7 @@ export function getClosestTabbable(
 		return true;
 	}
 
-	return find( focusableNodes, isTabCandidate );
+	return focusableNodes.find( isTabCandidate );
 }
 
 export default function useArrowNav() {
@@ -215,7 +226,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

@@ -74,10 +74,8 @@ export default function useMultiSelection() {
 
 				if ( selection.rangeCount && ! selection.isCollapsed ) {
 					const blockNode = selectedRef.current;
-					const {
-						startContainer,
-						endContainer,
-					} = selection.getRangeAt( 0 );
+					const { startContainer, endContainer } =
+						selection.getRangeAt( 0 );
 
 					if (
 						!! blockNode &&

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;

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/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

@@ -503,8 +503,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,
 							},

package/src/hooks/font-family.js

@@ -111,8 +111,10 @@ export function FontFamilyEdit( {
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
 
-	const value = find( fontFamilies, ( { slug } ) => fontFamily === slug )
-		?.fontFamily;
+	const value = find(
+		fontFamilies,
+		( { slug } ) => fontFamily === slug
+	)?.fontFamily;
 
 	function onChange( newValue ) {
 		const predefinedFontFamily = find(

package/src/hooks/gap.js

@@ -67,9 +67,8 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
  * @return {string|null}                    The concatenated gap value (row and column).
  */
 export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
-	const blockGapBoxControlValue = getGapBoxControlValueFromStyle(
-		blockGapValue
-	);
+	const blockGapBoxControlValue =
+		getGapBoxControlValueFromStyle( blockGapValue );
 	if ( ! blockGapBoxControlValue ) {
 		return null;
 	}

package/src/hooks/layout.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { has } from 'lodash';
+import { has, kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -32,6 +32,49 @@ import { getLayoutType, getLayoutTypes } from '../layouts';
 
 const layoutBlockSupportKey = '__experimentalLayout';
 
+/**
+ * Generates the utility classnames for the given blocks layout attributes.
+ * This method was primarily added to reintroduce classnames that were removed
+ * in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719), rather
+ * than providing an extensive list of all possible layout classes. The plan is to
+ * have the style engine generate a more extensive list of utility classnames which
+ * will then replace this method.
+ *
+ * @param { Array } attributes Array of block attributes.
+ *
+ * @return { Array } Array of CSS classname strings.
+ */
+function getLayoutClasses( attributes ) {
+	const layoutClassnames = [];
+
+	if ( ! attributes.layout ) {
+		return layoutClassnames;
+	}
+
+	if ( attributes?.layout?.orientation ) {
+		layoutClassnames.push(
+			`is-${ kebabCase( attributes.layout.orientation ) }`
+		);
+	}
+
+	if ( attributes?.layout?.justifyContent ) {
+		layoutClassnames.push(
+			`is-content-justification-${ kebabCase(
+				attributes.layout.justifyContent
+			) }`
+		);
+	}
+
+	if (
+		attributes?.layout?.flexWrap &&
+		attributes.layout.flexWrap === 'nowrap'
+	) {
+		layoutClassnames.push( 'is-nowrap' );
+	}
+
+	return layoutClassnames;
+}
+
 function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const { layout } = attributes;
 	const defaultThemeLayout = useSetting( 'layout' );
@@ -212,9 +255,16 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const usedLayout = layout?.inherit
 			? defaultThemeLayout
 			: layout || defaultBlockLayout || {};
-		const className = classnames( props?.className, {
-			[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
-		} );
+		const layoutClasses = shouldRenderLayoutStyles
+			? getLayoutClasses( attributes )
+			: null;
+		const className = classnames(
+			props?.className,
+			{
+				[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
+			},
+			layoutClasses
+		);
 
 		return (
 			<>