FSE Program Testing Call #10: Pattern Party

This is the tenth 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. 

As a reminder, if you’d like to suggest an idea for a call for testing, 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

Because Full Site Editing is a collection of features that allows more items to be easily edited without knowing code, new blocks needed to be created to cover more parts of your site. These blocks are generally called “Theme Blocks” as they match functionality that used to only live in themes. While a number of theme blocks were introduced in WordPress 5.8, there’s always more work to be done, including shipping even more theme blocks in future releases! 

This test is focused on pushing these lovely Theme Blocks to their limits to better determine what to prioritize and what features might remain to be documented. To make the experience feel a bit more fun and practical, we’re going to approach this test from the vantage point of creating patterns for blogs using some of these blocks. If you really like what you make, remember you could even register them on your site 🙂 

As a refresher, here’s a rundown of all of the theme blocks ready for testing with a note around which ones are included in WordPress 5.8 in case you’re inspired to use them on your site now:

  • Site Logo: allows you to display and edit the site logo [shipped in 5.8].
  • Site Tagline: allows you to display and edit your Site Tagline [shipped in 5.8]. 
  • Site Title: allows you to display and edit your Site Title [shipped in 5.8]. 
  • 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.: allows you to display posts and pages in various formats [shipped in 5.8]. 
  • Post Title: displays the Post Title [shipped in 5.8].
  • Post Content: displays the contents of your post [shipped in 5.8]
  • Post Date: displays the post date [shipped in 5.8]
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.: displays the post excerpt [shipped in 5.8].
  • Post 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.: allows you to display and edit the featured image of your post [shipped in 5.8]
  • Post Categories: displays the categories of a post [shipped in 5.8]
  • Post Tags: displays the tags for a post [shipped in 5.8].
  • Login/out: displays login and out links [shipped in 5.8].
  • Page List: displays a list of all pages on your site [shipped in 5.8]
  • Template Part: allows you to display and edit various global regions of your site (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., footer, etc). 
  • Post Comment: displays an individual comment.
  • Post Comment Author: displays author for a comment. 
  • Post Comment Content: displays content of a comment.
  • Post Comment Date: displays comment date. 
  • Post Comments: displays all comments. 
  • Post Comments Count: displays comment count. 
  • Post Comments Form: displays comment form. 
  • Archive Title: Displays archive title. 
  • Term Description: Displays the description of categories, tags and custom taxonomies when viewing an archive.

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.

Testing steps

Setup Instructions:

  1. Have a test site using the latest version of WordPress. It’s important this is not a production/live site. 
  2. Install and activate the 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 from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 11.6.
  3. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  4. Create at least eight posts with two different categories and featured images of your choosing. Alternatively, you can download and import the demo Gutenberg content created especially for this test (open the link and select “Download”) via the WordPress importer under Tools >  Import. You can also follow this lesson for how to use demo content.
  5. Go to the website’s admin.
  6. You should now see a navigation item titled “Site Editor (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.).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. 

General Instructions:

  1. Head to Pages > Add New and create a new page. Title it whatever you’d like!
  2. Add the Query Loop 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. and select whatever pattern you want to build upon. You can also add in a container block, like a Columns or Group block, and add in the Query Loop as you’d like.
  3. From there, make the pattern your own using as many Theme blocks listed above as you can and customizing the various settings. For example, you could create a comment heavy pattern utilizing the various comment blocks or have a particularly image focused one thanks to new improvements to the Featured Image block. Try to be as unique as possible and don’t be constrained by adding the blocks only within the Query Loop.

If you’re up for the challenge and want to take this test further, try to create your own pattern from scratch, make multiple patterns, or recreate some with your own twist from Theme designers at Automattic shown below:

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 your custom blog pattern? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • What would have made this experience easier? 
  • Did you find that what you created in the editor matched what you saw on your site?
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by October 13th, 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. If you 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 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.

Thank you to @priethor @sparklingrobots and @welcher for reviewing this post and giving me the confidence to ship it.

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

Hallway Hangout: Discussion on Full Site Editing Issues/PRs/Designs (10 September)

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: @poena @richtabor @karmatosed @paulbigai

Video Recording:

Topics Covered:

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

Hallway Hangout: on adoption pathways for full site editing

Date2021-09-16 16:00 UTC

Format: Zoom (recorded). A link will be shared in the #fse-outreach-experiment channel before the meeting time. Please join that channel if you’d like to participate!

Length: 45 – 60mins. This will not run longer than an hour.

Topic: This session will focus on adoption pathways with full site editing.

Facilitator(s): @mkaz @get_dave @annezazu

