@wordpress/edit-site 6.49.1 → 6.50.1-next.v.202607070741.0

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

@@ -6,129 +6,35 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { Button, __experimentalHStack as HStack } from '@wordpress/components';
 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 { Icon, arrowUpLeft, arrowUpRight, search } from '@wordpress/icons';
-import { store as commandsStore } from '@wordpress/commands';
-import { displayShortcut } from '@wordpress/keycodes';
-import { VisuallyHidden } from '@wordpress/ui';
-import { filterURLForDisplay } from '@wordpress/url';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
 import { SidebarNavigationContext } from '../sidebar';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-const SiteHub = memo(
-	forwardRef( ( { isTransparent }, ref ) => {
-		const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
-			const { getSettings } = unlock( select( editSiteStore ) );
-
-			const { getEntityRecord } = select( coreStore );
-			const _site = getEntityRecord( 'root', 'site' );
-			return {
-				dashboardLink: getSettings().__experimentalDashboardLink,
-				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-				siteTitle:
-					! _site?.title && !! _site?.url
-						? filterURLForDisplay( _site?.url )
-						: _site?.title,
-			};
-		}, [] );
-		const { open: openCommandCenter } = useDispatch( commandsStore );
-
-		return (
-			<div className="edit-site-site-hub">
-				<HStack justify="flex-start" spacing="0">
-					<div
-						className={ clsx(
-							'edit-site-site-hub__view-mode-toggle-container',
-							{
-								'has-transparent-background': isTransparent,
-							}
-						) }
-					>
-						<Button
-							__next40pxDefaultSize
-							ref={ ref }
-							href={ dashboardLink }
-							label={ __( 'Go to the Dashboard' ) }
-							className="edit-site-layout__view-mode-toggle"
-							style={ {
-								transform: 'scale(0.5333) translateX(-4px)', // Offset to position the icon 12px from viewport edge
-								borderRadius: 4,
-							} }
-						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-						</Button>
-					</div>
-
-					<HStack>
-						<div className="edit-site-site-hub__title">
-							<Button
-								__next40pxDefaultSize
-								variant="link"
-								href={ homeUrl }
-								target="_blank"
-							>
-								{ decodeEntities( siteTitle ) }
-								<VisuallyHidden render={ <span /> }>
-									{
-										/* translators: accessibility text */
-										__( '(opens in a new tab)' )
-									}
-								</VisuallyHidden>
-							</Button>
-						</div>
-						<HStack
-							spacing={ 0 }
-							expanded={ false }
-							className="edit-site-site-hub__actions"
-						>
-							<Button
-								size="compact"
-								className="edit-site-site-hub_toggle-command-center"
-								icon={ search }
-								onClick={ () => openCommandCenter() }
-								label={ __( 'Open command palette' ) }
-								shortcut={ displayShortcut.primary( 'k' ) }
-							/>
-						</HStack>
-					</HStack>
-				</HStack>
-			</div>
-		);
-	} )
-);
-
-export default SiteHub;
-
 export const SiteHubMobile = memo(
 	forwardRef( ( { isTransparent }, ref ) => {
 		const { path } = useLocation();
 		const history = useHistory();
 		const { navigate } = useContext( SidebarNavigationContext );
-		const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
 
 		const {
 			dashboardLink,
-			homeUrl,
-			siteTitle,
 			isBlockTheme,
 			isClassicThemeWithStyleBookSupport,
 		} = useSelect( ( select ) => {
 			const { getSettings } = unlock( select( editSiteStore ) );
-			const { getEntityRecord, getCurrentTheme } = select( coreStore );
-			const _site = getEntityRecord( 'root', 'site' );
+			const { getCurrentTheme } = select( coreStore );
 			const currentTheme = getCurrentTheme();
 			const settings = getSettings();
 			const supportsEditorStyles =
@@ -138,18 +44,12 @@ export const SiteHubMobile = memo(
 
 			return {
 				dashboardLink: settings.__experimentalDashboardLink,
-				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-				siteTitle:
-					! _site?.title && !! _site?.url
-						? filterURLForDisplay( _site?.url )
-						: _site?.title,
 				isBlockTheme: currentTheme?.is_block_theme,
 				isClassicThemeWithStyleBookSupport:
 					! currentTheme?.is_block_theme &&
 					( supportsEditorStyles || hasThemeJson ),
 			};
 		}, [] );
-		const { open: openCommandCenter } = useDispatch( commandsStore );
 
 		let backPath;
 
@@ -200,46 +100,12 @@ export const SiteHubMobile = memo(
 							} }
 							{ ...backButtonProps }
 						>
-							{ hasAdminBarInEditor ? (
-								<Icon
-									icon={
-										isRTL() ? arrowUpRight : arrowUpLeft
-									}
-									size={ 48 }
-								/>
-							) : (
-								<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-							) }
+							<Icon
+								icon={ isRTL() ? chevronRight : chevronLeft }
+								size={ 48 }
+							/>
 						</Button>
 					</div>
-
-					<HStack>
-						<div className="edit-site-site-hub__title">
-							<Button
-								__next40pxDefaultSize
-								variant="link"
-								href={ homeUrl }
-								target="_blank"
-								label={ __( 'View site (opens in a new tab)' ) }
-							>
-								{ decodeEntities( siteTitle ) }
-							</Button>
-						</div>
-						<HStack
-							spacing={ 0 }
-							expanded={ false }
-							className="edit-site-site-hub__actions"
-						>
-							<Button
-								__next40pxDefaultSize
-								className="edit-site-site-hub_toggle-command-center"
-								icon={ search }
-								onClick={ () => openCommandCenter() }
-								label={ __( 'Open command palette' ) }
-								shortcut={ displayShortcut.primary( 'k' ) }
-							/>
-						</HStack>
-					</HStack>
 				</HStack>
 			</div>
 		);

package/src/components/site-hub/style.scss

@@ -9,10 +9,6 @@
 	height: $header-height;
 }
 
-.edit-site-site-hub__actions {
-	flex-shrink: 0;
-}
-
 .edit-site-site-hub__view-mode-toggle-container {
 	height: $header-height;
 	width: $header-height;
@@ -22,71 +18,3 @@
 		background: transparent;
 	}
 }
