Suggest block pattern transformations that are contextual to the currently selected 'simple' blocks (no InnerBlocks) #30469
Conversation
ntsekouras
added
[Type] Experimental
ntsekouras
changed the title
|
Size Change: +1.34 kB (0%) Total Size: 1.43 MB
ℹ️ View Unchanged
|
ntsekouras
force-pushed
the
try/simple-blocks-pattern-transformations
branch
from
74e9cd0
to
617f547
Compare
ntsekouras
requested review from
ajitbohra,
ellatrix,
spacedmonkey and
TimothyBJacobs
as code owners
ntsekouras
requested review from
mcsf,
youknowriad,
jameskoster,
jasmussen,
mtias,
gziolo and
a team
|
This is what I see:
This has enormous potential, truly, and it works very seamlessly. There are a great deal of followups we need to make:
These are very ux-heavy questions, and as a first iteration, I'm happy to approve what's here, because the implementation is does not weigh down what we have. But this also assumes that we are able to make the subsequent changes. For example, @jameskoster has some mockups around transforming root level blocks using a carousel — I presume that could use the same underlying tech here? |
For context, I assume you're referring to this one: iron-man.mp4Disclaimer: This is still a very rough concept :D
This is an interesting question. Since Groups have very little (no?) semantic meaning in this context, I can see a world where the patterns exposed while transforming a Group are identical to the ones that would be exposed by transforming a selection of the children of that Group. |
|
Thanks for reviewing/testing!
For patterns to use this
For start I think so too, that we shouldn't try to be too smart, although we have this small check in
For now, blocks with
The logic is here and we are getting |
Gotcha. So it seems like to land this we need to graduate to a set of specific patterns though. Seems okay to start small, but would be good to start well. If it's Headings and Paragraphs right now, perhaps we could ask @kjellr for advice on what patterns might be good to surface as potential transformations? |
Agreed and since this is part of all pattern integration explorations we should add just a few..
It will be more blocks (ex list). I'm checking now and push with a couple of new test patterns. |
|
I have updated the other core blocks that can utilize I have also included a demo pattern for |
|
Fixed a small padding issue I noticed. Otherwise I agree with Joen, this feels like the first step towards something much bigger and more exciting, and due to the small footprint in the UI it is good to merge and iterate on. |
|
This looks cool! For the feature itself: I'll just note that from a casual user perspective, seeing this really blurs the lines between a "block style" and a "block pattern". The difference is purely a technical one, and I don't think users will know that at all. In terms of the patterns though, I think we should keep it as minimal as possible in this initial PR — maybe just use a paragraph or header example or two? I should have a little time tomorrow to help narrow in on that if needed. @melchoyce and I are going to start thinking through a more cohesive set of single-block patterns for this feature separately. I've opened #30631 to start tracking that work. |
After thinking about it overnight, I'm not entirely sure we need to bundle any patterns as part of this PR yet. There are a lot of new patterns coming in #29973 that will work really well here. And as noted above, we'll brainstorm more of these in #30631. But if folks do think they're useful, here are just a couple "single block" patterns that I think are ok if we want to do that. The first is a simple customized paragraph, and the others are featuring relatively new settings for their respective blocks — I think patterns could be a way to help introduce those to folks. Large Paragraph with Background Color
Social links with a shared background color
Two full-width buttons
|
Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>
ntsekouras
force-pushed
the
try/simple-blocks-pattern-transformations
branch
from
449a693
to
5b505ec
Compare
|
Great job here, @ntsekouras! |
* added new block patterns * changed background colors to group block * Switch large text to use viewport width font sizes. * Make "Overseas" font size slightly smaller so it sits on one line. * renaming and pattern adjustments * linting * buttons block pattern * Remove URL links. * Adjust categories. * Ensure "Columns" category is registered. * alt text for images * added missing alt text * Revise patterns for wider theme support. Plus some minor code cleanup. * Replace images with optimized versions * Fix line height and block markup error. * Remove extra space from text. * Add "Three columns of text" to the columns category. * Update text for three columns pattern. * Set line height for three columns pattern. * Update copy for Offset Title direction. * Simplify the Two columns of text with offset heading pattern. * Add a small spacer to the "Three columns with images and text" pattern. * change color values to use hexadecimal * fixed syntax * Update images to the final WP.org CDN URLs * renamed patterns and unregistered duplicates * added context and domain to translations, escaped strings * unregistered all the old default patterns * escape attributes with esc_attr__ * escaped strings with html tags using wp_kses_post * linting * Update lib/block-patterns/media-text-arquitecture.php Co-authored-by: Kjell Reigstad <kjell@kjellr.com> * Add blockTypes prop for compatibility with #30469. * Add categories for uncategorized patterns. * Add code comment. * linting * more linting * updated snapshot related to 2 buttons block * fixed conflict * fixed adding patterns snapshot * removed IDs from gallery to fix e2e tests * removed unnecesary data attributes * removed unnecesary ids * changed ids to null Co-authored-by: Kjell Reigstad <kjell@kjellr.com>
Description
Resolves partially: #28736
Part of: #27575
This PR is a spinoff from: #29890 for suggesting block pattern transformations that are contextual to the currently selected blocks.
The goal of this PR is to handle 'simple' blocks (without InnerBlocks) first, to better manage the complexity and arbitrariness. This is a complex problem where we need to find the right balance between magic(opinionated actions) and APIs.
Notes
The core blocks that have been updated to include
role:contentin some of their attributes are:core/paragraph,core/heading,core/list,core/quote,core/pullquote,core/preformatted,core/verse,core/search.For patterns to use this transformations need to have declared
blockTypesproperty, so it now uses only my test patterns. See: Block Patterns: Removescopefrom Query patterns and introduceblockTypes#30471.Rationale behind the current decisions
APIs
blockTypesAPI introduced here: Block Patterns: Removescopefrom Query patterns and introduceblockTypes#30471__experimentalRoleproperty is added to block attribute's API. This property is optional and can mark attributes based on their role. Here is utilized by havingcontentvalue and an example is theHeadingblock. This is used by for knowing which attributes we need to retain during the pattern transformation, so as the user can keep their block's content and make use of the styling/presentation attributes of the block pattern.I have many comments in my code trying to explain as good as I can the flows.
Testing instructions
Screenshots
TODO in follow ups
Checklist:
*.native.jsfiles for terms that need renaming or removal).