@wordpress/edit-post 8.9.0 → 8.11.0

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',
@@ -84,27 +87,17 @@ const DESIGN_POST_TYPES = [
 	'wp_navigation',
 ];
 
-function useEditorStyles() {
-	const {
-		hasThemeStyleSupport,
-		editorSettings,
-		isZoomedOutView,
-		renderingMode,
-		postType,
-	} = useSelect( ( select ) => {
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const { getCurrentPostType, getRenderingMode } = select( editorStore );
-		const _postType = getCurrentPostType();
+function useEditorStyles( ...additionalStyles ) {
+	const { hasThemeStyleSupport, editorSettings } = useSelect( ( select ) => {
 		return {
 			hasThemeStyleSupport:
 				select( editPostStore ).isFeatureActive( 'themeStyles' ),
 			editorSettings: select( editorStore ).getEditorSettings(),
-			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
-			renderingMode: getRenderingMode(),
-			postType: _postType,
 		};
 	}, [] );
 
+	const addedStyles = additionalStyles.join( '\n' );
+
 	// Compute the default styles.
 	return useMemo( () => {
 		const presetStyles =
@@ -141,19 +134,8 @@ function useEditorStyles() {
 			? editorSettings.styles ?? []
 			: defaultEditorStyles;
 
-		// Add a space for the typewriter effect. When typing in the last block,
-		// there needs to be room to scroll up.
-		if (
-			! isZoomedOutView &&
-			renderingMode === 'post-only' &&
-			! DESIGN_POST_TYPES.includes( postType )
-		) {
-			return [
-				...baseStyles,
-				{
-					css: ':root :where(.editor-styles-wrapper)::after {content: ""; display: block; height: 40vh;}',
-				},
-			];
+		if ( addedStyles ) {
+			return [ ...baseStyles, { css: addedStyles } ];
 		}
 
 		return baseStyles;
@@ -162,7 +144,7 @@ function useEditorStyles() {
 		editorSettings.disableLayoutStyles,
 		editorSettings.styles,
 		hasThemeStyleSupport,
-		postType,
+		addedStyles,
 	] );
 }
 
@@ -183,7 +165,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 +180,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 +191,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 +203,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 +237,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 +260,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 +301,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 meta box panel.'
 							) }
 						</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>
 	);
 }
 
@@ -394,7 +372,6 @@ function Layout( {
 } ) {
 	useCommands();
 	useEditPostCommands();
-	const paddingAppenderRef = usePaddingAppender();
 	const shouldIframe = useShouldIframe();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
@@ -418,6 +395,7 @@ function Layout( {
 		hasHistory,
 		isWelcomeGuideVisible,
 		templateId,
+		enablePaddingAppender,
 	} = useSelect(
 		( select ) => {
 			const { get } = select( preferencesStore );
@@ -433,9 +411,12 @@ function Layout( {
 				kind: 'postType',
 				name: 'wp_template',
 			} );
+			const { isZoomOut } = unlock( select( blockEditorStore ) );
+			const { getEditorMode, getRenderingMode } = select( editorStore );
+			const isRenderingPostOnly = getRenderingMode() === 'post-only';
 
 			return {
-				mode: select( editorStore ).getEditorMode(),
+				mode: getEditorMode(),
 				isFullscreenActive:
 					select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
 				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -445,7 +426,7 @@ function Layout( {
 				isDistractionFree: get( 'core', 'distractionFree' ),
 				showMetaBoxes:
 					! DESIGN_POST_TYPES.includes( currentPostType ) &&
-					select( editorStore ).getRenderingMode() === 'post-only',
+					isRenderingPostOnly,
 				isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 				templateId:
 					supportsTemplateMode &&
@@ -454,10 +435,17 @@ function Layout( {
 					! isEditingTemplate
 						? getEditedPostTemplateId()
 						: null,
+				enablePaddingAppender:
+					! isZoomOut() &&
+					isRenderingPostOnly &&
+					! DESIGN_POST_TYPES.includes( currentPostType ),
 			};
 		},
 		[ currentPostType, isEditingTemplate, settings.supportsTemplateMode ]
 	);
+	const [ paddingAppenderRef, paddingStyle ] = usePaddingAppender(
+		enablePaddingAppender
+	);
 
 	// Set the right context for the command palette
 	const commandContext = hasBlockSelected
@@ -473,7 +461,7 @@ function Layout( {
 		} ),
 		[ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
 	);
-	const styles = useEditorStyles();
+	const styles = useEditorStyles( paddingStyle );
 
 	// We need to add the show-icon-labels class to the body element so it is applied to modals.
 	if ( showIconLabels ) {
@@ -482,6 +470,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,
 	} );
@@ -521,7 +511,7 @@ function Layout( {
 								: newItem.title?.rendered;
 						createSuccessNotice(
 							sprintf(
-								// translators: %s: Title of the created post e.g: "Post 1".
+								// translators: %s: Title of the created post or template, e.g: "Hello world".
 								__( '"%s" successfully created.' ),
 								decodeEntities( title )
 							),
@@ -567,47 +557,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;