annezazu 10:46 pm on June 24, 2021
Tags: fse-outreach-experiment ( 20 ), fse-outreach-program ( 97 ), fse-testing-call ( 28 ), full-site-editing ( 43 )

FSE Program Testing Call #8: Thrive with Theme.json

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.

Head to https://gutenberg-theme.xyz/. This is a tool that can help generate the settings section of the theme.json file.
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.
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.
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

Create a Fresh WordPress Install.
Install and Activate Gutenberg Plugin while using the latest version (10.9.0 as of writing this).
Download and Install TT1 Blocks from the Theme Directory.
Navigate to the TT1 Blocks Theme directory and open the theme.json file in a text editor or IDE.
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

Create a new post.
Add a cover block with a solid colored background and several lines of content in an inner paragraph block to the post.
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”.
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”.
Publish Post.
Load the post on the front end and note the width of the cover blocks.
Change the contentSize value to a different pixel value in the layout section of theme.json.
Change wideSize value to a different pixel value in the Layout section of theme.json.
Load the edit view of the previously created post and confirm that new widths are reflected in the editor
Load the post on the front end and confirm that the new widths are reflected on the front end of the site
Extra Credit: Try setting the width values to something other than “px” such as “em”, “rem”, “vh”, “vw”, or “%”.

Typography

Set the following typography settings to true in theme.json:
- customFontWeight (Heading Block)
- customFontSize (Paragraph Block)
- customLineHeight (Paragraph Block)
- dropCap (Paragraph Block)
Test the visibility of typography settings in a paragraph block (font size, line height and drop cap).
Test the visibility of typography settings in a Heading block (font size, font weight, line height).
Test that each of settings apply to the block on the front end.
Change the typography settings to false in theme.json.
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).
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

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

Color

Set the following color settings for custom and customGradient to true in theme.json:
- "custom": true
- "customGradient": true
- "link": true
Add a cover block with a custom gradient background and several lines of content in an inner paragraph block to the post.
Add a link to the paragraph block and set the link color to a custom color.
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.
Change the duotone colors for the background image to use custom colors for the duotone shadows and highlights settings.
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:

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

annezazu 10:46 pm on June 24, 2021

+make.wordpress.org/themes/
David Ryan 9:59 pm on June 28, 2021
The 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. I’ve followed closer than the Template Editor, but I wasn’t around for most of the creation and ideation cycle… so repeating the disclaimer that I’ve searched for these issues/discussion but have likely missed some things along the way.

Overall, from a developer perspective, the theme.json is the holy grail of what I’ve wanted in WordPress Theme Development for a long time. It’s a one-stop, unified config that sets (almost) all the things and mostly #justworks.

Test Site
https://daveryan.blog/theme-json-landia

Versions
- TT1 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. v0.4.7
- 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/ v10.9.1
- WordPress v5.7.2
- No other plugins active.
Layout
No feedback, everything (including Extra Credit) works as-expected.

Typography
2. Font Weight was unavailable in the Paragraph Block. Other type settings worked as-expected.
7. While playing with additional font families, I modified tt1-blocks/assets/css/style-shared.css with an import’d Google Font. These styles loaded fine on the frontend, however, the style-shared.css was never loaded in-editor (directly or via load-style.php, confirmed via browser Network inspector and adding additional !important style rules that loaded on frontend).

Border
No feedback, works as-expected.

Color
No feedback, everything (including Extra Credit) works as-expected.

