Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Apply same styles to block previews on inserter and Global Styles #63177

Merged
merged 14 commits into from
Jul 11, 2024
Merged

Apply same styles to block previews on inserter and Global Styles #63177

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4f2f157
apply same styles to both previews
MaggieCabrera Jul 5, 2024
319aa1a
reduced default viewport width
MaggieCabrera Jul 5, 2024
517bdad
use sass units instead of magic numbers
MaggieCabrera Jul 5, 2024
26aa120
revert viewport width change
MaggieCabrera Jul 5, 2024
533ba11
fix height issue on inserter preview
MaggieCabrera Jul 5, 2024
71e3715
calculate min height after scaling
MaggieCabrera Jul 5, 2024
619e5d7
change viewportWidth variable to add proper default
MaggieCabrera Jul 8, 2024
324c2f3
fix width issue with flexbox
MaggieCabrera Jul 10, 2024
e316a5b
centered buttons
MaggieCabrera Jul 10, 2024
170bf13
centered blocks
MaggieCabrera Jul 10, 2024
c3004e6
remove unnecessary css rule
MaggieCabrera Jul 10, 2024
02ab2b6
Update packages/block-editor/src/components/inserter/preview-panel.js
MaggieCabrera Jul 11, 2024
c57deb1
Update packages/edit-site/src/components/global-styles/block-preview-…
scruffian Jul 11, 2024
f7844fe
commented the CSS
MaggieCabrera Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions packages/block-editor/src/components/inserter/preview-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -38,9 +47,19 @@ function InserterPreviewPanel( { item } ) {
<div className="block-editor-inserter__preview-content">
<BlockPreview
blocks={ blocks }
viewportWidth={ example?.viewportWidth ?? 500 }
viewportWidth={ viewportWidth }
minHeight={ previewHeight }
additionalStyles={ [
{ css: 'body { padding: 24px; }' },
{
css: `
body {
padding: 24px;
min-height:${ Math.round( minHeight ) }px;
display:flex;align-items:center;
MaggieCabrera marked this conversation as resolved.
Show resolved Hide resolved
}
MaggieCabrera marked this conversation as resolved.
Show resolved Hide resolved
.is-root-container { width: 100%; }
`,
},
] }
/>
</div>
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,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;
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/buttons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ export { metadata, name };
export const settings = {
icon,
example: {
attributes: {
layout: {
type: 'flex',
justifyContent: 'center',
},
},
innerBlocks: [
{
name: 'core/button',
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/heading/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export const settings = {
attributes: {
content: __( 'Code is Poetry' ),
level: 2,
textAlign: 'center',
},
},
__experimentalLabel( attributes, { context } ) {
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/site-tagline/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@
"default": 0
}
},
"example": {},
"example": {
"viewportWidth": 350,
"attributes": {
"textAlign": "center"
}
},
"supports": {
"align": [ "wide", "full" ],
"html": false,
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/site-title/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@ export { metadata, name };

export const settings = {
icon,
example: {},
example: {
viewportWidth: 350,
attributes: {
textAlign: 'center',
},
},
edit,
transforms,
deprecated,
Expand Down
11 changes: 7 additions & 4 deletions packages/edit-site/src/components/global-styles/block-preview-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -53,9 +54,11 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
{
css: `
body{
min-height:${ previewHeight }px;
display:flex;align-items:center;justify-content:center;
padding: 24px;
MaggieCabrera marked this conversation as resolved.
Show resolved Hide resolved
min-height:100%;
display:flex;align-items:center;
scruffian marked this conversation as resolved.
Show resolved Hide resolved
}
.is-root-container { width: 100%; }
`,
},
] }
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,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;
Expand Down
Loading