Props to @daisyo and @jffng for the massive amount of help in writing and perfecting this call for testing. 

Important note: Compared to previous calls for testing for the FSE Outreach program, this is intentionally targeting a more developer-centric audience compared to site builders or end users in order to bring high impact feedback for theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., a new tool for extenders. You can read more about what to expect with upcoming efforts here. 

Feature Overview

At the highest level, theme.json is a configuration file used to enable or disable features and set default styles for both a website and blocks. Rather than dealing with a ton of theme support flags or alternative methods, theme.json provides a consolidated and canonical way to manage it all. These settings include options like:

• What customization options should be made available or hidden from the user.
• What are the default colors, font sizes, etc available to the user.
• Defines the default layout of the editor (widths and available alignments).

This configuration file is a big part of what makes 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. themes so powerful as it allows for finer-grained control, and introduces the first step in “managing styles” for future WordPress releases. Here are a few of the top benefits of using this new mechanism: 

• It allows themes to provide settings per block which wasn’t possible before since add_theme_support targets settings for the entire editor. 
• Themes using theme.json will automatically get classes and CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Custom Properties enqueued for the presets they declare instead of needing to handle this themselves. Plus, this means translations of preset names are also managed for them!
• Theme.json will coordinate coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., theme, and user styles in a way that reduces the amount of CSS that needs to ship as well as help resolve specificity problems. 

While block themes won’t work with WordPress 5.8 without the 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/ 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 due to some theme blocks being left out of the release that weren’t quite ready to ship, it’s still an important feature coming to 5.8 that needs testing and exploration. If you’ve been curious about the world of block themes or have started building your own, this call for testing is for you and should help you to continue to explore what’s possible with theme.json while giving you a chance to share what else you’d like to see.

You can read more about this feature in the documentation here. 

Beginner Testing Steps

This section is for those wanting to get a sense of what theme.json can control and what the output will look like. 

1. Head to https://gutenberg-theme.xyz/. This is a tool that can help generate the settings section of the theme.json file. 
2. From there, try toggling on and off various theme supports. This will help you explore just a few settings that are possible to control with theme.json. For example, you can toggle on and off Custom Colors or Custom Link controls. Notice that the output in the browser changes based on your selection.
3. Use the + button next to Palette, Gradients, or Font Sizes to explore adding customizations. Keep in mind that you can edit both the slug and specific variables, like color name or font size. 
4. Add a few customizations and review the output! If you want to go a step further and use what you’ve created, check out the intermediate steps. 

Intermediate Testing Steps

This section is for those wanting to dig deeper into theme.json by writing their own file and exploring the various settings it can control. 

Note: this mainly focuses on just theme supports and presets for blocks in the settings section of theme.json rather than Global Styles. 

Set up your testing environment

1. Create a Fresh WordPress Install.
2. Install and Activate Gutenberg Plugin while using the latest version (10.9.0 as of writing this).
3. Download and Install TT1 Blocks from the Theme Directory. 
4. Navigate to the TT1 Blocks Theme directory and open the theme.json file in a text editor or IDE.
5. Replace the theme.json file with this gist before starting the next steps. It’s expected that this will really simplify what the theme looks like so don’t panic if you see a lot of options removed. This is intentional to simplify the settings you’re changing.

Generally speaking, please use the latest versions of each part of the setup and keep in mind that versions might have changed since this post was shared.

Layout

1. Create a new post.
2. Add a cover block with a solid colored background and several lines of content in an inner paragraph block to the post.
3. Add another cover block with a solid colored background and several lines of content in an inner paragraph block. Set this block to “Wide Width”.
4. Add a third cover block with a solid colored background and several lines of content to the post and set the block to “Full Width”.
5. Publish Post.
6. Load the post on the front end and note the width of the cover blocks.
7. Change the contentSize value to a different pixel value in the layout section of theme.json.
8. Change wideSize value to a different pixel value in the Layout section of theme.json.
9. Load the edit view of the previously created post and confirm that new widths are reflected in the editor
10. Load the post on the front end and confirm that the new widths are reflected on the front end of the site
11. Extra Credit: Try setting the width values to something other than “px” such as “em”, “rem”, “vh”, “vw”, or “%”.

