Full Site Editing Design Picker: Enable Arbutus theme

[jeyip]

Changes proposed in this Pull Request

• Update available-designs-config.json to include new Arbutus block theme.
• Arbutus is a selectable theme in the /new FSE beta onboarding design picker

Screenshots

Testing instructions

• Apply branch to local calypso dev environment
• Visit http://calypso.localhost:3000/new/beta
• Enroll in the FSE beta
• Pick a free test domain
• Verify that Arbutus is a selectable theme
• Create a site with Arbutus enabled and smoke test the theme

Related to # #58663

[github-actions]

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-21143
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-21143&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~38 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding       +353 B  (+0.0%)      +38 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~26 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
signup                +353 B  (+0.1%)      +26 B  (+0.0%)
jetpack-connect       +353 B  (+0.0%)      +26 B  (+0.0%)
accept-invite         +353 B  (+0.1%)      +26 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[jeyip]

Note:

These changes also require updates to the Arbutus and Russell themes.

Currently, in the themes showcase, Arbutus and Russell aren't displayed with beta tags alongside other FSE themes because they don't have the block-templates theme support enabled.

[mattwiebe]

in the themes showcase, Arbutus and Russell aren't displayed with beta tags alongside other FSE themes

No longer! I added the tags to the theme showcase posts, so they're showing up as expected in the FSE tab:

I also pushed an update on this branch to allow listing Arbutus and Russell as Classic themes. This requires simply duplicating each theme with is_fse: false so that they'll list on that side as well (gross, but it works and is much less work than modifying getAvailableDesigns logic).

[zaguiini]

Works great for logged-in and logged-out users via /themes, they're not showing as duplicates.

Question: why do we store the themes list of the design picker inside of a JSON instead of in a database entry, so we could update this list without necessarily re-deploying Calypso?

[jeyip]

why do we store the themes list of the design picker inside of a JSON instead of in a database entry, so we could update this list without necessarily re-deploying Calypso?

I agree with this sentiment, but I'm unsure about the history behind this decision. Maybe @p-jackson or @ciampo could provide more context?

[ciampo]

I agree with this sentiment, but I'm unsure about the history behind this decision. Maybe @p-jackson or @ciampo could provide more context?

Unfortunately I don't have any insights into this; when I worked on the DesignPicker the available designs configuration was already stored in a JSON file.

[creativecoder]

Questions: why do we store the themes list of the design picker inside of a JSON instead of in a database entry, so we could update this list without necessarily re-deploying Calypso?

I believe API powered design options simply hasn't been implemented yet, in this newer onboarding flow.

[p-jackson]

Yup, it just hasn't been implemented yet. The designs in /new were originally a new concept called a "Design", which didn't map 1:1 to themes, so there was no database entry to pull from. However now they're just themes, so should be driven by the API the same way the design picker in the /start flow is.

Question: is there a taxonomy or term that all the FSE beta themes have in common? When the design picker in /new is API driven will we be able to filter them using some sort of tag so we only show the FSE beta ones? Or will we need to have a hardcoded list of theme slugs in the front end to know which are eligible for the beta.

[mattwiebe]

The historical reason for storing the themes in JSON is simply that we've (almost) always done that in signup/onboarding. A good reason is performance (no API endpoint needed) but it's poor from an ongoing maintenance perspective. I am happy to see the Blogger Onboarding initiative use the REST API so as to reduce ongoing work in launching new themes.

Question: is there a taxonomy or term that all the FSE beta themes have in common? When the design picker in /new is API driven will we be able to filter them using some sort of tag so we only show the FSE beta ones? Or will we need to have a hardcoded list of theme slugs in the front end to know which are eligible for the beta.

The FSE themes all currently use block-templates on the theme_feature taxonomy. We will migrate that to the more sensible full-site-editing at some point in the future, once we are able to deprecate the old Dotcom FSE implementation which currently uses that tag.

[creativecoder]

Note this issue, for tracking an enhancement to get FSE designs via API during onboarding: #58667

Also, I think it's likely that the design choices may not all be "themes" in the future, in the traditional sense. They could be a theme + a specific home page template, or a theme with an alternative theme.json (which has been discussed in Core, but I don't think it's implemented yet). So whatever API driven solution we create, it should be flexible to adapt to designs being something other that strictly a theme choice.

[jeyip]

I created a separate PR to enable the Russell theme in the design picker. The reason we're splitting up the PRs is because Russell currently has block error issues when loading in the site editor.

We're planning to investigate the errors before displaying Russell to users in the onboarding flow.