Wp-calypso: Editor: Allow access to page template selector from within the block editor

[apeatling]

See the "Making First Home Page Edits" testing video on this post: p58i-8d4-p2

• “I don’t like this design, can I change it?” It’s clear he doesn’t want to continue editing because he just doesn’t like the design of the page. I think this is both layout and imagery. “It feels like I’m stuck in this design, and I can only make changes within this design”.
• He expects to be able to change the page to a “whole new design” from within the editor, it does not even occur to him that he would need to leave the current editing view.

---

We need to support changing to a different page template from within the editor. The user should not need to have to delete the page and start a new page just to change the entire layout. Block patterns will also help with this, but starting with an entire new template via one of our page templates is also beneficial to our users.

[shaunandrews]

The first solution that comes to mind is adding an accordion in the Document sidebar that would show you your current template and a button to switch. Clicking the button could show some sort of confirmation modal — with potentially a way to choose to switch or create a new page. Please excuse my super quick mockup:

Its worth noting that there's the current (older) page template functionality and UI within Core — depending on the theme used — that could make this a little tricky. But I don't think thats a concern for WPcom right now.

[noahtallen]

depending on the theme used

We don't have this for template-first themes IIRC, so I think that's good!

The document settings seem like the perfect place to put this, but I also wonder if the user would be able to find them easily. I wonder if "Page Template/switch template" matches what they _think_ they are trying to do. 🤔

[shaunandrews]

Another iteration on this:

Right now (I think) the sidebar is shown by default, so it won't be _too_ hidden. We could put the template accordion (I'm leaning toward "layout" over "template") at the top, expanded, and have the others collapsed by default.

I also think we might want to keep the confirmation dialog focused on changing the layout, and not add complexity with offering to create a new page.

[noahtallen]

I think layout is a great idea. (there are WAY too many things using the word template.)

How would the interaction work here?

• Click change layout
• The template selector opens with an easy way to "cancel" and close without making changes
• When you hit "Use x template", the "Are you sure dialogue" displays

[vindl]

Another idea I wanted to note down that could be handled as a separate task entirely - what do you all think about detecting when we are editing Header or Footer and showing appropriate Layouts for them through basically the same interface?

cc @apeatling @shaunandrews

[vindl]

Right now (I think) the sidebar is shown by default, so it won't be too hidden. We could put the template accordion (I'm leaning toward "layout" over "template") at the top, expanded, and have the others collapsed by default.

A note that this might be conflicting with the following issue from the same milestone: https://github.com/Automattic/wp-calypso/issues/37279

[apeatling]

Another idea I wanted to note down that could be handled as a separate task entirely - what do you all think about detecting when we are editing Header or Footer and showing appropriate Layouts for them through basically the same interface?

I think that makes sense, although I'm not sure where the line between a block pattern and a template starts and ends for headers and footers. They might just be block patterns.

[apeatling]

A note that this might be conflicting with the following issue from the same milestone: #37279

I think we should test this option in the sidebar first before exploring hiding the sidebar further. The chief complaint was there there is nothing useful in there and it's distracting. That's not the case with this addition. If we find it still to be a problem we could revisit with other options for outside of the sidebar.

[vindl]

I think we should test this option in the sidebar first before exploring hiding the sidebar further.

I agree. Do you think that we should close or punt that issue so that it doesn't get picked by someone else accidentally?

[shaunandrews]

Another idea I wanted to note down that could be handled as a separate task entirely - what do you all think about detecting when we are editing Header or Footer and showing appropriate Layouts for them through basically the same interface?

Like Andy said, I see this blurring lines between the page layout and a block pattern. The Header/Footer implementation we have now requires loading a new instance of the editor and is a tradeoff — I'm not sure I want to start exploring adding more stuff to this tradeoff — instead, I want to see us move away from the separate instance, and treat the header area as a block pattern.

Do you think that we should close or punt that issue so that it doesn't get picked by someone else accidentally?

Seems to me the sidebar is still going to be a distraction, so I'd say punt — but I'm honestly not sure it makes a huge difference :)

[iamtakashi]

Page Layout vs Page Template

I personally prefer "Template" over "Layout". In my mind, the term "template" has a connotation of "starting point", and this feature is providing the user with a starting point that they will edit afterwards.

It's true that the term has been used in many different context in Gutenberg world, but those cases are mostly for us but not to the users, I think.

The term "template" is widely used for this concept in big players like Apple's Pages, Google Docs, Sketch, and (I think) Microsoft Word :) Also, the concept of page template that has been forever in WP as well.

Whichever we decide to go for, it would be helpful to be the same as the term that we use in the page _template_ picker 😄 (Yes, it can be page layout picker)

[iamtakashi]

I've just caught up with the conversation in the core design channel, and I learned that we're trying to avoid using the term "template", So never mind what I said above :)

Since we're going for "layout", we should keep this in mind in #37282 so that we have consistency.