Update all block previews to use the auto-height behavior (#21014)

WordPress · Mar 24, 2020 · 622362a · 622362a
1 parent f132100
commit 622362a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -141,6 +141,7 @@ function BlockStyles( {
 					>
 						<div className="block-editor-block-styles__item-preview">
 							<BlockPreview
+								autoHeight
 								viewportWidth={ 500 }
 								blocks={
 									type.example

diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
@@ -12,7 +12,8 @@
 	overflow: hidden;
 	border-radius: $radius-round-rectangle;
 	padding: $grid-unit-05 * 1.5;
-	padding-top: calc(50% * 0.75 - #{ $grid-unit-05 } * 1.5);
+	display: flex;
+	flex-direction: column;
 
 	&:focus {
 		@include block-style__focus();
@@ -46,14 +47,9 @@
 	display: flex;
 	overflow: hidden;
 	background: $white;
-	padding-top: 75%;
-	margin-top: -75%;
-
-	.block-editor-block-preview__container {
-		padding-top: 0;
-		margin: 0;
-		margin-top: -75%;
-	}
+	align-items: center;
+	flex-grow: 1;
+	min-height: 80px;
 }
 
 .block-editor-block-styles__item-label {

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -187,6 +187,7 @@ export class BlockSwitcher extends Component {
 									{ __( 'Preview' ) }
 								</div>
 								<BlockPreview
+									autoHeight
 									viewportWidth={ 500 }
 									blocks={
 										hoveredBlockType.example

diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js
@@ -22,7 +22,7 @@ function TemplatePartPreview() {
 			<div className="wp-block-template-part__placeholder-preview-title">
 				{ __( 'Preview' ) }
 			</div>
-			<BlockPreview blocks={ blocks } />
+			<BlockPreview blocks={ blocks } autoHeight />
 		</div>
 	);
 }