FSE Program Theme Design Survey Results

On July 30th, I shared a survey to gather insights around how theme authors are exploring 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. today in order to shape what’s possible in the future with theme design. Thank you to the 31 people who took the time to share their feedback! By having concentrated feedback like this, better decisions can be made around what makes sense to include in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. What follows is a high level summary of the results. 

As always, GitHub issues are welcomed for anything not covered here or that comes up in the future. Please keep sharing your feedback there and know it’s appreciated as the 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 design system continues to evolve. 

High level takeaways

Most folks who responded to the survey have experimented with building block themes either by starting from scratch or by forking an existing theme. Of note, TT1 Blocks didn’t stand out as a base that folks relied upon with many choosing to fork their own theme or working to move a classic theme they made to a block. While most folks used color presets, there was a variety of approaches included a few mixed naming strategies showing that this is still an open ended area of exploration. Along with colors and typography, the ability to customize layout and spacing options proved to be favorites. There was a near 50/50 split in terms of those who had explored per block settings or styles, with the Button block being the most commonly referenced by those who had. From the wide variety of feedback gathered, a few suggestions emerged for how best to improve the experience going forward including expanding theme.json documentation, adding commenting and improving the structure of theme.json, and more. 

Full Results

If you want to read the full reports, I have included an option below. Keep in mind that I intentionally removed any personal identifying questions that listed the contact information for folks (name, email address, country, etc). 

Overview of participants

31 people participated from 17 countries with the longest time spent responding clocking in around 60 minutes and the shortest time just under 2 minutes (removed a 2d response assuming it was left open in their browser).  

Q1: Please select which best fits your experience

  1. I have built and launched block themes (16 responses). 
  2. Other Option (6 responses).
  3. I have explored using theme.json with a classic theme (5 responses).
  4. I have experimented with building block themes (4 responses).
  5. I have used a block theme, but I have not built one yet (0 responses).

52% of participants said that they have built and launched block themes, which was exciting to see! For those who answered with Other Option, the responses were, for the most part, combining different responses into one:

I tried using theme.json in a classic theme and also experimented with TT1-Blocks theme and FSE. But haven’t dig in too deep to create a fully custom FSE solution.

I’ve built 5 experimental block themes and explored theme.json with classic themes.

I’m currently building a hybrid theme for a fairly large SaaS client that relies on theme.json and Block Patterns.

I have explored using theme.json with a classic theme and I have experimented with building block themes.

I have experimented with block themes and fse. I am currently building a custom block theme for a client site.

Q2: Please select what most closely matches how you got started with block themes + theme.json.

  1. I started from scratch (14 responses).
  2. I forked an existing theme (9 responses).
  3. Other Option (5 responses).
  4. I used the empty theme from theme experiments (3 responses). 

This question was intended to help get insight into what resources folks are relying on and what the process to get started looks like. The results showed that more could be done to improve this part of block theme development, whether through amplifying available resources or improving those resources themselves. For the Other Option selection, there were some insightful responses:

I converted an existing theme to a block theme.

All of the above.

Using my Genesis base 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/. and implementing/testing what I have come across over several resources online.

The comment section was particularly lively for this question as it asked those who forked an existing theme to share which theme/what approach they took. All the responses aren’t included here, but here is a representative sampling:

I have used all three. I no longer use empty theme because it is too basic for me. When I fork, I copy one of my earlier themes.

I extended an existing custom theme from our agency.

We started from a classic theme, created a blocks 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 (Nova Blocks) around it, and step-by-step evolve towards a block theme (Rosa2). It’s not a fully block-based theme, but the goal is to get there soon.

I have done most of my experimenting with tt1. I have been referencing and digging into the code many block themes, trying to come up with the best methodology for my custom theme which will need to be production ready at end of month. Blockbase, seedlet-blocks, astra-blocks, genesis block theme.

Across the board in the comments, these four patterns emerged: starting with an existing theme they know well, following tutorials like fullsiteediting.com, forking an existing block theme, or some combination of each option. It feels important to note that TT1 Blocks, the block version of the Twenty Twenty-One default theme, was only mentioned three times. 

Q3: What templates and template parts do you always include in your block-based themes?

On the whole, most folks mentioned the following:

  • Templates: Index, Archive, 404, Page, Search, and Single with mentions of customized templates like a News page. 
  • Template Parts: HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and Footer with LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. and 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. mentioned a few times. 

To get a broader sense of responses, here is a sampling:

