annezazu 7:47 pm on March 29, 2023
Tags: ,   

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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 15.4 (or the latest version). 

Create the base of your theme

  1. Navigate to Appearance > Create Block Theme.
  2. 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!
  3. 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”.
  4. Head to Appearance > Themes and activate the theme you just created.

Configure your fonts

  1. Head to Appearance > Manage Theme Fonts.
  2. 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. 
  3. Once added, you can then manage the font weights. 
  4. 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

  1. 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

  1. When you’re done making your changes, head to Appearance > Create Block Theme.
  2. 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 CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. 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 slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to @annezazu (that’s me!). 

#fse-exploration, #fse-outreach-program