Apply same styles to block previews on inserter and Global Styles (#6…

…3177) * apply same styles to both previews * reduced default viewport width * use sass units instead of magic numbers * revert viewport width change * fix height issue on inserter preview * calculate min height after scaling * change viewportWidth variable to add proper default * fix width issue with flexbox * centered buttons * centered blocks * remove unnecessary css rule * Update packages/block-editor/src/components/inserter/preview-panel.js Co-authored-by: Ben Dwyer <ben@scruffian.com> * Update packages/edit-site/src/components/global-styles/block-preview-panel.js * commented the CSS --------- Co-authored-by: Ben Dwyer <ben@scruffian.com>
WordPress · Jul 11, 2024 · 379e5f4 · 379e5f4
1 parent cebad82
commit 379e5f4
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 17 deletions.
diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js
@@ -30,6 +30,15 @@ function InserterPreviewPanel( { item } ) {
  innerBlocks: example.innerBlocks,
  } );
  }, [ name, example, initialAttributes ] );
+ // Same as height of BlockPreviewPanel.
+ const previewHeight = 144;
+ const sidebarWidth = 280;
+ const viewportWidth = example?.viewportWidth ?? 500;
+ const scale = sidebarWidth / viewportWidth;
+ const minHeight =
+ scale !== 0 && scale < 1 && previewHeight
+ ? previewHeight / scale
+ : previewHeight;
 
  return (
  <div className="block-editor-inserter__preview-container">
@@ -38,10 +47,24 @@ function InserterPreviewPanel( { item } ) {
  <div className="block-editor-inserter__preview-content">
  <BlockPreview
  blocks={ blocks }
- viewportWidth={ example?.viewportWidth ?? 500 }
- additionalStyles={ [
- { css: 'body { padding: 24px; }' },
- ] }
+ viewportWidth={ viewportWidth }
+ minHeight={ previewHeight }
+ additionalStyles={
+ //We want this CSS to be in sync with the one in BlockPreviewPanel.
+ [
+ {
+ css: `
+ body { 
+ padding: 24px;
+ min-height:${ Math.round( minHeight ) }px;
+ display:flex;
+ align-items:center;
+ }
+ .is-root-container { width: 100%; }
+ `,
+ },
+ ]
+ }
  />
  </div>
  ) : (

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -333,7 +333,6 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__preview-content {
- min-height: $grid-unit-60 * 3;
  background: $gray-100;
  display: grid;
  flex-grow: 1;

diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
@@ -21,6 +21,12 @@ export { metadata, name };
 export const settings = {
  icon,
  example: {
+ attributes: {
+ layout: {
+ type: 'flex',
+ justifyContent: 'center',
+ },
+ },
  innerBlocks: [
  {
  name: 'core/button',

diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
@@ -24,6 +24,7 @@ export const settings = {
  attributes: {
  content: __( 'Code is Poetry' ),
  level: 2,
+ textAlign: 'center',
  },
  },
  __experimentalLabel( attributes, { context } ) {

diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json
@@ -16,7 +16,12 @@
  "default": 0
  }
  },
- "example": {},
+ "example": {
+ "viewportWidth": 350,
+ "attributes": {
+ "textAlign": "center"
+ }
+ },
  "supports": {
  "align": [ "wide", "full" ],
  "html": false,

diff --git a/packages/block-library/src/site-title/index.js b/packages/block-library/src/site-title/index.js
@@ -17,7 +17,12 @@ export { metadata, name };
 
 export const settings = {
  icon,
- example: {},
+ example: {
+ viewportWidth: 350,
+ attributes: {
+ textAlign: 'center',
+ },
+ },
  edit,
  transforms,
  deprecated,

diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -32,8 +32,9 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
  return getBlockFromExample( name, example );
  }, [ name, blockExample, variation ] );
 
- const viewportWidth = blockExample?.viewportWidth ?? null;
- const previewHeight = 150;
+ const viewportWidth = blockExample?.viewportWidth ?? 500;
+ // Same as height of InserterPreviewPanel.
+ const previewHeight = 144;
 
  if ( ! blockExample ) {
  return null;
@@ -49,16 +50,22 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
  blocks={ blocks }
  viewportWidth={ viewportWidth }
  minHeight={ previewHeight }
- additionalStyles={ [
- {
- css: `
+ additionalStyles={
+ //We want this CSS to be in sync with the one in InserterPreviewPanel.
+ [
+ {
+ css: `
  body{
- min-height:${ previewHeight }px;
- display:flex;align-items:center;justify-content:center;
+ padding: 24px;
+ min-height:100%;
+ display:flex;
+ align-items:center;
  }
+ .is-root-container { width: 100%; }
  `,
- },
- ] }
+ },
+ ]
+ }
  />
  </div>
  </Spacer>

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -119,7 +119,7 @@
 }
 
 .edit-site-global-styles__shadow-preview-panel {
- height: 150px;
+ height: $grid-unit-60 * 3;
  border: $gray-200 $border-width solid;
  border-radius: $radius-block-ui;
  overflow: auto;