@wordpress/block-editor 10.1.0 → 10.1.1-next.4d3b314fd5.0

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

@@ -98,7 +98,7 @@ describe( 'onBlockDrop', () => {
 		const targetBlockIndex = 0;
 		const getBlockIndex = noop;
 		const getClientIdsOfDescendants = noop;
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -115,11 +115,11 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).not.toHaveBeenCalled();
+		expect( moveBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'does nothing if the block is dropped to the same place it was dragged from', () => {
@@ -128,7 +128,7 @@ describe( 'onBlockDrop', () => {
 		// Target and source block index is the same.
 		const getBlockIndex = jest.fn( () => targetBlockIndex );
 		const getClientIdsOfDescendants = noop;
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -148,11 +148,11 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).not.toHaveBeenCalled();
+		expect( moveBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'does nothing if the block is dropped as a child of itself', () => {
@@ -160,7 +160,7 @@ describe( 'onBlockDrop', () => {
 		const targetBlockIndex = 0;
 		const getBlockIndex = jest.fn( () => 6 );
 		const getClientIdsOfDescendants = noop;
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -180,11 +180,11 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).not.toHaveBeenCalled();
+		expect( moveBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'does nothing if the block is dropped as a descendant of itself', () => {
@@ -195,7 +195,7 @@ describe( 'onBlockDrop', () => {
 		const getClientIdsOfDescendants = jest.fn( () => [
 			targetRootClientId,
 		] );
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -214,11 +214,11 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).not.toHaveBeenCalled();
+		expect( moveBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'inserts blocks if the drop is valid', () => {
@@ -228,7 +228,7 @@ describe( 'onBlockDrop', () => {
 		const targetBlockIndex = 0;
 		const getBlockIndex = jest.fn( () => 1 );
 		const getClientIdsOfDescendants = () => [];
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -247,14 +247,13 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).toHaveBeenCalledWith(
+		expect( moveBlocks ).toHaveBeenCalledWith(
 			sourceClientIds,
 			sourceRootClientId,
-			targetRootClientId,
 			targetBlockIndex
 		);
 	} );
@@ -267,7 +266,7 @@ describe( 'onBlockDrop', () => {
 		const getBlockIndex = jest.fn( () => 1 );
 		// Dragged block is being dropped as a descendant of itself.
 		const getClientIdsOfDescendants = () => [];
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -289,14 +288,13 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).toHaveBeenCalledWith(
+		expect( moveBlocks ).toHaveBeenCalledWith(
 			sourceClientIds,
 			sourceRootClientId,
-			targetRootClientId,
 			insertIndex
 		);
 	} );
@@ -306,7 +304,7 @@ describe( 'onFilesDrop', () => {
 	it( 'does nothing if hasUploadPermissions is false', () => {
 		const updateBlockAttributes = jest.fn();
 		const canInsertBlockType = noop;
-		const insertBlocks = jest.fn();
+		const insertOrReplaceBlocks = jest.fn();
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
 		const uploadPermissions = false;
@@ -317,12 +315,12 @@ describe( 'onFilesDrop', () => {
 			uploadPermissions,
 			updateBlockAttributes,
 			canInsertBlockType,
-			insertBlocks
+			insertOrReplaceBlocks
 		);
 		onFileDropHandler();
 
 		expect( findTransform ).not.toHaveBeenCalled();
-		expect( insertBlocks ).not.toHaveBeenCalled();
+		expect( insertOrReplaceBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'does nothing if the block has no matching file transforms', () => {
@@ -330,7 +328,7 @@ describe( 'onFilesDrop', () => {
 		// to have no return value.
 		findTransform.mockImplementation( noop );
 		const updateBlockAttributes = noop;
-		const insertBlocks = jest.fn();
+		const insertOrReplaceBlocks = jest.fn();
 		const canInsertBlockType = noop;
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
@@ -342,12 +340,12 @@ describe( 'onFilesDrop', () => {
 			uploadPermissions,
 			updateBlockAttributes,
 			canInsertBlockType,
-			insertBlocks
+			insertOrReplaceBlocks
 		);
 		onFileDropHandler();
 
 		expect( findTransform ).toHaveBeenCalled();
-		expect( insertBlocks ).not.toHaveBeenCalled();
+		expect( insertOrReplaceBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'inserts blocks if a valid transform can be found', () => {
@@ -359,7 +357,7 @@ describe( 'onFilesDrop', () => {
 		findTransform.mockImplementation( () => transformation );
 		const updateBlockAttributes = noop;
 		const canInsertBlockType = noop;
-		const insertBlocks = jest.fn();
+		const insertOrReplaceBlocks = jest.fn();
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
 		const uploadPermissions = true;
@@ -370,7 +368,7 @@ describe( 'onFilesDrop', () => {
 			uploadPermissions,
 			updateBlockAttributes,
 			canInsertBlockType,
-			insertBlocks
+			insertOrReplaceBlocks
 		);
 		const files = 'test';
 		onFileDropHandler( files );
@@ -380,11 +378,7 @@ describe( 'onFilesDrop', () => {
 			files,
 			updateBlockAttributes
 		);
-		expect( insertBlocks ).toHaveBeenCalledWith(
-			blocks,
-			targetBlockIndex,
-			targetRootClientId
-		);
+		expect( insertOrReplaceBlocks ).toHaveBeenCalledWith( blocks );
 	} );
 } );
 
@@ -393,16 +387,16 @@ describe( 'onHTMLDrop', () => {
 		pasteHandler.mockImplementation( () => [] );
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
-		const insertBlocks = jest.fn();
+		const insertOrReplaceBlocks = jest.fn();
 
 		const eventHandler = onHTMLDrop(
 			targetRootClientId,
 			targetBlockIndex,
-			insertBlocks
+			insertOrReplaceBlocks
 		);
 		eventHandler();
 
-		expect( insertBlocks ).not.toHaveBeenCalled();
+		expect( insertOrReplaceBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'inserts blocks if the HTML can be converted into blocks', () => {
@@ -410,19 +404,15 @@ describe( 'onHTMLDrop', () => {
 		pasteHandler.mockImplementation( () => blocks );
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
-		const insertBlocks = jest.fn();
+		const insertOrReplaceBlocks = jest.fn();
 
 		const eventHandler = onHTMLDrop(
 			targetRootClientId,
 			targetBlockIndex,
-			insertBlocks
+			insertOrReplaceBlocks
 		);
 		eventHandler();
 
-		expect( insertBlocks ).toHaveBeenCalledWith(
-			blocks,
-			targetBlockIndex,
-			targetRootClientId
-		);
+		expect( insertOrReplaceBlocks ).toHaveBeenCalledWith( blocks );
 	} );
 } );

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

@@ -167,7 +167,8 @@ export default function useArrowNav() {
 		}
 
 		function onKeyDown( event ) {
-			const { keyCode, target } = event;
+			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
+				event;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -176,9 +177,7 @@ export default function useArrowNav() {
 			const isHorizontal = isLeft || isRight;
 			const isVertical = isUp || isDown;
 			const isNav = isHorizontal || isVertical;
-			const isShift = event.shiftKey;
-			const hasModifier =
-				isShift || event.ctrlKey || event.altKey || event.metaKey;
+			const hasModifier = shiftKey || ctrlKey || altKey || metaKey;
 			const isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge;
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
@@ -200,7 +199,7 @@ export default function useArrowNav() {
 					return;
 				}
 
-				if ( isShift ) {
+				if ( shiftKey ) {
 					return;
 				}
 
@@ -249,7 +248,7 @@ export default function useArrowNav() {
 			const isReverseDir = isRTL( target ) ? ! isReverse : isReverse;
 			const { keepCaretInsideBlock } = getSettings();
 
-			if ( isShift ) {
+			if ( shiftKey ) {
 				if (
 					isClosestTabbableABlock( target, isReverse ) &&
 					isNavEdge( target, isReverse )
@@ -261,6 +260,9 @@ export default function useArrowNav() {
 			} else if (
 				isVertical &&
 				isVerticalEdge( target, isReverse ) &&
+				// When Alt is pressed, only intercept if the caret is also at
+				// the horizontal edge.
+				( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&
 				! keepCaretInsideBlock
 			) {
 				const closestTabbable = getClosestTabbable(
@@ -273,8 +275,10 @@ export default function useArrowNav() {
 				if ( closestTabbable ) {
 					placeCaretAtVerticalEdge(
 						closestTabbable,
-						isReverse,
-						verticalRect
+						// When Alt is pressed, place the caret at the furthest
+						// horizontal edge and the furthest vertical edge.
+						altKey ? ! isReverse : isReverse,
+						altKey ? undefined : verticalRect
 					);
 					event.preventDefault();
 				}

package/src/hooks/index.js

@@ -20,6 +20,7 @@ import './metadata';
 import './metadata-name';
 
 export { useCustomSides } from './dimensions';
+export { useLayoutClasses, useLayoutStyles } from './layout';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';

package/src/hooks/layout.js

@@ -37,58 +37,101 @@ 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.
+ * Generates the utility classnames for the given block's layout attributes.
  *
- * @param { Object } layout            Layout object.
- * @param { Object } layoutDefinitions An object containing layout definitions, stored in theme.json.
+ * @param { Object } block Block object.
  *
  * @return { Array } Array of CSS classname strings.
  */
-function useLayoutClasses( layout, layoutDefinitions ) {
+export function useLayoutClasses( block = {} ) {
 	const rootPaddingAlignment = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().__experimentalFeatures
 			?.useRootPaddingAwareAlignments;
 	}, [] );
+	const globalLayoutSettings = useSetting( 'layout' ) || {};
+
+	const { attributes = {}, name } = block;
+	const { layout } = attributes;
+
+	const { default: defaultBlockLayout } =
+		getBlockSupport( name, layoutBlockSupportKey ) || {};
+	const usedLayout =
+		layout?.inherit || layout?.contentSize || layout?.wideSize
+			? { ...layout, type: 'constrained' }
+			: layout || defaultBlockLayout || {};
+
 	const layoutClassnames = [];
 
-	if ( layoutDefinitions?.[ layout?.type || 'default' ]?.className ) {
+	if (
+		globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
+			?.className
+	) {
 		layoutClassnames.push(
-			layoutDefinitions?.[ layout?.type || 'default' ]?.className
+			globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
+				?.className
 		);
 	}
 
 	if (
-		( layout?.inherit ||
-			layout?.contentSize ||
-			layout?.type === 'constrained' ) &&
+		( usedLayout?.inherit ||
+			usedLayout?.contentSize ||
+			usedLayout?.type === 'constrained' ) &&
 		rootPaddingAlignment
 	) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
-	if ( layout?.orientation ) {
-		layoutClassnames.push( `is-${ kebabCase( layout.orientation ) }` );
+	if ( usedLayout?.orientation ) {
+		layoutClassnames.push( `is-${ kebabCase( usedLayout.orientation ) }` );
 	}
 
-	if ( layout?.justifyContent ) {
+	if ( usedLayout?.justifyContent ) {
 		layoutClassnames.push(
-			`is-content-justification-${ kebabCase( layout.justifyContent ) }`
+			`is-content-justification-${ kebabCase(
+				usedLayout.justifyContent
+			) }`
 		);
 	}
 
-	if ( layout?.flexWrap && layout.flexWrap === 'nowrap' ) {
+	if ( usedLayout?.flexWrap && usedLayout.flexWrap === 'nowrap' ) {
 		layoutClassnames.push( 'is-nowrap' );
 	}
 
 	return layoutClassnames;
 }
 
+/**
+ * Generates a CSS rule with the given block's layout styles.
+ *
+ * @param { Object } block    Block object.
+ * @param { string } selector A selector to use in generating the CSS rule.
+ *
+ * @return { string } CSS rule.
+ */
+export function useLayoutStyles( block = {}, selector ) {
+	const { attributes = {}, name } = block;
+	const { layout = {}, style = {} } = attributes;
+	// Update type for blocks using legacy layouts.
+	const usedLayout =
+		layout?.inherit || layout?.contentSize || layout?.wideSize
+			? { ...layout, type: 'constrained' }
+			: layout || {};
+	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
+	const globalLayoutSettings = useSetting( 'layout' ) || {};
+	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGapSupport !== null;
+	const css = fullLayoutType?.getLayoutStyle?.( {
+		blockName: name,
+		selector,
+		layout,
+		layoutDefinitions: globalLayoutSettings?.definitions,
+		style,
+		hasBlockGapSupport,
+	} );
+	return css;
+}
+
 function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const { layout } = attributes;
 	const defaultThemeLayout = useSetting( 'layout' );
@@ -299,7 +342,7 @@ export const withInspectorControls = createHigherOrderComponent(
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const { name, attributes } = props;
+		const { name, attributes, block } = props;
 		const hasLayoutBlockSupport = hasBlockSupport(
 			name,
 			layoutBlockSupportKey
@@ -321,7 +364,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 				? { ...layout, type: 'constrained' }
 				: layout || defaultBlockLayout || {};
 		const layoutClasses = hasLayoutBlockSupport
-			? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
+			? useLayoutClasses( block )
 			: null;
 		const selector = `.${ getBlockDefaultClassName(
 			name

package/src/index.js

@@ -12,6 +12,8 @@ export {
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	useCachedTruthy,
+	useLayoutClasses as __experimentaluseLayoutClasses,
+	useLayoutStyles as __experimentaluseLayoutStyles,
 } from './hooks';
 export * from './components';
 export * from './elements';

package/src/store/selectors.js

@@ -2720,6 +2720,7 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 	// In zoom-out mode, the block overlay is always active for top level blocks.
 	if (
 		editorMode === 'zoom-out' &&
+		clientId &&
 		! getBlockRootClientId( state, clientId )
 	) {
 		return true;