Add: Page start options (templates and patterns). #39147
Conversation
jorgefilipecosta
added
Needs Design
|
Size Change: +869 B (0%) Total Size: 1.15 MB
ℹ️ View Unchanged
|
|
Has it been decided if this feature will be opt-in or opt-out? |
|
The template selection step feels very awkward to me, mostly due to my choice not being reflected on the canvas. It feels like my selection has been ignored. Choosing the template and pattern sequentially isn't a great experience either – it doesn't feel obvious how they interact. It would be interesting for design to explore how these actions can be combined. Time for 'exploded view' @jasmussen? |
|
Thanks for working on this! Here's what I see: To echo Jay, the modal appears and lets me select a template, but it looks like nothing has happened as that template isn't visible in a canvas I would otherwise expect to be wysiwyg. Riad seems to touch on something in the initial issue:
The intricacies of this are a bit complex to parse, but it does sound like it is meant to touch the problem at hand. Here's what happens when I click "edit template":
Sure enough, there is the template I saw. As is, I would just echo Jay that in order for this feature to be understood, we need some way to see an effect of the choice. One path seems to be the first half of the equation:
That is, show full page patterns that are actually inserted in the page, rather than page templates. Templates have their place, to be sure, but specifically until we can make progress on actually showing the page template in the post editor, it seems best to focus on patterns. To echo Jay a third time, for that future exploration of page template visualizations, it does seem like we could have a "full view mode" that you enter as soon as you pick a page template. It would be a bit like the "Edit template" mode in that it shows a zoomed out version of the page, allowing you to build the page using patterns as sections. Kind of like this: #36697 (comment) You could then exit that building mode when you're ready to edit the contents of your page. |
|
This is definitely tied to the template mode, I think for some CPTs (could be a CPT flag), landing on the template mode is often better than landing on the zoomed out mode. (Pages come to my mind).
|
|
The features this PR adds feel like they're one layer removed from standard post / template editing. We're talking about indirect manipulation by way of selecting templates and patterns – both at the same time in this case. Whether that is a different view in the template editor, or something more abstract that can be invoked from either the post or template editor warrants further exploration I think. I hope to look in to this a bit next week. Allowing post types to define which mode is the default seems like a very good idea. |
|
I started noodling on some designs in Figma and had a couple extra thoughts on this…
For me this is another case where #27847 would be very handy. In such a view I can edit the content of my post/page, but I can also see (and probably swap) the underlying template. The template blocks themselves are locked. @jorgefilipecosta alluded to such a view in the OP:
This view ("Template view"?) can be invoked manually from the post editor, while also serving as the default view when the aforementioned CPT flag is on. As for patterns, I'm wondering if there's some overlap with #38814. IE when the Post Content block is empty, we offer two options: Choose a pattern, or Start blank. Perhaps we can even stylise this like the suggestion for Header template parts:
If the template is "blank" then we can emphasise "full page" patterns, otherwise general patterns would appear. We could break this into two initiatives;
I'll put some designs together next week, unless anyone interjects between now and then to tell me this is a bad idea 😄 |
jorgefilipecosta
force-pushed
the
add/page-start-options
branch
from
515f42b
to
3899fec
Compare
jorgefilipecosta
requested review from
TimothyBJacobs and
spacedmonkey
as code owners
|
Hi @jasmussen, on your video we are not seeing the pattern picker. I guess you don't have patterns with with block type core/post-content. I updated the PR to include some patterns with this block type just for testing purposes so we can see the flow on this PR without any additional change. |
|
Nice, thank you! Working for me: The two-step modal isn't horrible, with the right design we could probably make it work. The fact that the specific template choice isn't visualized still feels tricky, and I think we might want to continue with the explorations discussed on this thread and possibly explore a "zoomed out" view. There's a mockup in this thread which touches upon the same. I'll see if we can't get the design explored a bit there, so we can unblock this. If we can't find a simple solution to this we might want to omit the template choice for now. |
FWIW, Twenty Twenty-Two includes a "Pages" category of patterns that are made specifically for this purpose. I think we could look for that category in a V1 of this feature. It seems reasonable that we'd eventually migrate that over as an "official" category in the Patterns Directory once this feature exists. |
|
I got to say that this is very cool! Thank you for working on this Jorge! My initial experience. Clicking to create a new page I see this show up. On my Macbook Pro. Instead of automatically having a "Choose a template" show up when creating a page it would be better to get a more subtitle option and selecting to "Choose a template" in the sidebar settings. I am wondering how this new template option is associated to the Template: Page panel? Templates This means choosing between full page with a header, content and footer, or just the content information. Saving all page content as template/pattern This means associated with this PR we should have an easy method to select all the content/multi select all the content/blocks. Then click the 3 dot contextual menu choose to save as a pattern/template. Creating a new page Ok so template is the more behind the scenes or perhaps I should say more general overview. Something behind the pattern. Going back to Template and Patterns modul
|
|
Closed in favor of #40034. |
Fixes: #38787
This PR adds a set of options when the user is creating a new page.
The options allow the user to choose a template for the page (with previews) and a pattern to fill the content of the page.
@youknowriad said:
This is done by adding
'blockTypes' => array( 'core/post-content' ), to the patterns that we say are for the full "post content". We could instead add a new flag. But it seems we can use what we already have to mark that a pattern is for the full content.Although the implementation is fully functional from the UX perspective there is still lots of work to do. Right now we are just showing two simple modals one for the template and another for the pattern.
Some questions:
Would a "wizard" with a back next to pick a template and pattern make sense?
Another alternative could we instead show a list of templates at the side of the patterns with the default template already chosen (the user can switch the template) but as soon as the user chooses a pattern we close the modal. When the user switches template we just change the template without close the modal? Basically, a single modal to choose a pattern with a lateral UI to switch the template.
For the pattern previews should we just show the pattern preview like we do now or should we show a full preview e.g: the full template with the chosen pattern as the content?
Patterns for blank templates
I guess we may have some patterns that just make sense one a blank template e.g: the patterns take control of the full page and only makes sense on a template that just includes:
<!-- wp:post-content /-->.Should we have a way to mark these patterns?
blockTypes' => array( 'core/post-content' )is different it marks patterns that make sense as the full content of a page. But the page can have a template with headers footers sidebars etc.But I guess we may have patterns that require a blank template for these patterns when chosen we would use a blank template if the theme provides one (like 2022 does) or we would automatically create a blank template if one does not already exists.
Testing Instructions
I added
'blockTypes' => array( 'core/post-content' ),to some patterns of the 2022 theme.I created a new page and verified there are prompts to choose a template and a pattern of the page.
I verified both the template and the patterns are correctly applied to the page.
Screenshots