-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Add block variations for individual template parts #42454
Conversation
@jameskoster I've created this PR to explore the third part from your comment (#42142 (comment)):
This is using the variation system at the moment. In practice it's very convenient, though a couple of issues:
|
Thanks for working on this @talldan !
Good observations, I agree that the preview would be very helpful. On a similar note, the descriptions that appear in the preview don't work so well. In the future it should be possible for each template part to have its own custom description, but until then we can probably hide it for these variations. For now it's probably ok to keep these in the Theme section of the Inserter. I appreciate that section is going to get very full when there are many template parts, but we should probably concentrate on how best to scale in a concentrated design exploration. Relevant discussion here, and #41379. Aside from the previews / description, the other offending issue is how particularly long names wrap on to so many lines. Since the full name appears in the preview, I think it might be ok to truncate in the Inserter panel. What do you think? |
Size Change: 0 B Total Size: 1.26 MB ℹ️ View Unchanged
|
7eba98a
to
733fcd0
Compare
@jameskoster I've pushed some extra commits:
|
Nice, everything seems to be working well, and three-line truncation seems good. The preview is a little small but that's not something to address here unless it's easy to do so. There's some awkward behaviour in the quick inserter – when a search returns patterns and template parts, the patterns are given visual prominence which is probably the opposite of what we want. I'll open an issue to discuss that. cc @WordPress/gutenberg-design for thoughts on this PR. |
My initial thought is that it would crowd the Block Inspector with a lot of Header and Footer Template Parts. I am thinking that first one needs to rethink the block inserter and then think about how to present template parts in an easier way. |
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.
This works well for me. The icons for the header and footer parts makes it easy for me to understand the context and find and select the part.
I think the parts should be in a separate category but that can be discussed and solved separately.
Thanks for reviewing 😄 I'll go ahead and merge this, if there's more feedback I'm happy to make further changes or revert the PR. |
This reverts commit 8d2e12d.
const isReusable = isReusableBlock( item ); | ||
return ( | ||
<div className="block-editor-inserter__preview-container"> | ||
<div className="block-editor-inserter__preview"> | ||
{ isReusable || hoveredItemBlockType?.example ? ( |
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.
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.
Thanks for spotting that.
I thought this component was only part of the Inserter, so didn't think to test that. Perhaps it should be renamed.
What?
Closes #31748
Adds a variation for each individual template part. Makes it so that users can see individual template parts like 'Header (dark, large)' (from TT2) in the inserter. The goal is to make it easier to insert existing template parts directly from the inserter.
Why?
This is part of the discussion here - #42142 (comment)
The plan at the moment is to explore quicker and easier ways for users to insert existing template part content (both existing template parts and patterns).
How?
Adds additional block variations by expanding on the PHP code that adds area variations.
Testing Instructions
Screenshots or screencast