What to notice
- Colors registered as-expected.
- Font Sizes registered as-expected.
- Colors & Font Sizes appear correctly in-editor.
- Colors & Font Sizes appear correctly on front end.
Confusing or Frustrating
- It appears WordPress 5.8 doesn’t support Block-Based Parent Themes, as theme.json files are only loaded from the active theme using get_stylesheet_directory(). I see this open issue, but having WP_Theme_JSON_Resolver only merge the active theme’s theme.json without merging the parent feels like a large omission (that’s also not a huge lift to address… as the JSONs are already merging with a CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. copy). I realize there’s a brave new world with FSE where block-templates and block-template-parts start to chip away at the classic use for Child Themes… but especially for the theme.json, it seems particularly helpful in the scenario of a WordPress MultisiteMultisite Multisite is a WordPress feature which allows users to create a network of sites on a single WordPress installation. Available since WordPress version 3.0, Multisite is a continuation of WPMU or WordPress Multiuser project. WordPress MultiUser project was discontinued and its features were included into WordPress core.https://codex.wordpress.org/Create_A_Network. with one parent theme and each site extending/overriding Colors, Typography, etc without needing to entirely nuke/copy-pasta the parent’s theme.json file. In fact, I see one of the best benefits of the theme.json is providing a “preset” for another Theme that doesn’t require overriding templates (block or classic) but the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. is a one-file override via theme.json.
- It seems a worthy enhancement to explore would be more-graceful experience when a Block has features that are currently disabled. With Dropcaps and Borders, once those options disappeared, the only current user recourse is to futz with markup or start with a fresh block. While there are worse things, this seems a UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. frustration point we could overcome and avoid by detecting the Block Attribute and show a warning, disabled option in-sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. that allows removing but not adding/modifying the feature, etc.
Enjoyable & Appreciated
- Heeeelllooo CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Variables! All-around delightful to have access to in Theme Development and for 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’s to tap-in without creating as many custom styles.
- Programatic control that users can override via UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. One of my biggest gripes with Gutenberg has been using add_theme_support( 'editor-color-palette' ) without a recourse for Users to override in a UI nor a reliable developer APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. or recourse short of messing with the $_wp_theme_supports global PHP variable.
- settings.custom I will admit my gut reaction to using --wp--custom--{var} was uncertainty. But having a unified standard, where the origins of a value can always be predictably traced to a specific location in the theme.json data shape no matter what theme is active… does seem an advantage to each theme setting up lots of unique vendor prefixes and has grown on me.
- annezazu 5:17 pm on June 29, 2021
  
  @dryanpress thanks for diving into this more unique test and writing such comprehensive feedback. No worries about missing anything along the way – this is why feedback rounds happen!
  
  Overall, from a developer perspective, the 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. is the holy grail of what I’ve wanted in WordPress Theme Development for a long time. It’s a one-stop, unified config that sets (almost) all the things and mostly #justworks.
  
  Beautiful feedback.
  
  While playing with additional font families, I modified tt1-blocks/assets/css/style-shared.css with an import’d Google Font. These styles loaded fine on the frontend, however, the style-shared.css was never loaded in-editor (directly or via load-style.php, confirmed via browser Network inspector and adding additional !important style rules that loaded on frontend).
  
  Ah yes! Enqueueing stylesheets in theme.json directly has been discussed in this issue. I’m going to check in with some themers to confirm whether what you’re describing is expected behavior for now or a bug. I’ll follow up if there needs to be a new GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ issue opened.
  
  Font Weight was unavailable in the Paragraph 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.. Other type settings worked as-expected.
  
  Ah! Thanks for spotting that. That’s expected. I should have removed that as it’s only for the Heading block right now.
  
  In fact, I see one of the best benefits of the theme.json is providing a “preset” for another Theme that doesn’t require overriding templates (block or classic) but the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. is a one-file override via theme.json.
  
  Appreciate this larger perspective here. In the future, child themes as a concept likely won’t make a ton of sense as there likely won’t be much shared code between the two once theme.json is even more robust with what it supports. With that said, I do know some folks are working on creating a block parent theme for now with the work around Blockbase. You can read more about this approach here. Ultimately, Blockbase is meant for the community to use and tinker with in the meantime (be it by using it as a parent or by just using the build script to build their own parent) until we reach a future where parent/child themes aren’t as necessary. For now, I added your feedback to the open issue you linked to as I think it’s a great perspective to make sure is included.
  
  It seems a worthy enhancement to explore would be more-graceful experience when a Block has features that are currently disabled.
  
  Can you say a bit more here about the use case? For example, are you thinking this might be something worth exploring as part of if someone switches themes that might not have support for something they used previously, like drop cap? I want to understand the experience a bit more as the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. could get extremely cluttered if all of the disabled features are listed out. This also may be something where the global styles system will resolve this by providing a coherent way to manage user styles, theme styles, and coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. styles.
  - annezazu 6:46 pm on June 29, 2021
    
    I’ll follow up if there needs to be a new GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ issue opened.
    
    To follow up here 🙂 All editor stylesheets need to be individually added via add_editor_style(). As a result, you’d need to modify add_editor_style() in TT1 Blocks’ functions.php to something like this in order for this import to work:
    
    // Enqueue editor styles. add_editor_style( array( './assets/css/blocks.css', './assets/css/style-shared.css', '<-- Google Fonts URL -->' ) );
    
    Hopefully that helps clear things up.
    - David Ryan 6:54 pm on June 29, 2021
      
      Ah, thanks! I did try that, I was just surprised the import statement inside style-shared.css got stripped somehow. Seems like a good docs opportunity to prescribe an approach for a common use case.
  - David Ryan 6:52 pm on June 29, 2021
    On Parent/Child Themes
    
    Huh, interesting. I’d been under the impression that it was the intention to make Child Themes work with 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.-Based Themes. That child-theme.json is definitely an interesting idea and is good prior art for someone looking to implement something similar.
    
    In general, I think having the “block-based child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. mechanism” in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. would standardize how Theme Authors use it as opposed to in a parent theme always needing to create scaffolding for Child Theme support. In Core also means less code for the Theme Review team to parse, less code for Themers to parse and a 20-line 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. file (generated by a user, generated by a GUI) could have radical impact.
    
    The one issue I see with child-theme.json as a naming convention is the likelihood of grandchild themes that @aristath called out on that issue. That naming convention could quickly get confusing with multiple layers.
    
    My main interest is keeping the barrier to entry for Child Themeing low (no build tools, avoid stylesheet inheritance, etc). Keeping things out of build steps and in JSON enables low-code/no-code Child Themeing.
    
    On Disabled Feature Downgrading
    
    The sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. getting cluttered is absolutely a valid concern! And this “feature downgrading” has long been a pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life with Theme switching that isn’t new to Blocks or Block-Based Themes. With the theme.json, there’s now a way a 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 could easily build a UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. to toggle features on and off too. We’re already in better territory.
    
    I guess the big difference I see is these controls are WordPress features, not Theme-specific features. So there’s more we can do about them. Now that Themes are going to be drastically easier to swap than they have historically, this feels like a UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. pain point that will increasingly arise and that could be iterated on. I don’t know where this would fall into priorities, but it definitely feels like an opportunity to remove a confusion/friction point for site owners.
    
    Few thoughts:
    
    Show the UI “cluttered” because that is in theory how the user is accustomed to it already. Then as users downgrade features, those controls can disappear and it can self-tidy.
    
    Group all disabled settings into an “Unsupported” sidebar panel that enables users to remove them without switching Themes back, but tidy’s them away so they get the UX of the new Theme while having recourse to address unsupported features burned into their content.
    
    If revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. are active, automatically downgrade content for features that are turned off and throw up a notice to users that this content has features this theme doesn’t support that have been removed and they can restore for X saves beyond their current point.
    - David Ryan 8:04 pm on June 29, 2021
      
      @annezazu I re-read your comment again and I guess I’d be curious if you could expand on this:
      
      until we reach a future where parent/child themes aren’t as necessary
      
      I guess one difference of opinion is, I see Child Themes becoming even more popular, just much less likely to override Template files and much more focused on the 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.. Is there something I’m missing or I misread?
      
      I didn’t go into tons of scenarios, but I think there are a bunch for Child Themes:
      
      An organization extends TT1 Blocks (or future default Themes) with their branding and fonts and the org’s Theme gets installed on multiple WordPress installs without manually entering in Global Styles on each new site.
      
      An organization creates a custom Parent Theme that multiple sub-brands use (i.e. WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ has a Parent BBT that WordCamp.org, BuddyPress.org and WP-CLIWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ each extend and apply branding to).
      
      A Theme Developer extends a BBT solely via the theme.json and releases that Theme to WordPress.org, relying on all the Parent Theme’s 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. templates but applying different fonts, colors and Block Style presets.
      
      A user sets up lots of WordPress sites and creates their own “Starter Theme” with some unique, branding-agnostic prescription (all Heading Blocks receive the Primary Color, all Image/Embed captions receive the Secondary Color) and then they just customize Global Styles.
      
      A Theme Developer creates a “Site Design Studio” where users can customize their Theme online before they buy it and prior to even buying WordPress hosting. In the purchase, the Theme Developer injects a theme.json with the customizations into a Theme ZIP.
    - annezazu 10:03 pm on June 30, 2021
      
      I guess the big difference I see is these controls are WordPress features, not Theme-specific features. So there’s more we can do about them. Now that Themes are going to be drastically easier to swap than they have historically, this feels like a UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life that will increasingly arise and that could be iterated on. I don’t know where this would fall into priorities, but it definitely feels like an opportunity to remove a confusion/friction point for site owners.
      
      Everything you’re touching on here I expect to see as a big focus ahead of 5.9. Excellent thoughts and I deeply appreciate you sharing as getting the theme switching experience refined and clarified is incredibly important. In my recap for this call for testing, I’ll be sure to call this out specifically.
      
      I guess one difference of opinion is, I see Child Themes becoming even more popular, just much less likely to override Template files and much more focused on the 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.. Is there something I’m missing or I misread?
      
      Gosh, expanding on this is tricky because this is truly early days and I can’t speak with certainty. After all, much of the future of themes will be defined in the coming months once the theme.json foundation is shipped in 5.8 and more folks are able to dig in. I love these thoughts and examples though. If you’re game, would you be willing to share directly on the issue I previously linked? While I could copy and paste what you shared, I think there’s great benefit in potentially opening up that discussion more and for those working on this mechanism to hear directly from you. This also seems like it would make for a great hallway hangout in the future, similar to the universal themes one. Some of what you’re describing will also be impacted by how theme switching itself works in general and what carries over from theme to theme. Regardless, I’m excited for more of these broader conversations to happen in the community and to see what people create with theme.json.
      - bobbingwide 8:45 am on July 7, 2021
        
        Re: Child themes. I’ve shared a couple of thoughts in issue 25612.
        
        annezazu 2:29 pm on July 7, 2021
        
        Thank you for doing that 🙂
