This commit tweaks the change design dropdown to resemble the change …

…design dropdown for the zoomed out section toolbar.
WordPress · Dec 4, 2024 · 7552bf5 · 7552bf5
1 parent d017783
commit 7552bf5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 38 deletions.
diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
@@ -14,38 +14,44 @@ import { __ } from '@wordpress/i18n';
  */
 import PatternSelection, { useBlockPatterns } from './pattern-selection';
 
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
 export default function QueryToolbar( { clientId, attributes } ) {
 	const hasPatterns = useBlockPatterns( clientId, attributes ).length;
 	if ( ! hasPatterns ) {
 		return null;
 	}
 
 	return (
-		<ToolbarGroup className="wp-block-template-part__block-control-group">
-			<DropdownContentWrapper>
-				<Dropdown
-					contentClassName="block-editor-block-settings-menu__popover"
-					focusOnMount="firstElement"
-					expandOnMobile
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<ToolbarButton
-							aria-haspopup="true"
-							aria-expanded={ isOpen }
-							onClick={ onToggle }
-						>
-							{ __( 'Change design' ) }
-						</ToolbarButton>
-					) }
-					renderContent={ () => (
-						<PatternSelection
-							clientId={ clientId }
-							attributes={ attributes }
-							showSearch={ false }
-							showTitlesAsTooltip
-						/>
-					) }
-				/>
-			</DropdownContentWrapper>
-		</ToolbarGroup>
+		<Dropdown
+			popoverProps={ POPOVER_PROPS }
+			expandOnMobile
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<ToolbarGroup>
+					<ToolbarButton
+						aria-haspopup="true"
+						aria-expanded={ isOpen }
+						onClick={ onToggle }
+					>
+						{ __( 'Change design' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
+			) }
+			renderContent={ () => (
+				<DropdownContentWrapper
+					className="block-library-query__toolbar-popover-content-wrapper"
+					paddingSize="none"
+				>
+					<PatternSelection
+						clientId={ clientId }
+						attributes={ attributes }
+						showSearch={ false }
+						showTitlesAsTooltip
+					/>
+				</DropdownContentWrapper>
+			) }
+		/>
 	);
 }
diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
@@ -61,12 +61,11 @@
 	margin: 0;
 }
 
-.block-editor-block-settings-menu__popover {
-	&.is-expanded {
-		overflow-y: scroll;
-	}
-	.block-library-query-pattern__selection-content {
-		height: 100%;
+.block-library-query__toolbar-popover-content-wrapper {
+	padding: $grid-unit-15;
+	width: auto;
+	@include break-small() {
+		width: 320px;
 	}
 	.block-editor-block-patterns-list {
 		display: grid;
@@ -75,12 +74,11 @@
 			grid-template-columns: 1fr 1fr;
 		}
 		grid-gap: $grid-unit-15;
-		min-width: $break-zoomed-in;
-		@include break-small() {
-			min-width: $break-mobile;
+		.block-editor-block-patterns-list__list-item {
+			margin-bottom: 0;
+		}
+		.block-editor-inserter__media-list__list-item {
+			min-height: 100px;
 		}
-	}
-	.block-editor-block-patterns-list__list-item {
-		margin-bottom: 0;
 	}
 }