Build more page layouts

[apeatling]

We need more page layouts:

1. Alternative layouts for existing goals: About, Contact, Portfolio, Services, Team, Blog, Menu
2. New goal based page layouts, some rough examples:, Events, Products, Bookings, Social Accounts, Videos, Photo Gallery.

Lets build many of these, and we'll handle the updating of the layout selector in a separate issue.

Replaces: #35062

[michaeldcain]

@iamtakashi has already started some work on alternative portfolio/gallery designs.

Given that they're designed inside Gutenberg on WPcom, using launched blocks, we could open up the process to other designers too.

[apeatling]

Awesome, let's use this as a top level issue and link to any work on any templates that is happening.

[apeatling]

@iamtakashi Assigning you on this one to keep it up to date with your latest work on the Portfolio alternative layouts, and anything beyond that.

[iamtakashi]

Here are the new portfolio/gallery page layouts that I've been working on. You can see them live here: https://iamtakashinuxtest2019112113719.wordpress.com/

@apeatling One thing to note. I've been using Tinker's Layout Grid block for those layouts as it works nicely to make various layouts without CSS. But the block is only available in Simple site at the moment. I've heard that it's going to be available in Atomic soon p7DVsv-7Dw-p2, but we want to make sure that's happening as the plan.

[apeatling]

@iamtakashi These look great! Love the momentum. What's next? Could we do the same for blogging templates with the newspack block? The more templates we have the sooner we can prioritize updating the selector UI to support them.

I've pinged @mkaz about the grid block. It's a standalone plugin that we'd need to enable on Atomic, this should not be too tough. [update] He has a patch for this already, should be enabled very soon.

[olaolusoga]

It'd be great to fill out the gaps around the alternative layouts for existing goals next, so:

• About
• Contact
• Services
• Team
• Blog
• Menu (header/footer layouts)

Then move on to the new goal based page layouts: Events, Products, Bookings, Social Accounts, Videos, Photo Gallery. The goal based layouts will be very interesting, I'm assuming we may not have blocks for a lot of these, so it'd be great to us the layouts to inform the products we'll need to build out—ex: does a product blocks use WooCommerce? If so, what block? How do we set up WooCommerce, and do all the things needed to where all a user needed to do is add the product details.

[iamtakashi]

Could we do the same for blogging templates with the newspack block?

@apeatling When would the block be available in a Simple site? Working on layouts on a simple site makes the process easier than working on a local install as there wouldn't be surprises from the differences between WP.com and my local install in terms of available blocks or the editor itself. I don't expect that I need a lot of time to create a few blog layouts once it's available.

I can make a few about page layouts in the meantime as it's one of the popular pages for a site to have.

it'd be great to us the layouts to inform the products we'll need to build out

@olaolusoga Yes. We need to take a good balance between making shippable layouts and exploring layouts to inform the product what we need. And having a tight feedback loop between designers and engineers is important as the process of making layouts uncovers bugs and needs in blocks/themes.

[apeatling]

When would the block be available in a Simple site?

Ajax are actively working on this, there have been some hurdles like paYJgx-jW-p2 but it's moving. The goal of the current sprint is to get it available in the FSE plugin. That means it should be on simple sites next week sometime if that deadline is met and the plugin is synced to simple sites. /cc @obenland

[olaolusoga]

If we introduce header/footer layouts in the next experience sprint, do we have enough header layouts for folks to select? If not, focusing on that would be helpful.

[apeatling]

We should gain at least a handful from the FSE theme conversion work happening in milestone 2

[apeatling]

@iamtakashi This is percentage occurrence of template selection in the last 14 days, I think it would be good to use this to prioritize:

This reinforces the importance of good blog templates. What about using an Atomic site and installing the Newspack block there? It would allow you to get a week or two ahead of that block landing.

[ianstewart]

+1 on prioritizing more blog templates.

And, in addition to more "pure" blog templates. More home page templates that have recent posts on them. Whether that's something that looks like a "magazine" or "portal" or something that looks like the home page of popular "pro bloggers" (my favourite example is always Pioneer Woman but there are many more examples) or the homepage of a Business that wants to showcase recent blog posts.

We can use these in signup to help people get started with the type of site they want.

[iamtakashi]

I'm going to wrap up about page layouts at the end of this week, and I can start making blog layouts from next week using a new Atomic site.

[iamtakashi]

Here is the new about page layouts that I've worked on. You can see them live here: https://iamtakashinuxtest20191125111820.wordpress.com/ (btw, this is a different site from the one with the portfolio layouts).

The page title ruins the look. This is another thing that the user can't control yet, and we've seen it's confusing the users in some usability testing. Could we help core to move these forward?

• Add toggle to hide Post/Page Title WordPress/gutenberg#16776
• Add Block: Title WordPress/gutenberg#11553

[apeatling]

@iamtakashi Great work! The post title block is now in the plugin under an experimental flag. WordPress/gutenberg#18461

I've added a task to the backlog to investigate how we could enable this on WordPress.com. It might be tricky because it's part of the core full site editing efforts, so turning it on selectively may not be possible until future work is done on core FSE.