Daniel Shaw 4:18 am on June 30, 2021
Just thought I’d quickly add a comment here about a 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. snag I’ve hit while working on a FSE theme recently (currently testing out some ideas for a preferred solution and will post a link to a GithubGitHub GitHub is a website that offers online implementation of git repositories that 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/ issue once I’ve created one, too).

The layout preset contentSize is not exported as a custom property in the global styles CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.. This seems reasonable in the context of using 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/’s native approach to layout presentation: max-width + left/right auto margins are used to centre children, with the parent container presumed to be full-width. Each 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. that supports layout has a style element following its markup containing CSS with custom values scoped to the block, if entered, or the default contentSize value.

I’m working on a FSE theme that uses CSS Grid to manage the various alignments available for blocks. This makes for a different approach to layout, where the parent container is assigned a one-off default width of contentSize. However, as noted earlier, there’s currently no way to retrieve layout values set in theme.json to use with my CSS Grid syntax. Following the convention of other presets that are exposed in the global styles, ideally I’d be able to write the following CSS to use the contentSize value set in theme.json:
```
grid-template-columns: 1fr min(var(--wp--preset--layout--content-size), 100%) 1fr;
```
Currently I’m using a custom value in theme.json that duplicates the default value for contentSize, to allow me to use it in a CSS declaration, like this:
```
grid-template-columns: 1fr min(var(--wp--custom--layout--content-size), 100%) 1fr;
```
An extension to this relates to when ‘inherit default layout’ is active. Theme.json layout values are exposed in a style element scoped to a specific block, with CSS declarations presuming the approach mentioned earlier: max-width + left/right auto margin applied to each child of a container supporting layout. This is fine unless you want to use a different method for managing presentation layout, like CSS Grid. If custom Content and Wide values are set in a block’s Layout panel, it should be possible to manage the CSS provided for each block, to match the required syntax. Right now there’s no obvious mechanism to achieve this.

