Revert 61426

WordPress · May 8, 2024 · f9bad74 · f9bad74
1 parent 4c28ed3
commit f9bad74
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 20 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -16,7 +16,6 @@ $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,8 +116,7 @@ $block-inserter-tabs-height: 44px;
 	overflow: hidden;
 
 	.block-editor-inserter__tablist {
-		// Make room for the close button
-		width: calc(100% - #{$grid-unit-60});
+		border-bottom: $border-width solid $gray-300;
 
 		button[role="tab"] {
 			flex-grow: 1;
@@ -136,7 +135,6 @@ $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 } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import { closeSmall } from '@wordpress/icons';
+import { close } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
@@ -31,19 +31,18 @@ export default function InserterSidebar( {
 	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const libraryRef = useRef();
 
 	return (
 		<div className="editor-inserter-sidebar">
-			<div className="editor-inserter-sidebar__header">
+			<TagName className="editor-inserter-sidebar__header">
 				<Button
-					className="editor-inserter-sidebar__close-button"
-					icon={ closeSmall }
+					icon={ close }
 					label={ __( 'Close block inserter' ) }
 					onClick={ () => setIsInserterOpened( false ) }
-					size="small"
 				/>
-			</div>
+			</TagName>
 			<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,18 +7,17 @@
 }
 
 .editor-inserter-sidebar__header {
-	position: relative;
+	padding-top: $grid-unit-10;
+	padding-right: $grid-unit-10;
 	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 - $border-width * 0.5; // Account for the existing border to make this the same close as in list view.
-	right: $grid-unit-15;
 }
 
 .editor-inserter-sidebar__content {
-	height: 100%;
+	// Leave space for the close button
+	height: calc(100% - #{$button-size} - #{$grid-unit-10});
+
+	@include break-medium() {
+		height: 100%;
+	}
 }