Inserter: Encapsulate styles for tablist and close button (WordPress#…

…61760) Co-authored-by: mattsherman <[email protected]> Co-authored-by: retrofox <[email protected]>
patil-vipul · Jun 17, 2024 · f900b82 · f900b82
1 parent 2ee222f
commit f900b82
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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});