-
-.edit-site-site-hub__title .components-button {
-	color: var(--wpds-color-foreground-interactive-neutral);
-	display: block;
-	flex-grow: 1;
-	font-size: 15px;
-	font-weight: $font-weight-medium;
-	overflow: hidden;
-	// Add space for the ↗ to render.
-	padding-right: $grid-unit-20;
-
-	// Create 12px gap between site icon and site title
-	margin-left: - $grid-unit-05;
-	position: relative;
-	text-decoration: none;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-
-	&:hover,
-	&:focus,
-	&:active {
-		color: var(--wpds-color-foreground-interactive-neutral);
-	}
-
-	&:focus {
-		// Defer to :focus-visible below.
-		box-shadow: none;
-		outline: none;
-	}
-
-	&:focus-visible {
-		// Push the shadow away from the title.
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-background-surface-neutral-weak), 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
-		outline-offset: 2px;
-	}
-
-	&::after {
-		content: "\2197";
-		font-weight: 400;
-		opacity: 0;
-		position: absolute;
-		right: 0;
-
-		@media not (prefers-reduced-motion) {
-			transition: opacity 0.1s linear;
-		}
-	}
-
-	&:hover::after,
-	&:focus::after,
-	&:active::after {
-		opacity: 1;
-	}
-}
-
-.edit-site-site-hub_toggle-command-center {
-	color: var(--wpds-color-foreground-interactive-neutral);
-
-	&:hover,
-	&:active {
-		svg {
-			fill: var(--wpds-color-foreground-interactive-neutral-active);
-		}
-	}
-}

package/src/index.js

