Unify BlockPreview & BlockPreviewContent into one component (#16801)

* export BlockPreview * Update reusable Blocks preview to use the new single blocks prop * Remove export. This is being handled in another PR See #16801 * mark all usages with red for easier visual tracking * make a new unified component * use new component in style thumbnail * update usage in block switcher, add isScaled & className support * revert initial state in block switcher * use in block inserter * use the new unified component as default, migrate usages * drop word 'unified' from classname * remove extra import. h/t @retrofox * remove border around previews * fix styling of scaled previews * make abstract component for styling previews inside dropdowns * move block switcher & inserter to use common component for styling * drop the old editor-block-preview class * revert dropdown component abstraction This reverts commit 5bc673e. This reverts commit 3006c01.
WordPress · Aug 2, 2019 · 1322523 · 1322523
1 parent 756dcea
commit 1322523
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 80 deletions.
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
@@ -2,11 +2,11 @@
  * External dependencies
  */
 import { castArray } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Disabled } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 
@@ -23,22 +23,24 @@ import BlockList from '../block-list';
  *
  * @return {WPElement} Rendered element.
  */
-function BlockPreview( props ) {
-	return (
-		<div className="editor-block-preview block-editor-block-preview">
-			<div className="editor-block-preview__title block-editor-block-preview__title">{ __( 'Preview' ) }</div>
-			<BlockPreviewContent { ...props } />
-		</div>
-	);
-}
-
-export function BlockPreviewContent( { blocks, settings } ) {
+function BlockPreview( { blocks, settings, className, isScaled } ) {
 	if ( ! blocks ) {
 		return null;
 	}
-
 	return (
-		<Disabled className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper" aria-hidden>
+		<Disabled
+			aria-hidden
+			className={
+				classnames(
+					className,
+					'block-editor-block-preview',
+					'editor-styles-wrapper',
+					{
+						'is-scaled': isScaled,
+					}
+				)
+			}
+		>
 			<BlockEditorProvider
 				value={ castArray( blocks ) }
 				settings={ settings }

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
@@ -1,35 +1,9 @@
 .block-editor-block-preview {
-	pointer-events: none;
-	padding: 10px;
+	padding: $block-padding;
+	font-family: $editor-font;
 	overflow: hidden;
-	display: none;
+	width: 100%;
 
-	@include break-medium {
-		display: block;
-	}
-
-	.block-editor-block-preview__content {
-		padding: $block-padding;
-		border: $border-width solid $light-gray-500;
-		font-family: $editor-font;
-
-		> div {
-			transform: scale(0.9);
-			transform-origin: center top;
-			font-family: $editor-font;
-		}
-
-		> div section {
-			height: auto;
-		}
-
-		> .reusable-block-indicator {
-			display: none;
-		}
-	}
-}
-
-.block-editor-block-preview__content {
 	// Resetting the block editor paddings and margins
 	.block-editor-block-list__layout,
 	.block-editor-block-list__block {
@@ -38,9 +12,23 @@
 	.editor-block-list__block-edit [data-block] {
 		margin-top: 0;
 	}
-}
 
-.block-editor-block-preview__title {
-	margin-bottom: 10px;
-	color: $dark-gray-300;
+	> div section {
+		height: auto;
+	}
+
+	> .reusable-block-indicator {
+		display: none;
+	}
+
+	.block-list-appender {
+		display: none;
+	}
+
+	&.is-scaled {
+		> div {
+			transform: scale(0.9);
+			transform-origin: center top;
+		}
+	}
 }
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -17,7 +17,7 @@ import { getBlockType, cloneBlock } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import { BlockPreviewContent } from '../block-preview';
+import BlockPreview from '../block-preview';
 
 /**
  * Returns the active style from the given className.
@@ -122,7 +122,8 @@ function BlockStyles( {
 						aria-label={ style.label || style.name }
 					>
 						<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
-							<BlockPreviewContent
+							<BlockPreview
+								isScaled
 								blocks={ cloneBlock( block, {
 									className: styleClassName,
 								} ) }

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -160,14 +160,17 @@ export class BlockSwitcher extends Component {
 						}
 
 						{ ( hoveredClassName !== null ) &&
-							<BlockPreview
-								blocks={
-									cloneBlock( blocks[ 0 ], {
-										className: hoveredClassName,
-									} )
-								}
-
-							/>
+							<div className="block-editor-block-switcher__preview">
+								<div className="block-editor-block-switcher__preview-title">{ __( 'Preview' ) }</div>
+								<BlockPreview
+									className="block-editor-block-switcher__preview-content"
+									blocks={
+										cloneBlock( blocks[ 0 ], {
+											className: hoveredClassName,
+										} )
+									}
+								/>
+							</div>
 						}
 					</>
 				) }

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -97,18 +97,6 @@
 .block-editor-block-switcher__popover .components-popover__content {
 	@include break-medium {
 		position: relative;
-
-		.block-editor-block-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;
-		}
 	}
 
 	// Hide the bottom border on the last panel so it stacks with the popover.
@@ -137,3 +125,26 @@
 .block-editor-block-switcher__popover .block-editor-block-types-list {
 	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;
+}
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -351,7 +351,13 @@ export class InserterMenu extends Component {
 				</div>
 
 				{ hoveredItem && isReusableBlock( hoveredItem ) &&
-					<BlockPreview blocks={ createBlock( hoveredItem.name, hoveredItem.initialAttributes ) } />
+					<div className="block-editor-inserter__preview">
+						<div className="block-editor-inserter__preview-title">{ __( 'Preview' ) }</div>
+						<BlockPreview
+							className="block-editor-inserter__preview-content"
+							blocks={ createBlock( hoveredItem.name, hoveredItem.initialAttributes ) }
+						/>
+					</div>
 				}
 			</div>
 		);

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -43,17 +43,6 @@ $block-inserter-search-height: 38px;
 	@include break-medium {
 		width: 400px;
 		position: relative;
-
-		.block-editor-block-preview {
-			border: $border-width solid $light-gray-500;
-			box-shadow: $shadow-popover;
-			background: $white;
-			position: absolute;
-			left: 100%;
-			top: -1px;
-			bottom: -1px;
-			width: 300px;
-		}
 	}
 }
 
@@ -140,3 +129,26 @@ $block-inserter-search-height: 38px;
 		margin-right: $grid-size;
 	}
 }
+
+.block-editor-inserter__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-inserter__preview-title {
+	margin-bottom: 10px;
+	color: $dark-gray-300;
+}