@wordpress/edit-site 6.45.1-next.v.202605131032.0 → 6.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.45.1-next.v.202605131032.0+f6d6e7149",
+	"version": "6.47.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -48,51 +48,51 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/admin-ui": "^2.0.2-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/api-fetch": "^7.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/base-styles": "^8.0.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/blob": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/block-editor": "^15.19.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/block-library": "^9.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/blocks": "^15.18.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/commands": "^1.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/components": "^33.1.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/compose": "^7.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/core-data": "^7.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/data": "^10.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/dataviews": "^14.2.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/date": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/deprecated": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/dom": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/editor": "^14.45.2-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/element": "^6.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/escape-html": "^3.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/fields": "^0.37.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/global-styles-engine": "^1.12.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/global-styles-ui": "^1.12.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/hooks": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/html-entities": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/i18n": "^6.18.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/icons": "^13.0.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/keyboard-shortcuts": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/keycodes": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/media-utils": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/notices": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/patterns": "^2.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/plugins": "^7.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/preferences": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/primitives": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/private-apis": "^1.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/reusable-blocks": "^5.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/router": "^1.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/style-engine": "^2.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/ui": "^0.13.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/url": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/viewport": "^6.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/views": "^1.12.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/widgets": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/wordcount": "^4.45.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/a11y": "^4.47.0",
+		"@wordpress/admin-ui": "^2.2.0",
+		"@wordpress/api-fetch": "^7.47.0",
+		"@wordpress/base-styles": "^9.0.0",
+		"@wordpress/blob": "^4.47.0",
+		"@wordpress/block-editor": "^15.20.0",
+		"@wordpress/block-library": "^9.47.0",
+		"@wordpress/blocks": "^15.20.0",
+		"@wordpress/commands": "^1.47.0",
+		"@wordpress/components": "^34.0.0",
+		"@wordpress/compose": "^8.0.0",
+		"@wordpress/core-data": "^7.47.0",
+		"@wordpress/data": "^10.47.0",
+		"@wordpress/dataviews": "^15.0.0",
+		"@wordpress/date": "^5.47.0",
+		"@wordpress/deprecated": "^4.47.0",
+		"@wordpress/dom": "^4.47.0",
+		"@wordpress/editor": "^14.47.0",
+		"@wordpress/element": "^7.0.0",
+		"@wordpress/escape-html": "^3.47.0",
+		"@wordpress/fields": "^0.39.0",
+		"@wordpress/global-styles-engine": "^1.14.0",
+		"@wordpress/global-styles-ui": "^1.14.0",
+		"@wordpress/hooks": "^4.47.0",
+		"@wordpress/html-entities": "^4.47.0",
+		"@wordpress/i18n": "^6.20.0",
+		"@wordpress/icons": "^13.2.0",
+		"@wordpress/keyboard-shortcuts": "^5.47.0",
+		"@wordpress/keycodes": "^4.47.0",
+		"@wordpress/media-utils": "^5.47.0",
+		"@wordpress/notices": "^5.47.0",
+		"@wordpress/patterns": "^2.47.0",
+		"@wordpress/plugins": "^7.47.0",
+		"@wordpress/preferences": "^4.47.0",
+		"@wordpress/primitives": "^4.47.0",
+		"@wordpress/private-apis": "^1.47.0",
+		"@wordpress/reusable-blocks": "^5.47.0",
+		"@wordpress/router": "^1.47.0",
+		"@wordpress/style-engine": "^2.47.0",
+		"@wordpress/ui": "^0.14.0",
+		"@wordpress/url": "^4.47.0",
+		"@wordpress/viewport": "^6.47.0",
+		"@wordpress/views": "^1.14.0",
+		"@wordpress/widgets": "^4.47.0",
+		"@wordpress/wordcount": "^4.47.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -101,11 +101,11 @@
 		"react-autosize-textarea": "^7.1.0"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0e198c7ac7ca634e73ded9220ce048c0302174dd"
+	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
 }

package/src/components/add-new-template/index.js

@@ -13,7 +13,7 @@ import {
 	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 	Flex,
-	Icon,
+	Icon as WCIcon,
 } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState, memo, useRef, useEffect } from '@wordpress/element';