@@ -74,7 +74,9 @@ export function initializeEditor( id, settings ) {
 		showListViewByDefault: false,
 		enableChoosePatternModal: true,
 		showCollaborationCursor: false,
-		showCollaborationNotifications: true,
+		showCollaborationJoinNotifications: true,
+		showCollaborationLeaveNotifications: true,
+		showCollaborationPostSaveNotifications: true,
 	} );
 
 	if ( window.__clientSideMediaProcessing ) {

package/src/style.scss

@@ -26,14 +26,11 @@
 @use "./components/sidebar-navigation-screen-templates-browse/style.scss" as *;
 @use "./components/sidebar-dataviews/style.scss" as *;
 @use "./components/site-hub/style.scss" as *;
-@use "./components/site-icon/style.scss" as *;
 @use "./components/post-list/style.scss" as *;
 @use "./components/resizable-frame/style.scss" as *;
 @use "./components/pagination/style.scss" as *;
 @use "./components/sidebar-global-styles/style.scss" as *;
-@use "./experimental-omnibar.scss" as *;
 
-/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 ::view-transition-image-pair(root) {
 	isolation: auto;
 }
@@ -45,12 +42,6 @@
 	display: block;
 }
 
-/* stylelint-enable */
-
-body.js #wpadminbar {
-	display: none;
-}
-
 body.js #wpbody {
 	padding-top: 0;
 }
@@ -62,10 +53,21 @@ body.js.site-editor-php {
 
 body.js.site-editor-php {
 	background: var(--wpds-color-background-surface-neutral-weak);
+
+	@include break-medium {
+		&:has(.editor-editor-interface.is-distraction-free) {
+			--wp-admin--admin-bar--height: 0px;
+
+			#wpadminbar {
+				display: none;
+			}
+		}
+	}
 }
 
 .edit-site {
 	@include reset;
+	padding-top: var(--wp-admin--admin-bar--height, 0);
 	height: 100vh;
 
 	// On mobile the main content area has to scroll, otherwise you can invoke
@@ -73,10 +75,11 @@ body.js.site-editor-php {
 	@include break-small {
 		bottom: 0;
 		left: 0;
-		min-height: 100vh;
+		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
+		padding-top: 0;
 		position: fixed;
 		right: 0;
-		top: 0;
+		top: var(--wp-admin--admin-bar--height, 0);
 	}
 
 	.no-js & {

package/build/components/site-icon/index.cjs

@@ -1,73 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/edit-site/src/components/site-icon/index.js
-var site_icon_exports = {};
-__export(site_icon_exports, {
-  default: () => site_icon_default
-});
-module.exports = __toCommonJS(site_icon_exports);
-var import_clsx = __toESM(require("clsx"));
-var import_data = require("@wordpress/data");
-var import_components = require("@wordpress/components");
-var import_i18n = require("@wordpress/i18n");
-var import_icons = require("@wordpress/icons");
-var import_core_data = require("@wordpress/core-data");
-var import_jsx_runtime = require("react/jsx-runtime");
-function SiteIcon({ className }) {
-  const { isRequestingSite, siteIconUrl } = (0, import_data.useSelect)((select) => {
-    const { getEntityRecord } = select(import_core_data.store);
-    const siteData = getEntityRecord("root", "__unstableBase", void 0);
-    return {
-      isRequestingSite: !siteData,
-      siteIconUrl: siteData?.site_icon_url
-    };
-  }, []);
-  if (isRequestingSite && !siteIconUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "edit-site-site-icon__image" });
-  }
-  const icon = siteIconUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "img",
-    {
-      className: "edit-site-site-icon__image",
-      alt: (0, import_i18n.__)("Site Icon"),
-      src: siteIconUrl
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_components.Icon,
-    {
-      className: "edit-site-site-icon__icon",
-      icon: import_icons.wordpress,
-      size: 48
-    }
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(className, "edit-site-site-icon"), children: icon });
-}
-var site_icon_default = SiteIcon;
-//# sourceMappingURL=index.cjs.map

