Editor Interface: Remove small header from global styles/plugin sideb…

…ar (#64474) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
WordPress · Oct 22, 2024 · ca8c191 · ca8c191
1 parent d1c3508
commit ca8c191
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 91 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
@@ -11,6 +11,7 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { useViewportMatch } from '@wordpress/compose';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
@@ -81,6 +82,7 @@ export default function GlobalStylesSidebar() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	useEffect( () => {
 		if ( shouldClearCanvasContainerView ) {
@@ -149,20 +151,22 @@ export default function GlobalStylesSidebar() {
 						gap={ 1 }
 						className="edit-site-global-styles-sidebar__header-actions"
 					>
-						<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/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -33,6 +33,7 @@ function ScreenCSS() {
 				description={
 					<>
 						{ description }
+						<br />
 						<ExternalLink
 							href={ __(
 								'https://developer.wordpress.org/advanced-administration/wordpress/css/'

diff --git a/packages/editor/src/components/plugin-sidebar/index.js b/packages/editor/src/components/plugin-sidebar/index.js
@@ -1,15 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 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`.
@@ -76,16 +69,10 @@ import { store as editorStore } from '../../store';
  * ```
  */
 export default function PluginSidebar( { className, ...props } ) {
-	const { postTitle } = useSelect( ( select ) => {
-		return {
-			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
-		};
-	}, [] );
 	return (
 		<ComplementaryArea
 			panelClassName={ className }
 			className="editor-sidebar"
-			smallScreenTitle={ postTitle || __( '(no title)' ) }
 			scope="core"
 			{ ...props }
 		/>

diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Removed `smallScreenTitle` prop from the `ComplementaryArea` component ([#64474](https://github.com/WordPress/gutenberg/pull/64474)).
+
 ## 7.0.0 (2024-10-16)
 
 ### Breaking Changes

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.
@@ -23,12 +6,4 @@
 	.interface-complementary-area-header__title {
 		margin: 0;
 	}
-
-	.components-button.has-icon {
-		display: none;
-
-		@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,9 @@ function ComplementaryArea( {
 		},
 		[ identifier, scope ]
 	);
+
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
 	useAdjustComplementaryListener(
 		scope,
 		identifier,
@@ -300,7 +302,6 @@ function ComplementaryArea( {
 					className={ headerClassName }
 					closeLabel={ closeLabel }
 					onClose={ () => disableComplementaryArea( scope ) }
-					smallScreenTitle={ smallScreenTitle }
 					toggleButtonProps={ {
 						label: closeLabel,
 						size: 'small',
@@ -314,7 +315,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;
 		}
 	}