Add visible close button to inserter sidebar (#61426)

* add visible close button to inserter sidebar * Use the z-index mixin --------- Co-authored-by: Ben Dwyer <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: scruffian <[email protected]>
WordPress · May 7, 2024 · 00dcbdc · 00dcbdc
1 parent dc0ea2e
commit 00dcbdc
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -16,6 +16,7 @@ $z-layers: (
 	// These next three share a stacking context
 	".block-library-template-part__selection-search": 2, // higher sticky element
 	".block-library-query-pattern__selection-search": 2, // higher sticky element
+	".editor-inserter-sidebar__header": 2,
 
 	// These next two share a stacking context
 	".interface-complementary-area .components-panel" : 0, // lower scrolling content

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -116,7 +116,8 @@ $block-inserter-tabs-height: 44px;
 	overflow: hidden;
 
 	.block-editor-inserter__tablist {
-		border-bottom: $border-width solid $gray-300;
+		// Make room for the close button
+		width: calc(100% - #{$grid-unit-60});
 
 		button[role="tab"] {
 			flex-grow: 1;
@@ -135,6 +136,7 @@ $block-inserter-tabs-height: 44px;
 		flex-grow: 1;
 		flex-direction: column;
 		overflow-y: auto;
+		border-top: $border-width solid $gray-300;
 	}
 }
 

diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button, VisuallyHidden } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import { close } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
@@ -34,7 +34,6 @@ export default function InserterSidebar( {
 	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
 		focusOnMount: true,
@@ -48,13 +47,15 @@ export default function InserterSidebar( {
 			{ ...inserterDialogProps }
 			className="editor-inserter-sidebar"
 		>
-			<TagName className="editor-inserter-sidebar__header">
+			<div className="editor-inserter-sidebar__header">
 				<Button
-					icon={ close }
+					className="editor-inserter-sidebar__close-button"
+					icon={ closeSmall }
 					label={ __( 'Close block inserter' ) }
 					onClick={ () => setIsInserterOpened( false ) }
+					size="small"
 				/>
-			</TagName>
+			</div>
 			<div className="editor-inserter-sidebar__content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }

diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss
@@ -7,16 +7,18 @@
 }
 
 .editor-inserter-sidebar__header {
-	padding-top: $grid-unit-10;
-	padding-right: $grid-unit-10;
+	position: relative;
 	display: flex;
 	justify-content: flex-end;
+	z-index: z-index(".editor-inserter-sidebar__header");
+}
+
+.editor-inserter-sidebar__close-button {
+	position: absolute;
+	top: $grid-unit-15;
+	right: $grid-unit-15;
 }
 
 .editor-inserter-sidebar__content {
-	// Leave space for the close button
-	height: calc(100% - #{$button-size} - #{$grid-unit-10});
-	@include break-medium() {
-		height: 100%;
-	}
+	height: 100%;
 }