[iamtakashi]

@apeatling OK, thanks for the info.

[iamtakashi]

@alaczek and I collaborated on some Services page layouts.

[marekhrabe]

We seem to have much better selection now. Still relevant to keep this issue opened?

If there are still some things left, would it be better to open new issues for each of them?

[obenland]

@iamtakashi What's the status of translations on these?

[iamtakashi]

@iamtakashi What's the status of translations on these?

I'm not sure. @apeatling has added the last batch.

[ianstewart]

I was reviewing translations on the front-end yesterday in Canadian French and Espanol — everything looked good. Are all translations fully deployed for Mag 16?

[ianstewart]

I have a correction to the above …

WP.com Test Site Settings

Site Language Settings

UI Language Settings

Result

[ianstewart]

What needs to be done to correct the above?

[obenland]

The updated template annotation will need to be sent out for translations as described in pbFcYn-1A-p2. Once translated, they'll ping with deploy instructions, IIRC

[obenland]

It's worth noting that there are a number of themes that are missing their headstart translations, leading to their homepage templates not being returned in the template response. Those require separate translation requests.

[michaeldcain]

I believe that the remainder of template-first themes were submitted for translation a couple of months ago - I wonder if the deployment email was missed. @Automattic/i18n might be able to help us track them down.

[emilyaudela]

Yes, they were translated! There were a handful translated last year and the rest translated at the beginning of this year. It looks like the only theme that is showing up translated is Rivington. Here are the strand IDs:

• Rockfield: strand=50945
• Brompton: strand=50947
• Leven: strand=50948
• Hever: strand=50949
• Stow: strand=50950
• Coutoire: strand=50951
• Morden: strand=50952
• Stratford: strand=50953
• Exford: strand=50954
• Alves: strand=50955
• Rivington: strand=50956
• Maywood: strand=50957
• Balasana: strand=50958
• Shawburn: strand=50959
• Mayland: strand=50960
• Barnsbury: strand=50961
• Redhill: strand=46506
• Dalston :strand=49457

[alaczek]

Good to know. I went through all the themes in open grok, and found only a handful has translations deployed though: Dalston, Rivington, Stratford, Coutoire, Leven and Redhill. But then I went to see each strand in mc, and in many cases it said some of the languages were already deployed (but I could not see those files when viewing via open grok).

I also tried running the translation command for non-homepage layouts, and looks like the json file got too big (275.3 KiB). Error:
>>> Error: Headstart File Processor (validate_file): File must be non-empty and smaller than 80000 bytes.

[AtrumGeost]

Hi @ianstewart and everyone!

We previously talked about the issue with the Page Layouts described above. I can see more Page Layouts are being displayed now. Thank you!

I just noticed a bug that might (or might not) be related to this.

When you activate one of these themes on a site with the Spanish language on the site:

• Maywood
• Balasana
• Shawburn
• Twenty Twenty

The correct Home Page Layout won't be loaded. The user will get a Blog Page Layout like this one:

A quick way to reproduce this bug is by trying to change the page layout:

Please, let me know if my report here is ok. Otherwise, I can open a new GH issue :)

Update: I tried to change the site's language (both in site settings and in the account settings) to English as a workaround. But the Page Layouts stayed in Spanish

[iamtakashi]

I've also noticed that issue above while I was working on #41364. It looks like the homepage layouts that are without translations fallback to the default.

Also, some blocks are broken on the layouts that have been translated as well. I'll test all of them in all of Mag16 and create an issue for it to track.

[ahmadbaig1]

Noticed the layout issue here as well 3122767-ZD for the Japanese language for Shawburn theme page layout.
In fact, the user was seeing Jetpack error code on Shawburn layout after the header. Could not replicate on my test site.

[AtrumGeost]

Hi @ianstewart and @iamtakashi!
Do you have any news about the issue I mentioned above?

With the introduction of the screen that asks the user if they want to keep their homepage or use the theme's one (which is very cool), this issue is more obvious to users. We have also noticed this issue is showing up on new themes like Seedlet.

If this is a translations issue, we could talk with the i18n team so they can help us :) (Also, please let me know if I need to create a new issue since this one is already closed)

As a reference, here's a recent report from one of our HCs:

pbEMJv-fh-p2

[ianstewart]

@AtrumGeost I don't have any news but I'll start digging in.

[AtrumGeost]

Hey @ianstewart. Thank you :)

[noahtallen]

We have also noticed this issue is showing up on new themes like Seedlet

This makes sense, as seedlet doesn't have any translations yet. (They are in progress though!)

However, this is obviously buggy behavior for themes which don't have translations yet, so it should still be fixed. I'm working on something right now. I've narrowed down the cause of the default content, just have to test that the whole flow will work correctly if we stop returning the default content.

[noahtallen]

But yeah, to sum up, there are no headstart annotation translations at all for any of these themes:

• Maywood
• Balasana
• Shawburn
• Twenty Twenty
• seedlet

The other suggested themes do have translations.

[noahtallen]

@AtrumGeost @ianstewart I created a new issue for this here: #46662