​​This is an ecommerce theme using WooCommerce blocks and our custom block library. Templates: Front Page Single Post Archive Search 404 Page Several Post templates and Page templates with sidebars 

Template parts: Header Footer Shop Archive-product (categories, tags, attributes) Loop and a few other templates (e.g., loop with sidebar) depending on the setup

We primarily use template parts for Header and Footer but evolving steadily to all other theme parts. Here is a list of all the templates: https://github.com/pixelgrade/rosa2/tree/main/template-parts

In particular, in that last comment, you can see a wide range of possible template parts mentioned from Pixelgrade, including site branding and meta social (shared with consent). 

Q4: How do you use colors within theme.json?

  1. I add color presets with names like “Blue, Red, Green”, and refer to those directly to use them (13 responses).
  2. I use semantic names for colors like “primary, secondary, foreground, background” (11 responses). 
  3. Other Option (7 responses).

For the other options, the following themes emerged as a combination of feedback and approaches:

  • Using a mixed naming strategy.
  • Using an approach that closely resembles a semantic strategy.

This question resulted in some lively additional comments with a sampling shared below: 

Surely, this is a tricky question as there is no standard cross-theme compatible way of naming colors.

Nowadays I kind of use a mixed naming strategy:

– primary, secondary and tertiary (,…) for base theme color scheme,

– an black, white, gray, dark gray, light gray for standard grayscale colors.

All of these colors populate editor palette too. I do not set other colors if not required by the project as I feel a theme should adhere to some limited color palette (while still providing some options for basic colors of grayscale for possible tinting).

I have been adding the color names. But am keen to the idea of the primary, secondary, etc. The problem for me in doing so has always been that they are too limiting. The designs I work off of in client theming are usually pretty complex and my colors do not always neatly fall into those categories. 

I use semantic names with a Tailwind-like shading system. For example, my “primary” color gets split between different shades from 100 (lightest) to 900 (darkest). So, you get primary-100, primary-200, … primary-900. These can be reduced or added to on a per-project basis. The system is based on the popular Tailwind CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. framework, but it also closely models common systems of theme authors I have surveyed. They tend to have neutral, primary, and/or secondary colors across the average project.

The !important that is added to all theme colors is DRIVING ME CRAZY.

Q5: Beyond colors and typography, what other settings do you use most frequently in theme.json?

A few folks mentioned block-specific settings likely because this question came before the one about block settings. I removed those responses from this section. 

  • Layout (11 mentions).
  • Spacing (9 mentions).
  • None/not applicable (7 mentions). 

For Layout, I counted the following mentions altogether: Layout, contentSize, wideSize. 

For Spacing, I counted the following mentions altogether: Spacing, Margin, Padding.

Mainly custom definitions: filling gaps that aren’t currently supported as presets, and duplicating layout definitions for contentSize and wideSize to expose these values.

Not much to date, but waiting on more to become available so I can use it more.

I think I’ve touched every piece of `{ settings: {} }`, configuring things to my liking. Some common `settings.custom` properties that I set are: – Spacing values, with the most-used being a `spacing.global` value. – Content and wide-layout values because these are not currently exposed as CSS properties via presets. – Google Fonts system. It’s a bit too early to say what I will use the most going forward though. It is still early. The biggest thing that is missing is a global spacing value as a preset. I have a feeling that will be a common use case for most theme authors.

Q6: Have you included per-block settings or styles in your theme.json files?

This question was nearly split, with 16 people responding “Yes” (52%) and 15 responding “No” (48%). Those who said they do include per-block settings or styles were then given an additional question covered in the next section. 

Which blocks do you tend to customize with per block settings or styles in theme.json and why?

Note that this question was only shown if someone indicated that they have included per-block settings or styles in their theme.json files. The responses were fairly split with folks either saying they tend to customize all of them or tending to mention specific blocks. The Button block was heavily mentioned with 11 out of 16 people noting it. The following specific blocks were mentioned:

  • Button (11 mentions)
  • Navigation (3 mentions)
  • Columns (2 mentions)
  • List (2 mentions)
  • Paragraph (2 mentions)
  • Quote (2 mentions)
  • Code (2 mentions)
  • Site Title (2 mentions)
  • Post Author (2 mentions)
  • Post Date (2 mentions)
  • Post Title (2 mentions)
  • Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. (2 mentions)
  • Separator (1 mention)
  • Table (1 mention)
  • Cover (1 mention)
  • Heading (1 mention)
  • Preformatted  (1 mention)
  • Post Terms (1 mention)
  • Query Pagination (1 mention)

