Wp-calypso: FSE: Make sure Maywood works with Signup

[apeatling]

We're switching to Maywood instead of Modern Business for the launch of Full Site Editing. This theme is a replacement of the same Modern Business design, but with updated internals. It fixes the majority of the visual quirks we've seen in user testing and the call for testing process.

Currently Modern Business is used in signup, and we need Maywood to instead be used. Some questions:

• How can we enable it as the default, and in the style selection step?
• What does this mean for vertical starter sites?
• How do we ensure that vertical content continues to work after the switch?

[apeatling]

Related issues:

• Maywood (Modern Business Refresh) Build and launch https://github.com/Automattic/template-first-themes-private/issues/126
• Full Site Editing: Add demo sites for Varia and Maywood themes https://github.com/Automattic/wp-calypso/issues/35711

[michaeldcain]

I've added this to the top of Up Next for @Automattic/zelda.

How can we enable it as the default, and in the style selection step?

On top of switching the theme slug dependency, I believe that this will require markup changes to the Site Preview component's header. Since Maywood is based on Varia, and Varia is the new parent theme for all of the template-first themes going forward, we should go ahead and make this change.

If this involves us removing the site-style step from Signup (unless @iamtakashi has other varia-based alternatives), let's just go ahead and make that change.

/cc @ramonjd

What does this mean for vertical starter sites?
How do we ensure that vertical content continues to work after the switch?

After the theme is launched, we should be able to update the vertical sites to use Maywood instead of Modern Business. The existing block content should work by default. @iamtakashi can you try this with Theme Butler on one of the vertical sites once the theme is ready?

[iamtakashi]

If this involves us removing the site-style step from Signup (unless @iamtakashi has other varia-based alternatives), let's just go ahead and make that change.

The site-style step will have even less impact with the template first themes. Those themes generally stay away from styling blocks, therefore the same content(blocks) would look very similar to each other(other than the font and the background colour). Based on that, my opinion is that we should remove the step until when we can provide unique content with each "style" option.

@iamtakashi can you try this with Theme Butler on one of the vertical sites once the theme is ready

Maywood is going to be network activated tomorrow. I'll test it as soon as it's activated.

[ianstewart]

Based on that, my opinion is that we should remove the step until when we can provide unique content with each "style" option.

+1 on removing the step.

[ramonjd]

Based on that, my opinion is that we should remove the step until when we can provide unique content with each "style" option.

Just to confirm, we changing the business theme from Maywood to Modern Business for all segments... ?

The Blog, Business and Professional segments all use pub/modern-business

If so, it should be a clean job of replacing pub/modern-business with pub/maywood, and removing the site style step from all segments (excluding e-commerce).

If not, it will probably require revisiting the former tactic of creating a business-only flow.

I envisage the following, additional tasks:

• [ ] Update the vertical starter sites to use Maywood instead of Modern Business; ensure that it all looks dandy. Looks like @iamtakashi can help us with this one?
• [ ] As @michaeldcain noted, markup changes to the site preview iframe container header
• [ ] Optional, but nice: removing the site style import from the site preview container to reduce bundle size.
• [ ] Where applicable, remove the site style step from all e2e tests
• [ ] Browser testing. Safari and IE in particular.
• [ ] Update the default theme in get_default_theme() in class-headstart-lifecycle.php

As Cain also mentioned, the assumption is that the content in the vertical annotations won't need updating. Browsing through the Varia theme, I think this assumption is valid, but I've placed it at the top of the tasks list above to make sure.

If we'd like changes to the headstarted _content_, then I'd vote for it to be a follow up task.

[andrewserong]

