Consolidate and resolve display of InserterPreviewPanel and BlockStyl…

…esPreviewPanel (#56011) * BlockCard: render description markup only when available * Consolidate BlockCard styles * Remove unnecessary specific block card styles * Adjust BlockStyles Popover offset * Remove InserterPreviewPanel overrides in BlockStyles scss * Use a popover for inserter previews * Clean up block preview
WordPress · Dec 2, 2023 · d659081 · d659081
1 parent 4d1d4f8
commit d659081
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 38 deletions.
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
@@ -62,9 +62,11 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 			<BlockIcon icon={ icon } showColors />
 			<div className="block-editor-block-card__content">
 				<h2 className="block-editor-block-card__title">{ title }</h2>
-				<span className="block-editor-block-card__description">
-					{ description }
-				</span>
+				{ description && (
+					<span className="block-editor-block-card__description">
+						{ description }
+					</span>
+				) }
 			</div>
 		</div>
 	);

diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss
@@ -1,24 +1,28 @@
 .block-editor-block-card {
-	display: flex;
 	align-items: flex-start;
+	color: $gray-900;
+	display: flex;
+	padding: $grid-unit-20;
 }
 
 .block-editor-block-card__content {
 	flex-grow: 1;
-	margin-bottom: $grid-unit-05;
 }
 
 .block-editor-block-card__title {
 	font-weight: 500;
 
 	&.block-editor-block-card__title {
+		font-size: $default-font-size;
 		line-height: $button-size-small;
-		margin: 0 0 $grid-unit-05;
+		margin: 0;
 	}
 }
 
 .block-editor-block-card__description {
+	display: block;
 	font-size: $default-font-size;
+	margin-top: $grid-unit-05;
 }
 
 .block-editor-block-card .block-editor-block-icon {

diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
@@ -34,10 +34,6 @@
 		// Ensures this PanelBody is treated like the ToolsPanel, removing double borders.
 		margin-top: -$border-width;
 	}
-
-	.block-editor-block-card {
-		padding: $grid-unit-20;
-	}
 }
 
 .block-editor-block-inspector__no-blocks,

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
@@ -7,6 +7,7 @@
 	// The preview component measures the pixel width of this item, so as to calculate the scale factor.
 	// But without this baseline width, it collapses to 0.
 	width: 100%;
+	height: 100%;
 
 	overflow: hidden;
 

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -98,7 +98,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 			{ hoveredStyle && ! isMobileViewport && (
 				<Popover
 					placement="left-start"
-					offset={ 20 }
+					offset={ 34 }
 					focusOnMount={ false }
 				>
 					<div

diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
@@ -12,17 +12,6 @@
 		display: block;
 	}
 
-	// Overrides for InserterPreviewPanel.
-	.block-editor-inserter__preview-container {
-		left: auto;
-		right: auto;
-		top: auto;
-		position: static;
-	}
-
-	.block-editor-block-card__title.block-editor-block-card__title {
-		margin: 0;
-	}
 	.block-editor-block-icon {
 		display: none;
 	}

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -14,7 +14,7 @@ import {
 	useImperativeHandle,
 	useRef,
 } from '@wordpress/element';
-import { VisuallyHidden, SearchControl } from '@wordpress/components';
+import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
@@ -293,7 +293,15 @@ function InserterMenu(
 				/>
 			) }
 			{ showInserterHelpPanel && hoveredItem && (
-				<InserterPreviewPanel item={ hoveredItem } />
+				<Popover
+					className="block-editor-inserter__preview-container__popover"
+					placement="right-start"
+					offset={ 16 }
+					focusOnMount={ false }
+					animate={ false }
+				>
+					<InserterPreviewPanel item={ hoveredItem } />
+				</Popover>
 			) }
 			{ showPatternPanel && (
 				<PatternCategoryPreviewPanel

diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js
@@ -40,13 +40,13 @@ function InserterPreviewPanel( { item } ) {
 							blocks={ blocks }
 							viewportWidth={ example?.viewportWidth ?? 500 }
 							additionalStyles={ [
-								{ css: 'body { padding: 16px; }' },
+								{ css: 'body { padding: 24px; }' },
 							] }
 						/>
 					</div>
 				) : (
 					<div className="block-editor-inserter__preview-content-missing">
-						{ __( 'No Preview Available.' ) }
+						{ __( 'No preview available.' ) }
 					</div>
 				) }
 			</div>

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -214,15 +214,14 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__preview-container__popover {
+	top: $grid-unit-20 !important;
+}
+
 .block-editor-inserter__preview-container {
 	display: none;
-	width: 300px;
-	background: $white;
-	border-radius: $radius-block-ui;
-	border: $border-width solid $gray-300;
-	position: absolute;
-	top: $grid-unit-20;
-	left: calc(100% + #{$grid-unit-20});
+	width: $sidebar-width;
+	padding: $grid-unit-20;
 	max-height: calc(100% - #{$grid-unit-40});
 	overflow-y: hidden;
 
@@ -231,11 +230,9 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-block-card {
-		padding: $grid-unit-20;
-	}
-
-	.block-editor-block-card__title {
-		font-size: $default-font-size;
+		padding-left: 0;
+		padding-right: 0;
+		padding-bottom: $grid-unit-05;
 	}
 }
 
@@ -366,6 +363,7 @@ $block-inserter-tabs-height: 44px;
 	min-height: $grid-unit-60 * 3;
 	color: $gray-700;
 	background: $gray-100;
+	border-radius: $radius-block-ui;
 }
 
 .block-editor-inserter__tips {