From 379e5f42d11a46dfa29fe4c595ba43f1f3ba9b17 Mon Sep 17 00:00:00 2001 From: Maggie Date: Thu, 11 Jul 2024 16:45:47 +0200 Subject: [PATCH] Apply same styles to block previews on inserter and Global Styles (#63177) * 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 * Update packages/edit-site/src/components/global-styles/block-preview-panel.js * commented the CSS --------- Co-authored-by: Ben Dwyer --- .../src/components/inserter/preview-panel.js | 31 ++++++++++++++++--- .../src/components/inserter/style.scss | 1 - packages/block-library/src/buttons/index.js | 6 ++++ packages/block-library/src/heading/index.js | 1 + .../block-library/src/site-tagline/block.json | 7 ++++- .../block-library/src/site-title/index.js | 7 ++++- .../global-styles/block-preview-panel.js | 25 +++++++++------ .../src/components/global-styles/style.scss | 2 +- 8 files changed, 63 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js index fa6c08d8c6c352..612b435d06dcc5 100644 --- 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 (
@@ -38,10 +47,24 @@ function InserterPreviewPanel( { item } ) {
) : ( diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index f6b5d9fe84c1d1..8660e1e304481d 100644 --- 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 index 810922fbcb839b..a39c6c6a2d6b7f 100644 --- 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 index f43b75e5320b25..d591dc94ed97d9 100644 --- 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 index 2b1c0b1cb64c77..c2061726d62a94 100644 --- 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 index 87934888ce4380..b49e1561448c7e 100644 --- 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 index 64d79e3a864367..82f429e0e2c041 100644 --- 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%; } `, - }, - ] } + }, + ] + } />
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 8fa66b6d1b7947..32145692c1fd6e 100644 --- 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;