@wordpress/edit-post 8.8.7 → 8.8.9

package/src/components/layout/index.js

@@ -31,6 +31,7 @@ import {
 	useRef,
 	useState,
 } from '@wordpress/element';
+import { chevronDown, chevronUp } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -43,10 +44,12 @@ import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
 import {
+	Icon,
 	ResizableBox,
 	SlotFillProvider,
 	Tooltip,
 	VisuallyHidden,
+	__unstableUseNavigateRegions as useNavigateRegions,
 } from '@wordpress/components';
 import {
 	useMediaQuery,
@@ -75,7 +78,7 @@ import useNavigateToEntityRecord from '../../hooks/use-navigate-to-entity-record
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const { Editor, FullscreenMode } = unlock( editorPrivateApis );
+const { Editor, FullscreenMode, NavigableRegion } = unlock( editorPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 const DESIGN_POST_TYPES = [
 	'wp_template',
@@ -183,7 +186,7 @@ function MetaBoxesMain( { isLegacy } ) {
 		];
 	}, [] );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const resizableBoxRef = useRef();
+	const metaBoxesMainRef = useRef();
 	const isShort = useMediaQuery( '(max-height: 549px)' );
 
 	const [ { min, max }, setHeightConstraints ] = useState( () => ( {} ) );
@@ -198,9 +201,9 @@ function MetaBoxesMain( { isLegacy } ) {
 			':scope > .components-notice-list'
 		);
 		const resizeHandle = container.querySelector(
-			'.edit-post-meta-boxes-main__resize-handle'
+			'.edit-post-meta-boxes-main__presenter'
 		);
-		const actualize = () => {
+		const deriveConstraints = () => {
 			const fullHeight = container.offsetHeight;
 			let nextMax = fullHeight;
 			for ( const element of noticeLists ) {
@@ -209,7 +212,7 @@ function MetaBoxesMain( { isLegacy } ) {
 			const nextMin = resizeHandle.offsetHeight;
 			setHeightConstraints( { min: nextMin, max: nextMax } );
 		};
-		const observer = new window.ResizeObserver( actualize );
+		const observer = new window.ResizeObserver( deriveConstraints );
 		observer.observe( container );
 		for ( const element of noticeLists ) {
 			observer.observe( element );
@@ -221,12 +224,33 @@ function MetaBoxesMain( { isLegacy } ) {
 	const separatorHelpId = useId();
 
 	const [ isUntouched, setIsUntouched ] = useState( true );
+	const applyHeight = ( candidateHeight, isPersistent, isInstant ) => {
+		const nextHeight = Math.min( max, Math.max( min, candidateHeight ) );
+		if ( isPersistent ) {
+			setPreference(
+				'core/edit-post',
+				'metaBoxesMainOpenHeight',
+				nextHeight
+			);
+		} else {
+			separatorRef.current.ariaValueNow = getAriaValueNow( nextHeight );
+		}
+		if ( isInstant ) {
+			metaBoxesMainRef.current.updateSize( {
+				height: nextHeight,
+				// 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',
+			} );
+		}
+	};
 
 	if ( ! hasAnyVisible ) {
 		return;
 	}
 
-	const className = 'edit-post-meta-boxes-main';
 	const contents = (
 		<div
 			className={ clsx(
@@ -234,6 +258,7 @@ function MetaBoxesMain( { isLegacy } ) {
 				'edit-post-layout__metaboxes',
 				! isLegacy && 'edit-post-meta-boxes-main__liner'
 			) }
+			hidden={ ! isLegacy && isShort && ! isOpen }
 		>
 			<MetaBoxes location="normal" />
 			<MetaBoxes location="advanced" />
@@ -256,59 +281,39 @@ function MetaBoxesMain( { isLegacy } ) {
 	const usedAriaValueNow =
 		max === undefined || isAutoHeight ? 50 : getAriaValueNow( openHeight );
 
-	if ( isShort ) {
-		return (
-			<details
-				className={ className }
-				open={ isOpen }
-				onToggle={ ( { target } ) => {
-					setPreference(
-						'core/edit-post',
-						'metaBoxesMainIsOpen',
-						target.open
-					);
-				} }
-			>
-				<summary>{ __( 'Meta Boxes' ) }</summary>
-				{ contents }
-			</details>
-		);
-	}
+	const toggle = () =>
+		setPreference( 'core/edit-post', 'metaBoxesMainIsOpen', ! isOpen );
 
 	// 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 { resizable } = resizableBoxRef.current;
-			const fromHeight = isAutoHeight
-				? resizable.offsetHeight
-				: openHeight;
-			const nextHeight = Math.min(
-				max,
-				Math.max( min, delta + fromHeight )
-			);
-			resizableBoxRef.current.updateSize( {
-				height: nextHeight,
-				// Oddly, if left unspecified a subsequent drag gesture applies a fixed
-				// width and the pane fails to shrink/grow with parent width changes from
-				// sidebars opening/closing or window resizes.
-				width: 'auto',
-			} );
-			setPreference(
-				'core/edit-post',
-				'metaBoxesMainOpenHeight',
-				nextHeight
-			);
+			const pane = metaBoxesMainRef.current.resizable;
+			const fromHeight = isAutoHeight ? pane.offsetHeight : openHeight;
+			const nextHeight = delta + fromHeight;
+			applyHeight( nextHeight, true, true );
+			event.preventDefault();
 		}
 	};
-
-	return (
-		<ResizableBox
-			className={ className }
-			defaultSize={ { height: openHeight } }
-			ref={ resizableBoxRef }
-			enable={ {
+	const className = 'edit-post-meta-boxes-main';
+	const paneLabel = __( 'Meta Boxes' );
+	let Pane, paneProps;
+	if ( isShort ) {
+		Pane = NavigableRegion;
+		paneProps = {
+			className: clsx( className, 'is-toggle-only' ),
+		};
+	} else {
+		Pane = ResizableBox;
+		paneProps = /** @type {Parameters<typeof ResizableBox>[0]} */ ( {
+			as: NavigableRegion,
+			ref: metaBoxesMainRef,
+			className: clsx( className, 'is-resizable' ),
+			defaultSize: { height: openHeight },
+			minHeight: min,
+			maxHeight: usedMax,
+			enable: {
 				top: true,
 				right: false,
 				bottom: false,
@@ -317,72 +322,66 @@ function MetaBoxesMain( { isLegacy } ) {
 				topRight: false,
 				bottomRight: false,
 				bottomLeft: false,
-			} }
-			minHeight={ min }
-			maxHeight={ usedMax }
-			bounds="parent"
-			boundsByDirection
-			// 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 } ) => {
-				target.setPointerCapture( pointerId );
-			} }
-			onResizeStart={ ( event, direction, elementRef ) => {
-				if ( isAutoHeight ) {
-					const heightNow = elementRef.offsetHeight;
-					// Sets the starting height to avoid visual jumps in height and
-					// aria-valuenow being `NaN` for the first (few) resize events.
-					resizableBoxRef.current.updateSize( { height: heightNow } );
-					// Causes `maxHeight` to update to full `max` value instead of half.
-					setIsUntouched( false );
-				}
-			} }
-			onResize={ () => {
-				const { height } = resizableBoxRef.current.state;
-				const separator = separatorRef.current;
-				separator.ariaValueNow = getAriaValueNow( height );
-			} }
-			onResizeStop={ () => {
-				const nextHeight = resizableBoxRef.current.state.height;
-				setPreference(
-					'core/edit-post',
-					'metaBoxesMainOpenHeight',
-					nextHeight
-				);
-			} }
-			handleClasses={ {
-				top: 'edit-post-meta-boxes-main__resize-handle',
-			} }
-			handleComponent={ {
+			},
+			handleClasses: { top: 'edit-post-meta-boxes-main__presenter' },
+			handleComponent: {
 				top: (
 					<>
 						<Tooltip text={ __( 'Drag to resize' ) }>
-							{ /* Disable reason: aria-valuenow is supported by separator role. */ }
-							{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
-							<button
+							<button // eslint-disable-line jsx-a11y/role-supports-aria-props
 								ref={ separatorRef }
+								role="separator" // eslint-disable-line jsx-a11y/no-interactive-element-to-noninteractive-role
+								aria-valuenow={ usedAriaValueNow }
 								aria-label={ __( 'Drag to resize' ) }
 								aria-describedby={ separatorHelpId }
 								onKeyDown={ onSeparatorKeyDown }
-								// Disable reason: buttons are allowed to be separator role.
-								// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
-								role="separator"
-								aria-valuenow={ usedAriaValueNow }
 							/>
 						</Tooltip>
 						<VisuallyHidden id={ separatorHelpId }>
 							{ __(
-								'Use up and down arrow keys to resize the metabox panel.'
+								'Use up and down arrow keys to resize the metabox pane.'
 							) }
 						</VisuallyHidden>
 					</>
 				),
-			} }
-		>
-			<meta ref={ effectSizeConstraints } />
+			},
+			// 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 } ) => {
+				target.setPointerCapture( pointerId );
+			},
+			onResizeStart: ( event, 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 );
+					setIsUntouched( false );
+				}
+			},
+			onResize: () =>
+				applyHeight( metaBoxesMainRef.current.state.height ),
+			onResizeStop: () =>
+				applyHeight( metaBoxesMainRef.current.state.height, true ),
+		} );
+	}
+
+	return (
+		<Pane aria-label={ paneLabel } { ...paneProps }>
+			{ isShort ? (
+				<button
+					aria-expanded={ isOpen }
+					className="edit-post-meta-boxes-main__presenter"
+					onClick={ toggle }
+				>
+					{ paneLabel }
+					<Icon icon={ isOpen ? chevronUp : chevronDown } />
+				</button>
+			) : (
+				<meta ref={ effectSizeConstraints } />
+			) }
 			{ contents }
-		</ResizableBox>
+		</Pane>
 	);
 }
 
@@ -482,6 +481,8 @@ function Layout( {
 		document.body.classList.remove( 'show-icon-labels' );
 	}
 
+	const navigateRegionsProps = useNavigateRegions();
+
 	const className = clsx( 'edit-post-layout', 'is-mode-' + mode, {
 		'has-metaboxes': hasActiveMetaboxes,
 	} );
@@ -567,47 +568,53 @@ function Layout( {
 			<ErrorBoundary>
 				<CommandMenu />
 				<WelcomeGuide postType={ currentPostType } />
-				<Editor
-					settings={ editorSettings }
-					initialEdits={ initialEdits }
-					postType={ currentPostType }
-					postId={ currentPostId }
-					templateId={ templateId }
-					className={ className }
-					styles={ styles }
-					forceIsDirty={ hasActiveMetaboxes }
-					contentRef={ paddingAppenderRef }
-					disableIframe={ ! shouldIframe }
-					// We should auto-focus the canvas (title) on load.
-					// eslint-disable-next-line jsx-a11y/no-autofocus
-					autoFocus={ ! isWelcomeGuideVisible }
-					onActionPerformed={ onActionPerformed }
-					extraSidebarPanels={
-						showMetaBoxes && <MetaBoxes location="side" />
-					}
-					extraContent={
-						! isDistractionFree &&
-						showMetaBoxes && (
-							<MetaBoxesMain isLegacy={ ! shouldIframe } />
-						)
-					}
+				<div
+					className={ navigateRegionsProps.className }
+					{ ...navigateRegionsProps }
+					ref={ navigateRegionsProps.ref }
 				>
-					<PostLockedModal />
-					<EditorInitialization />
-					<FullscreenMode isActive={ isFullscreenActive } />
-					<BrowserURL hasHistory={ hasHistory } />
-					<UnsavedChangesWarning />
-					<AutosaveMonitor />
-					<LocalAutosaveMonitor />
-					<EditPostKeyboardShortcuts />
-					<EditorKeyboardShortcutsRegister />
-					<BlockKeyboardShortcuts />
-					<InitPatternModal />
-					<PluginArea onError={ onPluginAreaError } />
-					<PostEditorMoreMenu />
-					{ backButton }
-					<EditorSnackbars />
-				</Editor>
+					<Editor
+						settings={ editorSettings }
+						initialEdits={ initialEdits }
+						postType={ currentPostType }
+						postId={ currentPostId }
+						templateId={ templateId }
+						className={ className }
+						styles={ styles }
+						forceIsDirty={ hasActiveMetaboxes }
+						contentRef={ paddingAppenderRef }
+						disableIframe={ ! shouldIframe }
+						// We should auto-focus the canvas (title) on load.
+						// eslint-disable-next-line jsx-a11y/no-autofocus
+						autoFocus={ ! isWelcomeGuideVisible }
+						onActionPerformed={ onActionPerformed }
+						extraSidebarPanels={
+							showMetaBoxes && <MetaBoxes location="side" />
+						}
+						extraContent={
+							! isDistractionFree &&
+							showMetaBoxes && (
+								<MetaBoxesMain isLegacy={ ! shouldIframe } />
+							)
+						}
+					>
+						<PostLockedModal />
+						<EditorInitialization />
+						<FullscreenMode isActive={ isFullscreenActive } />
+						<BrowserURL hasHistory={ hasHistory } />
+						<UnsavedChangesWarning />
+						<AutosaveMonitor />
+						<LocalAutosaveMonitor />
+						<EditPostKeyboardShortcuts />
+						<EditorKeyboardShortcutsRegister />
+						<BlockKeyboardShortcuts />
+						<InitPatternModal />
+						<PluginArea onError={ onPluginAreaError } />
+						<PostEditorMoreMenu />
+						{ backButton }
+						<EditorSnackbars />
+					</Editor>
+				</div>
 			</ErrorBoundary>
 		</SlotFillProvider>
 	);

package/src/components/layout/style.scss

@@ -1,71 +1,111 @@
-$resize-handle-height: $grid-unit-30;
-
 .edit-post-meta-boxes-main {
 	filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.
+	// Windows High Contrast mode will show this outline, but not the shadow.
+	outline: 1px solid transparent;
 	background-color: $white;
-	clear: both; // This is seemingly only needed in case the canvas is not iframe’d.
-
-	&:not(details) {
-		padding-top: $resize-handle-height;
-	}
-
-	// The component renders as a details element in short viewports.
-	&:is(details) {
-		& > summary {
-			cursor: pointer;
-			color: $gray-900;
-			background-color: $white;
-			height: $button-size-compact;
-			line-height: $button-size-compact;
-			font-size: 13px;
-			padding-left: $grid-unit-30;
-			box-shadow: 0 $border-width $gray-300;
-		}
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
 
-		&[open] > summary {
-			position: sticky;
-			top: 0;
-			z-index: 1;
-		}
+	&.is-resizable {
+		padding-block-start: $grid-unit-30;
 	}
 }
 
-.edit-post-meta-boxes-main__resize-handle {
+.edit-post-meta-boxes-main__presenter {
 	display: flex;
-	// The position is absolute by default inline style of ResizableBox.
-	inset: 0 0 auto 0;
-	height: $resize-handle-height;
 	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;
+	z-index: 1;
 
-	& > button {
+	// Button style reset for both toggle or resizable.
+	.is-toggle-only > &,
+	.is-resizable.edit-post-meta-boxes-main & > button {
 		appearance: none;
-		cursor: inherit;
-		margin: auto;
 		padding: 0;
 		border: none;
 		outline: none;
-		background-color: $gray-300;
-		width: $grid-unit-80;
-		height: $grid-unit-05;
-		border-radius: $radius-small;
-		transition: width 0.3s ease-out;
-		@include reduce-motion("transition");
+		background-color: transparent;
 	}
 
-	&:hover > button,
-	> button:focus {
-		background-color: var(--wp-admin-theme-color);
-		width: $grid-unit-80 + $grid-unit-20;
+	.is-toggle-only > & {
+		flex-shrink: 0;
+		cursor: pointer;
+		height: $button-size-compact;
+		justify-content: space-between;
+		align-items: center;
+		padding-inline: $grid-unit-30 $grid-unit-15;
+
+		&:is(:hover, :focus-visible) {
+			color: var(--wp-admin-theme-color);
+		}
+		&:focus-visible::after {
+			content: "";
+			position: absolute;
+			inset: var(--wp-admin-border-width-focus);
+			@include button-style__focus();
+		}
+		> svg {
+			fill: currentColor;
+		}
+	}
+
+	.is-resizable.edit-post-meta-boxes-main & {
+		inset: 0 0 auto;
+
+		> button {
+			cursor: inherit;
+			width: $grid-unit-80;
+			height: $grid-unit-30;
+			margin: auto;
+
+			&::before {
+				content: "";
+				background-color: $gray-300;
+				// Windows High Contrast mode will show this outline, but not the background-color.
+				outline: 2px solid transparent;
+				outline-offset: -2px;
+				position: absolute;
+				inset-block: calc(50% - #{$grid-unit-05} / 2) auto;
+				transform: translateX(-50%);
+				width: inherit;
+				height: $grid-unit-05;
+				border-radius: $radius-small;
+				transition: width 0.3s ease-out;
+				@include reduce-motion("transition");
+			}
+		}
+
+		&:is(:hover, :focus-within) > button::before {
+			background-color: var(--wp-admin-theme-color);
+			width: $grid-unit-80 + $grid-unit-20;
+		}
+	}
+}
+
+@media (pointer: coarse) {
+	.is-resizable.edit-post-meta-boxes-main {
+		padding-block-start: $button-size-compact;
+
+		.edit-post-meta-boxes-main__presenter > button {
+			height: $button-size-compact;
+		}
 	}
 }
 
 .edit-post-meta-boxes-main__liner {
 	overflow: auto;
-	max-height: 100%;
 	// Keep the contents behind the resize handle or details summary.
 	isolation: isolate;
 }
 
+// In case the canvas is not iframe’d.
+.edit-post-layout__metaboxes {
+	clear: both;
+}
+
 .has-metaboxes .editor-visual-editor {
 	flex: 1;
 

package/src/components/layout/use-padding-appender.js

@@ -11,7 +11,13 @@ export function usePaddingAppender() {
 	return useRefEffect(
 		( node ) => {
 			function onMouseDown( event ) {
-				if ( event.target !== node ) {
+				if (
+					event.target !== node &&
+					// Tests for the parent element because in the iframed editor if the click is
+					// below the padding the target will be the parent element (html) and should
+					// still be treated as intent to append.
+					event.target !== node.parentElement
+				) {
 					return;
 				}
 
@@ -38,7 +44,7 @@ export function usePaddingAppender() {
 					return;
 				}
 
-				event.stopPropagation();
+				event.preventDefault();
 
 				const blockOrder = registry
 					.select( blockEditorStore )
@@ -57,9 +63,12 @@ export function usePaddingAppender() {
 					insertDefaultBlock();
 				}
 			}
-			node.addEventListener( 'mousedown', onMouseDown );
+			const { ownerDocument } = node;
+			// Adds the listener on the document so that in the iframed editor clicks below the
+			// padding can be handled as they too should be treated as intent to append.
+			ownerDocument.addEventListener( 'mousedown', onMouseDown );
 			return () => {
-				node.removeEventListener( 'mousedown', onMouseDown );
+				ownerDocument.removeEventListener( 'mousedown', onMouseDown );
 			};
 		},
 		[ registry ]

package/src/index.js

@@ -28,7 +28,6 @@ import { unlock } from './lock-unlock';
 const {
 	BackButton: __experimentalMainDashboardButton,
 	registerCoreBlockBindingsSources,
-	bootstrapBlockBindingsSourcesFromServer,
 } = unlock( editorPrivateApis );
 
 /**
@@ -95,7 +94,6 @@ export function initializeEditor(
 	}
 
 	registerCoreBlocks();
-	bootstrapBlockBindingsSourcesFromServer( settings?.blockBindingsSources );
 	registerCoreBlockBindingsSources();
 	registerLegacyWidgetBlock( { inserter: false } );
 	registerWidgetGroupBlock( { inserter: false } );

package/src/store/actions.js

@@ -481,7 +481,7 @@ export const initializeMetaBoxes =
 		addAction(
 			'editor.savePost',
 			'core/edit-post/save-metaboxes',
-			async ( options ) => {
+			async ( post, options ) => {
 				if ( ! options.isAutosave && select.hasMetaBoxes() ) {
 					await dispatch.requestMetaBoxUpdates();
 				}