@@ -122,7 +122,7 @@ function TemplateListItem( {
 				direction={ direction }
 			>
 				<div className="edit-site-add-new-template__template-icon">
-					<Icon icon={ icon } />
+					<WCIcon icon={ icon } />
 				</div>
 				<VStack
 					className="edit-site-add-new-template__template-name"

package/src/components/add-new-template-legacy/index.js

@@ -13,7 +13,7 @@ import {
 	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 	Flex,
-	Icon,
+	Icon as WCIcon,
 } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState, memo, useRef, useEffect } from '@wordpress/element';
@@ -123,7 +123,7 @@ function TemplateListItem( {
 				direction={ direction }
 			>
 				<div className="edit-site-add-new-template__template-icon">
-					<Icon icon={ icon } />
+					<WCIcon icon={ icon } />
 				</div>
 				<VStack
 					className="edit-site-add-new-template__template-name"

package/src/components/editor/index.js

@@ -14,14 +14,14 @@ import {
 	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, isRTL, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
 import { useCallback } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { decodeEntities } from '@wordpress/html-entities';
-import { Icon, arrowUpLeft } from '@wordpress/icons';
+import { Icon, arrowUpLeft, arrowUpRight } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -208,6 +208,8 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 		duration: disableMotion ? 0 : 0.2,
 	};
 
+	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
+
 	return ! isBlockBasedTheme && isHomeRoute ? (
 		<SitePreview />
 	) : (
@@ -274,24 +276,50 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 												);
 											} }
 										>
+											{ ! hasAdminBarInEditor && (
+												<motion.div
+													variants={
+														! disableMotion &&
+														siteIconVariants
+													}
+												>
+													<SiteIcon className="edit-site-editor__view-mode-toggle-icon" />
+												</motion.div>
+											) }
+										</Button>
+										{ hasAdminBarInEditor ? (
+											<div className="edit-site-editor__back-icon">
+												<Icon
+													icon={
+														isRTL()
+															? arrowUpRight
+															: arrowUpLeft
+													}
+												/>
+											</div>
+										) : (
 											<motion.div
-												variants={ siteIconVariants }
+												className={ clsx(
+													'edit-site-editor__back-icon',
+													{
+														'has-site-icon':
+															hasSiteIcon,
+													}
+												) }
+												variants={
+													! disableMotion &&
+													toggleHomeIconVariants
+												}
 											>
-												<SiteIcon className="edit-site-editor__view-mode-toggle-icon" />
+												<Icon
+													icon={
+														isRTL()
+															? arrowUpRight
+															: arrowUpLeft
+													}
+												/>
 											</motion.div>
-										</Button>
-										<motion.div
-											className={ clsx(
-												'edit-site-editor__back-icon',
-												{
-													'has-site-icon':
-														hasSiteIcon,
-												}
-											) }
-											variants={ toggleHomeIconVariants }
-										>
-											<Icon icon={ arrowUpLeft } />
-										</motion.div>
+										) }
 									</motion.div>
 								)
 							}

package/src/components/editor/use-resolve-edited-entity.js

@@ -47,8 +47,6 @@ function getPostType( name ) {
 		postType = 'page';
 	} else if ( name === 'post-item' || name === 'posts' ) {
 		postType = 'post';
-	} else if ( name === 'attachment-item' ) {
-		postType = ATTACHMENT_POST_TYPE;
 	}
 
 	return postType;

package/src/components/layout/index.js

@@ -31,6 +31,8 @@ import { PluginArea } from '@wordpress/plugins';
 import { SnackbarNotices, store as noticesStore } from '@wordpress/notices';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
+// 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 } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -54,6 +56,9 @@ function Layout() {
 	const { query, name: routeKey, areas, widths } = useLocation();
 	// Force canvas to 'view' on notfound route to show the error message and allow navigation.
 	const canvas = routeKey === 'notfound' ? 'view' : query?.canvas ?? 'view';
+	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
+	const showDesktopSiteHub = ! hasAdminBarInEditor;
+	const showMobileSiteHub = ! hasAdminBarInEditor || routeKey !== 'home';
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
 	const navigateRegionsProps = useNavigateRegions();
@@ -129,12 +134,14 @@ function Layout() {
 										} }
 										className="edit-site-layout__sidebar"
 									>
