@wordpress/edit-post 8.46.0 → 8.47.0

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/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;
+				}
+			}
+		}
+	}
+}

package/src/index.js

@@ -8,7 +8,7 @@ import {
 } from '@wordpress/block-library';
 import deprecated from '@wordpress/deprecated';
 import { createRoot, StrictMode } from '@wordpress/element';
-import { dispatch, select } from '@wordpress/data';
+import { dispatch, resolveSelect, select } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	registerLegacyWidgetBlock,
@@ -18,6 +18,8 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { store as coreDataStore } from '@wordpress/core-data';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -30,6 +32,10 @@ const {
 	registerCoreBlockBindingsSources,
 } = unlock( editorPrivateApis );
 
+const { enablePreloadMultiUse, clearPreloadedData } = unlock(
+	apiFetch.privateApis
+);
+
 /**
  * Initializes and returns an instance of Editor.
  *
@@ -150,20 +156,158 @@ export function initializeEditor(
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	root.render(
-		<StrictMode>
-			<Layout
-				settings={ settings }
-				postId={ postId }
-				postType={ postType }
-				initialEdits={ initialEdits }
-			/>
-		</StrictMode>
-	);
+	// Drive the resolvers whose data `createPreloadingMiddleware`
+	// already has cached so every metadata entry they touch is
+	// `finished` by the time React mounts — no `setTimeout(0)`
+	// resolution dance on first render. Multi-use lets a single
+	// preloaded URL back several selectors (e.g. /wp/v2/settings GET +
+	// OPTIONS serves `getEntitiesConfig`, `canUser`, `getEntityRecord`).
+	enablePreloadMultiUse();
+	const preloadedResolutions = preloadResolutions( postType, postId );
+
+	preloadedResolutions.finally( () => {
+		// Anything not consumed by the kickoff falls through to a real
+		// network request from here on. `clearPreloadedData` logs which
+		// preload entries (if any) were never served.
+		clearPreloadedData();
+		if ( postType && postId ) {
+			const post = select( coreDataStore ).getEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+			if ( post ) {
+				dispatch( editorStore ).setupEditor(
+					post,
+					initialEdits,
+					settings.template
+				);
+			}
+		}
+		root.render(
+			<StrictMode>
+				<Layout
+					settings={ settings }
+					postId={ postId }
+					postType={ postType }
+					initialEdits={ initialEdits }
+				/>
+			</StrictMode>
+		);
+	} );
 
 	return root;
 }
 
+/**
+ * Drive resolvers to completion against the preload cache before React
+ * mounts. Two phases: known-up-front args (post id + type), then args
+ * derived from phase-1 state (post slug → template, current global
+ * styles id → record + canUser).
+ *
+ * @param {string} postType Current post type.
+ * @param {number} postId   Current post id.
+ * @return {Promise<void>}  Resolves when the kickoff resolvers settle.
+ */
+async function preloadResolutions( postType, postId ) {
+	const core = resolveSelect( coreDataStore );
+	const coreSelect = select( coreDataStore );
+
+	try {
+		await Promise.all( [
+			core.getCurrentUser(),
+			core.getEntitiesConfig( 'postType' ),
+			core.getEntitiesConfig( 'taxonomy' ),
+			core.getEntitiesConfig( 'root' ),
+			core.getEntityRecords( 'root', 'taxonomy' ),
+			core.getCurrentTheme(),
+			// Forward-resolver alias of `getCurrentTheme` with its own
+			// resolution metadata, so it needs a separate kick.
+			core.getThemeSupports(),
+			core.getBlockPatternCategories(),
+			core.__experimentalGetCurrentGlobalStylesId(),
+			core.__experimentalGetCurrentThemeBaseGlobalStyles(),
+			core.__experimentalGetCurrentThemeGlobalStylesVariations(),
+			core.getEntityRecord( 'root', '__unstableBase' ),
+			core.getEntityRecord( 'root', 'site' ),
+			core.canUser( 'read', { kind: 'root', name: 'site' } ),
+			core.canUser( 'create', { kind: 'postType', name: 'attachment' } ),
+			core.canUser( 'create', { kind: 'postType', name: 'page' } ),
+			core.canUser( 'create', { kind: 'postType', name: 'wp_block' } ),
+			core.canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
+			// Per-post resolvers. `getPostType` and `getEditedEntityRecord`
+			// are shorthand/forward-resolver aliases with their own
+			// resolution metadata, so they need separate kicks.
+			...( postType && postId
+				? [
+						core.getPostType( postType ),
+						core.getEntityRecord( 'postType', postType, postId ),
+						core.getEditedEntityRecord(
+							'postType',
+							postType,
+							postId
+						),
+						core.getAutosaves( postType, postId ),
+						core.getDefaultTemplateId( { slug: 'front-page' } ),
+						core.canUser( 'create', {
+							kind: 'postType',
+							name: postType,
+						} ),
+				  ]
+				: [] ),
+		] );
+
+		// Phase 2: read derived data out of state.
+		const tasks = [];
+		const globalStylesId =
+			coreSelect.__experimentalGetCurrentGlobalStylesId();
+		if ( globalStylesId ) {
+			tasks.push(
+				core.getEntityRecord( 'root', 'globalStyles', globalStylesId ),
+				core.canUser( 'read', {
+					kind: 'root',
+					name: 'globalStyles',
+					id: globalStylesId,
+				} )
+			);
+		}
+
+		if ( postType && postId ) {
+			const post = coreSelect.getEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+			if ( post ) {
+				// Mirrors core-data's `getDefaultTemplate` slug formula.
+				let slug = 'page' === postType ? 'page' : 'single-' + postType;
+				if ( post.slug ) {
+					slug += '-' + post.slug;
+				}
+				tasks.push( core.getDefaultTemplateId( { slug } ) );
+
+				if ( post.author ) {
+					tasks.push(
+						core.getUser( post.author, {
+							context: 'view',
+							_fields: 'id,name',
+						} )
+					);
+				}
+			}
+		}
+
+		if ( tasks.length ) {
+			await Promise.all( tasks );
+		}
+	} catch {
+		// Resolver failures here would also surface on demand; don't block render.
+	}
+}
+
 /**
  * Used to reinitialize the editor after an error. Now it's a deprecated noop function.
  */

package/src/style.scss

@@ -5,6 +5,7 @@
 @use "./components/layout/style.scss" as *;
 @use "./components/meta-boxes/meta-boxes-area/style.scss" as *;
 @use "./components/welcome-guide/style.scss" as *;
+@use "./experimental-admin-bar-in-editor.scss" as *;
 
 body.js.block-editor-page {
 	@include wp-admin-reset( ".block-editor" );