@wordpress/edit-post 8.45.1-next.v.202605131032.0 → 8.47.0

package/src/components/back-button/fullscreen-mode-close.js

@@ -9,12 +9,18 @@ import clsx from 'clsx';
 import { useSelect } from '@wordpress/data';
 import {
 	Button,
-	Icon,
+	Icon as WCIcon,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import { wordpress, arrowUpLeft } from '@wordpress/icons';
+import {
+	wordpress,
+	arrowUpLeft,
+	arrowUpRight,
+	chevronLeft,
+	chevronRight,
+} from '@wordpress/icons';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { useReducedMotion } from '@wordpress/compose';
@@ -90,7 +96,7 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 		);
 	} else {
 		siteIconContent = (
-			<Icon
+			<WCIcon
 				className="edit-post-fullscreen-mode-close-site-icon__icon"
 				icon={ wordpress }
 				size={ 48 }
@@ -100,7 +106,7 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 
 	// Override default icon if custom icon is provided via props.
 	const buttonIcon = icon ? (
-		<Icon size="36px" icon={ icon } />
+		<WCIcon size="36px" icon={ icon } />
 	) : (
 		<div className="edit-post-fullscreen-mode-close-site-icon">
 			{ siteIconContent }
@@ -119,6 +125,8 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 
 	const buttonLabel = postType?.labels?.view_items ?? __( 'Back' );
 
+	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
+
 	return (
 		<motion.div
 			className="edit-post-fullscreen-mode-close__view-mode-toggle"
@@ -136,23 +144,33 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 				showTooltip={ showTooltip }
 				tooltipPosition="bottom"
 			>
-				<motion.div variants={ ! disableMotion && siteIconVariants }>
-					<div className="edit-post-fullscreen-mode-close__view-mode-toggle-icon">
-						{ buttonIcon }
-					</div>
-				</motion.div>
-			</Button>
-			<motion.div
-				className={ clsx(
-					'edit-post-fullscreen-mode-close__back-icon',
-					{
-						'has-site-icon': siteIconUrl,
-					}
+				{ ! hasAdminBarInEditor && (
+					<motion.div
+						variants={ ! disableMotion && siteIconVariants }
+					>
+						<div className="edit-post-fullscreen-mode-close__view-mode-toggle-icon">
+							{ buttonIcon }
+						</div>
+					</motion.div>
 				) }
-				variants={ ! disableMotion && toggleHomeIconVariants }
-			>
-				<Icon icon={ arrowUpLeft } />
-			</motion.div>
+			</Button>
+			{ hasAdminBarInEditor ? (
+				<div className="edit-post-fullscreen-mode-close__back-icon">
+					<WCIcon icon={ isRTL() ? chevronRight : chevronLeft } />
+				</div>
+			) : (
+				<motion.div
+					className={ clsx(
+						'edit-post-fullscreen-mode-close__back-icon',
+						{
+							'has-site-icon': siteIconUrl,
+						}
+					) }
+					variants={ ! disableMotion && toggleHomeIconVariants }
+				>
+					<WCIcon icon={ isRTL() ? arrowUpRight : arrowUpLeft } />
+				</motion.div>
+			) }
 		</motion.div>
 	);
 }

package/src/components/layout/index.js

@@ -38,9 +38,8 @@ import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
 import {
-	Icon,
+	Icon as WCIcon,
 	SlotFillProvider,
-	Tooltip,
 	__unstableUseNavigateRegions as useNavigateRegions,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
@@ -50,7 +49,8 @@ import {
 	useRefEffect,
 	useViewportMatch,
 } from '@wordpress/compose';
-import { VisuallyHidden } from '@wordpress/ui';
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip, VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -162,8 +162,8 @@ function MetaBoxesMain( { isLegacy } ) {
 		if ( ! container ) {
 			return;
 		}
-		const noticeLists = container.querySelectorAll(
-			':scope > .components-notice-list'
+		const noticeContainer = container.querySelector(
+			':scope > .notices-inline-notices-wrapper'
 		);
 		const resizeHandle = container.querySelector(
 			'.edit-post-meta-boxes-main__presenter'
@@ -171,16 +171,16 @@ function MetaBoxesMain( { isLegacy } ) {
 		const deriveConstraints = () => {
 			const fullHeight = container.offsetHeight;
 			let nextMax = fullHeight;
-			for ( const element of noticeLists ) {
-				nextMax -= element.offsetHeight;
+			if ( noticeContainer ) {
+				nextMax -= noticeContainer.offsetHeight;
 			}
-			const nextMin = resizeHandle.offsetHeight;
+			const nextMin = resizeHandle?.offsetHeight ?? 0;
 			setHeightConstraints( { min: nextMin, max: nextMax } );
 		};
 		const observer = new window.ResizeObserver( deriveConstraints );
 		observer.observe( container );
-		for ( const element of noticeLists ) {
-			observer.observe( element );
+		if ( noticeContainer ) {
+			observer.observe( noticeContainer );
 		}
 		return () => observer.disconnect();
 	}, [] );
@@ -321,23 +321,28 @@ function MetaBoxesMain( { isLegacy } ) {
 			{ ...( ! isShort && bindDragGesture( persistIsOpen ) ) }
 		>
 			{ paneLabel }
-			<Icon icon={ isOpen ? chevronUp : chevronDown } />
+			<WCIcon icon={ isOpen ? chevronUp : chevronDown } />
 		</button>
 	);
 
 	// The separator button that provides a11y for resizing.
 	const separator = ! isShort && (
 		<>
-			<Tooltip text={ __( 'Drag to resize' ) }>
-				<button
-					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 }
-					{ ...bindDragGesture() }
+			<Tooltip.Root>
+				<Tooltip.Trigger
+					render={
+						<button
+							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 }
+							{ ...bindDragGesture() }
+						/>
+					}
 				/>
-			</Tooltip>
+				<Tooltip.Popup>{ __( 'Drag to resize' ) }</Tooltip.Popup>
+			</Tooltip.Root>
 			<VisuallyHidden id={ separatorHelpId }>
 				{ __(
 					'Use up and down arrow keys to resize the meta box pane.'
@@ -572,52 +577,56 @@ function Layout( {
 
 	return (
 		<SlotFillProvider>
-			<ErrorBoundary canCopyContent>
-				<WelcomeGuide postType={ currentPostType } />
-				<div { ...navigateRegionsProps }>
-					<Editor
-						settings={ editorSettings }
-						initialEdits={ initialEdits }
-						postType={ currentPostType }
-						postId={ currentPostId }
-						templateId={ templateId }
-						className={ className }
-						forceIsDirty={ hasActiveMetaboxes }
-						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={ isDevicePreview } />
-							)
-						}
-					>
-						<PostLockedModal />
-						<EditorInitialization />
-						<FullscreenMode isActive={ isFullscreenActive } />
-						<BrowserURL />
-						<UnsavedChangesWarning />
-						<AutosaveMonitor />
-						<LocalAutosaveMonitor />
-						<EditPostKeyboardShortcuts />
-						<EditorKeyboardShortcutsRegister />
-						<BlockKeyboardShortcuts />
-						{ currentPostType === 'wp_block' && (
-							<InitPatternModal />
-						) }
-						<PluginArea onError={ onPluginAreaError } />
-						<PostEditorMoreMenu />
-						{ backButton }
-						<SnackbarNotices className="edit-post-layout__snackbar" />
-					</Editor>
-				</div>
-			</ErrorBoundary>
+			<Tooltip.Provider>
+				<ErrorBoundary canCopyContent>
+					<WelcomeGuide postType={ currentPostType } />
+					<div { ...navigateRegionsProps }>
+						<Editor
+							settings={ editorSettings }
+							initialEdits={ initialEdits }
+							postType={ currentPostType }
+							postId={ currentPostId }
+							templateId={ templateId }
+							className={ className }
+							forceIsDirty={ hasActiveMetaboxes }
+							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={ isDevicePreview }
+									/>
+								)
+							}
+						>
+							<PostLockedModal />
+							<EditorInitialization />
+							<FullscreenMode isActive={ isFullscreenActive } />
+							<BrowserURL />
+							<UnsavedChangesWarning />
+							<AutosaveMonitor />
+							<LocalAutosaveMonitor />
+							<EditPostKeyboardShortcuts />
+							<EditorKeyboardShortcutsRegister />
+							<BlockKeyboardShortcuts />
+							{ currentPostType === 'wp_block' && (
+								<InitPatternModal />
+							) }
+							<PluginArea onError={ onPluginAreaError } />
+							<PostEditorMoreMenu />
+							{ backButton }
+							<SnackbarNotices className="edit-post-layout__snackbar" />
+						</Editor>
+					</div>
+				</ErrorBoundary>
+			</Tooltip.Provider>
 		</SlotFillProvider>
 	);
 }

package/src/components/layout/index.native.js

@@ -19,7 +19,7 @@ import {
 	HTMLTextInput,
 	KeyboardAvoidingView,
 	NoticeList,
-	Tooltip,
+	Tooltip as WCTooltip,
 	__unstableAutocompletionItemsSlot as AutocompletionItemsSlot,
 } from '@wordpress/components';
 import {
@@ -145,7 +145,7 @@ class Layout extends Component {
 		];
 
 		return (
-			<Tooltip.Slot>
+			<WCTooltip.Slot>
 				<SafeAreaView
 					style={ containerStyles }
 					onLayout={ this.onRootViewLayout }
@@ -184,7 +184,7 @@ class Layout extends Component {
 					) }
 					{ Platform.OS === 'android' && <AutocompletionItemsSlot /> }
 				</SafeAreaView>
-			</Tooltip.Slot>
+			</WCTooltip.Slot>
 		);
 	}
 }

package/src/components/meta-boxes/meta-boxes-area/index.js

@@ -54,7 +54,9 @@ function MetaBoxesArea( { location } ) {
 
 	return (
 		<div className={ classes }>
-			{ isSaving && <Spinner /> }
+			{ isSaving && (
+				<Spinner className="edit-post-meta-boxes-area__spinner" />
+			) }
 			<div
 				className="edit-post-meta-boxes-area__container"
 				ref={ container }

package/src/components/meta-boxes/meta-boxes-area/style.scss

@@ -1,6 +1,5 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 
 .edit-post-meta-boxes-area {
 	position: relative;
@@ -64,6 +63,7 @@
 		width: 44px;
 	}
 
+	// Block interaction with meta boxes while they are being saved.
 	&.is-loading::before {
 		position: absolute;
 		top: 0;
@@ -72,14 +72,14 @@
 		bottom: 0;
 		content: "";
 		background: transparent;
-		z-index: z-index(".edit-post-meta-boxes-area.is-loading::before");
+		z-index: 1;
 	}
 
-	.components-spinner {
+	.edit-post-meta-boxes-area__spinner {
 		position: absolute;
 		top: 10px;
 		right: 20px;
-		z-index: z-index(".edit-post-meta-boxes-area .spinner");
+		z-index: 2; // Stack above the .is-loading::before overlay.
 	}
 
 	// Hide disabled meta boxes using CSS so that we don't interfere with plugins

package/src/components/meta-boxes/test/use-meta-box-initialization.js

@@ -35,6 +35,10 @@ const initializeMetaBoxes = jest.fn( () => ( {
 	type: 'META_BOXES_INITIALIZED',
 } ) );
 
+const updateEditorSettings = jest.fn( () => ( {
+	type: 'UPDATE_EDITOR_SETTINGS',
+} ) );
+
 function createMockStores( {
 	isEditorReady = true,
 	isCollaborationEnabled = true,
@@ -43,6 +47,10 @@ function createMockStores( {
 	return {
 		'core/editor': {
 			...storeConfig,
+			actions: {
+				...storeConfig.actions,
+				updateEditorSettings,
+			},
 			selectors: {
 				__unstableIsEditorReady: jest.fn( () => isEditorReady ),
 				isCollaborationEnabledForCurrentPost: jest.fn(
@@ -91,6 +99,7 @@ describe( 'useMetaBoxInitialization', () => {
 	afterEach( () => {
 		setCollaborationSupported.mockClear();
 		initializeMetaBoxes.mockClear();
+		updateEditorSettings.mockClear();
 	} );
 
 	it( 'disables collaboration when metaboxes are present', () => {
@@ -188,4 +197,26 @@ describe( 'useMetaBoxInitialization', () => {
 
 		expect( setCollaborationSupported ).not.toHaveBeenCalled();
 	} );
+
+	it( 'disables visual revisions when metaboxes are present', () => {
+		const mockStores = createMockStores( {
+			metaBoxes: [ { id: 'my-metabox', title: 'My Meta Box' } ],
+		} );
+		const registry = createRegistry( mockStores );
+
+		renderHook( registry );
+
+		expect( updateEditorSettings ).toHaveBeenCalledWith( {
+			disableVisualRevisions: true,
+		} );
+	} );
+
+	it( 'does not disable visual revisions when there are no metaboxes', () => {
+		const mockStores = createMockStores( { metaBoxes: [] } );
+		const registry = createRegistry( mockStores );
+
+		renderHook( registry );
+
+		expect( updateEditorSettings ).not.toHaveBeenCalled();
+	} );
 } );

package/src/components/meta-boxes/use-meta-box-initialization.js

@@ -22,21 +22,29 @@ export const useMetaBoxInitialization = ( enabled ) => {
 		isEnabledAndEditorReady,
 		isCollaborationEnabled,
 		hasIncompatibleMetaBoxes,
+		hasActiveMetaBoxes,
 	} = useSelect(
-		( select ) => ( {
-			isEnabledAndEditorReady:
-				enabled && select( editorStore ).__unstableIsEditorReady(),
-			isCollaborationEnabled:
-				select( editorStore ).isCollaborationEnabledForCurrentPost(),
-			hasIncompatibleMetaBoxes: enabled
-				? select( editPostStore )
-						.getAllMetaBoxes()
-						.some( ( metaBox ) => ! metaBox.__rtc_compatible )
-				: false,
-		} ),
+		( select ) => {
+			const {
+				__unstableIsEditorReady,
+				isCollaborationEnabledForCurrentPost,
+			} = unlock( select( editorStore ) );
+			return {
+				isEnabledAndEditorReady: enabled && __unstableIsEditorReady(),
+				isCollaborationEnabled: isCollaborationEnabledForCurrentPost(),
+				hasIncompatibleMetaBoxes: enabled
+					? select( editPostStore )
+							.getAllMetaBoxes()
+							.some( ( metaBox ) => ! metaBox.__rtc_compatible )
+					: false,
+				hasActiveMetaBoxes:
+					enabled && select( editPostStore ).hasMetaBoxes(),
+			};
+		},
 		[ enabled ]
 	);
 	const { setCollaborationSupported } = unlock( useDispatch( coreStore ) );
+	const { updateEditorSettings } = useDispatch( editorStore );
 	const { initializeMetaBoxes } = useDispatch( editPostStore );
 
 	// The effect has to rerun when the editor is ready because initializeMetaBoxes
@@ -49,6 +57,15 @@ export const useMetaBoxInitialization = ( enabled ) => {
 			if ( isCollaborationEnabled && hasIncompatibleMetaBoxes ) {
 				setCollaborationSupported( false );
 			}
+
+			// Classic meta box values are saved through a separate
+			// admin-ajax submission that the in-editor revisions restore
+			// does not drive, so visual revisions would silently leave
+			// them untouched. Fall back to the classic revision.php
+			// admin screen instead.
+			if ( hasActiveMetaBoxes ) {
+				updateEditorSettings( { disableVisualRevisions: true } );
+			}
 		}
 	}, [
 		isEnabledAndEditorReady,
@@ -56,5 +73,7 @@ export const useMetaBoxInitialization = ( enabled ) => {
 		isCollaborationEnabled,
 		setCollaborationSupported,
 		hasIncompatibleMetaBoxes,
+		hasActiveMetaBoxes,
+		updateEditorSettings,
 	] );
 };

package/src/experimental-admin-bar-in-editor.scss

@@ -0,0 +1,67 @@
+// Styles for the experimental admin bar in editor.
+
+body.has-admin-bar-in-editor {
+	.edit-post-fullscreen-mode-close__view-mode-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+
+		.edit-post-fullscreen-mode-close__back-icon {
+			top: auto;
+			left: auto;
+			width: 32px;
+			height: 32px;
+			background: transparent;
+		}
+
+		&:hover .edit-post-fullscreen-mode-close__back-icon {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
+	&.is-fullscreen-mode {
+		.editor-header:has(> .editor-header__back-button) {
+			grid-template-columns: 32px minmax(0, max-content) minmax(min-content, 1fr) 64px;
+		}
+
+		.editor-header:has(> .editor-header__back-button):has(> .editor-header__center) {
+			grid-template-columns: 32px min-content 1fr min-content 64px;
+		}
+
+		.editor-header__back-button {
+			padding-left: 8px;
+		}
+	}
+
+	@media (min-width: 782px) {
+		&.is-fullscreen-mode {
+			margin-top: 0;
+			height: 100%;
+
+			#wpadminbar {
+				display: block;
+			}
+
+			.interface-interface-skeleton,
+			.editor-post-publish-panel,
+			.is-entity-save-view-open .interface-interface-skeleton__actions:focus,
+			.is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
+				top: var(--wp-admin--admin-bar--height, 0);
+			}
+
+			.block-editor__container {
+				min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
+			}
+
+			&:has(.editor-editor-interface.is-distraction-free) {
+				--wp-admin--admin-bar--height: 0;
+
+				#wpadminbar {
+					display: none;
+				}
+			}
+		}
+	}
+}