package/build/components/site-icon/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/site-icon/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { Icon as WCIcon } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { wordpress } from '@wordpress/icons';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\nfunction SiteIcon( { className } ) {\n\tconst { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord } = select( coreDataStore );\n\t\tconst siteData = getEntityRecord( 'root', '__unstableBase', undefined );\n\n\t\treturn {\n\t\t\tisRequestingSite: ! siteData,\n\t\t\tsiteIconUrl: siteData?.site_icon_url,\n\t\t};\n\t}, [] );\n\n\tif ( isRequestingSite && ! siteIconUrl ) {\n\t\treturn <div className=\"edit-site-site-icon__image\" />;\n\t}\n\n\tconst icon = siteIconUrl ? (\n\t\t<img\n\t\t\tclassName=\"edit-site-site-icon__image\"\n\t\t\talt={ __( 'Site Icon' ) }\n\t\t\tsrc={ siteIconUrl }\n\t\t/>\n\t) : (\n\t\t<WCIcon\n\t\t\tclassName=\"edit-site-site-icon__icon\"\n\t\t\ticon={ wordpress }\n\t\t\tsize={ 48 }\n\t\t/>\n\t);\n\n\treturn (\n\t\t<div className={ clsx( className, 'edit-site-site-icon' ) }>\n\t\t\t{ icon }\n\t\t</div>\n\t);\n}\n\nexport default SiteIcon;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAA0B;AAC1B,wBAA+B;AAC/B,kBAAmB;AACnB,mBAA0B;AAC1B,uBAAuC;AAc9B;AAZT,SAAS,SAAU,EAAE,UAAU,GAAI;AAClC,QAAM,EAAE,kBAAkB,YAAY,QAAI,uBAAW,CAAE,WAAY;AAClE,UAAM,EAAE,gBAAgB,IAAI,OAAQ,iBAAAA,KAAc;AAClD,UAAM,WAAW,gBAAiB,QAAQ,kBAAkB,MAAU;AAEtE,WAAO;AAAA,MACN,kBAAkB,CAAE;AAAA,MACpB,aAAa,UAAU;AAAA,IACxB;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,MAAK,oBAAoB,CAAE,aAAc;AACxC,WAAO,4CAAC,SAAI,WAAU,8BAA6B;AAAA,EACpD;AAEA,QAAM,OAAO,cACZ;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAM,gBAAI,WAAY;AAAA,MACtB,KAAM;AAAA;AAAA,EACP,IAEA;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,MAAO;AAAA,MACP,MAAO;AAAA;AAAA,EACR;AAGD,SACC,4CAAC,SAAI,eAAY,YAAAC,SAAM,WAAW,qBAAsB,GACrD,gBACH;AAEF;AAEA,IAAO,oBAAQ;",
-  "names": ["coreDataStore", "WCIcon", "clsx"]
-}

package/build-module/components/site-icon/index.mjs

@@ -1,42 +0,0 @@
-// packages/edit-site/src/components/site-icon/index.js
-import clsx from "clsx";
-import { useSelect } from "@wordpress/data";
-import { Icon as WCIcon } from "@wordpress/components";
-import { __ } from "@wordpress/i18n";
-import { wordpress } from "@wordpress/icons";
-import { store as coreDataStore } from "@wordpress/core-data";
-import { jsx } from "react/jsx-runtime";
-function SiteIcon({ className }) {
-  const { isRequestingSite, siteIconUrl } = useSelect((select) => {
-    const { getEntityRecord } = select(coreDataStore);
-    const siteData = getEntityRecord("root", "__unstableBase", void 0);
-    return {
-      isRequestingSite: !siteData,
-      siteIconUrl: siteData?.site_icon_url
-    };
-  }, []);
-  if (isRequestingSite && !siteIconUrl) {
-    return /* @__PURE__ */ jsx("div", { className: "edit-site-site-icon__image" });
-  }
-  const icon = siteIconUrl ? /* @__PURE__ */ jsx(
-    "img",
-    {
-      className: "edit-site-site-icon__image",
-      alt: __("Site Icon"),
-      src: siteIconUrl
-    }
-  ) : /* @__PURE__ */ jsx(
-    WCIcon,
-    {
-      className: "edit-site-site-icon__icon",
-      icon: wordpress,
-      size: 48
-    }
-  );
-  return /* @__PURE__ */ jsx("div", { className: clsx(className, "edit-site-site-icon"), children: icon });
-}
-var site_icon_default = SiteIcon;
-export {
-  site_icon_default as default
-};
-//# sourceMappingURL=index.mjs.map

