hide explore button when inserter goes full width + small css fix for…

… pattern item in quick inserter results
WordPress · Nov 5, 2021 · e0210ce · e0210ce
1 parent f340730
commit e0210ce
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/inserter/pattern-panel.js b/packages/block-editor/src/components/inserter/pattern-panel.js
@@ -8,13 +8,15 @@ import classnames from 'classnames';
  */
 import { Flex, FlexItem, SelectControl, Button } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
 
 function PatternInserterPanel( {
 	selectedCategory,
 	patternCategories,
 	onClickCategory,
 	openPatternExplorer,
 } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
 	const categoryOptions = () => {
 		const options = [];
 
@@ -69,16 +71,21 @@ function PatternInserterPanel( {
 					options={ categoryOptions() }
 				/>
 			</FlexItem>
-			<FlexItem>
-				<Button
-					variant="secondary"
-					className="block-editor-inserter__patterns-explorer-expand"
-					label={ __( 'Explore all patterns' ) }
-					onClick={ () => openPatternExplorer() }
-				>
-					{ _x( 'Explore', 'Label for showing all block patterns' ) }
-				</Button>
-			</FlexItem>
+			{ ! isMobile && (
+				<FlexItem>
+					<Button
+						variant="secondary"
+						className="block-editor-inserter__patterns-explorer-expand"
+						label={ __( 'Explore all patterns' ) }
+						onClick={ () => openPatternExplorer() }
+					>
+						{ _x(
+							'Explore',
+							'Label for showing all block patterns'
+						) }
+					</Button>
+				</FlexItem>
+			) }
 		</Flex>
 	);
 }

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -297,6 +297,9 @@ $block-inserter-tabs-height: 44px;
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		grid-gap: $grid-unit-10;
+		.block-editor-block-patterns-list__list-item {
+			margin-bottom: 0;
+		}
 		.block-editor-block-preview__container {
 			min-height: 100px;
 		}