Because this was an open-ended question, here is a sampling of longer form responses to help get a sense of what folks shared: 

For per-block settings, I have not done much outside of enabling an option or two if it was disabled by default. However, for per-block (and per-element) styles, I am not sold on the system. Writing CSS in JSON, which is essentially what we are talking about, feels wrong on so many levels. There is the obvious issue that it is limited to merely a few styles that are actually configurable, so anything beyond that requires diving into an actual CSS file anyway. And, that is problematic. Why would I want half my CSS code in a JSON file and the other half elsewhere? From a development standpoint, it makes the codebase harder to maintain. Initially, I started down the path of configuring per-block and element styles from `theme.json`. However, I have since moved my styling back to CSS files. It feels more natural, and I have the added benefit of all the tooling I am accustomed to. Right now, I cannot imagine a scenario where I would move back.  

I do customize pretty much all of them, as the default block styles rarely fit. I also remove every and all default block variations, and a lot of the patterns. Overall I’m not a fan of Core having “opinionated” styles, because that should be the theme’s job.

Individually styling a lot of blocks leads to a lot of customization when done explicitly in raw css – and potentially unnecessary bloat. Most of my customizations are set on the most used core blocks for layouting / synchronizing design aspects. 

I’ve mostly enabled border support for the Button block in the past (not sure if that is enabled by default now). Adding default spacing to various blocks is another thing I’ve done. But, the biggest use case has been settings some default styles for the root/body (colors, typography, and spacing) and for other elements rather than specifically individual blocks. I’m more interested in configuring per-block settings in the long-term than per-block styles though.

Q7: Any other feedback you’d like to provide around what would be helpful to include in Core long term when it comes to theme.json?