package/build-module/components/site-icon/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/site-icon/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { Icon as WCIcon } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { wordpress } from '@wordpress/icons';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\nfunction SiteIcon( { className } ) {\n\tconst { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord } = select( coreDataStore );\n\t\tconst siteData = getEntityRecord( 'root', '__unstableBase', undefined );\n\n\t\treturn {\n\t\t\tisRequestingSite: ! siteData,\n\t\t\tsiteIconUrl: siteData?.site_icon_url,\n\t\t};\n\t}, [] );\n\n\tif ( isRequestingSite && ! siteIconUrl ) {\n\t\treturn <div className=\"edit-site-site-icon__image\" />;\n\t}\n\n\tconst icon = siteIconUrl ? (\n\t\t<img\n\t\t\tclassName=\"edit-site-site-icon__image\"\n\t\t\talt={ __( 'Site Icon' ) }\n\t\t\tsrc={ siteIconUrl }\n\t\t/>\n\t) : (\n\t\t<WCIcon\n\t\t\tclassName=\"edit-site-site-icon__icon\"\n\t\t\ticon={ wordpress }\n\t\t\tsize={ 48 }\n\t\t/>\n\t);\n\n\treturn (\n\t\t<div className={ clsx( className, 'edit-site-site-icon' ) }>\n\t\t\t{ icon }\n\t\t</div>\n\t);\n}\n\nexport default SiteIcon;\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,cAAc;AAC/B,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,SAAS,qBAAqB;AAc9B;AAZT,SAAS,SAAU,EAAE,UAAU,GAAI;AAClC,QAAM,EAAE,kBAAkB,YAAY,IAAI,UAAW,CAAE,WAAY;AAClE,UAAM,EAAE,gBAAgB,IAAI,OAAQ,aAAc;AAClD,UAAM,WAAW,gBAAiB,QAAQ,kBAAkB,MAAU;AAEtE,WAAO;AAAA,MACN,kBAAkB,CAAE;AAAA,MACpB,aAAa,UAAU;AAAA,IACxB;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,MAAK,oBAAoB,CAAE,aAAc;AACxC,WAAO,oBAAC,SAAI,WAAU,8BAA6B;AAAA,EACpD;AAEA,QAAM,OAAO,cACZ;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,KAAM,GAAI,WAAY;AAAA,MACtB,KAAM;AAAA;AAAA,EACP,IAEA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,MAAO;AAAA,MACP,MAAO;AAAA;AAAA,EACR;AAGD,SACC,oBAAC,SAAI,WAAY,KAAM,WAAW,qBAAsB,GACrD,gBACH;AAEF;AAEA,IAAO,oBAAQ;",
-  "names": []
-}

package/build-style/experimental-omnibar-rtl.css

@@ -1,103 +0,0 @@
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-body.has-admin-bar-in-editor {
-  margin-top: 0;
-  height: 100%;
-}
-body.has-admin-bar-in-editor:has(.editor-editor-interface.is-distraction-free) {
-  --wp-admin--admin-bar--height: 0;
-}
-body.has-admin-bar-in-editor .edit-site-site-hub__title,
-body.has-admin-bar-in-editor .edit-site-site-hub__actions {
-  display: none;
-}
-body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle .edit-site-editor__back-icon {
-  background: transparent;
-}
-body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle:hover .edit-site-editor__back-icon {
-  color: var(--wp-admin-theme-color);
-}
-body.has-admin-bar-in-editor .edit-site-sidebar-navigation-screen__title-icon {
-  padding-top: 32px;
-}
-body.has-admin-bar-in-editor .edit-site-layout__content,
-body.has-admin-bar-in-editor .edit-site-layout__sidebar {
-  min-height: 0;
-}
-body.has-admin-bar-in-editor .edit-site-sidebar__content {
-  flex-basis: 0;
-  min-height: 0;
-}
-body.has-admin-bar-in-editor .edit-site {
-  box-sizing: border-box;
-  padding-top: var(--wp-admin--admin-bar--height, 0);
-  height: 100vh;
-  min-height: 100vh;
-}
-@media (min-width: 600px) {
-  body.has-admin-bar-in-editor .edit-site {
-    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));
-  }
-}
-body.has-admin-bar-in-editor .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));
-}
-body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
-body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within,
-body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus,
-body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus-within {
-  top: var(--wp-admin--admin-bar--height, 0);
-}
-body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
-  display: block;
-}
-body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
-  display: none;
-}