Post Author blocks: Add example and preview #62978
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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. |
MaggieCabrera
added
[Type] Enhancement
artemiomorales
approved these changes
Jun 30, 2024
There was a problem hiding this comment.
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
|
In the Site Editor, where the real data can not be shown, it is perhaps a bit small still. I personally struggle to see the text "Author Name" when Twenty Twenty-Four is active, because its blurry. The theme sets the default text size to small.
The examples are strangely positioned differently in different previews, but that is unrelated to this PR. |
@jameskoster do you think in this case we should force a different font size? It's a common block to have a smaller one |
18 tasks
|
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. |
t-hamano
reviewed
Jul 1, 2024
|
Size Change: -12.6 kB (-0.72%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
t-hamano
approved these changes
Jul 11, 2024
There was a problem hiding this comment.
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:
On the other hand, the block preview in the global styles is generated here:
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! |
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jul 18, 2024
* enable example for author blocks * moved example to index.js so it's translatable
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Add a basic example to the
core/post-author,core/post-author-biographyandcore/post-author-nameblocks.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