This open-ended question resulted in an awesome abundance of feedback, ideas, and more help request style questions! If you’re keen to read more, I’d recommend downloading the full results. For now, here are the major themes that relate to more specific ideas than more general feedback/help requests:

  • Commenting options within theme.json to make it easier to review code. 
  • Import function to pass settings between themes. This is being explored in this open issue on Exporting Block Themes & Styles
  • Add more structure to the overall theme.json file, especially as more options are added.
  • Overall improved options for responsiveness settings, including responsive font sizes. This is being explored in this PR
  • PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. layer for overwriting `theme.json` values
  • Improved documentation for theme.json (showing how to define elements, explaining how theme.json overrides settings in block.json, and how to run internationalisation routines to create language files).
  • Offering a way to generate theme.json using the WordPress editor or a tool (ie an official https://gutenberg-theme.xyz/). 
  • Offering more complexity in the empty theme creation tool. 
  • Explore the ability to have dynamic template parts

Once more, since this is an open ended question, here are some of the responses:

We plan to use theme.json to *disable* all low-level controls like color pickers, padding controls, and even custom font sizes. We want to introduce some system-level controls similar to the Global Styles but couldn’t wait until that part of the project is finished. 

I have to think more – but definitely have thoughts on this. 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. functionality with theme.json in particular is a quite powerful use case. An “import” function, similar to wordpress importer to pass settings from one theme to another or one install to another or main theme to child theme – and consequently an exporter, would be super fantastic.

The theme.json file can get super big and a bit hard to peruse. My current project’s theme.json is 350+ lines long. I’ve seen two solutions already surface to try and address this a bit: Justin Tadlock shared a webpack tool that merges multiple json files in to one, which is probably the most suitable for my needs. I’m just mentioning this as I think it’ll quickly become a common gripe for engineers that use theme.json heavily and especially in a team/agency setting.

I love, love, love using the json file! It made customizing so easy. I’m looking forward to working more with FSE and building more themes.

We need as many tools as possible in theme.json but an ability to use as few of them as we need.

#block-themes, #fse-outreach-program, #fse-outreach-survey, #full-site-editing, #themes

FSE Program Testing Call #9: Handling HigherEd Headers

This is the ninth call for testing as part of the Full Site Editing Outreach Program! For more information about this outreach program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more. 

In comparison with previous calls for testing, this one is even more community driven with the suggestion to do a Higher Education themed call for testing coming from @blake. If you’d like to suggest an idea for a call for testing, know it’s very welcomed and all ideas will be weighed against current project priorities to figure out what makes the most sense to pursue. You can share ideas directly in the 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/. channel or via DM to me (@annezazu). 

Feature Overview

To ground this test in a real-world example, we’re going to go back to school as an administrator and recreate a customized headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. to welcome students, parents, and teachers alike to our hypothetical university. For inspiration, check out the following sample of university sites or just look up some near you! Since this test is focused on building out the header portion, focus in on that aspect and take note of what is done on each site: 

https://www.kyoto-u.ac.jp/en

https://www.ni.ac.rs/en/student-info

https://engineering.asu.edu/

As you can imagine, this test is going to enable us to go deep into the Navigation 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.. As a refresher, it’s a powerful, new block that unlocks the ability to edit a site’s navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site., both in terms of structure and design. To help prepare it for inclusion in a future WordPress release, this test is meant to explore the edges of what this block can do. 

Similar to prior tests, if you choose to get super creative, please share a screenshot in your comment so we can celebrate what you’ve made. For inspiration, here’s my example below with the multiple layers of sub-menu items displayed:

Image of a pretend Gutenberg University header with two different menus, including one with multiple sub-menu layers open.

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

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.

Known issues

While creating this call for testing, a few issues popped up that you, too, might experience as you go through this. Rest assured they have been reported. Here’s a nonexhaustive list of the most important items:

Beginner testing steps

This section is for those who want to follow specific steps to create a header and might not have a lot of time to take the test further. 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Create structure (template part, columns, etc)

  1. Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage. 
  2. Upon opening your homepage, remove the Navigation Block found inside the Header Template Part. This is to help reset the header to add more to it later on. 
  3. Select the parent Columns Block and, using the Block Settings in 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., change the columns from 2 to 3 columns. 
  4. Return to the Columns Block and, using the Block Toolbar settings, make sure it’s set to Full Width.

Build out site branding 

  1. In the first column, add the Site Logo Block and upload/use a site logo. You can use this free logo from logodust.com if you’d like. 
  2. From there, customize the Site Title, Site Tagline, and Site Logo blocks to your liking (change font, change color, change alignment, etc).
  3. In the second column, add a Buttons block to add a warning about COVID by linking to the August COVID Update post. You can do this by searching for the post title. If you haven’t yet imported the necessary demo content, please do so now using this export file (open the link and select the “Download” option). 

Create a simple menu for high level items

  1. In the third column, add a Navigation Block and select the “Start Empty” option.
  2. From there, use the Page Link Block to add in the following pages from the imported content: Contact, Directions, Make a Donation. To do this, just start typing the title of each page. You will likely notice this spacing bug at this point that’s slated to be fixed in Gutenberg 11.3. 
  3. Rename menu item Make a Donation to Donate to make it shorter by simply editing the text of that Page Link Block. 
  4. To finalize the menu, add in a Search Block and, using the sidebar settings, customize it to your liking (picking background color, text colors, width, etc). 
  5. Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option. You can also customize the block styles at this point as you like. 

Create a more complex menu for specifics 

  1. Select the overall Columns Block that contains your three columns (this is where you might find the List View helpful). Using the More Settings menu option, select “Insert After” to add a block after. 
  2. Add another Columns Block and select the 30/70 option. 
  3. From there, select the overall Columns Block again and, using the Block Toolbar settings, make sure it’s set to Full Width.
  4. Add a Navigation Block to the larger 70% width column and select the “Start Empty” option.
  5. From there, use the Page Link Block to add in the following pages from the imported content: About, Admissions, Student Life, Research, and News. To do this, just start typing the title of each page. 
  6. Once the main menu items are in place, select the overall Navigation Block once more and, in the sidebar settings under “Display Settings”, toggle on the Enable responsive menu option. 
  7. From there, add in sub-menu items to About, Admissions, Student Life, and Research. In case you need a hint, here’s a screenshot of the icon for adding sub menu items. 
    1. About should have the following sub-menu items: Distinguished Alumni,  Diversity and Inclusion, Faculty, History, Leadership.
    2. Admissions should have the following sub-menu items: Career Paths, Undergraduate Graduate Admissions, Scholarship & Financial Aid, Tuition. 
    3. Research should have the following sub-menu items: Awards & Honors, Partnerships, Undergraduate Research, Graduate Research. 
    4. Student Life should have the following sub-menu items: Athletics, Tutoring Services, FAQs, Study Abroad Opportunities, Tutoring, Services. 
  8. At this point, add sub menu items under Admissions > Career: Business, Design, Technology. 
  9. Once the sub menu items are added, rearrange and rename various sub-menu items to your liking. You can rearrange using the Block Navigation option when selecting the entire Navigation Block as shown in this GIF
  10. If you want to add more pages that don’t exist yet, you can do so by typing a title that doesn’t currently exist on your site. From there, you’ll see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this and make it HigherEd-themed! 
  11. From there, customize the overall Navigation block as you’d like (change alignment, color, font size, etc). Remember that for sub-menu items you can use the Overlay color settings to set the colors you want. 

Save your work & customize further

  1. Select “Save” to save your changes and view your site on the front end. Note any differences in what you see in the editor vs what you see on the front end. If you have any drafted pages, you’ll want to publish them in order to see them listed in the menu.
  2. Try viewing your site on mobile and checking to see whether the menus appear responsive with a hamburger menu. 
  3. From there, continue to customize as you’d like by changing any alignment, color, font size, removing/renaming/rearranging items, and more. You can also add additional blocks to either Navigation Block including Spacer or Social Icons. 

Advanced testing steps

This section is for those who have the time to take the test further and who are comfortable venturing into the site editor without much guidance. 

The steps for this section are simple: find a university site’s header and try to recreate all or part of it. You’re welcome to continue to use TT1 Blocks or to use the block theme of your choosing (please note if you use a different theme). You can use the universities listed above or you can find your own. When leaving a comment, please share a screenshot of what you were attempting and a screenshot of what you were able to do. It’s very helpful to see what folks would like to be able to do so don’t hesitate to share different designs you see. 

What to notice:

Remember to share a screenshot of what you created if you’re up for it!

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did you find any features missing while creating the header? Please be as specific as possible, especially if you followed the Advanced steps. 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in the Site Editor matched what you saw on your site?
  • How did you find the Navigation block worked when viewed on smaller screen sizes? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?
  • If you’d like, try running your test site through a tool like https://wave.webaim.org or https://www.accessify.com/ to see how it performs. 

Leave Feedback by September 1, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you 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 do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve.

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

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (30 July)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance: @bobbingwide @poena @jcasabona @richtabor @desrosj @paulbigai

Video Recording:

Topics Covered:

  • Happy birthday to @bobbingwide! Thanks for hanging with us for part of your special day.
  • Before recording, we talked a bit about various courses people are working on/have worked on related to FSE and the difficulty in keeping things up to date while so much is changing.
  • We started the call chatting about a TT1 blocks and global styles bug that Joe found. He’ll pass along the details. With the launch of 5.8, it’s been harder it seems to replicate problems and their sources.
  • We talked about various theme related topics including how to handle theme switches, different ways to set color options (particularly for patterns), a creative solution for having responsive font sizes (and later a PR exploring next steps to make this happen), and what else still requires custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..
  • Rich shared that he just converted his site’s theme to 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 and we briefly went over his recent post on block templates. He also shared how he made older color slugs still work with new sequential ones while working with Ana on a recent block theme.
  • Once more, we talked through having a dedicated place for global settings/styles.
  • We went through the recent PRs on flex layout which led to a discussion around general confusion in setting layouts, including with template parts.
  • We checked out the site editor mosaic view designs and very recent PR to implement some of the functionality.
  • We discussed the difference between patterns, templates, template parts, and reusable blocks, including going over a discussion about having starter page templates/patterns.
  • Herb shared some struggles with a combination of the new widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. screen and configuring multiple block.jsons. Rich shared this plugin that has multiple as an example to review.
  • Carolina gave a final plug after the recording stopped for anyone who might have any ideas about how best to solve this reported dark mode problem.

If you’re a theme author who has worked 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. in some capacity, please fill out this theme survey.

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Help shape the future of theme design

With WordPress 5.8 came the official introduction of theme.json to the project allowing you to configure both existing editor settings like enabling custom colors and adopt new ones as they are released. Since this new mechanism is an early step towards a comprehensive style system for the future of WordPress, it’s important to hear from everyone who is currently using 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. to learn more about how folks are using this tool and what might make sense to include in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. going forward. 

If you’re a theme author who has used theme.json or is interested in doing so, please fill out this survey by August 13th to help shape its future.

If you haven’t yet used theme.json, this survey won’t be applicable to you. Thanks in advance for taking the time to share your thoughts! The results will be shared in a recap post.

If you’re curious about theme.json and haven’t had a chance to explore just yet, check out this previous call for testing offering different difficulty levels of flows and the latest WordPress News post on Configuring Theme Design with theme.json.

#fse-outreach-program, #fse-outreach-survey, #themes

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (14 July)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. It ended up just being me and @bobbingwide so I decided to not record and instead have a free flowing chat with Herb that was less structured and more in line with our interests. We chatted for just over an hour!

We mainly chatted about 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., what’s coming to 5.8, a few individual blocks (Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop., Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., etc), responsive controls, and various explorations Herb has done including building a few 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. plugins. Of those, we went through the following links that I recommend spending time reviewing too:

Next Steps

I followed up on two issues that we found while chatting: The reset to default option being too close to X for global styles UI and a bug with an empty template name and trying to rename it.

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Hallway Hangout: Discussion on theme.json (7 July)

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined the conversation!

Attendance: 10 Attendees in total

You can watch the recording of the call here:

Notable Topics Covered:

  • Difficulty with knowing the initial values of some things that are defined outside 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.
  • Challenges in making responsive designs work well across unlimited resolutions, both large and small.
  • Need for a well documented and complete schema of settings available as well as the default initial values.

The call for testing will remain open for feedback until July 14th. Please feel free to check the test here.

#fse-hallway-hangout, #fse-outreach-program, #full-site-editing

Help Test WordPress 5.8’s FSE Features

With WordPress 5.8 slated to ship on July 20th, this post seeks to consolidate ways for those in the FSE Outreach Program (anyone can join!) to help test specific features related to the overall full site editing project that will be included in this release. This is meant to bolster, not replace, overall 5.8 testing efforts. 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 explicitly not mentioned here as there’s currently a dedicated testing post for that feature with feedback open until July 14th. 

For more information about the outreach program, please review this FAQ for helpful details and check out the latest schedule. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more. 

Important note: Anything marked as [Technical] is best for those comfortable with more advanced testing steps. 

Testing environment

Please only test on a development siteDevelopment Site You can keep a copy of your live site in a separate environment. Maintaining a development site is a good practice that can let you make any changes and test them without affecting the live/production environment. and not on a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site

Once a development site is set up, please install and activate the WordPress Beta Tester Plugin before setting it to: 

  • Update channel to “Bleeding edge”
  • Stream options to “BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process./RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. only”

If you need more specific steps, here are more detailed instructions you can follow

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. Widgets Editor

The block widgets editor allows you to use blocks in widgets areas and control them further in the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. with live preview, scheduling, etc. The following items are considered a high priority to test:

  • Migrating classic widgets to this new screen. 
  • Switching between themes.
  • Editing blocks in widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas in the Customizer. 
  • Confirming opting in and out works properly. You can review each mechanism under “Opting out of the block-based widgets editor” in this post

For robust testing steps for each of these items, please review this specific call for testing from earlier in the release process. For more information about this new feature, check out this Dev note covering all of the details

Template Editing Mode & Theme Blocks

Template editing mode allows you to edit your content’s template with blocks, including some new theme blocks like the Site Title block or Page List block. As a reminder, template editing mode is opt in for Classic Themes and opt out for Block Themes. This means that if you want to test this, you’ll need to use a block theme along with both the Gutenberg plugin and the WordPress Beta Tester Plugin

The following items are a high priority to test:

  • [Technical] Opting into and out of template editing mode. More information about how to do this can be found under “Theme Support” in this post. Bonus if you test with different themes. 
  • Customizing templates, including creating new ones, after either using a theme that has opted in or using a block theme with 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/
  • Exploring each new Theme Block listed in this post to build out a more robust template. 

For robust testing steps around using and creating templates, please follow these previous calls for testing: create a custom portfolio page and create custom landing pages

Note: If you use a block theme to test this, you will need to install the Gutenberg plugin alongside it in order for everything to work with WordPress 5.8. 

Duotone

Duotone is a feature that allows you to add colors to your images and enhance your content. It works best with high contrast images, so keep that in mind as you test the following priority items: 

  • [Technical] Adding duotone support to a registered block using the still experimental block supports described here
  • Using the feature in the Image and Cover Block. Remember that you can use this with videos in the cover block too and that you can set your own custom colors!

For more information about this feature, check out the WordPress news post that covers it in depth

Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. Block

The Query Loop Block (previously called the Query Block) is a powerful new block that unlocks the ability to easily show off posts from a specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., allowing you to do things like quickly creating a portfolio or a favorite recipe page. Think of it as a more complex and powerful Latest Posts Block! Currently, this new block offers multiple ways for displaying lists of posts and comes with new block patterns that take advantage of its flexibility and creative possibilities. 

To help test this, explore the patterns built into the block, try changing the default query in 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. settings, placing it inside a columns block, and more. Keep in mind that to create a better user experience, the content within the Query Loop isn’t able to be edited but can be customized (i.e., Post Title text can’t be changed but you can change the color of the Post Title Block). 

For robust testing steps around using the query block, please follow this previous call for testing that was focused on the Query Loop block.

Where to report feedback

If you find any issues, it’s best to share them on the alpha/beta forums, or Trac if you are more technically savvy and comfortable. Please share feedback before the release on July 20, 2021.

#fse-outreach-program

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. 

  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:

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. 

Hope to see you there. 

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

FSE Program Polished Portfolios Summary

This post is a summary of the seventh call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. 

On a more personal note, it’s so neat to see the various ways people engaged and to really feel the power of the WordPress community in these calls for testing — WordCamp Japan used the seventh call for group testing this week, a meetup in Philadelphia used it as part of their event (shoutout to @accessamy and @itsjusteileen), the call for testing was translated into Italian and Japanese (shout out to @piermario and the folks from WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Japan) and three folks did write ups encouraging others to test alongside their feedback (@greenshady, @bgturner, and @bobbingwide). Plus, I had some of my coworkers go through the test for good measure! I am super stoked to see a diverse set of ways folks are exploring this program and deeply appreciate you all making it happen.

Teamwork makes the dream work. Anything I can do to make participation easier and more fun, let me know!

How far can one go?

It’s hard to compete with @greenshady’s awesome explorations at this point! Check it out below: 

Image showing a portfolio page with a banner at the top, a list of the latest work in the middle, and customer reviews at the bottom.

High Level Feedback

Here’s what a few folks had to say about the overall experience that can help frame the following detail oriented feedback. Since this was a more open ended test compared to the prior one, it was interesting to hear about the ways in which people explored things on their own and the resulting joys/frustrations that caused. 

Compared to the earlier tests, the overall experience is way more stable and polished. My biggest issue with 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/ and FSE is still the same: lack of visual references while designing, unless I do some hovering dance on the blocks and – this time – I didn’t have a clear picture of how exactly changing some elements (site title, navigation) on the portfolio template would affect other pages, so I got a little lost between pages.

@piermario in this comment.

Generally I love the query 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. though. Really cool that you can do that now without coding! I am looking forward to using it in projects.

@michaelsndr in this comment.

I had a lot of fun with this. And frustration. Some more fun. And…you guessed it…some more frustration….I enjoyed the process — yes, I revel in both the fun and frustration. Aside from everything that I think is broken, the overall system is pretty dang sweet. There are far more things that the development team has nailed down than there are that feel janky.

@greenshady in this post

Repeated Feedback: Switching between editing modes (template vs page/post) & various block improvements

This section is dedicated to repeated items from previous calls for testing. Once more, despite the three ways to visually distinguish the editing modes, there remains confusion around when one is in each mode. The deeper into these calls for testing we go, the more it becomes clear how valuable it will be to do things like view a template while editing content and have some good friction in place while interacting with post blocks in template editing mode.

Across a few blocks, some repeat items came up that are worth mentioning considering they were each mentioned at least two times:

Today I got lost quite often. I didn’t always know if I was editing the Portfolio Template or the Portfolio page.

@piermario in this comment.

However, once I was in the Template Editor it wasn’t clear when I was editing the template or the content itself. When I used the block navigator – I could see the post content block (which made sense) but only because I was already looking.

Automattic employee feedback. 

Some general usability feedback of the column block: I’d love a way to make the vertical margins disappear so that full-width sections that have background colors don’t show any space between them.

@bjturner in this post.

Post Title Block – no way to style text (bold, italics etc), and no way to have a totally custom colour. Do these color options come from the theme itself? 

Automattic employee feedback. 

As a user, template editing is a great tool when you have a good visual understanding of what your post or page content will look like in the context of the full site. The issue is, when in the post editor I don’t know that, unless I am checking “Preview” as I create/edit my content. Has any thought been given to how we could improve this experience so users are more aware, as they’re editing, of how their content will be displayed on the site (depending on the template used)?

Automattic employee feedback. 

Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. Block & Related Improvements

Since the Query Loop Block featured heavily in this call for testing, it’s no surprise it was also an area of both great praise and criticism. On the whole, there was loads of excitement around this powerful block with folks keen to have access to it with WordPress 5.8. Outside of that though, the following items were raised for the Query Block itself and some of the related blocks used within it: 

Tied to the above issues, there was repeated frustration around deeper customization and limits of the nested blocks within the Query Loop, especially if someone wanted to go well beyond what the current patterns offer. It’s also important to note that this test was done without this PR merged for the Query Loop block, which makes the Post Blocks uneditable within the Query Loop block itself ahead of WordPress 5.8. 

The next section of template testing consisted of adding a Query pattern and customizing it. I have a love/hate relationship with queries in Gutenberg right now. The Query block itself works well. It has a solid balance between advanced usage and simplicity for the most part. I am amazed at what the development team has done over months upon months of iteration.The downfall is that the Query block is merely a wrapper. It is only as good as its weakest sub-block.

@greenshady in this post

There’s a bit of a confusion point in the Query Block with Items per Page. Despite having multiple published posts only one appeared by default. I found the controls in the Block Toolbar to increase, but also found it a bit cumbersome to toggle between the Block Toolbar and Block 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. to refine the underlying query.

@dryanpress in this comment

Query Block: Block outputs nothing on the frontend when there are no posts to show. Generally, it requires to show something that tells visitors that there are no posts or some custom message.

@sagarnasit  in this comment

General Usability Enhancements

As people explored template editing mode, the following items came up as areas that would make the experience more intuitive going forward. Many of these were repeat items but it felt important to call these out separately, in particular the quotes describing the current experience. While some of these areas have design explorations in place for potential inclusion in the future, this section captures the current pain points: 

It appears that I didn’t save the template since it’s showing a 404, even though the title says “portfolio.” I think what confused me was the “Publish” button in the upper right corner. Coming from a WP background I think I understand that “Publish” meant to publish the page template I was editing, but on initial use, I was hesitant to push the button because my context was the original page that I had created, not the page template I was editing.  

@bjturner in this post.

While in Template Editing Mode, I clicked the Preview button, clicked Preview in new tab and didn’t see the addition of the navigation block or other template changes. If this could work that’d be great, but if these won’t be available to preview outside Gutenberg due to how Templates are saved and stored, that preview dropdown item probably shouldn’t be available inside Template Editing Mode.

@dryanpress in this comment

If I create a new template, the new template is not available in the drop-down selector until I refresh.

Automattic employee feedback. 

When saving the template change, if I uncheck all the items that appear, the Save button gets defunct. If we are allowed to uncheck one of those, I think we should be allowed to uncheck all items too.

Automattic employee feedback. 

The Update option isn’t available once I’ve switched alignments on the block. I needed to alter the post title to trigger the Update option. 

Automattic employee feedback. 

When you’re creating a new template, for each existing template part that you insert, you have to remember to set the same attributes for the template part as used in other templates. Attributes that will need setting include the Width and Colours.

@bobbingwide in this comment

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

Upcoming FSE Outreach Program Schedule (June & July)

Similar to my last post, I wanted to share the upcoming schedule for the FSE Outreach Program for June and July in order to ideally help people participate more in what’s to come and to know what to expect. As always, if you have any questions, feel free to ask here or to DM me 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/. (@annezazu).

June

  • Call for testing #7 runs through June 16th with a summary post to follow within 1 week.
  • A developer centric call for testing will be shared by June 23rd to encourage folks to explore using 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 give feedback.

July

  • There will be a pause in formal calls for testing during July in order to allow me to focus on documentation for 5.8 (both developer and end user), do more hallway hangouts, etc.
  • To help support 5.8 testing efforts, I will share a post detailing how best to help with 5.8 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. testing as it relates to FSE-related items and where to give feedback. This will buttress, not replace, 5.8 testing efforts.

Outside of the work above, there will continue to be live streams, hallway hangouts, important posts flagged, etc.

Overall Timeline

DateCfT #7Theme.json CfT5.8 RC CfT
June 9
June 16End
June 23Start
June 30Start
July 7
July 14End
July 21End

How to help:

This program has many pieces to it and there are tons of ways to get involved. At a high level, here are ways to help:

  • Respond to the calls for testing with feedback.
  • Amplify calls for testing by sharing in your network.
  • Translate the calls for testing for your local community.
  • Explore testing FSE outside of the calls for testing and share any feedback in GitHub.
  • Help me triage feedback that come in from the calls for testing and file any necessary issues.
  • Help me write the calls for testing and the summary posts.
  • Help with 5.8 related documentation.

For any of the items that involve working with me directly, please comment on this post or message me directly (@annezazu) so I know you’re interested and we can talk through what helping out might mean. To those of you already doing this work, thank you so much! It all truly helps.

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