@wordpress/block-editor 11.7.0 → 11.8.0

package/src/components/list-view/test/use-list-view-drop-zone.js

@@ -0,0 +1,188 @@
+/**
+ * Internal dependencies
+ */
+import { getListViewDropTarget } from '../use-list-view-drop-zone';
+
+describe( 'getListViewDropTarget', () => {
+	const blocksData = [
+		{
+			blockIndex: 0,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-1',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 50,
+					bottom: 100,
+					left: 10,
+					right: 100,
+					x: 10,
+					y: 50,
+					width: 90,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 1,
+			isDraggedBlock: false,
+			isExpanded: true,
+			rootClientId: '',
+		},
+		{
+			blockIndex: 0,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-2',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 100,
+					bottom: 150,
+					left: 10,
+					right: 100,
+					x: 10,
+					y: 100,
+					width: 90,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 0,
+			isDraggedBlock: false,
+			isExpanded: false,
+			rootClientId: 'block-1',
+		},
+		{
+			blockIndex: 1,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-3',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 150,
+					bottom: 150,
+					left: 10,
+					right: 100,
+					x: 10,
+					y: 150,
+					width: 90,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 0,
+			isDraggedBlock: false,
+			isExpanded: false,
+			rootClientId: '',
+		},
+	];
+
+	it( 'should return the correct target when dragging a block over the top half of the first block', () => {
+		const position = { x: 50, y: 70 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 0,
+			clientId: 'block-1',
+			dropPosition: 'top',
+			rootClientId: '',
+		} );
+	} );
+
+	it( 'should nest when dragging a block over the bottom half of an expanded block', () => {
+		const position = { x: 50, y: 90 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 0,
+			dropPosition: 'inside',
+			rootClientId: 'block-1',
+		} );
+	} );
+
+	it( 'should nest when dragging a block over the right side and bottom half of a collapsed block with children', () => {
+		const position = { x: 70, y: 90 };
+
+		const collapsedBlockData = [ ...blocksData ];
+
+		// Set the first block to be collapsed.
+		collapsedBlockData[ 0 ] = {
+			...collapsedBlockData[ 0 ],
+			isExpanded: false,
+		};
+
+		// Hide the first block's children.
+		collapsedBlockData.splice( 1, 1 );
+
+		const target = getListViewDropTarget( collapsedBlockData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 0,
+			dropPosition: 'inside',
+			rootClientId: 'block-1',
+		} );
+	} );
+
+	it( 'should drag below when dragging a block over the left side and bottom half of a collapsed block with children', () => {
+		const position = { x: 30, y: 90 };
+
+		const collapsedBlockData = [ ...blocksData ];
+
+		// Set the first block to be collapsed.
+		collapsedBlockData[ 0 ] = {
+			...collapsedBlockData[ 0 ],
+			isExpanded: false,
+		};
+
+		// Hide the first block's children.
+		collapsedBlockData.splice( 1, 1 );
+
+		const target = getListViewDropTarget( collapsedBlockData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-1',
+			dropPosition: 'bottom',
+			rootClientId: '',
+		} );
+	} );
+
+	it( 'should drag below when attempting to nest but the dragged block is not allowed as a child', () => {
+		const position = { x: 70, y: 90 };
+
+		const childNotAllowedBlockData = [ ...blocksData ];
+
+		// Set the first block to not be allowed as a child.
+		childNotAllowedBlockData[ 0 ] = {
+			...childNotAllowedBlockData[ 0 ],
+			canInsertDraggedBlocksAsChild: false,
+		};
+
+		const target = getListViewDropTarget(
+			childNotAllowedBlockData,
+			position
+		);
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-1',
+			dropPosition: 'bottom',
+			rootClientId: '',
+		} );
+	} );
+
+	it( 'should return undefined when the dragged block cannot be inserted as a sibling', () => {
+		const position = { x: 50, y: 70 };
+
+		const siblingNotAllowedBlockData = [ ...blocksData ];
+
+		// Set the first block to not be allowed as a sibling.
+		siblingNotAllowedBlockData[ 0 ] = {
+			...siblingNotAllowedBlockData[ 0 ],
+			canInsertDraggedBlocksAsSibling: false,
+		};
+
+		const target = getListViewDropTarget(
+			siblingNotAllowedBlockData,
+			position
+		);
+
+		expect( target ).toBeUndefined();
+	} );
+} );

