Wp-calypso: Add some new layouts to layout selector

Created on 13 Jan 2020 · 12Comments · Source: Automattic/wp-calypso

I'm aware of the ongoing work in core for the UI adding block patterns and layouts, but since we have some layouts ready for the customers, it'd be great if we can add some of them to the current layout selector instead of waiting for the core UI.

Like what we did for the homepage layouts, some grouping should help though. Something like...

page-layout-selector

It won't provide the best experience with the long list on the left, but it's kind of a shame to wait for the UI, and it might not be too bad as we don't yet have tons of new layouts :) If the long list is really a concern, eash section(group) could be a collapsible accordion that is opened as default.

I'll make a list of layouts that can be added as the next step.

cc @apeatling @ianstewart @shaunandrews

Editor

Source

iamtakashi

Most helpful comment

I updated the mockup after sharing it with Dotcom Design team.

Let's show all the layouts on the left. The length isn't too much a concern at this moment, especially this is going to be a short-lived UI that will be replaced by the inserter that's being worked on in core.

I also considered using accordions or/and showing the first six layouts and hiding the rest in accordion. But since the length of the list isn't a big concern, it's not absolutely necessary. We can circle back if we hear a lot of complaints.

A search field was also suggested, but I honestly don't think it's not necessary at this point. Again, let's keep the dev. cost minimum so that we can get this out asap.

The Blank is at the top, and the home pages are at the bottom now. The rest of the layouts are in A-Z order. Each page name is removed as the group title is now the descriptor. We're working on more blog, contact, menu layouts to fill the empty spots.

We could also recommend some layouts, but I feel we should get this out first without it, and run a test once we have more dev resources.

page-layout-selector

iamtakashi on 21 Jan 2020

❤5

All 12 comments

@iamtakashi Can you ping me on here when you have the list of layouts

apeatling on 14 Jan 2020

@iamtakashi is the "About 1" "About 2" our general consensus on final choice for naming? That question isn't a critique — more just me playing catch up. :)

ianstewart on 14 Jan 2020

For the grouped layouts, I'm thinking we might not need to expose the names at all. The group title is the descriptor, and the grid below is just a collection of options for that descriptor.

shaunandrews on 14 Jan 2020

👍4

Can you ping me on here when you have the list of layouts

Thank you, @apeatling! Much appreciated ❤

Here is the list of the layouts that I'm thinking to add.

About Page Layouts

Portfolio Page Layouts

~We should also have five new services page layouts by the end of the week.~ Added below

Services Pages

Product Page Layouts (They are still draft at the moment)

I don't have a strong opinion on naming, and the idea from @shaunandrews sounds good to me too!

iamtakashi on 15 Jan 2020

❤2 👍2

We currently _recommend_ the Menu Layout to all sites regardless of the site type.

Is "recommended" the right label there?

ianstewart on 16 Jan 2020

Many of the layouts that we currently have in the recommended section — About, Contact, Portfolio, Services, and Blog will soon to be grouped with new layouts. Then, Blank, Team, and Menu will be left so it'd make sense to move Team and Menu even they are on their own for a bit and we can quickly make some more Team and Menu layouts as well.

But then, the question would be where Blank should be placed?

iamtakashi on 17 Jan 2020

@apeatling I'm going to move all the layouts that I posted above to the master layout site along with the images used on them. I'll edit the urls once that's done and ping you again :)

iamtakashi on 17 Jan 2020

👍1

@apeatling I have added a bunch of new layouts to the master layout site. I've edited the URLs above. All the About, Portfolio, and Services pages are ready to go.

But Product pages that use premium blocks (Simple Payments) are still drafts to be checked by @michaeldcain since the premium flows haven't been tested yet.

@michaeldcain, As requested, all the Product pages have been left as drafts for you. Could you let me know if there is anything I should do?

iamtakashi on 18 Jan 2020

Just to see what the selector would look like with the current ideas:

page-layout-selector

As we suspected the list on the left is long. Is it ok as a temporary solution? Keep in mind that this will be a short-lived UI. I think we want to fill the empty slots quickly though.

iamtakashi on 20 Jan 2020

I agree and would love to see this come to life in some temporary UI scenario as proposed here instead of waiting for the layout selector changes to happen, unless those will happen very soon. It's a shame we can't let people use the layouts when they are ready to be used. People really need these.

davipontesblog on 20 Jan 2020

If the long list is really a concern, each section(group) could be a collapsible accordion that is opened as default.
— Takashi

Perhaps we could continue recommending our best layouts in an open recommended section with the rest closed by default? Similar to core's block inserter?

ianstewart on 20 Jan 2020

I updated the mockup after sharing it with Dotcom Design team.

A search field was also suggested, but I honestly don't think it's not necessary at this point. Again, let's keep the dev. cost minimum so that we can get this out asap.

We could also recommend some layouts, but I feel we should get this out first without it, and run a test once we have more dev resources.

page-layout-selector

iamtakashi on 21 Jan 2020

❤5

Was this page helpful?

0 / 5 - 0 ratings