Goal: To have a broader discussion about adoption pathways, what’s working, what successes folks have had, what blockers people are running into, and what might help more folks participate. Beyond just the benefits of learning from each other, this information will ideally be used to help influence future resources and to give insights to the teams working on these items.

Intended Audience: Anyone who has adopted or is interested in adopting site editing related features (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., template editor, theme blocks, navigation editor, etc).

Agenda

This conversation is meant to casual, collaborative, and open ended rather than prescriptive about how one should approach adoption. With that in mind, we’ll start the session asking folks who are comfortable doing so to share what they’ve tried and how it’s gone. Once everyone who wants to go has done so, we’ll talk about successes, blockers, and what resources folks have used (along with what resources folks would like to see). We’ll see where the conversation takes us from there!

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

FSE Program Exploration: Help with the future of Block Theme Switching

With the advent of 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 in the WordPress ecosystem, new possibilities are on the horizon, from easier theme development for developers and designers to easier site creation for users. Rather than just examining the value of block themes in isolation though, it’s important to expand to think about what can be done across different block themes. For example, imagine a world where one could seamlessly take product review patterns from one theme, styling from another, and product display templates from an eCommerce focused theme to create a store. Or imagine being able to switch themes while retaining your favorite palette of colors and typography. Regardless, it’s imperative that the experience is reliable, intuitive, and expansive pushing beyond what’s been possible in the past. 

As a result, the focus of this exploration is on thinking from this longer term, “wishful thinking” perspective first by guiding you through a very basic theme switching process and then by asking each of you to creatively think about what you’d like to see happen. Since this is not quite a call for testing due to the lack of flows, focus less on finding bugs (although they are still welcomed) and more on thinking through things you wish would happen or would like to occur. The aim is to gather useful insights that will help inform how we design this experience. 

Note: this is intentionally just focusing on block theme switching only for now rather than, for example, switching from classic to block. 

Explore what’s currently possible 

The steps below are meant to be high level with the aim to have you set up initial block theme related items that you might want to keep upon switching themes. It’s not required to run through these steps for the sake of this test since many of the flows are not yet built. 

If you don’t have time to create quick content, feel free to import this demo content (open the link and select “Download) created especially for this test via the WordPress importer under Tools >  Import. You can also follow this lesson for how to use demo content.

  1. Set up a test site. Do not use 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
  2. Install and activate the latest version of Gutenberg
  3. Install and activate a block theme from the options listed in the theme directory
  4. Create a custom template under Appearance > Templates > Add New. 
  5. Create a custom template part under Appearance > Template Parts > Add New. 
  6. Open the Site Editor and, using the Global Styles 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., select a few custom block styles and overall default styles. Save all changes. 
  7. Head to Appearance > Themes and switch themes. 
  8. Review the Site Editor, Templates, and Template parts. 

Bonus: Try importing and exporting content from a current site you have to a test site to make the test feel more real and applicable, even if the site is not using a block theme. From there, switch to any theme, block or not. This is purely to get you in the headspace of thinking more about what you’d like to retain even if this is focused specifically on block themes. 

Describe what you’d like to see

Comment below after reflecting on the following questions. Remember to share what you’d like to see ideally rather than focusing on what’s currently in place. Answer one, answer all, answer none! These are merely to get you thinking in the right framework rather than boxes to check: 

  • What would you want to be able to do when switching themes?
  • What parts of a block theme would you expect to be able to keep when switching themes? 
  • What sort of confirmation prompts would you want to see? 
  • Share a time when you switched themes and something unexpected happened.
  • When you switch themes on your site, can you share your routine?
  • If you wanted to switch to a new theme today, where do you go or which places would you expect to be able to do this?
  • What are some reasons you have had for wanting to switch to a new theme?
  • Anything else? Think big!

Please share feedback by September 29th, 2021

As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to @annezazu (that’s me!). Keep in mind that not everything shared here will be implemented by the nature of this exploration but know that your ideas will ultimately help shape what is possible going forward. 

Thank you to @poena @kellychoffman @priethor @daisyo for reviewing!

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

FSE Program Handling HigherEd Headers Summary

This post is a summary of the ninth call for testing for the experimental FSE outreach program. During this call for testing, we surpassed 400 members in the channel! I love an excuse to celebrate so please pat yourselves on the back, treat yourself to a favorite dessert, listen to your favorite song, etc to celebrate this neat milestone of community contributions. While we reached this milestone, I do want to note that contributions were lower for this last round than usual so, if you’re sitting back thinking that others have it covered, please instead jump into the next round if you can! 