I've started a draft PR for these changes: https://github.com/Automattic/wp-calypso/pull/35857 — at first glance there appear to be some styling wrinkles between the site preview and a freshly created site. I'll keep investigating this afternoon! (I've also started D32188-code )

[andrewserong]

I've compared each of the segments blog, professional, and business between the site preview and a freshly created site and written up a list of all the styling fixes to be done. I've made a start on these (I think it'll be a combination of some minor markup changes in the site preview and a few simple CSS overrides). I'm finishing up for the day, but I'll continue on with this tomorrow.

[andrewserong]

Just double-checking this question from @ramonjd :

Just to confirm, we changing the business theme from Maywood to Modern Business for all segments... ?

The Blog, Business and Professional segments all use pub/modern-business

In my (WIP) PR https://github.com/Automattic/wp-calypso/pull/35857 I've only updated the blog, business and professional segments. online-store currently uses pub/dara and blank-canvas (used by the escape hatch A/B test) uses pub/refresh-2019 — should these two be changed to use Maywood as well, or are they fine to remain as they are?

[iamtakashi]

@iamtakashi can you try this with Theme Butler on one of the vertical sites once the theme is ready?

Maywood has launched and I've tested some of the vertical sites with the theme. They look "ok", but here are a few things we can adjust the template.

• Set the alignment for the headings (About Us, Products and Services, etc.) to centre in the heading blocks.
• Change the heading on the cover block to h1.
• And obviously hide the title (this needs to be done in the theme setting, like Modern Business)

[apeatling]

In my (WIP) PR #35857 I've only updated the blog, business and professional segments. online-store currently uses pub/dara and blank-canvas (used by the escape hatch A/B test) uses pub/refresh-2019 — should these two be changed to use Maywood as well, or are they fine to remain as they are?

I think blog, business, and professional segments only is fine.

[ramonjd]

Set the alignment for the headings (About Us, Products and Services, etc.) to centre in the heading blocks.
Change the heading on the cover block to h1.
And obviously hide the title (this needs to be done in the theme setting, like Modern Business

Sounds like we'll have to regenerate the business segment (m1) annotations (?)

If the changes are slight, we might get away with a simple search and destroy replace, thereby sidestepping re-translation.

[andrewserong]

Thanks @ramonjd — I'll look into this today!

[andrewserong]

I've fixed up the styling issues that I found yesterday and have updated the PR: https://github.com/Automattic/wp-calypso/pull/35857 — I'll now take a look at the h1 tags and heading blocks in the backend.

[andrewserong]

Just another quick update before I finish for the weekend. All the front-end changes are accounted for in https://github.com/Automattic/wp-calypso/pull/35857, so it'll just be the backend changes we need to make now to get the cover block headings changed to h1 and centre align the other heading blocks for the business segment as above. Let us know any other changes that need to be made, and I'll continue working on this on Monday.

[michaeldcain]

used by the escape hatch A/B test) uses pub/refresh-2019

@iamtakashi: is this the preferred “empty” site theme, or should we also change it to Maywood?

[apeatling]

@andrewserong Thanks for your work on this! Is it fair to say this should be ready to go Monday or Tuesday next week? Will we be able to test the theme in the signup flow?

[andrewserong]

Is it fair to say this should be ready to go Monday or Tuesday next week?

@apeatling — for the front-end changes, yes I think we should be able to deploy on Tuesday. They're currently ready for review. The only outstanding issues are updating the annotations on the backend to use the <h1> tag in the cover block for the business segment, and switching the other heading blocks to be centre aligned. If these changes aren't a blocker for launch, then we can happily launch once my PR has been approved.

I'll be working with @ramonjd on Monday to look at updating the annotations on the backend, though, since I'm less familiar with that part of the code. I'm hoping we can avoid having to regenerate all the annotations from the vertical sites directly, otherwise we might have to go through the translation process again, which would delay things. So my preference, if it ends up being difficult for us to do this quickly, would be to launch without those two changes, and then deploy the changes to the annotations as a follow-up. But we'll see how we go on Monday.

Will we be able to test the theme in the signup flow?

Yes, of course. All the front-end changes are ready for testing now, and newly created sites on the following branch (this PR) all use the Maywood theme for the blog, business, and professional segments:

• Go to: https://calypso.live/?branch=update/switch-default-theme-to-maywood
• Then go to /start and sign up using the blog, business or professional segments

This can be safely tested without sandboxing the backend change, which at the moment just changes the _default_ theme in the API to use Maywood. The signup flow always specifies a theme using the user's selected segment (in this case Maywood), so the PR can be tested on its own.

I'll add Cylon as reviewers on the PR https://github.com/Automattic/wp-calypso/pull/35857 but feel free to add anyone else who should be looped in.

[andrewserong]

Just another status update, to group this all together:

• The front-end PR is ready for review and more eyes: https://github.com/Automattic/wp-calypso/pull/35857
• I have a backend diff ready that switches the heading in the cover block to h1 and updates the remaining headings in the business segment to be centre-aligned: D32317-code
• I've posted an announcement post that the change will be going live this week, so that others are kept in the loop p7DVsv-7hP-p2

I'm happy to deploy these once we get through the code review stage. Please let us know here if there are any objections / timings to consider with rolling out the change.

[andrewserong]

Update: These changes are now merged into production.

I will leave this issue open until I've manually updated the verticals sites to use the new theme and make changes to the blocks to match what we've done with the verticals annotations (later on today).

[andrewserong]

I've updated all of the verticals sites, so closing this issue now.

[apeatling]

Thank you for your work on this @andrewserong!