FSE Beta: Add themes to Design step in onboarding

[creativecoder]

What

Add new block themes to design picker

Existing step

Why

We need more design choices.

The following themes are ready to add:

• Arbutus
• Russell

These themes should also be added, but first need to be network activated:

• TT2
• Universal Blank

All of themes need testing with our FSE onboarding flow.

How

Testing with FSE beta

• Arbutus (@jeyip + @zaguiini)
• Russell (@jeyip)
• TT2
• Universal Blank (@zaguiini)

(add your username to the theme if you are taking on a testing task)

[jeyip]

Could you elaborate on what the difference between "ready to add" vs. "ready, though aren't network activated yet"?

It sounds like:

• network activated = displays in the showcase
• ready to add = production ready

[creativecoder]

Per the discussion from our meeting, I've updated the issue description to indicate we shouldn't add any themes to the design picker step that are not yet network activated--this is to avoid the situation that a theme selected during onboarding would disappear when a user switches to a different theme, and can only be switched back by contacting support because it wouldn't show in the themes showcase.

[jeyip]

If someone starts testing Russell before I do, you can run this PR locally, spin up calypso dev, and walk through FSE onboarding to enable it / start smoke testing

[jeyip]

Testing Arbutus

Requirements

Tested both the editor + frontend

Default Content

• Default content loaded for Arbutus matches the Arbutus demo site
• No broken blocks on initial load

Block Patterns

• "Gallery with description and a button" pattern looks like its preview
• "Link in Bio" pattern looks like its preview
• "Talk to the host" pattern looks like its preview
• No theme specific block patterns to test

Global Styles

• Typography font size, line height, and font weight changes behave as expected
• Background color, text color, and link colors changes behave as expected
• Per block global styles (typography + colors) for the Post title block behave as expected

Block Settings

• Typography font size, line height, and font weight block settings changes behave as expected
• Background color, text color, and link color block settings changes behave as expected

Browsers

Smoke tested frontend in every browser. Smoke tested the editor in chrome.

• Edge
• Firefox
• Safari
• Chrome

Notes

Each pattern had issues unrelated to the theme.

• "Gallery with description and a button" pattern didn't have content padding in the editor
• "Link in Bio" pattern, when inserted, didn't have its social media icons centered in the editor
• "Talk to the host" pattern didn't behave responsively and had overflow when the viewport width was <1080px in the frontend

[jeyip]

Testing Russell

Requirements

Tested both the editor + frontend

Default Content

• Default content loaded for Arbutus matches the Arbutus demo site
• ❌ No broken blocks on initial load

Block Patterns

• "Gallery with description and a button" pattern looks like its preview
• "Link in Bio" pattern looks like its preview
• "Talk to the host" pattern looks like its preview
• Theme specific block patterns work as expected

Global Styles

• Typography font size, line height, and font weight changes behave as expected
• Background color, text color, and link colors changes behave as expected
• Per block global styles (typography + colors) for the Post title block behave as expected

Block Settings

• Typography font size, line height, and font weight block settings changes behave as expected
• Background color, text color, and link color block settings changes behave as expected

Browsers

Smoke tested frontend in every browser. Smoke tested the editor in chrome.

• Edge
• Firefox
• Safari
• Chrome

[jeyip]

I created an issue to track the block errors with Russell

[zaguiini]

I'm planning on testing Universal Blank today. Any concerns?

[creativecoder]

I'm planning on testing Universal Blank today. Any concerns?

Sounds good! The "Blank Canvas" theme from the normal (non-FSE) /new flow might be a good reference point to test against:

[zaguiini]

Testing Universal Blank

Requirements

Tested both the editor + frontend

Default Content

• Default content loaded for Universal Blank matches the Blank Canvas demo site (there is no demo site for Universal Blank yet)
• No broken blocks on initial load

Block Patterns

• "Footer" pattern looks like its preview
• "Gallery" pattern looks like its preview
• "Link in bio" pattern looks like its preview
• "Coming soon" pattern looks like its preview
• No theme specific block patterns to test

Global Styles

• Typography font size, line height, and font weight changes behave as expected
• Background color, text color, and link colors changes behave as expected
• Per block global styles (typography + colors) for the Post title block behave as expected

Block Settings

• Typography font size, line height, and font weight block settings changes behave as expected
• Background color, text color, and link color block settings changes behave as expected

Browsers

Smoke tested frontend in every browser. Smoke tested the editor in chrome.

• Edge
• Firefox
• Safari
• Chrome

Notes

Each pattern had issues unrelated to the theme.

• "Coming soon" pattern displays the contact form on preview but displays the jetpack_subscription_form shortcode on the live version of the site. Is it expected? Shouldn't Jetpack be installed for simple sites?

[zaguiini]

Add Blank Canvas 2 to FSE Design Picker: #58869

[zaguiini]

Testing TT2

Requirements

Tested both the editor + frontend

Default Content

• Default content loaded for TT2 matches the TT2 demo site
• No broken blocks on initial load

Blocks

All blocks are working as expected. The ones that are problematic, are not TT2 related ✅

• Layout Grid: column vertical alignment doesn't work in preview block-experiments#250;
• Subscriptions: Remove the shortcode jetpack#15227.

Block Settings

• Typography font size, line height, and font-weight block settings changes behave as expected
• Background color, text color, and link color block settings changes behave as expected

Patterns

No theme-related pattern issues. I did find some problematic patterns that are using some blocks:

• Jetpack Contact Form, all of them have styling problems:
• • Site Editor Compatibility: Contact Form Block styling issues jetpack#19462;
• • Newsletter Block: Styling discrepancy between the editor and front end jetpack#18404.
• [Bug]: Social Link block within patterns are left aligned on preview, but centered on live site #59084.

Browsers

Smoke-tested frontend in every browser. Smoke-tested the editor in chrome.

• Edge
• Firefox
• Safari
• Chrome

Additional information

• Replacing default header with header-large-dark adds horizontal padding to it WordPress/twentytwentytwo#299.

[zaguiini]

So the only thing missing is TT2 now, right?

[creativecoder]

So the only thing missing is TT2 now, right?

For this issue, yes.

[zaguiini]

I'll work on adding TT2 right now.