For example, if I set a custom layout size of 100 rem for the Wide value of a specific group block, the current style element will contain a declaration like this:
```
.wp-container-60dbd111c065b > .alignwide { max-width: 100rem; }
```
…whereas my CSS Grid-based layout requires:
```
.wp-container-60dbd111c065b.alignwide { max-width: 100rem; }
```
Ideally there would be a straightforward way to define the CSS declarations used in these style elements.

Last of all, it would also be useful to be able to enable/disable the Layout panel as it appears in block settings. There doesn’t seem to be a way to do this currently.
- Daniel Shaw 4:27 am on June 30, 2021
  
  Hmmm, actually, please ignore the section starting “An extension to this…”, up to the end of the second-to-last sentence. Reading that back I feel it’s outside the scope of 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., since it relates more to custom values entered in 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.’s Layout settings and not the default theme.json layout values.
  - annezazu 2:50 am on July 2, 2021
    
    It’s very exciting to hear you’re working on 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, @chthnc! Thanks for so clearly laying out the problem and your idea.
    
    currently testing out some ideas for a preferred solution and will post a link to a GithubGitHub GitHub is a website that offers online implementation of git repositories that 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/ issue once I’ve created one, too
    
    Reading this over, all I immediately wanted to see an issue created for wider discussion as it sounds like having contentSize exposed as a preset and generated CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. variable would be valuable. Would you mind opening an issue to discuss sooner rather than later to see if other folks could find it useful as well? If you want, happy to open it on your behalf 🙂
    
    Last of all, it would also be useful to be able to enable/disable the Layout panel as it appears in block settings. There doesn’t seem to be a way to do this currently.
    
    I also might include this as a separate issue. Again, happy to open it but don’t want to overstep since it sounds like you’re already keen to start these discussions.
    
    Either way, keep sharing what you find in GitHub as you go along with building your theme. It helps the folks working on building out 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. know the pain points people want fixed and feature requests people are looking to have.
  - Daisy Olsen 1:57 pm on July 2, 2021
    
    Chiming in to say that I agree with @annezazu that a start to a GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ conversation around exposing the layouts as properties would be great. It seems like a natural addition to me but getting those with more in-depth knowledge of the technical aspects would be really valuable.
    - Daniel Shaw 2:27 am on July 3, 2021
      
      Would you mind opening an issue
      
      Done 🙂 https://github.com/WordPress/gutenberg/issues/33184
      
      Last of all, it would also be useful to be able to enable/disable the Layout panel
      
      I also might include this as a separate issue.
      
      Looks like there’s already an issue open for this one: https://github.com/WordPress/gutenberg/issues/31980
      - Daisy Olsen 1:51 pm on July 5, 2021
        
        Thanks so much for doing that!