Typography

1. Set the following typography settings to true in theme.json: 
   • customFontWeight (Heading Block)
   • customFontSize (Paragraph Block)
   • customLineHeight (Paragraph Block)
   • dropCap (Paragraph Block)
2. Test the visibility of typography settings in a paragraph block (font size, line height and drop cap).
3. Test the visibility of typography settings in a Heading block (font size, font weight, line height).
4. Test that each of settings apply to the block on the front end.
5. Change the typography settings to false in theme.json.
6. Confirm that each of the custom typography settings in the paragraph block are no longer present in the block editor (Note the typography settings applied previously may still apply to existing blocks).
7. Extra credit: Add one or more font families and font sizes to the typography section of the theme.json file. Test your custom font families and sizes using a Button block.

Border

1. Set the following border settings to true in theme.json:
   • "customColor": true
   • "customRadius": true
   • "customStyle": true
   • "customWidth": true
2. Create a group block with an inner paragraph block with several lines of text.
3. Test visibility of border settings in a group block (Style, Width, Radius, Custom Color).
4. Test that settings apply to the block on the front end.
5. Change the above border settings to false in theme.json.
6. Confirm that border settings in group block are no longer present in the block editor.

Color

1. Set the following color settings for custom and customGradient to true in theme.json:
   • "custom": true
   • "customGradient": true
   • "link": true
2. Add a cover block with a custom gradient background and several lines of content in an inner paragraph block to the post.
3. Add a link to the paragraph block and set the link color to a custom color.
4. Add another cover block with an image background and several lines of content in an inner paragraph block to the post. Set the cover background to use a duotone preset.
5. Change the duotone colors for the background image to use custom colors for the duotone shadows and highlights settings.
6. Extra Credit: Add one or more additional colors to the palette and duotone or gradient presets. For more information about CSS gradients check these resources from CSS Tricks and CSS Gradient. Keep in mind that for duotone presets, you’ll need to use RGB, Hex or specifically named colors when adding custom colors.

(Very) Advanced Testing Steps

This section is for those looking to create a more robust block theme using theme.json and who are experienced theme developers. This isn’t for everyone! 

If you feel more comfortable with block themes and have ample time to dig into theme.json, try replicating a classic theme. Here are two options that should be fun to dig into but keep in mind any default theme should work well:

• Twenty Twenty
• Storefront

As you try to do this, write down what gaps remain, what proves to be the most difficult to do, and what feels surprisingly easy! Share in the comments below so we can learn from your experience. This is intentionally extremely open ended and advanced so don’t worry if you don’t feel up for the challenge. If you want to follow along while someone else explores doing this, check out @mkaz‘s exploration video on learning to create a block theme.

What to notice:

These questions are specifically for the Intermediate and Advanced sections: 

• Do the colors added to the theme.json file appear with the assigned names visible on hover in the color palette for various blocks?
• Do the font sizes added to the theme.json file appear with the assigned names and sizes in the font size dropdowns in blocks?
• Do the colors and font sizes appear correctly when used with blocks in the editor?
• Do the colors and font sizes appear correctly when used with blocks on the front end?
• What did you find particularly confusing or frustrating about the experience?
• What did you especially enjoy or appreciate about the experience? 

Leave Feedback by July 14th

Please leave feedback (questions, comments, concerns) in the comments of this post and be sure to note which section you followed. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg but, for this test, it’s unlikely you’ll need to. However, if you do leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please comment below with the link. 

Join a hallway hangout for theme.json testing on July 7th

To help those who might want to explore this test and theme.json in a group, @daisyolsen will be hosting a hallway hangout specifically for this exercise. If you have never attended a hallway hangout, you can read more about them here. Ultimately, they are meant to be casual and collaborative sessions to bring like minds together. 

• Time: 5pm UTC
• Date: July 7th
• Zoom link can be found here with the meeting ID of 881 3678 6501 and password 600875. 
• This will be announced and wrangled further in the #fse-outreach-experiment channel.

Hope to see you there. 

#fse-outreach-program, #fse-testing-call, #full-site-editing