bring back the pinned area items for settings and styles in the site …

…editor mobile views (#53412)
WordPress · Aug 8, 2023 · 57c4a6e · 57c4a6e
1 parent cf44056
commit 57c4a6e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 20 deletions.
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -55,7 +55,9 @@
 	overflow: hidden;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
-	padding-left: $grid-unit-40;
+	@include break-small() {
+		padding-left: $grid-unit-40;
+	}
 
 	&:hover {
 		color: var(--wp-block-synced-color);
@@ -95,6 +97,10 @@
 .edit-site-document-actions__shortcut {
 	color: $gray-800;
 	min-width: $grid-unit-40;
+	display: none;
+	@include break-small() {
+		display: initial;
+	}
 }
 
 .edit-site-document-actions__back.components-button.has-icon.has-text {

diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -88,15 +88,6 @@ $header-toolbar-min-width: 335px;
 	@include break-small() {
 		gap: $grid-unit-10;
 	}
-
-	// Pinned items.
-	.interface-pinned-items {
-		display: none;
-
-		@include break-medium() {
-			display: inline-flex;
-		}
-	}
 }
 
 .edit-site-header-edit-mode__preview-options {

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
@@ -35,6 +35,7 @@ export default function DefaultSidebar( {
 				scope="core/edit-site"
 				identifier={ identifier }
 				title={ title }
+				smallScreenTitle={ title }
 				icon={ icon }
 				closeLabel={ closeLabel }
 				header={ header }

diff --git a/packages/interface/src/components/pinned-items/style.scss b/packages/interface/src/components/pinned-items/style.scss
@@ -3,8 +3,19 @@
 
 	// We intentionally hide pinned items (plugins) on mobile, and unhide them at desktop breakpoints.
 	// Otherwise the list can wreak havoc on the layout.
-	.components-button:not(:first-child) {
+	.components-button {
 		display: none;
+		margin: 0;
+
+		&:nth-last-child(1),
+		&:nth-last-child(2) {
+			display: flex;
+		}
+
+		svg {
+			max-width: $icon-size;
+			max-height: $icon-size;
+		}
 
 		@include break-small() {
 			display: flex;
@@ -16,13 +27,4 @@
 
 	// Account for larger grid from parent container gap.
 	margin-right: -$grid-unit-05;
-
-	.components-button {
-		margin: 0;
-
-		svg {
-			max-width: $icon-size;
-			max-height: $icon-size;
-		}
-	}
 }