From b3c6e713c36f750cfe1e7a01835b80a5edf97acb Mon Sep 17 00:00:00 2001
From: Matt Sherman <matt@jam123.com>
Date: Tue, 28 May 2024 13:53:10 -0400
Subject: [PATCH] Inserter: Encapsulate styles for tablist and close button
 (#61760)

Co-authored-by: mattsherman <mattormeeple@git.wordpress.org>
Co-authored-by: retrofox <retrofox@git.wordpress.org>
---
 .../block-editor/src/components/inserter/style.scss | 13 +++++++++++++
 .../block-editor/src/components/inserter/tabs.js    |  4 ++--
 .../edit-widgets/src/components/layout/style.scss   |  2 +-
 .../src/components/inserter-sidebar/style.scss      | 13 -------------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 354a0fa70ffc55..722afbdc2a83ed 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -115,6 +115,19 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	overflow: hidden;
 
+	.block-editor-inserter__tablist-and-close-button {
+		border-bottom: $border-width solid $gray-300;
+		padding-right: $grid-unit-15;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.block-editor-inserter__close-button {
+		/* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
+		order: 1;
+		align-self: center;
+	}
+
 	.block-editor-inserter__tablist {
 		width: 100%;
 		margin-bottom: -$border-width;
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index d3ce5d80993d3f..b46e4bfdaf0148 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -39,9 +39,9 @@ function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
 	return (
 		<div className="block-editor-inserter__tabs" ref={ ref }>
 			<Tabs onSelect={ onSelect } selectedTabId={ selectedTab }>
-				<div className="block-editor-inserter-sidebar__header">
+				<div className="block-editor-inserter__tablist-and-close-button">
 					<Button
-						className="block-editor-inserter-sidebar__close-button"
+						className="block-editor-inserter__close-button"
 						icon={ closeSmall }
 						label={ __( 'Close block inserter' ) }
 						onClick={ () => onClose() }
diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss
index 4f5bb8834593da..14d74e4db9248c 100644
--- a/packages/edit-widgets/src/components/layout/style.scss
+++ b/packages/edit-widgets/src/components/layout/style.scss
@@ -18,7 +18,7 @@
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
 
-	.block-editor-inserter-sidebar__header {
+	.block-editor-inserter__tablist-and-close {
 		display: none;
 	}
 
diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss
index c33e6eb7751c90..796bdebe221a6b 100644
--- a/packages/editor/src/components/inserter-sidebar/style.scss
+++ b/packages/editor/src/components/inserter-sidebar/style.scss
@@ -6,19 +6,6 @@
 	flex-direction: column;
 }
 
-.block-editor-inserter-sidebar__header {
-	border-bottom: $border-width solid $gray-300;
-	padding-right: $grid-unit-15;
-	display: flex;
-	justify-content: space-between;
-
-	.block-editor-inserter-sidebar__close-button {
-		/* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
-		order: 1;
-		align-self: center;
-	}
-}
-
 .editor-inserter-sidebar__content {
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});