-										<SiteHub
-											ref={ toggleRef }
-											isTransparent={
-												isResizableFrameOversized
-											}
-										/>
+										{ showDesktopSiteHub && (
+											<SiteHub
+												ref={ toggleRef }
+												isTransparent={
+													isResizableFrameOversized
+												}
+											/>
+										) }
 										<SidebarNavigationProvider>
 											<SidebarContent
 												shouldAnimate={
@@ -163,12 +170,14 @@ function Layout() {
 							<SidebarNavigationProvider>
 								{ canvas !== 'edit' ? (
 									<>
-										<SiteHubMobile
-											ref={ toggleRef }
-											isTransparent={
-												isResizableFrameOversized
-											}
-										/>
+										{ showMobileSiteHub && (
+											<SiteHubMobile
+												ref={ toggleRef }
+												isTransparent={
+													isResizableFrameOversized
+												}
+											/>
+										) }
 										<SidebarContent routeKey={ routeKey }>
 											<ErrorBoundary>
 												{ areas.mobile }
@@ -275,9 +284,11 @@ export default function LayoutWithGlobalStylesProvider( props ) {
 
 	return (
 		<SlotFillProvider>
-			{ /** This needs to be within the SlotFillProvider */ }
-			<PluginArea onError={ onPluginAreaError } />
-			<Layout { ...props } />
+			<Tooltip.Provider>
+				{ /** This needs to be within the SlotFillProvider */ }
+				<PluginArea onError={ onPluginAreaError } />
+				<Layout { ...props } />
+			</Tooltip.Provider>
 		</SlotFillProvider>
 	);
 }

package/src/components/page-templates/fields.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	Icon,
+	Icon as WCIcon,
 	__experimentalHStack as HStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
@@ -138,7 +138,7 @@ function AuthorField( { item } ) {
 			) }
 			{ ! imageUrl && (
 				<div className="fields-controls__author-icon">
-					<Icon icon={ icon } />
+					<WCIcon icon={ icon } />
 				</div>
 			) }
 			<span className="fields-controls__author-name">{ text }</span>

package/src/components/resizable-frame/index.js

@@ -9,7 +9,6 @@ import clsx from 'clsx';
 import { useState, useRef } from '@wordpress/element';
 import {
 	ResizableBox,
-	Tooltip,
 	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useInstanceId, useReducedMotion } from '@wordpress/compose';
@@ -17,12 +16,14 @@ import { __, isRTL } from '@wordpress/i18n';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { addQueryArgs } from '@wordpress/url';
+// 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 } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { addQueryArgs } from '@wordpress/url';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -294,34 +295,43 @@ function ResizableFrame( {
 			handleComponent={ {
 				[ isRTL() ? 'right' : 'left' ]: canvas === 'view' && (
 					<>
-						<Tooltip text={ __( 'Drag to resize' ) }>
-							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
-							{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
-							<motion.button
-								key="handle"
-								role="separator"
-								aria-orientation="vertical"
-								className={ clsx(
-									'edit-site-resizable-frame__handle',
-									{ 'is-resizing': isResizing }
-								) }
-								variants={ resizeHandleVariants }
-								animate={ currentResizeHandleVariant }
-								aria-label={ __( 'Drag to resize' ) }
-								aria-describedby={ resizableHandleHelpId }
-								aria-valuenow={
-									frameRef.current?.resizable?.offsetWidth ||
-									undefined
+						<Tooltip.Root>
+							<Tooltip.Trigger
+								render={
+									<motion.button
+										key="handle"
+										role="separator"
+										aria-orientation="vertical"
+										className={ clsx(
+											'edit-site-resizable-frame__handle',
+											{ 'is-resizing': isResizing }
+										) }
+										variants={ resizeHandleVariants }
+										animate={ currentResizeHandleVariant }
+										aria-label={ __( 'Drag to resize' ) }
+										aria-describedby={
+											resizableHandleHelpId
+										}
+										aria-valuenow={
+											frameRef.current?.resizable
+												?.offsetWidth || undefined
+										}
+										aria-valuemin={ FRAME_MIN_WIDTH }
+										aria-valuemax={ defaultSize.width }
+										onKeyDown={
+											handleResizableHandleKeyDown
+										}
+										initial="hidden"
+										exit="hidden"
+										whileFocus="active"
+										whileHover="active"
+									/>
 								}
-								aria-valuemin={ FRAME_MIN_WIDTH }
-								aria-valuemax={ defaultSize.width }
-								onKeyDown={ handleResizableHandleKeyDown }
-								initial="hidden"
-								exit="hidden"
-								whileFocus="active"
-								whileHover="active"
 							/>
-						</Tooltip>
+							<Tooltip.Popup>
+								{ __( 'Drag to resize' ) }
+							</Tooltip.Popup>
+						</Tooltip.Root>
 						<div hidden id={ resizableHandleHelpId }>
 							{ __(
 								'Use left and right arrow keys to resize the canvas. Hold shift to resize in larger increments.'

package/src/components/site-editor-routes/index.js

@@ -21,12 +21,10 @@ import { templatesRoute } from './templates';
 import { templateItemRoute } from './template-item';
 import { pagesRoute } from './pages';
 import { pageItemRoute } from './page-item';
-import { attachmentItemRoute } from './attachment-item';
 import { stylebookRoute } from './stylebook';
 import { notFoundRoute } from './notfound';
 
 const routes = [
-	...( window?.__experimentalMediaEditor ? [ attachmentItemRoute ] : [] ),
 	pageItemRoute,
 	pagesRoute,
 	templateItemRoute,

package/src/components/site-hub/index.js

@@ -8,11 +8,11 @@ import clsx from 'clsx';
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button, __experimentalHStack as HStack } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { memo, forwardRef, useContext } from '@wordpress/element';
-import { search } from '@wordpress/icons';
+import { Icon, arrowUpLeft, arrowUpRight, search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
 import { VisuallyHidden } from '@wordpress/ui';
@@ -117,6 +117,7 @@ export const SiteHubMobile = memo(
 		const { path } = useLocation();
 		const history = useHistory();
 		const { navigate } = useContext( SidebarNavigationContext );
+		const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
 
 		const {
 			dashboardLink,
@@ -199,7 +200,16 @@ export const SiteHubMobile = memo(
 							} }
 							{ ...backButtonProps }
 						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+							{ hasAdminBarInEditor ? (
+								<Icon
+									icon={
+										isRTL() ? arrowUpRight : arrowUpLeft
+									}
+									size={ 48 }
+								/>
+							) : (
+								<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+							) }
 						</Button>
 					</div>
 

package/src/components/site-icon/index.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { Icon } from '@wordpress/components';
+import { Icon as WCIcon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { wordpress } from '@wordpress/icons';
 import { store as coreDataStore } from '@wordpress/core-data';
@@ -34,7 +34,7 @@ function SiteIcon( { className } ) {
 			src={ siteIconUrl }
 		/>
 	) : (
-		<Icon
+		<WCIcon
 			className="edit-site-site-icon__icon"
 			icon={ wordpress }
 			size={ 48 }

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

@@ -0,0 +1,71 @@
+// Styles for the experimental admin bar in editor.
+
+body.has-admin-bar-in-editor {
+	margin-top: 0;
+	height: 100%;
+
+	&:has(.editor-editor-interface.is-distraction-free) {
+		--wp-admin--admin-bar--height: 0;
+	}
+
+	.edit-site-site-hub__title,
+	.edit-site-site-hub__actions {
+		display: none;
+	}
+
+	.edit-site-editor__view-mode-toggle .edit-site-editor__back-icon {
+		background: transparent;
+	}
+
+	.edit-site-editor__view-mode-toggle:hover .edit-site-editor__back-icon {
+		color: var(--wp-admin-theme-color);
+	}
+
+	.edit-site-sidebar-navigation-screen__title-icon {
+		padding-top: 16px;
+	}
+
+	.edit-site-layout__content,
+	.edit-site-layout__sidebar {
+		min-height: 0;
+	}
+
+	.edit-site-sidebar__content {
+		flex-basis: 0;
+		min-height: 0;
+	}
+
+	.edit-site {
+		box-sizing: border-box;
+		padding-top: var(--wp-admin--admin-bar--height, 0);
+		height: 100vh;
+		min-height: 100vh;
+
+		@media (min-width: 600px) {
+			padding-top: 0;
+			top: var(--wp-admin--admin-bar--height, 0);
+			height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
+			min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
+		}
+	}
+
+	.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
+		top: var(--wp-admin--admin-bar--height, 0);
+		height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
+	}
+
+	&.is-fullscreen-mode {
+		.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);
+		}
+
+		#wpadminbar {
+			display: block;
+		}
+
+		&:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
+			display: none;
+		}
+	}
+}

package/src/style.scss

@@ -1,5 +1,6 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/default-custom-properties";
 @use "@wordpress/dataviews/build-style/style.css" as dataviews;
 @use "@wordpress/fields/build-style/style.css" as fields;
@@ -31,6 +32,7 @@
 @use "./components/resizable-frame/style.scss" as *;
 @use "./components/pagination/style.scss" as *;
 @use "./components/sidebar-global-styles/style.scss" as *;
+@use "./experimental-admin-bar-in-editor.scss" as *;
 
 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 ::view-transition-image-pair(root) {