Special thanks to both @mimitips for the Japanese translation and @piermario for the Italian translation

Shout out to @utz119 @wazeter @alanjacobmathew as first time contributors to a call for testing. Get excited – you now have a testing contributor badge on your WordPress profile!

How far can one go?

Check out @greenshady’s approach (keep in mind he self admittedly “cheated” to get the final look): 

Image showing a pretend Gutenberg University with blue and orange colors and two menus of varying complexities.

@richtabor took on trying to replicate UNG’s header with the following outcome:

Image showing a replicated UNG header with a blue header and a small menu.

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. Across all of the feedback, the desire for a lighter navigation experience as well as more advanced tools around spacing, bulk adding items, etc. stood out. 

I didn’t run into too many issues getting the 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 display decently, but I also know a bunch of tricks to get the editor to do what I need it to do. The end result is ok — but the experience getting there needs a lot of refining yet.

– @richtabor in this comment

Creating the menu was quite a hassle. Too many clicks especially when creating submenu.

– @alanjacobmathew in this comment.

This was an interesting challenge…I didn’t make anything “beautiful,” however I did find a couple of things while I was trying to do most of this via keyboard-only navigation.

– @bjturner in this comment.

Using 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. still seems the most troublesome area of site editing. I know how much work the development team has put behind the user experience for this feature but cannot help but wonder if there is a point where users can opt into managing its content (the links) via the traditional Nav Menus screen in WordPress. The site editor works fine for the design aspect, but I have yet to feel comfortable using it to manage links.

– @greenshady in this WPTavern post

After delving deeply into the ins and outs of the navbar – the primary issues all revolve around responsiveness. The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. issue came down to the navigation bar operating as a separate element (which makes sense for a block) than the rest of what you’d normally consider a complete header. This means that in order to properly size and place the navbar, you have to use a container block like group or columns – which is where alignment starts to get into trouble.

– @wazeter in this comment.

Confirmed bugs

Thanks to clear patterns in feedback due to a larger focus on the navigation block, this is a dedication section to just bugs that were found or confirmed in this test. Those that have been resolved thanks to a release mid-test have been noted below. 

General Usability Feedback

At the core of this test, the feedback centered around a combination of small, specific issues and larger problems with the overall settings of different blocks. This made the experience feel less refined and intuitive leading to general confusion when trying to accomplish sometimes simple things, like changing the width of the Search block. In some cases, work is underway actively to address these concerns, as is the case with adding a gap block feature to make it easier to manage the spacing between navigation block items. Some were repeat items and are noted as such below. 

I am not able to see any visual difference between Wide width or Full width. Because my browser screen is not wide enough to see the difference. When I widen the browser window then I am able to see the difference. Should the Wide width alignment be response in relation to the browser size window? So the user will be able to see a visual difference in the backend when testing Wide or Full width.

– @paaljoachim in this comment.

I wish there was some way to reduce the default spacing between blocks. For example I want to reduce the space above the 2nd Nav block.

– @alanjacobmathew in this comment.

To add an actual link, users must first add the Page Link block. Then, they can search for a specific page. This two-step process gets me every time.

– @greenshady in this WPTavern post

For example, adding search to the navbar, and then wanting the search bar to display differently (larger, smaller) with a potentially different background doesn’t work. Individual menu items can’t easily change the background color of a link (e.g. an active color) to align properly with the container element and there are no hover effects (extremely common use cases) without diving into CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. code.

– @wazeter in this comment.

Not quite a bug, but it doesn’t feel polished when the Block hover menu extends past the viewport.

– @bjturner in this comment.

When the first block is extremely near to the editor header, some parts of the block content gets hidden, while the viewport adjusts automatically on both left and right side, the top part remains fixed.

– @alanjacobmathew in this comment.

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) feedback

Thanks to some folks focusing in on what could be done with this test using just keyboard controls, there’s a lovely list of accessibility focused items: 

Trying to do keyboard only navigation for working with the navigation block. It’s pretty good, but there’s so many tabs!

– @bjturner in this comment.

Feature requests

While the experience was generally easy enough to follow, a few clear feature requests were raised to streamline the process further:

As mentioned above, an overview issue was shared during this test that explores a more scaled down version of the navigation block to make it easier for simple menus to be created. This will better cover the more common use case for most sites. Since this test explored both a simpler and more complex menu structure, the feature requests reflect each experience. 

It just feels too cumbersome to add a custom link today.

– @paaljoachim in this comment.

Creating the menu was quite a hassle. Too many clicks especially when creating submenu.  

– @alanjacobmathew in this comment.

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

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

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