@wordpress/edit-post 8.39.0 → 8.39.1-next.v.20260206T143.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.39.0",
+	"version": "8.39.1-next.v.20260206T143.0+81f8de885",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -48,37 +48,37 @@
 		"postbox"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.39.0",
-		"@wordpress/admin-ui": "^1.7.0",
-		"@wordpress/api-fetch": "^7.39.0",
-		"@wordpress/base-styles": "^6.15.0",
-		"@wordpress/block-editor": "^15.12.0",
-		"@wordpress/block-library": "^9.39.0",
-		"@wordpress/blocks": "^15.12.0",
-		"@wordpress/commands": "^1.39.0",
-		"@wordpress/components": "^32.1.0",
-		"@wordpress/compose": "^7.39.0",
-		"@wordpress/core-data": "^7.39.0",
-		"@wordpress/data": "^10.39.0",
-		"@wordpress/deprecated": "^4.39.0",
-		"@wordpress/dom": "^4.39.0",
-		"@wordpress/editor": "^14.39.0",
-		"@wordpress/element": "^6.39.0",
-		"@wordpress/global-styles-engine": "^1.6.0",
-		"@wordpress/hooks": "^4.39.0",
-		"@wordpress/html-entities": "^4.39.0",
-		"@wordpress/i18n": "^6.12.0",
-		"@wordpress/icons": "^11.6.0",
-		"@wordpress/keyboard-shortcuts": "^5.39.0",
-		"@wordpress/keycodes": "^4.39.0",
-		"@wordpress/notices": "^5.39.0",
-		"@wordpress/plugins": "^7.39.0",
-		"@wordpress/preferences": "^4.39.0",
-		"@wordpress/private-apis": "^1.39.0",
-		"@wordpress/url": "^4.39.0",
-		"@wordpress/viewport": "^6.39.0",
-		"@wordpress/warning": "^3.39.0",
-		"@wordpress/widgets": "^4.39.0",
+		"@wordpress/a11y": "^4.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/admin-ui": "^1.8.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/api-fetch": "^7.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/base-styles": "^6.15.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/block-editor": "^15.12.2-next.v.20260206T143.0+81f8de885",
+		"@wordpress/block-library": "^9.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/blocks": "^15.12.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/commands": "^1.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/components": "^32.2.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/compose": "^7.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/core-data": "^7.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/data": "^10.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/deprecated": "^4.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/dom": "^4.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/editor": "^14.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/element": "^6.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/global-styles-engine": "^1.6.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/hooks": "^4.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/html-entities": "^4.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/i18n": "^6.12.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/icons": "^11.6.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/keyboard-shortcuts": "^5.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/keycodes": "^4.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/notices": "^5.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/plugins": "^7.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/preferences": "^4.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/private-apis": "^1.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/url": "^4.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/viewport": "^6.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/warning": "^3.39.1-next.v.20260206T143.0+81f8de885",
+		"@wordpress/widgets": "^4.39.1-next.v.20260206T143.0+81f8de885",
 		"clsx": "^2.1.1",
 		"memize": "^2.1.0"
 	},
@@ -89,5 +89,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
+	"gitHead": "6ae3fbb907e6c309ff6a0685e5e5ff0c2ee23b15"
 }

package/src/components/layout/index.js

@@ -25,7 +25,6 @@ import { PluginArea } from '@wordpress/plugins';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	useCallback,
-	useEffect,
 	useMemo,
 	useId,
 	useRef,
@@ -41,15 +40,15 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	Icon,
-	ResizableBox,
 	SlotFillProvider,
 	Tooltip,
 	VisuallyHidden,
 	__unstableUseNavigateRegions as useNavigateRegions,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import {
-	useEvent,
 	useMediaQuery,
+	useMergeRefs,
 	useRefEffect,
 	useViewportMatch,
 } from '@wordpress/compose';
@@ -73,6 +72,8 @@ import useNavigateToEntityRecord from '../../hooks/use-navigate-to-entity-record
 import { useMetaBoxInitialization } from '../meta-boxes/use-meta-box-initialization';
 
 const { useCommandContext } = unlock( commandsPrivateApis );
+/** @type {{} & {useDrag: import('@use-gesture/react').useDrag}} */
+const { useDrag } = unlock( componentsPrivateApis );
 const { Editor, FullscreenMode } = unlock( editorPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 const DESIGN_POST_TYPES = [
@@ -148,10 +149,10 @@ function MetaBoxesMain( { isLegacy } ) {
 		];
 	}, [] );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const metaBoxesMainRef = useRef();
+
 	const isShort = useMediaQuery( '(max-height: 549px)' );
 
-	const [ { min, max }, setHeightConstraints ] = useState( () => ( {} ) );
+	const [ { min = 0, max }, setHeightConstraints ] = useState( () => ( {} ) );
 	// Keeps the resizable area’s size constraints updated taking into account
 	// editor notices. The constraints are also used to derive the value for the
 	// aria-valuenow attribute on the separator.
