Intro Post on WordPress.org

annezazu12:47 pm on March 29, 2023

FSE Program Exploration: Build a block theme

With WordPress 6.2 released, this exploration seeks to explore the Site Editor as a design tool, asking folks to create a block theme without any code directly in the editor using the current tools. The aim is to both find gaps in functionality and to get feedback on the experience of using the Site Editor in this design centric way, as we look to expand the number of block themes. 

The focus of this exploration is to think with a more open minded, “what can I build today?” approach. If you’ve never built a block theme, consider this an invitation to give it a try. Tooling has come a long way and the power of what’s being built is that it allows more folks to dive into the future (and present) of WordPress. For this experience, you’ll use the Create Block Theme plugin to facilitate the creation and export process so you can keep what you create! Feel free to read these brief instructions for how to get started or follow the steps below.

In the near future, expect a more formal call for testing once more, dedicated to some of the newer functionality being worked on as part of the remaining major phase 2 items. 

Exploration Instructions

To use a prebuilt test site: 

1. Open this link only once: https://app.instawp.io/launch?t=fse-block-theme-exploration&d=v1  Please do not repeatedly open this link as it creates a new site each time.
2. This will launch a site for you to use for up to 5 days. 
3. Save the link to your site so you can access it again during the test. 

To set up your own test site: 

1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
2. Install and activate the Create Block Theme plugin.
3. Install and activate Gutenberg 15.4 (or the latest version). 

Create the base of your theme

4. Navigate to Appearance > Create Block Theme.
5. Choose either “Create blank theme” to start completely from scratch or you can use the currently active block theme by choosing the “Clone” option. Note: You are welcome to use a block theme of your choosing if you Clone!
6. Fill out the information for either option. Feel free to keep this pretty simple since this is just for testing and not official block theme launching purposes. When done, select “Generate”.
7. Head to Appearance > Themes and activate the theme you just created.

Configure your fonts

8. Head to Appearance > Manage Theme Fonts.
9. From here, you can add a Google font or a Local font if you have any you’d like to use. This will install the fonts (download them) as part of the theme but these fonts still need to be applied. 
10. Once added, you can then manage the font weights. 
11. After you’re done, head to Appearance > Editor and open Styles to configure these fonts for use on your theme under Typography. 

Make your changes and export

12. Head to Appearance > Editor and begin customizing as you’d like! 

Here are some high level ideas: 

• Use the Styles interface to make global changes to the Layout, Typography, and more. Use the Stylebook to see your changes at a glance to individual blocks. 
• Use the design tools built into each block to make individual changes. 
• Create new templates or template parts. 
• Add or remove different blocks from current templates or template parts.

Export your theme

13. When you’re done making your changes, head to Appearance > Create Block Theme.
14. From there, choose the “Export” option. This option will automatically include user changes so you don’t have to overwrite them first.

Please share feedback by April 26th, 2023

What to notice

While you’re welcome to share feedback on any aspect of the experience, here are a few specific questions to focus your feedback.

• Did the experience crash at any point?
• Did the saving experience work properly? 
• What did you find particularly confusing or frustrating about the experience?
• What did you especially enjoy or appreciate about the experience? 
• What did you need to use Custom CSS for, if at all? 
• Was there anything you weren’t able to accomplish that you’d like to see considered? 

As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM in slack to @annezazu (that’s me!). 

#fse-exploration, #fse-outreach-program