package/src/components/list-view/use-list-view-client-ids.js

@@ -9,7 +9,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 
-export default function useListViewClientIds( blocks ) {
+export default function useListViewClientIds( { blocks, rootClientId } ) {
 	return useSelect(
 		( select ) => {
 			const {
@@ -21,9 +21,11 @@ export default function useListViewClientIds( blocks ) {
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
-				clientIdsTree: blocks ? blocks : __unstableGetClientIdsTree(),
+				clientIdsTree: blocks
+					? blocks
+					: __unstableGetClientIdsTree( rootClientId ),
 			};
 		},
-		[ blocks ]
+		[ blocks, rootClientId ]
 	);
 }

package/src/components/list-view/use-list-view-drop-zone.js

@@ -36,6 +36,7 @@ import { store as blockEditorStore } from '../../store';
  * @property {Element} element                         The DOM element representing the block.
  * @property {number}  innerBlockCount                 The number of inner blocks the block has.
  * @property {boolean} isDraggedBlock                  Whether the block is currently being dragged.
+ * @property {boolean} isExpanded                      Whether the block is expanded in the UI.
  * @property {boolean} canInsertDraggedBlocksAsSibling Whether the dragged block can be a sibling of this block.
  * @property {boolean} canInsertDraggedBlocksAsChild   Whether the dragged block can be a child of this block.
  */
@@ -78,7 +79,7 @@ const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
  *
  * @return {WPListViewDropZoneTarget | undefined} An object containing data about the drop target.
  */
-function getListViewDropTarget( blocksData, position ) {
+export function getListViewDropTarget( blocksData, position ) {
 	let candidateEdge;
 	let candidateBlockData;
 	let candidateDistance;
@@ -146,12 +147,15 @@ function getListViewDropTarget( blocksData, position ) {
 
 	// If the user is dragging towards the bottom of the block check whether
 	// they might be trying to nest the block as a child.
-	// If the block already has inner blocks, this should always be treated
+	// If the block already has inner blocks, and is expanded, this should be treated
 	// as nesting since the next block in the tree will be the first child.
+	// However, if the block is collapsed, dragging beneath the block should
+	// still be allowed, as the next visible block in the tree will be a sibling.
 	if (
 		isDraggingBelow &&
 		candidateBlockData.canInsertDraggedBlocksAsChild &&
-		( candidateBlockData.innerBlockCount > 0 ||
+		( ( candidateBlockData.innerBlockCount > 0 &&
+			candidateBlockData.isExpanded ) ||
 			isNestingGesture( position, candidateRect ) )
 	) {
 		return {
@@ -208,10 +212,12 @@ export default function useListViewDropZone() {
 
 				const blocksData = blockElements.map( ( blockElement ) => {
 					const clientId = blockElement.dataset.block;
+					const isExpanded = blockElement.dataset.expanded === 'true';
 					const rootClientId = getBlockRootClientId( clientId );
 
 					return {
 						clientId,
+						isExpanded,
 						rootClientId,
 						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,

package/src/components/off-canvas-editor/block-contents.js

@@ -19,6 +19,7 @@ import { store as blockEditorStore } from '../../store';
 import { updateAttributes } from './update-attributes';
 import { LinkUI } from './link-ui';
 import { useInsertedBlock } from './use-inserted-block';
+import { useListViewContext } from './context';
 
 const BLOCKS_WITH_LINK_UI_SUPPORT = [
 	'core/navigation-link',
@@ -90,6 +91,8 @@ const ListViewBlockContents = forwardRef(
 			hasExistingLinkValue,
 		] );
 
+		const { renderAdditionalBlockUI } = useListViewContext();
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -107,6 +110,7 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<>
+				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
 				{ isLinkUIOpen && (
 					<LinkUI
 						clientId={ lastInsertedBlockClientId }

package/src/components/off-canvas-editor/index.js

@@ -54,17 +54,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                 Components props.
- * @param {string}  props.id              An HTML element id for the root element of ListView.
- * @param {string}  props.parentClientId  The client id of the parent block.
- * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {boolean} props.showBlockMovers Flag to enable block movers
- * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
- * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
- * @param {string}  props.description     Optional accessible description for the tree grid component.
- * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
- * @param {string}  props.showAppender    Flag to show or hide the block appender.
- * @param {Object}  ref                   Forwarded ref
+ * @param {Object}   props                         Components props.
+ * @param {string}   props.id                      An HTML element id for the root element of ListView.
+ * @param {string}   props.parentClientId          The client id of the parent block.
+ * @param {Array}    props.blocks                  Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {boolean}  props.showBlockMovers         Flag to enable block movers
+ * @param {boolean}  props.isExpanded              Flag to determine whether nested levels are expanded by default.
+ * @param {Object}   props.LeafMoreMenu            Optional more menu substitution.
+ * @param {string}   props.description             Optional accessible description for the tree grid component.
+ * @param {string}   props.onSelect                Optional callback to be invoked when a block is selected.
+ * @param {string}   props.showAppender            Flag to show or hide the block appender.
+ * @param {Function} props.renderAdditionalBlockUI Function that renders additional block content UI.
+ * @param {Object}   ref                           Forwarded ref.
  */
 function OffCanvasEditor(
 	{
@@ -77,6 +78,7 @@ function OffCanvasEditor(
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
 		onSelect,
+		renderAdditionalBlockUI,
 	},
 	ref
 ) {
@@ -200,6 +202,7 @@ function OffCanvasEditor(
 			expand,
 			collapse,
 			LeafMoreMenu,
+			renderAdditionalBlockUI,
 		} ),
 		[
 			isMounted.current,
@@ -208,6 +211,7 @@ function OffCanvasEditor(
 			expand,
 			collapse,
 			LeafMoreMenu,
+			renderAdditionalBlockUI,
 		]
 	);
 

package/src/components/resizable-box-popover/index.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { ResizableBox } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+
+export default function ResizableBoxPopover( {
+	clientId,
+	resizableBoxProps,
+	...props
+} ) {
+	return (
+		<BlockPopover
+			clientId={ clientId }
+			__unstableCoverTarget
+			__unstablePopoverSlot="block-toolbar"
+			shift={ false }
+			{ ...props }
+		>
+			<ResizableBox { ...resizableBoxProps } />
+		</BlockPopover>
+	);
+}

package/src/components/rich-text/index.js

@@ -66,7 +66,6 @@ function removeNativeProps( props ) {
 		textAlign,
 		selectionColor,
 		tagsToEliminate,
-		rootTagsToEliminate,
 		disableEditingMenu,
 		fontSize,
 		fontFamily,

package/src/components/rich-text/index.native.js

@@ -46,7 +46,6 @@ import { useBlockEditContext } from '../block-edit';
 import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
 import { filePasteHandler } from './file-paste-handler';
 import FormatToolbarContainer from './format-toolbar-container';
-import { useNativeProps } from './use-native-props';
 import { store as blockEditorStore } from '../../store';
 import {
 	addActiveFormats,
@@ -97,7 +96,6 @@ function RichTextWrapper(
 		textAlign,
 		selectionColor,
 		tagsToEliminate,
-		rootTagsToEliminate,
 		disableEditingMenu,
 		fontSize,
 		fontFamily,
@@ -121,7 +119,6 @@ function RichTextWrapper(
 
 	const fallbackRef = useRef();
 	const { clientId, isSelected: blockIsSelected } = useBlockEditContext();
-	const nativeProps = useNativeProps();
 	const embedHandlerPickerRef = useRef();
 	const selector = ( select ) => {
 		const {
@@ -220,6 +217,7 @@ function RichTextWrapper(
 				selectionChangeEnd
 			);
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ clientId, identifier ]
 	);
 
@@ -373,6 +371,7 @@ function RichTextWrapper(
 				}
 			}
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
 			onReplace,
 			onSplit,
@@ -615,7 +614,6 @@ function RichTextWrapper(
 			}
 			__unstableMultilineRootTag={ __unstableMultilineRootTag }
 			// Native props.
-			{ ...nativeProps }
 			blockIsSelected={
 				originalIsSelected !== undefined
 					? originalIsSelected
@@ -628,7 +626,6 @@ function RichTextWrapper(
 			textAlign={ textAlign }
 			selectionColor={ selectionColor }
 			tagsToEliminate={ tagsToEliminate }
-			rootTagsToEliminate={ rootTagsToEliminate }
 			disableEditingMenu={ disableEditingMenu }
 			fontSize={ fontSize }
 			fontFamily={ fontFamily }

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

@@ -20,6 +20,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -71,6 +72,15 @@ export default function SpacingInputControl( {
 			! isValueSpacingPreset( value )
 	);
 
+	const previousValue = usePrevious( value );
+	if (
+		previousValue !== value &&
+		! isValueSpacingPreset( value ) &&
+		showCustomValueControl !== true
+	) {
+		setShowCustomValueControl( true );
+	}
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 	} );

package/src/components/spacing-sizes-control/style.scss

@@ -2,7 +2,7 @@
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	align-items: center;
-	grid-template-rows: 16px auto;
+	grid-template-rows: $grid-unit-30 auto;
 }
 
 .component-spacing-sizes-control {
@@ -19,7 +19,7 @@
 	}
 
 	.components-base-control__label {
-		margin-bottom: 0;
+		margin-bottom: $grid-unit-10;
 		height: $grid-unit-20;
 	}
 
@@ -55,6 +55,7 @@
 		grid-row: 1 / 1;
 		align-self: center;
 		margin-left: $grid-unit-05;
+		margin-bottom: $grid-unit-10;
 	}
 
 	.components-spacing-sizes-control__custom-toggle-all {
@@ -85,20 +86,20 @@
 	.components-spacing-sizes-control__custom-value-range {
 		grid-column: span 2;
 		margin-left: $grid-unit-20;
-		margin-top: 8px;
 	}
 
-	.components-spacing-sizes-control__custom-value-input {
+	.components-base-control.components-spacing-sizes-control__custom-value-input {
 		width: 124px;
-		margin-top: 8px;
 		grid-column: 1;
+		margin-bottom: 0;
 	}
 
-	.components-range-control {
+	.components-base-control.components-range-control {
 		height: 40px;
 		/* Vertically center the RangeControl until it has true 40px height. */
 		display: flex;
 		align-items: center;
+		margin-bottom: 0;
 
 		> .components-base-control__field {
 			/* Fixes RangeControl contents when the outer wrapper is flex */
@@ -108,7 +109,6 @@
 
 	.components-spacing-sizes-control__range-control {
 		grid-column: span 3;
-		margin-top: 8px;
 	}
 
 	.components-range-control__mark {

package/src/hooks/anchor.js

@@ -80,7 +80,7 @@ export const withInspectorControl = createHigherOrderComponent(
 								{ isWeb && (
 									<ExternalLink
 										href={ __(
-											'https://wordpress.org/support/article/page-jumps/'
+											'https://wordpress.org/documentation/article/page-jumps/'
 										) }
 									>
 										{ __( 'Learn more about anchors' ) }

package/src/hooks/border.js

@@ -84,7 +84,7 @@ function styleToAttributes( style ) {
 
 	const borderColorValue = style?.border?.color;
 	const borderColorSlug = borderColorValue?.startsWith( 'var:preset|color|' )
-		? borderColorSlug.substring( 'var:preset|color|'.length )
+		? borderColorValue.substring( 'var:preset|color|'.length )
 		: undefined;
 	const updatedStyle = { ...style };
 	updatedStyle.border = {