-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
Post Author blocks: Add example and preview #62978
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested this and it looks good to me.
Before
Previously no preview was available:
author-blocks-before.mp4
After
When the author details are not available in the context, it shows fallback values:
author-blocks-after3.mp4
If the details are available, it shows them accordingly:
author-blocks-after4.mp4
@jameskoster do you think in this case we should force a different font size? It's a common block to have a smaller one |
That's a tricky one. It's not a strong feeling, but I'd be inclined not to add custom sizing on a per-block basis. It feels reasonably important to me that previews are accurate relative to one another. IE the text in a preview for a block with a I'd welcome feedback from others in @WordPress/gutenberg-design. |
By selecting a specific viewport size we are already skewing the relative size of the content. I've maintained the same size for the PRs I've opened but I've seen cases that change it (like the site title). I'm just mentioning this here so we try and keep it consistent. |
Size Change: -12.6 kB (-0.72%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry for the late re-review.
I think it's OK to ship this PR.
I think the problem here is that even though the block preview area in the block inserter and the block preview area in the global styles are almost the same size, the block position and scale are different.
The block preview in the block inserter is generated here:
<BlockPreview | |
blocks={ blocks } | |
viewportWidth={ example?.viewportWidth ?? 500 } | |
additionalStyles={ [ | |
{ css: 'body { padding: 24px; }' }, | |
] } | |
/> |
On the other hand, the block preview in the global styles is generated here:
gutenberg/packages/edit-site/src/components/global-styles/block-preview-panel.js
Lines 48 to 62 in 3c8bb80
<BlockPreview | |
blocks={ blocks } | |
viewportWidth={ viewportWidth } | |
minHeight={ previewHeight } | |
additionalStyles={ [ | |
{ | |
css: ` | |
body{ | |
min-height:${ previewHeight }px; | |
display:flex;align-items:center;justify-content:center; | |
} | |
`, | |
}, | |
] } | |
/> |
As you can see, the minHeight
prop and the additionalStyles
prop are different.
These props shouldn't affect the scale or position of the block itself, but somehow these props seem to affect the scale and position.
Therefore, I think we need to investigate the specs of the BlockPreview
component itself and fix the differences between the two views.
Thank you for this! we are spread out over multiple PRs on this topic so I'm sorry that you might have missed my efforts to unify this here. I'd be glad for you to have a look at it if you have the chance! |
* enable example for author blocks * moved example to index.js so it's translatable
What?
Add a basic example to the
core/post-author
,core/post-author-biography
andcore/post-author-name
blocks.Part of #30029
Why?
Because it was showing empty before
How?
I define a viewport size for the example and add some text for the byline. Please let me know if we should change the text here
Testing Instructions
Testing Instructions for Keyboard
Open the block inserter and search for the author block, hover over all 3 of the blocks and you'll see the examples
Screenshots or screencast