Editor Interface: Remove small header

WordPress · Aug 13, 2024 · ac9b9a2 · ac9b9a2
1 parent 926e738
commit ac9b9a2
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 88 deletions.
diff --git a/packages/edit-site/src/components/global-styles-sidebar/default-sidebar.js b/packages/edit-site/src/components/global-styles-sidebar/default-sidebar.js
@@ -30,7 +30,6 @@ export default function DefaultSidebar( {
 				scope="core"
 				identifier={ identifier }
 				title={ title }
-				smallScreenTitle={ title }
 				icon={ icon }
 				closeLabel={ closeLabel }
 				header={ header }

diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -17,6 +17,7 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -78,6 +79,7 @@ export default function GlobalStylesSidebar() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	useEffect( () => {
 		if ( shouldClearCanvasContainerView ) {
@@ -145,19 +147,22 @@ export default function GlobalStylesSidebar() {
 							{ __( 'Styles' ) }
 						</h2>
 					</FlexBlock>
-					<FlexItem>
-						<Button
-							icon={ seen }
-							label={ __( 'Style Book' ) }
-							isPressed={
-								isStyleBookOpened || isRevisionsStyleBookOpened
-							}
-							accessibleWhenDisabled
-							disabled={ shouldClearCanvasContainerView }
-							onClick={ toggleStyleBook }
-							size="compact"
-						/>
-					</FlexItem>
+					{ ! isMobileViewport && (
+						<FlexItem>
+							<Button
+								icon={ seen }
+								label={ __( 'Style Book' ) }
+								isPressed={
+									isStyleBookOpened ||
+									isRevisionsStyleBookOpened
+								}
+								accessibleWhenDisabled
+								disabled={ shouldClearCanvasContainerView }
+								onClick={ toggleStyleBook }
+								size="compact"
+							/>
+						</FlexItem>
+					) }
 					<FlexItem>
 						<Button
 							label={ __( 'Revisions' ) }

diff --git a/packages/editor/src/components/plugin-sidebar/index.js b/packages/editor/src/components/plugin-sidebar/index.js
@@ -2,15 +2,9 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { ComplementaryArea } from '@wordpress/interface';
 
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-
 /**
  * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
  * It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
@@ -77,19 +71,15 @@ import { store as editorStore } from '../../store';
  * ```
  */
 export default function PluginSidebar( { className, ...props } ) {
-	const { postTitle, shortcut } = useSelect( ( select ) => {
-		return {
-			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
-		};
+	const shortcut = useSelect( ( select ) => {
+		return select( keyboardShortcutsStore ).getShortcutRepresentation(
+			'core/editor/toggle-sidebar'
+		);
 	}, [] );
 	return (
 		<ComplementaryArea
 			panelClassName={ className }
 			className="editor-sidebar"
-			smallScreenTitle={ postTitle || __( '(no title)' ) }
 			scope="core"
 			toggleShortcut={ shortcut }
 			{ ...props }

diff --git a/packages/interface/src/components/complementary-area-header/index.js b/packages/interface/src/components/complementary-area-header/index.js
@@ -14,7 +14,6 @@ import { closeSmall } from '@wordpress/icons';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 
 const ComplementaryAreaHeader = ( {
-	smallScreenTitle,
 	children,
 	className,
 	toggleButtonProps,
@@ -23,27 +22,17 @@ const ComplementaryAreaHeader = ( {
 		<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />
 	);
 	return (
-		<>
-			<div className="components-panel__header interface-complementary-area-header__small">
-				{ smallScreenTitle && (
-					<h2 className="interface-complementary-area-header__small-title">
-						{ smallScreenTitle }
-					</h2>
-				) }
-				{ toggleButton }
-			</div>
-			<div
-				className={ clsx(
-					'components-panel__header',
-					'interface-complementary-area-header',
-					className
-				) }
-				tabIndex={ -1 }
-			>
-				{ children }
-				{ toggleButton }
-			</div>
-		</>
+		<div
+			className={ clsx(
+				'components-panel__header',
+				'interface-complementary-area-header',
+				className
+			) }
+			tabIndex={ -1 }
+		>
+			{ children }
+			{ toggleButton }
+		</div>
 	);
 };
 

diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss
@@ -1,20 +1,3 @@
-.components-panel__header.interface-complementary-area-header__small {
-	background: $white;
-	padding-right: $grid-unit-05;
-
-	.interface-complementary-area-header__small-title {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		width: 100%;
-		margin: 0;
-	}
-
-	@include break-medium() {
-		display: none;
-	}
-}
-
 .interface-complementary-area-header {
 	background: $white;
 	padding-right: $grid-unit-15; // Reduced padding to account for close buttons.
@@ -25,15 +8,10 @@
 	}
 
 	.components-button.has-icon {
-		display: none;
 		margin-left: auto;
 
 		~ .components-button {
 			margin-left: 0;
 		}
-
-		@include break-medium() {
-			display: flex;
-		}
 	}
 }
diff --git a/packages/interface/src/components/complementary-area/README.md b/packages/interface/src/components/complementary-area/README.md
@@ -84,14 +84,6 @@ The scope of the complementary area e.g: "core", "myplugin/custom-screen-a",
 -   Type: `String`
 -   Required: Yes
 
-### smallScreenTitle
-
-In small screens, the complementary area may take up the entire screen.
-`smallScreenTitle` allows displaying a title above the complementary area, so the user is more aware of what the area refers to.
-
--   Type: `String`
--   Required: No
-
 ### title
 
 Human friendly title of the complementary area.

diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
@@ -179,7 +179,6 @@ function ComplementaryArea( {
 	panelClassName,
 	scope,
 	name,
-	smallScreenTitle,
 	title,
 	toggleShortcut,
 	isActiveByDefault,
@@ -220,6 +219,8 @@ function ComplementaryArea( {
 		},
 		[ identifier, scope ]
 	);
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
 	useAdjustComplementaryListener(
 		scope,
 		identifier,
@@ -299,7 +300,6 @@ function ComplementaryArea( {
 					className={ headerClassName }
 					closeLabel={ closeLabel }
 					onClose={ () => disableComplementaryArea( scope ) }
-					smallScreenTitle={ smallScreenTitle }
 					toggleButtonProps={ {
 						label: closeLabel,
 						size: 'small',
@@ -313,7 +313,7 @@ function ComplementaryArea( {
 							<h2 className="interface-complementary-area-header__title">
 								{ title }
 							</h2>
-							{ isPinnable && (
+							{ isPinnable && ! isMobileViewport && (
 								<Button
 									className="interface-complementary-area__pin-unpin-item"
 									icon={ isPinned ? starFilled : starEmpty }

diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss
@@ -25,11 +25,7 @@
 		z-index: z-index(".interface-complementary-area .components-panel__header");
 
 		&.editor-sidebar__panel-tabs {
-			top: $panel-header-height;
-
-			@include break-medium() {
-				top: 0;
-			}
+			top: 0;
 		}
 	}