Fix scrollbars on pattern transforms (#55069)

* Fix scrollbars on pattern transforms * Fix single pattern previews * Improve classname semantics * Remove modal title
WordPress · Oct 10, 2023 · 9468195 · 9468195
1 parent d505480
commit 9468195
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
@@ -60,10 +60,7 @@ function PreviewPatternsPopover( { patterns, onSelect } ) {
 					className="block-editor-block-switcher__preview__popover"
 					position="bottom right"
 				>
-					<div className="block-editor-block-switcher__preview">
-						<div className="block-editor-block-switcher__preview-title">
-							{ __( 'Preview' ) }
-						</div>
+					<div className="block-editor-block-switcher__preview is-pattern-list-preview">
 						<BlockPatternsList
 							patterns={ patterns }
 							onSelect={ onSelect }

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -98,6 +98,7 @@
 
 .block-editor-block-switcher__preview__popover {
 	display: none;
+	overflow: hidden;
 
 	// Position correctly. Needs specificity.
 	&.components-popover {
@@ -115,6 +116,7 @@
 		border-radius: $radius-block-ui;
 		outline: none;
 		box-shadow: none;
+		overflow: auto;
 	}
 
 	.block-editor-block-switcher__preview {
@@ -124,6 +126,10 @@
 		// Use padding to prevent the pattern previews focus style from being cut-off.
 		padding: 0 $grid-unit-20;
 		overflow: hidden;
+
+		&.is-pattern-list-preview {
+			overflow: unset;
+		}
 	}
 }