Editor: Cleanup styles and classnames (WordPress#62237)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: carolinan <[email protected]> Co-authored-by: juanfra <[email protected]> Co-authored-by: jorgefilipecosta <[email protected]>
patil-vipul · Jun 17, 2024 · bcfc770 · bcfc770
1 parent e5c9954
commit bcfc770
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 101 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -28,7 +28,6 @@ $z-layers: (
 	".block-editor-warning": 5,
 	".block-library-gallery-item__inline-menu": 20,
 	".block-editor-url-input__suggestions": 30,
-	".edit-post-layout__footer": 30,
 	".interface-interface-skeleton__header": 30,
 	".interface-interface-skeleton__content": 20,
 	".edit-widgets-header": 30,
@@ -86,13 +85,12 @@ $z-layers: (
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
 	".interface-interface-skeleton__sidebar": 100000,
-	".edit-post-layout__toggle-sidebar-panel": 100000,
 	".editor-layout__toggle-sidebar-panel": 100000,
 	".edit-widgets-sidebar": 100000,
-	".edit-post-layout .edit-post-post-publish-panel": 100001,
+	".editor-post-publish-panel": 100001,
 	// For larger views, the wp-admin navbar dropdown should be at top of
 	// the Publish Post sidebar.
-	".edit-post-layout .edit-post-post-publish-panel {greater than small}": 99998,
+	".editor-post-publish-panel {greater than small}": 99998,
 
 	// For larger views, the wp-admin navbar dropdown should be on top of
 	// the multi-entity saving sidebar.

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -468,10 +468,6 @@ $color-control-label-height: 20px;
 	top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
 }
 
-.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
-	right: $sidebar-width;
-}
-
 // When fullscreen.
 .is-fullscreen-mode {
 	.wp-block-navigation__responsive-container.is-menu-open {

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -20,7 +20,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -144,19 +143,16 @@ function useEditorStyles() {
 function Layout( { initialPost } ) {
 	useCommands();
 	useEditPostCommands();
-	const isWideViewport = useViewportMatch( 'large' );
 	const paddingAppenderRef = usePaddingAppender();
 	const shouldIframe = useShouldIframe();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		mode,
 		isFullscreenActive,
-		sidebarIsOpened,
 		hasActiveMetaboxes,
 		hasBlockSelected,
 		showIconLabels,
 		isDistractionFree,
-		showBlockBreadcrumbs,
 		showMetaBoxes,
 		hasHistory,
 		isEditingTemplate,
@@ -175,7 +171,6 @@ function Layout( { initialPost } ) {
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
-			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			showMetaBoxes:
 				select( editorStore ).getRenderingMode() === 'post-only',
 			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
@@ -201,11 +196,7 @@ function Layout( { initialPost } ) {
 	}
 
 	const className = clsx( 'edit-post-layout', 'is-mode-' + mode, {
-		'is-sidebar-opened': sidebarIsOpened,
 		'has-metaboxes': hasActiveMetaboxes,
-		'is-distraction-free': isDistractionFree && isWideViewport,
-		'has-block-breadcrumbs':
-			showBlockBreadcrumbs && ! isDistractionFree && isWideViewport,
 	} );
 
 	function onPluginAreaError( name ) {

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -234,7 +234,7 @@ export default function Editor( { isLoading } ) {
 					<SiteEditorMoreMenu />
 					<EditorInterface
 						className={ clsx(
-							'edit-site-editor__interface-skeleton',
+							'edit-site-editor__editor-interface',
 							{
 								'show-icon-labels': showIconLabels,
 							}

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
@@ -1,4 +1,4 @@
-.edit-site-editor__interface-skeleton {
+.edit-site-editor__editor-interface {
 	opacity: 1;
 	transition: opacity 0.1s ease-out;
 	@include reduce-motion("transition");

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -80,7 +80,6 @@ export default function Layout() {
 		canvasMode,
 		previousShortcut,
 		nextShortcut,
-		hasBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
 		const { getAllShortcutKeyCombinations } = select(
 			keyboardShortcutsStore
@@ -102,10 +101,6 @@ export default function Layout() {
 				'core',
 				'distractionFree'
 			),
-			hasBlockBreadcrumbs: select( preferencesStore ).get(
-				'core',
-				'showBlockBreadcrumbs'
-			),
 			hasBlockSelected:
 				select( blockEditorStore ).getBlockSelectionStart(),
 		};
@@ -185,10 +180,6 @@ export default function Layout() {
 						'is-full-canvas': canvasMode === 'edit',
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
-						'has-block-breadcrumbs':
-							hasBlockBreadcrumbs &&
-							! isDistractionFree &&
-							canvasMode === 'edit',
 					}
 				) }
 			>

diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
@@ -121,8 +121,10 @@ export default function EditorInterface( {
 		<InterfaceSkeleton
 			enableRegionNavigation={ enableRegionNavigation }
 			isDistractionFree={ isDistractionFree && isWideViewport }
-			className={ clsx( className, {
+			className={ clsx( 'editor-editor-interface', className, {
 				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
+				'is-distraction-free':
+					isDistractionFree && isWideViewport && ! isPreviewMode,
 			} ) }
 			labels={ {
 				...interfaceLabels,
@@ -206,9 +208,7 @@ export default function EditorInterface( {
 				isRichEditingEnabled &&
 				blockEditorMode !== 'zoom-out' &&
 				mode === 'visual' && (
-					<div className="edit-post-layout__footer">
-						<BlockBreadcrumb rootLabelText={ documentLabel } />
-					</div>
+					<BlockBreadcrumb rootLabelText={ documentLabel } />
 				)
 			}
 			actions={

diff --git a/packages/editor/src/components/editor-interface/style.scss b/packages/editor/src/components/editor-interface/style.scss
@@ -0,0 +1,3 @@
+.editor-editor-interface .entities-saved-states__panel-header {
+	height: $header-height + $border-width;
+}
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
@@ -31,13 +31,6 @@
 	}
 }
 
-.edit-post-layout,
-.edit-site-editor__interface-skeleton {
-	.entities-saved-states__panel-header {
-		height: $header-height + $border-width;
-	}
-}
-
 .entities-saved-states__post-meta {
 	margin-left: $grid-unit-30;
 	align-items: center;

diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
@@ -190,7 +190,7 @@
 	}
 }
 
-.is-distraction-free {
+.editor-editor-interface.is-distraction-free {
 	.interface-interface-skeleton__header {
 		border-bottom: none;
 	}

diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
@@ -1,7 +1,3 @@
-.editor-post-publish-panel {
-	background: $white;
-}
-
 .editor-post-publish-panel__content {
 	// Ensure the post-publish panel accounts for the header and footer height.
 	min-height: calc(100% - #{$header-height + 84px});
@@ -71,6 +67,7 @@
 
 .editor-post-publish-panel__header-publish-button {
 	padding-right: $grid-unit-05;
+	justify-content: center;
 }
 
 .editor-post-publish-panel__header-cancel-button {
@@ -195,40 +192,34 @@
 	}
 }
 
-.edit-post-layout,
-.edit-site-editor__interface-skeleton {
-	.editor-post-publish-panel {
-		position: fixed;
-		z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
-		top: $admin-bar-height-big;
-		bottom: 0;
-		right: 0;
-		left: 0;
-		overflow: auto;
-
-		@include break-medium() {
-			z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
-			top: $admin-bar-height;
-			left: auto;
-			width: $sidebar-width + $border-width;
-			border-left: $border-width solid $gray-300;
-			transform: translateX(+100%);
-			animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
-			@include reduce-motion("animation");
-
-			body.is-fullscreen-mode & {
-				top: 0;
-			}
-
-			// Keep it open on focus to avoid conflict with navigate-regions animation.
-			[role="region"]:focus & {
-				transform: translateX(0%);
-			}
+.editor-post-publish-panel {
+	position: fixed;
+	z-index: z-index(".editor-post-publish-panel");
+	background: $white;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	overflow: auto;
+
+	@include break-medium() {
+		z-index: z-index(".editor-post-publish-panel {greater than small}");
+		top: $admin-bar-height;
+		left: auto;
+		width: $sidebar-width + $border-width;
+		border-left: $border-width solid $gray-300;
+		transform: translateX(+100%);
+		animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+		@include reduce-motion("animation");
+
+		body.is-fullscreen-mode & {
+			top: 0;
 		}
-	}
 
-	.editor-post-publish-panel__header-publish-button {
-		justify-content: center;
+		// Keep it open on focus to avoid conflict with navigate-regions animation.
+		[role="region"]:focus & {
+			transform: translateX(0%);
+		}
 	}
 }
 

diff --git a/packages/editor/src/components/save-publish-panels/style.scss b/packages/editor/src/components/save-publish-panels/style.scss
@@ -26,11 +26,3 @@
 		bottom: 0;
 	}
 }
-
-.edit-post-layout__toggle-sidebar-panel {
-	.interface-interface-skeleton__sidebar:focus &,
-	.interface-interface-skeleton__sidebar:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
-}
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
@@ -9,6 +9,7 @@
 @import "./components/document-bar/style.scss";
 @import "./components/document-outline/style.scss";
 @import "./components/document-tools/style.scss";
+@import "./components/editor-interface/style.scss";
 @import "./components/editor-notices/style.scss";
 @import "./components/entities-saved-states/style.scss";
 @import "./components/error-boundary/style.scss";

diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
@@ -114,13 +114,6 @@ html.interface-interface-skeleton__html-container {
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
 		position: relative !important;
-
-		// Set this z-index only when the sidebar is opened. When it's closed, the
-		// button to open the sidebar that is shown when navigating regions needs to
-		// be above the footer. See `editor-layout__toggle-sidebar-panel`.
-		.is-sidebar-opened & {
-			z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
-		}
 	}
 }
 
@@ -170,16 +163,6 @@ html.interface-interface-skeleton__html-container {
 	@include break-medium() {
 		display: flex;
 	}
-
-	.block-editor-block-breadcrumb {
-		z-index: z-index(".edit-post-layout__footer");
-		display: flex;
-		background: $white;
-		height: $button-size-small;
-		align-items: center;
-		font-size: $default-font-size;
-		padding: 0 ($grid-unit-15 + 6px);
-	}
 }
 
 .interface-interface-skeleton__actions {