Paal Joachim Romdahl 4:21 pm on July 1, 2021
Testing.
After adjusting the wideSize, I expected to be able to add a fullSize and change the Full Width width, but that did not work. I expect there to be consistency in the naming of various options.

Testing typography settings in the Paragraph and Heading blocks. Can I adjust controls per 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. type? So for instance having Line height only for Headings and not Paragraphs? Or only having colors for Paragraphs and not Headings etc.

Test the visibility of typography settings in a Heading block (font size, font weight, line height).

“Change the typography settings to false in 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..”
Can I turn off all typography settings? I assume you mean turn off the settings I just turned on.

“Add one or more font families and font sizes to the typography section of the theme.json file.”

I noticed this:
```
"fontFamilies": [
                {
                    "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
                    "slug": "helvetica-arial"
```
How do I add a font family? I tried various things but it did not work.

I added border settings to the Group block. I could see the black border I added. In theme.json I took it from true back to false. I can still see the border settings even though I turned off the controls. I assume to remove the black border I have to turn the controls back on again. Remove the order and then turn off the controls. I turned on the customStyle and removed the border, and turned it off again.

I was able to add a new duotone and gradient by duplicating the examples and renaming these.

Questions and answers.
Do the colors added to the theme.json file appear with the assigned names visible on hover in the color palette for various blocks?
—> Yes.
Do the font sizes added to the theme.json file appear with the assigned names and sizes in the font size dropdowns in blocks?
—> Yes.
Do the colors and font sizes appear correctly when used with blocks in the editor?
—> Yes. I believe so.
Do the colors and font sizes appear correctly when used with blocks on the front end?
—> I had not tested this earlier and I am testing these now. Yes both appeared correctly.
What did you find particularly confusing or frustrating about the experience?
—> Not understanding how to add font family, as there was not example I could copy and paste already in the theme.json file. As I could duplicate pre-existing font sizes and colors.
What did you especially enjoy or appreciate about the experience?
—> Being able to control 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/ experience externally is a lot of fun. It is a very powerful tool, prefect for customizing the environment with only showing controls and pre existing options directly made in the theme.json file.

Thank you for adding this test!
- Daisy Olsen 2:22 pm on July 2, 2021
  
  Thanks for your notes @paaljoachim! I read through everything and here are some responses to some of what you experienced –
  
  After adjusting the wideSize, I expected to be able to add a fullSize and change the Full Width width, but that did not work. I expect there to be consistency in the naming of various options.
  
  I think the intention of fullWidth is always to be just that. There are only two adjustable widths declared. Perhaps this could be expanded more in the future. Might be worth starting a discussion about custom widths on GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ if that hasn’t already happened.
  
  Testing typography settings in the Paragraph and Heading blocks. Can I adjust controls per 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. type? So for instance having Line height only for Headings and not Paragraphs? Or only having colors for Paragraphs and not Headings etc.
  
  Yes this can be done but it would be in the settings portion of 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. for the Global Styles panel, we didn’t go into this for this particular cft but this would be a natural progression for a follow-up cft.
  
  How do I add a font family? I tried various things but it did not work.
  
  For now I think web-safe font families are the easiest thing to add. I have tagged adding a note to my “things to document” list to explain how to add google or other loaded fonts. This would be a great how-to or tutorial. Maybe even a workshop for learn 🙂
  
  I added border settings to the Group block. I could see the black border I added. In theme.json I took it from true back to false. I can still see the border settings even though I turned off the controls. I assume to remove the black border I have to turn the controls back on again. Remove the order and then turn off the controls. I turned on the customStyle and removed the border, and turned it off again.
  
  The theme.json settings control whether or not the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. controls are visible in the editor. The theme.json won’t affect already created blocks unless the values for a named property are changed with the same name. this is pretty much expected behavior from my perspective, at least.
  - Paal Joachim Romdahl 7:44 am on July 27, 2021
    
    Thank you very much for your response Daisy @daisyo !
    
    For now I think web-safe font families are the easiest thing to add. I have tagged adding a note to my “things to document” list to explain how to add google or other loaded fonts. This would be a great how-to or tutorial.
    
    That sounds like a very good idea!
Evan Mullins 12:37 am on July 2, 2021
Here’s my feedback for this call for testing on themes.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.:

I enjoyed the beginner testing and the tool for theme.json generation.

Intermediate tests
Setup: Check, thanks for spelling it all out here!
Tested in both WP 5.7.2 and 5.8RC1
TT1 theme v0.4.7
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/ v10.9.1