@@ -184,25 +185,30 @@ function MetaBoxesMain( { isLegacy } ) {
 		}
 		return () => observer.disconnect();
 	}, [] );
+	const metaBoxesMainRef = useRef();
+	const setMainRefs = useMergeRefs( [
+		metaBoxesMainRef,
+		effectSizeConstraints,
+	] );
 
-	const resizeDataRef = useRef( {} );
 	const separatorRef = useRef();
 	const separatorHelpId = useId();
 
+	const heightRef = useRef();
+
 	/**
 	 * @param {number|'auto'} [candidateHeight] Height in pixels or 'auto'.
 	 * @param {boolean}       isPersistent      Whether to persist the height in preferences.
-	 * @param {boolean}       isInstant         Whether to update the height in the DOM.
 	 */
-	const applyHeight = (
-		candidateHeight = 'auto',
-		isPersistent,
-		isInstant
-	) => {
+	const applyHeight = ( candidateHeight = 'auto', isPersistent ) => {
+		let styleHeight;
 		if ( candidateHeight === 'auto' ) {
 			isPersistent = false; // Just in case — “auto” should never persist.
+			styleHeight = candidateHeight;
 		} else {
 			candidateHeight = Math.min( max, Math.max( min, candidateHeight ) );
+			heightRef.current = candidateHeight;
+			styleHeight = `${ candidateHeight }px`;
 		}
 		if ( isPersistent ) {
 			setPreference(
@@ -211,35 +217,60 @@ function MetaBoxesMain( { isLegacy } ) {
 				candidateHeight
 			);
 		}
-		// Updates aria-valuenow only when not persisting the value because otherwise
-		// it's done by the render that persisting the value causes.
-		else if ( ! isShort ) {
-			separatorRef.current.ariaValueNow =
-				getAriaValueNow( candidateHeight );
-		}
-		if ( isInstant ) {
-			metaBoxesMainRef.current.updateSize( {
-				height: candidateHeight,
-				// Oddly, when the event that triggered this was not from the mouse (e.g. keydown),
-				// if `width` is left unspecified a subsequent drag gesture applies a fixed
-				// width and the pane fails to widen/narrow with parent width changes from
-				// sidebars opening/closing or window resizes.
-				width: 'auto',
-			} );
+		// Applies imperative DOM updates only when not persisting the value
+		// because otherwise it's done by the subsequent render.
+		else {
+			metaBoxesMainRef.current.style.height = styleHeight;
+			if ( ! isShort ) {
+				separatorRef.current.ariaValueNow =
+					getAriaValueNow( candidateHeight );
+			}
 		}
 	};
-	const getRenderValues = useEvent( () => ( { isOpen, openHeight, min } ) );
-	// Sets the height to 'auto' when not resizable (isShort) and to the
-	// preferred height when resizable.
-	useEffect( () => {
-		const fresh = getRenderValues();
-		// Tests for `min` having a value to skip the first render.
-		if ( fresh.min !== undefined && metaBoxesMainRef.current ) {
-			const usedOpenHeight = isShort ? 'auto' : fresh.openHeight;
-			const usedHeight = fresh.isOpen ? usedOpenHeight : fresh.min;
-			applyHeight( usedHeight, false, true );
-		}
-	}, [ isShort ] );
+
+	// useDrag includes keyboard support with arrow keys emulating a drag.
+	// TODO: Support more/all keyboard interactions from the window splitter pattern:
+	// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+	const bindDragGesture = useDrag(
+		( { movement, first, last, memo, tap, args } ) => {
+			const pane = metaBoxesMainRef.current;
+			const [ , yMovement ] = movement;
+			if ( first ) {
+				pane.classList.add( 'is-resizing' );
+				let fromHeight = heightRef.current ?? pane.offsetHeight;
+				if ( isOpen ) {
+					// Starts from max in case shortening the window has imposed it.
+					if ( fromHeight > max ) {
+						fromHeight = max;
+					}
+				} else {
+					fromHeight = min;
+				}
+				applyHeight( fromHeight - yMovement );
+				return { fromHeight };
+			}
+
+			if ( ! first && ! last && ! tap ) {
+				applyHeight( memo.fromHeight - yMovement );
+				return memo;
+			}
+			// Here, `last === true` – it’s the final event of the gesture.
+
+			pane.classList.remove( 'is-resizing' );
+			if ( tap ) {
+				const [ onTap ] = args;
+				onTap?.();
+				return;
+			}
+			const nextIsOpen = heightRef.current > min;
+			persistIsOpen( nextIsOpen );
+			// Persists height only if still open. This is so that when closed by a drag the
+			// prior height can be restored by the toggle button instead of having to drag
+			// the pane open again.
+			applyHeight( heightRef.current, nextIsOpen );
+		},
+		{ keyboardDisplacement: 20, filterTaps: true }
+	);
 
 	if ( ! hasAnyVisible ) {
 		return;
@@ -261,52 +292,41 @@ function MetaBoxesMain( { isLegacy } ) {
 	}
 
 	const isAutoHeight = openHeight === undefined;
+	const usedOpenHeight = isShort ? 'auto' : openHeight;
+	const usedHeight = isOpen ? usedOpenHeight : min;
+
 	const getAriaValueNow = ( height ) =>
 		Math.round( ( ( height - min ) / ( max - min ) ) * 100 );
 	const usedAriaValueNow =
-		max === undefined || isAutoHeight ? 50 : getAriaValueNow( openHeight );
+		max === undefined || isAutoHeight ? 50 : getAriaValueNow( usedHeight );
 
 	const persistIsOpen = ( to = ! isOpen ) =>
 		setPreference( 'core/edit-post', 'metaBoxesMainIsOpen', to );
 
-	// TODO: Support more/all keyboard interactions from the window splitter pattern:
-	// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
-	const onSeparatorKeyDown = ( event ) => {
-		const delta = { ArrowUp: 20, ArrowDown: -20 }[ event.key ];
-		if ( delta ) {
-			const pane = metaBoxesMainRef.current.resizable;
-			const fromHeight = isAutoHeight ? pane.offsetHeight : openHeight;
-			const nextHeight = delta + fromHeight;
-			applyHeight( nextHeight, true, true );
-			persistIsOpen( nextHeight > min );
-			event.preventDefault();
-		}
-	};
 	const paneLabel = __( 'Meta Boxes' );
 
+	// The toggle button. It also resizes when the viewport is tall to provide
+	// a larger hit area than the small separator button.
 	const toggle = (
 		<button
 			aria-expanded={ isOpen }
+			// Toggles for all clicks when short and only keyboard “clicks” when
+			// resizable because pointer input is handled by the drag gesture.
 			onClick={ ( { detail } ) => {
-				const { isToggleInferred } = resizeDataRef.current;
-				if ( isShort || ! detail || isToggleInferred ) {
+				if ( isShort || ! detail ) {
 					persistIsOpen();
-					const usedOpenHeight = isShort ? 'auto' : openHeight;
-					const usedHeight = isOpen ? min : usedOpenHeight;
-					applyHeight( usedHeight, false, true );
 				}
 			} }
-			// Prevents resizing in short viewports.
-			{ ...( isShort && {
-				onMouseDown: ( event ) => event.stopPropagation(),
-				onTouchStart: ( event ) => event.stopPropagation(),
-			} ) }
+			// Passes a toggle callback that the drag gesture handler calls when
+			// it interprets the input as a click/tap.
+			{ ...( ! isShort && bindDragGesture( persistIsOpen ) ) }
 		>
 			{ paneLabel }
 			<Icon icon={ isOpen ? chevronUp : chevronDown } />
 		</button>
 	);
 
+	// The separator button that provides a11y for resizing.
 	const separator = ! isShort && (
 		<>
 			<Tooltip text={ __( 'Drag to resize' ) }>
@@ -316,86 +336,33 @@ function MetaBoxesMain( { isLegacy } ) {
 					aria-valuenow={ usedAriaValueNow }
 					aria-label={ __( 'Drag to resize' ) }
 					aria-describedby={ separatorHelpId }
-					onKeyDown={ onSeparatorKeyDown }
+					{ ...bindDragGesture() }
 				/>
 			</Tooltip>
 			<VisuallyHidden id={ separatorHelpId }>
 				{ __(
-					'Use up and down arrow keys to resize the meta box panel.'
+					'Use up and down arrow keys to resize the meta box pane.'
 				) }
 			</VisuallyHidden>
 		</>
 	);
 
-	const paneProps = /** @type {Parameters<typeof ResizableBox>[0]} */ ( {
-		as: NavigableRegion,
-		ref: metaBoxesMainRef,
-		className: 'edit-post-meta-boxes-main',
-		defaultSize: { height: isOpen ? openHeight : 0 },
-		minHeight: min,
-		maxHeight: max,
-		enable: { top: true },
-		handleClasses: { top: 'edit-post-meta-boxes-main__presenter' },
-		handleComponent: {
-			top: (
-				<>
-					{ toggle }
-					{ separator }
-				</>
-			),
-		},
-		// Avoids hiccups while dragging over objects like iframes and ensures that
-		// the event to end the drag is captured by the target (resize handle)
-		// whether or not it’s under the pointer.
-		onPointerDown: ( { pointerId, target } ) => {
-			if ( separatorRef.current?.parentElement.contains( target ) ) {
-				target.setPointerCapture( pointerId );
-			}
-		},
-		onResizeStart: ( { timeStamp }, direction, elementRef ) => {
-			if ( isAutoHeight ) {
-				// Sets the starting height to avoid visual jumps in height and
-				// aria-valuenow being `NaN` for the first (few) resize events.
-				applyHeight( elementRef.offsetHeight, false, true );
-			}
-			elementRef.classList.add( 'is-resizing' );
-			resizeDataRef.current = { timeStamp, maxDelta: 0 };
-		},
-		onResize: ( event, direction, elementRef, delta ) => {
-			const { maxDelta } = resizeDataRef.current;
-			const newDelta = Math.abs( delta.height );
-			resizeDataRef.current.maxDelta = Math.max( maxDelta, newDelta );
-			applyHeight( metaBoxesMainRef.current.state.height );
-		},
-		onResizeStop: ( event, direction, elementRef ) => {
-			elementRef.classList.remove( 'is-resizing' );
-			const duration = event.timeStamp - resizeDataRef.current.timeStamp;
-			const wasSeparator = event.target === separatorRef.current;
-			const { maxDelta } = resizeDataRef.current;
-			const isToggleInferred =
-				maxDelta < 1 || ( duration < 144 && maxDelta < 5 );
-			if ( isShort || ( ! wasSeparator && isToggleInferred ) ) {
-				resizeDataRef.current.isToggleInferred = true;
-			} else {
-				const { height } = metaBoxesMainRef.current.state;
-				const nextIsOpen = height > min;
-				persistIsOpen( nextIsOpen );
-				// Persists height only if still open. This is so that when closed by a drag the
-				// prior height can be restored by the toggle button instead of having to drag
-				// the pane open again. Also, if already closed, a click on the separator won’t
-				// persist the height as the minimum.
-				if ( nextIsOpen ) {
-					applyHeight( height, true );
-				}
-			}
-		},
-	} );
-
 	return (
-		<ResizableBox aria-label={ paneLabel } { ...paneProps }>
-			<meta ref={ effectSizeConstraints } />
+		<NavigableRegion
+			aria-label={ paneLabel }
+			ref={ setMainRefs }
+			className={ clsx(
+				'edit-post-meta-boxes-main',
+				! isShort && 'is-resizable'
+			) }
+			style={ { height: usedHeight } }
+		>
+			<div className="edit-post-meta-boxes-main__presenter">
+				{ toggle }
+				{ separator }
+			</div>
 			{ contents }
-		</ResizableBox>
+		</NavigableRegion>
 	);
 }
 

package/src/components/layout/style.scss

@@ -10,20 +10,22 @@
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
-	padding-block-start: $button-size-compact;
 }
 
 .edit-post-meta-boxes-main__presenter {
+	flex-shrink: 0;
 	display: flex;
+	justify-content: center;
 	box-shadow: 0 $border-width $gray-300;
 	// Windows High Contrast mode will show this outline, but not the shadow.
 	outline: 1px solid transparent;
 	position: relative;
-	// Re-resizable adds an invisible overlay during resizes (apparently meant to avoid text selections)
-	// and this has to appear in front of it or else click events will be blocked on touch devices.
-	z-index: 10000;
-	inset: 0 0 auto;
+	z-index: 1;
 	height: $button-size-compact;
+	// Enlarge the toggle/resizable hit area on touch devices.
+	@media (pointer: coarse) {
+		height: $button-size;
+	}
 
 	// Style reset for both toggle and separator buttons.
 	> button {
@@ -32,6 +34,8 @@
 		border: none;
 		outline: none;
 		background-color: transparent;
+		// Ensure the drag gesture behaves as expected for touch input.
+		touch-action: none;
 	}
 
 	> button[aria-expanded] {
@@ -56,12 +60,12 @@
 		}
 	}
 
-	button[role="separator"] {
+	// This button is only present when resizable.
+	> button[role="separator"] {
 		cursor: row-resize;
-		width: $grid-unit-80;
-		margin: auto;
 		position: absolute;
-		inset: 0;
+		width: $grid-unit-80;
+		height: inherit;
 
 		&::before {
 			content: "";
@@ -80,23 +84,13 @@
 			}
 		}
 
-		&:is(:hover, :focus-visible)::before {
+		&:is(:hover, :focus)::before {
 			background-color: var(--wp-admin-theme-color);
 			width: $grid-unit-80 + $grid-unit-20;
 		}
 	}
 }
 
-// Enlarge the toggle/resizable hit area on touch devices.
-@media (pointer: coarse) {
-	.edit-post-meta-boxes-main {
-		padding-block-start: $button-size;
-	}
-	.edit-post-meta-boxes-main__presenter {
-		height: $button-size;
-	}
-}
-
 .edit-post-meta-boxes-main__liner {
 	// Enable scrolling only for the split view.
 	.edit-post-meta-boxes-main & {