add overflow support inside block switcher (#16984)

* add overflow support inside block switcher
WordPress · Aug 29, 2019 · c5dc11b · c5dc11b
1 parent d33e494
commit c5dc11b
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 56 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -127,38 +127,41 @@ export class BlockSwitcher extends Component {
 				} }
 				renderContent={ ( { onClose } ) => (
 					<>
-						{ hasBlockStyles &&
-							<PanelBody
-								title={ __( 'Block Styles' ) }
-								initialOpen
-							>
-								<BlockStyles
-									clientId={ blocks[ 0 ].clientId }
-									onSwitch={ onClose }
-									onHoverClassName={ this.onHoverClassName }
-								/>
-							</PanelBody>
-						}
-						{ possibleBlockTransformations.length !== 0 &&
-							<PanelBody
-								title={ __( 'Transform To:' ) }
-								initialOpen
-							>
-								<BlockTypesList
-									items={ possibleBlockTransformations.map( ( destinationBlockType ) => ( {
-										id: destinationBlockType.name,
-										icon: destinationBlockType.icon,
-										title: destinationBlockType.title,
-										hasChildBlocksWithInserterSupport: hasChildBlocksWithInserterSupport( destinationBlockType.name ),
-									} ) ) }
-									onSelect={ ( item ) => {
-										onTransform( blocks, item.id );
-										onClose();
-									} }
-								/>
-							</PanelBody>
+						{ ( hasBlockStyles || possibleBlockTransformations.length !== 0 ) &&
+							<div className="block-editor-block-switcher__container">
+								{ hasBlockStyles &&
+									<PanelBody
+										title={ __( 'Block Styles' ) }
+										initialOpen
+									>
+										<BlockStyles
+											clientId={ blocks[ 0 ].clientId }
+											onSwitch={ onClose }
+											onHoverClassName={ this.onHoverClassName }
+										/>
+									</PanelBody>
+								}
+								{ possibleBlockTransformations.length !== 0 &&
+									<PanelBody
+										title={ __( 'Transform To:' ) }
+										initialOpen
+									>
+										<BlockTypesList
+											items={ possibleBlockTransformations.map( ( destinationBlockType ) => ( {
+												id: destinationBlockType.name,
+												icon: destinationBlockType.icon,
+												title: destinationBlockType.title,
+												hasChildBlocksWithInserterSupport: hasChildBlocksWithInserterSupport( destinationBlockType.name ),
+											} ) ) }
+											onSelect={ ( item ) => {
+												onTransform( blocks, item.id );
+												onClose();
+											} }
+										/>
+									</PanelBody>
+								}
+							</div>
 						}
-
 						{ ( hoveredClassName !== null ) &&
 							<div className="block-editor-block-switcher__preview">
 								<div className="block-editor-block-switcher__preview-title">{ __( 'Preview' ) }</div>

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -88,15 +88,37 @@
 		@include formatting-button-style__focus();
 	}
 }
-
+// We double the max-width for it to fit both the preview & content but we keep the min width the same for the border to work.
 .components-popover:not(.is-mobile).block-editor-block-switcher__popover .components-popover__content {
 	min-width: 300px;
-	max-width: 340px;
+	max-width: calc(340px * 2);
+	display: flex;
+	background: $white;
+	box-shadow: $shadow-popover;
 }
 
 .block-editor-block-switcher__popover .components-popover__content {
+	.block-editor-block-switcher__container {
+		min-width: 300px;
+		max-width: 340px;
+		width: 50%;
+	}
+
 	@include break-medium {
 		position: relative;
+
+		.block-editor-block-switcher__preview {
+			border-left: $border-width solid $light-gray-500;
+			box-shadow: $shadow-popover;
+			background: $white;
+			width: 300px;
+			height: auto;
+			// Sticky helps us keep the preview at the top when scrolling
+			position: sticky;
+			align-self: stretch;
+			// For sticky to work we need top
+			top: 0;
+		}
 	}
 
 	// Hide the bottom border on the last panel so it stacks with the popover.
@@ -113,11 +135,6 @@
 	}
 }
 
-.block-editor-block-switcher__popover:not(.is-mobile) > .components-popover__content {
-	// Reset overflow to allow showing the preview on the left once an item is hovered.
-	overflow-y: visible;
-}
-
 .block-editor-block-switcher__popover .block-editor-block-styles {
 	margin: 0 -3px; // Remove the panel body padding while keeping it for the title.
 }
@@ -126,24 +143,6 @@
 	margin: 8px -8px -8px;
 }
 
-.block-editor-block-switcher__preview {
-	border: $border-width solid $light-gray-500;
-	box-shadow: $shadow-popover;
-	background: $white;
-	position: absolute;
-	left: 100%;
-	top: -1px;
-	bottom: -1px;
-	width: 300px;
-	height: auto;
-	padding: 10px;
-	display: none;
-
-	@include break-medium {
-		display: block;
-	}
-}
-
 .block-editor-block-switcher__preview-title {
 	margin-bottom: 10px;
 	color: $dark-gray-300;