Layout
Worked nicely. I was able to test multiple widths and with multiple units and saw the edits reflected on both the front end and within the editor. Though I did find myself testing if thinSize or fullSize would work as well. Would be nice to allow more values here some way.

Typography
These settings worked as expected. I was a little confused seeing that some applied to paragraph while others applied only to headings. Consistency would be great here.
I also wanted to note that the font-weight and line-height were applied as inline styles while the others (size, dropCap, and even color) were applied via classes, so again consistency would be nice to have. Classes would be the preferred manner I would think. This can also get tricky when the font in use does not support or hasn’t loaded the various multiple font weights, and the browser will use the closest weight to match the style. I saw this in my testing, as my font weight properly set the font weight in the editor, it did not display on the front end.
I did test the font-family selection as well and am surprised that this is not exposed to other blocks too. Setting a custom font on a button seems slightly less useful than setting a custom font on a heading for example.

Border
Settings again worked as expected. I saw the settings in 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. panel and then updates in the editor when I made changes and saw the properties on the front end too.
I’ll note here too that I was surprised that in turning off the feature support in the theme.json that the values persisted. I understand that it’s because the classes (or inline style attributes) were applied. I half expected that since the theme didn’t support the feature anymore the styles for those classes would not be loaded either. This bakes in the styles as prescribed, but I know that’s a familiar debate when discussing utility classes like this, that it’s hard to change design in the future when all the visual styling is baked in as a verbose class or worse an inline style.

Color
Settings worked as expected. I am a huge fan of defining a color and seeing it display in all the color selectors. Huge win (not exactly new here, but defining it in one place in the theme.json and seeing it propagate as classes and all for color and background is slick!)
I was able to create custom duotones and defined a new one in my theme.json. Important to note that I expected to be able to use white along with a hex value to define a duotone and this worked in the editor, but on the front-end the duotone rendered black instead of white. I defined:
```
{
    "slug": "blue-and-white",
    "colors": [
        "#3575D3",
        "white"
    ],
    "name": "Blue and White"
}
```
It looks fine in the editor: https://i.ibb.co/P5yyrh5/Screen-Shot-2021-07-01-at-19-38-04.png
but I got something else on the front end: https://i.ibb.co/yX9hTCC/Screen-Shot-2021-07-01-at-19-38-23.png
Setting a custom duotone manually by selecting the white and blue worked, so then I tried with hex values for both blue and white and it worked fine both in editor and front-end. So, something to look into there. Not sure if the values both need to match by design or what.
- Daisy Olsen 2:29 pm on July 2, 2021
  
  Another tester found the same experience with colors(in this case gradients) displaying black on the front end. In that case it was a problem with the slug that was used. I don’t see an error in your code above other than curly quotes which could be just the work of this website and not from your actual code. If you want to work through troubleshooting that further feel free to reach out on the Make WordPress 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/. (I’m DaisyO) and we can look at it more closely.
  - Courtney Engle Robertson 2:39 pm on July 2, 2021
    
    Similar case here but not limited to gradients. I’ll do a longer write-up on results so far.
Courtney Engle Robertson 7:01 pm on July 7, 2021

While testing, I worked through the intermediate testing challenge. All went well except that a few settings that were styled well for the editor did not display on the published view. I have attached my screen recording, system info, zip of the entire site, and 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. files individually. This was done using LocalWP
- annezazu 2:43 am on July 16, 2021
  
  @courane01 Wow! Thanks for sharing the video, your site info, etc. Super helpful to debug this. I tried to replicate this using 5.8RC3 but wasn’t able to after using Global Styles in the site editor. In looking through your 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. file too, I don’t see anything majorly amiss. Since I can’t replicate this right now, I’m not going to report anything but will keep an eye if others find similar items.
pattyok 4:29 am on July 8, 2021
Testing: Intermediate testing (TT1 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) and some advanced testing (my own theme) in my local environment
WP: 5.8-beta4
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/: 10.9.1

Pluses
I really like the general intent/direction for this.
- LOVE how easy it is to set up the color palette. ( I think its worth using for that feature alone ) and to be able to toggle on/off the various features.
- LOVE css variables! Having variables built more into WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. means less work for me /less css to write – might like to see more variables used in core styles that can be overwritten here (thinking about things like gutter widths and item padding/spacing)
Some things that give me pause
- I like the ability to set up custom variables within the 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., but that I think is what led me to some of my confusion around what I expect to be able to do with theme.json and what its true intent is. I think as theme developers we will be trying to figure out what the line is between what should happen in the theme.json and what should just be done within the css file for the theme. Allowing for custom variable declarations started me down the path thinking that this file will maybe replace my own custom variable file that I use, but after playing around with it, I dont think that’s the case, and then I go back to thinking about what’s the point of putting custom variables in there at all?
- I have recently embraced Media Queries combined with CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Variables in my workflow and really find that useful especially for things like font sizes and gutter widths, so adding some option for media queries would be cool. Without any media query related features, I will continue to use my existing system for managing font-sizes and gutters/spacing/margins
Intermediate Testing
Colors
- Setting link to True/False worked as expected
- Toggling customGradient and adding/removing gradient options worked as expected
- Setting duotone to false causes a fatal error**, setting it to empty leaves the default options intact [] , adding one option replaces the defaults with the one option (couldn’t figure out how to disable it – I would expect it to work the same way as gradients)
** when getting a fatal php error when the json syntax is wrong its a little hard to narrow down which thing is incorrect, just have to undo until you find it.

Borders:
- Toggling on and off the settings worked as expected
– Setting the border-color to one of my color presets requires that I write the css to apply it? (The class is applied but there is no style for that)
- Completely confused as to why all of these settings can be applied to a group, but only radius can be applied to a button (technically I understand why that might be, but from a fully realized feature standpoint I feel like all of these settings should be able to be applied to anything that can have a border (including columns, media-text block, etc).
Typography
- Editing the typography settings as described in the intermediate steps worked as expected. (though generally caused me confusion see below)
- Would expect to be able to control the list of fontWeights
Advanced Testing

I tried out some more advanced features relevant to a theme I am working on now and got a little confused… I realize this is well beyond what was asked for in the call for testing but these are the things I would expect to be able to do…
- I want to remove all of the default “preset” variables, but I couldn’t figure out how to do that, since this all gets written to the page, I want to reduce unnecessary bits.
  - All of the default css variables are present amongst my custom ones, I feel like those should go away.
Its not clear from the documentation or the structure of the theme.json as to which settings can be applied to which block. It seems sort of haphazard.
- It took me reading through the testing instructions to figure out what the FontFamilies declaration (within typography) does? It looks like it only can be used with the button – seems sort of random.
- Even if not via the front-end interface, I would expect that I could also set the font-family for each of the heading styles via theme.json but that doesn’t seem to work?
- Actually, I would expect that I could set any css property w/in the element context – For headings I would expect to be able to set a font-family and a font-weight, but only size and line-height get set…
- Benjamin Turner 9:31 pm on July 8, 2021
  I wasn’t able to get to the more advanced theme dev stuff, but the basic/intermediate features seem pretty solid! In case you want to peek over my shoulder during this session, I recorded it here:
  - https://share.getcloudapp.com/mXurDPOm
  There weren’t any huge bugs for me. Just a couple of notes along with timestamps if you want to jump around:
  - 12:30 – started fiddling manually with the theme.json file.
  - 15:43 – start working through “Typography” section.
  - 19:00 – Interesting that my incorrect 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. syntax messed with the editor. It makes sense and I’m glad that the content didn’t totally bomb out!
  - 28:20 – Drop shadow UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. is a little odd. When editing the text, I don’t see the larger size of the first letter. In order to see how the text wraps, I need to un-focus the element, then re-focus to make further changes.
  - 34:30 – Messing with Border settings
  - 40:30 – Messing around with Color settings
  - 46:15 – I’ve noticed that occasionally I’m looking for settings in the right panel, but they only exist within the floating toolbar and vice versa. At this specific timestamp, I was searching for the Duotone setting on the right-hand side, then realized it was located in the floating tool. I’d like it if settings were consolidated so that new features and tools were easier to discover.
  - 51:00 – Nice! You can use the typically named colors for the web!
- Jeff Ong 5:15 pm on July 15, 2021
  @pattyok you raise some great points / feedback, and I just wanted to add some thoughts here and there 🙂
  
  Allowing for custom variable declarations started me down the path thinking that this file will maybe replace my own custom variable file that I use, but after playing around with it, I dont think that’s the case, and then I go back to thinking about what’s the point of putting custom variables in there at all?
  
  FWIW I’ve used the custom variables generated by 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. for other values in the theme.json (particular in the styles declarations). So it helps a bit from a code quality perspective to consolidate where these variables are being declared and clarify what they are used for. And if I can use one less css import / sass partial for declaring variables, that’s nice too.
  
  I have recently embraced Media Queries combined with CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Variables in my workflow and really find that useful especially for things like font sizes and gutter widths, so adding some option for media queries would be cool. Without any media query related features, I will continue to use my existing system for managing font-sizes and gutters/spacing/margins
  
  +1, chiming in on the issue here could be helpful: https://github.com/WordPress/gutenberg/issues/27107. In some themes I have worked on recently, I have tried to use “intrinsically” responsive values where possible, for example: https://github.com/Automattic/themes/blob/trunk/quadrat/theme.json#L232. Of course there will be cases where breakpoints are still necessary, and having some responsive system in theme.json would be useful.
  
  I want to remove all of the default “preset” variables, but I couldn’t figure out how to do that, since this all gets written to the page, I want to reduce unnecessary bits.
  
  I believe font sizes are overridden when you supply them. Though for color palettes, the issue is a bit more nuanced because there are instances where 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/ may rely on those values, in addition to the theme’s preferences. Lengthy discussion here on the default color palette, including the theme’s ability to override or extend them.
  
  Even if not via the front-end interface, I would expect that I could also set the font-family for each of the heading styles via theme.json but that doesn’t seem to work?
  
  Hmm, you should be able to pass through style properties like this via the elements key:
```
"styles": { 
    "elements": {
        "h1": {
            "typography": {
                "textTransform":"uppercase",
                "letterSpacing": "1px",
                "fontFamily": "monospace",
                "fontSize": "48px",
                "lineHeight": 1.2
            }
        }
    }
}
```
  - pattyok 8:21 pm on July 15, 2021
    Good points about the font-sizes – now with wider support for min/max/clamp that is something I can get on board with…
    
    As for the h1, putting in code as you suggested only renders font-size and line-height, cant seem to get any additional properties in there…
    
    This:
    
    "styles": { "elements": { "h1": { "typography": { "fontSize": "var(--wp--preset--font-size--gigantic)", "lineHeight": "var(--wp--custom--line-height--page-title)", "fontWeight": "var(--wp--custom--font-weight--normal)", "textTransform": "uppercase" } } } }
    
    Renders this in the css:
    
    h1 { font-size: var(--wp--preset--font-size--gigantic); line-height: var(--wp--custom--line-height--page-title); }
    
    I don’t know if that is a bug or a feature?
    - Jeff Ong 3:30 pm on July 16, 2021
      
      Good points about the font-sizes – now with wider support for min/max/clamp that is something I can get on board with…
      
      🙌🙌
      
      I don’t know if that is a bug or a feature?
      
      Are you running the 10.9.1 of the 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? I just tested with 11.0.0 and perhaps it was changed / fixed in the latest version.
bobbingwide 4:34 pm on July 13, 2021

For the Advanced Steps, rather than attempt to recreate Storefront, I chose to develop a new theme to replace the Genesis child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. on my personal site. I installed the theme on the live site in time for the WordPress Cambridge MeetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. where I gave a short presentation entitled My Favourite Theme.

I still have to write up my notes about my experiences with 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.. But in the mean time, here’s a video that demonstrates parts of the theme.

https://youtu.be/jodDZ7nn8jA

So far, theme.json is 250 lines of codeLines of Code Lines of code. This is sometimes used as a poor metric for developer productivity, but can also have other uses..
style.css is 150

I primarily used style.css to implement some 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. styles for images, links and CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. grid and flex needed to allow blocks to flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context

inline.
- bobbingwide 9:22 pm on July 14, 2021
  
  I’ve written up my notes at https://sneak-peek.me/2021/07/05/fse-outreach-experiment-call-8-thrive-with-theme-json/
  
  TL;DR you need both 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. and style.css
  - annezazu 3:08 am on July 16, 2021
    
    Per usual, thanks so much @bobbingwide for diving in and reporting back what you found. Your write up is a great snapshot in time of what’s current possible. As we chatted about the other night, with the current gaps in functionality right now style.css is still needed with the anticipation of removal as more functionality is baked into 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.. This themeshaper post echoes the same sentiment:
    
    Blockbase CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. is, at the time of writing about 1000 lines of codeLines of Code Lines of code. This is sometimes used as a poor metric for developer productivity, but can also have other uses., whereas Seedlet CSS is over 4000. As more of these customizations are added to Global Styles, we will be able to remove the corresponding CSS from Blockbase, so we anticipate the size of the theme CSS to reduce over time.
    
    To address some of what you raised, can you say more about what you were trying to do with “Style query navigation”? As for which 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. supports which customizations, I agree. I think documentation needs to be built out more to help clarify this. Can you also say a tiny bit more about “defaults”? Are you saying it’s confusing to manage from a user point of view or theme author? I want to be sure I’m understanding correctly 🙂
    
    Thanks as always for your time and attention. Hope you have a lovely golf weekend!

Welcome

Weekly Meetings (Calendar)

FSE Program Testing Call #8: Thrive with Theme.json

Feature Overview

Beginner Testing Steps

Intermediate Testing Steps

(Very) Advanced Testing Steps

What to notice:

Leave Feedback by July 14th

Welcome

Weekly Meetings (Calendar)

Feature Overview

Beginner Testing Steps

Intermediate Testing Steps

(Very) Advanced Testing Steps

What to notice:

Leave Feedback by July 14th

Share this: