So you want to talk about FSE? Part III

Inspired by two prior posts I wrote, So you want to talk about Full Site Editing? and So you want to talk about FSE? 5.9 Edition, I wanted to offer a non-release specific update as I have found myself sharing the same resources repeatedly. As before, I recommend checking out the prior posts as I try as much as possible to only share new information in each so the posts can build upon each other.

As always, I would love contributions from the wider community to build this out into an even more comprehensive resource! Like last time, see this post as a place to get inspiration from and to pull from rather than to somehow cover entirely in a presentation. 

Important note:

There’s a broader discussion around Giving FSE a More User Friendly Name that has yet to be decided upon but is worth keeping in mind for anyone preparing efforts around FSE features. My advice right now is to use more granular terms and be as specific as possible: Site Editor, Block Themes, Styles, Theme Blocks, gradual adoption pathways, etc.

Recommendation:

• Focus on how features work together and what’s possible when they do (this is a repeat from the last version of this post that felt worth saying once more).
• Embrace the spectrum of experiences full site editing features allow and the ways in which curation can be done to lock the same interfaces down.
• Dive into common workflows people might have from creating a new header and applying it to a few templates to mastering the query loop block with the various design tool options to place your content exactly as you want. This makes the experience more understandable by having a practical goal to focus on exploring the various tools plus it gives you the chance to show off the details that make FSE magical.
• Spend time discussing the expanding design tools from dimension controls to duotone. There’s a big effort underway to unlock even more controls and have more consistency between them.
• Some UX concerns remain including how to tell when you’re making global vs local changes, when to use a template part vs a pattern vs a template part, etc. To make a talk really high impact, I’d lean into these missing UX pieces for now until they are addressed and tackling them directly.
• Show how features have changed over time. For example, the query loop block has evolved drastically along with the number of block templates one can customize.

If you can, the most compelling things I’ve seen focus on practical, lived experience. Did you convert a site to use a block theme? Talk about how you approached it. Did you build a block version of a classic theme you previously developed? Share what you learned along the way. Did you launch your first client site using a block theme and full site editing features? Provide your thought process for how you went about deciding why it made sense to adopt for that specific project, how you onboarded the client, etc.

(Newer) Resources:

• Curating the editor experience for more insight into what options there are.
• Propagating updates to block types to better understand how best to handle content updates.
• Fluid Typography Testing and Overview to prepare for this new feature for 6.1.
• Tools and Resources for themes, including the Create Block Theme plugin that makes getting started with block theming (including child themes) even easier. Here’s a helpful WP Tavern write up on it. There are also two additional tools to note for block themes that aren’t mentioned there: ThemeGenApp by David Gwyer and Block Theme Generator by Jamie Marsland.
• For inspiration for theme designs, check out the Open Sourcing Theme Designs post highlighting how the WordPress figma now provides access to the designs behind a theme. If you’re a block themer, remember that you can share your own design too!
• If you’re a block theme author and you want to be more involved in GitHub conversations/PRs/etc, you can request to join the Block Themers group.  It would be rad to have a robust and engaged group of folks in there to lean on!
• Read the latest on the Universal Theme world from Blockbase (themes that work with both the Customizer and Site Editor).
• Explore many of the new Learn WordPress courses, including a coming soon block theme building course.

Patterns of critical feedback:

If you want more insights, here’s the last high level feedback recap for the FSE Outreach Program from May 2022 and here’s the link where you can see all summary posts from the calls for testing. Here’s what is top of mind for me as I wrote this though in case it helps give ideas for creating a really compelling talk that addresses key topics on people’s minds:

• Desire for more responsive controls.
• Difficulty using and customizing the navigation block.
• Desire for more refinement with common tools from better block transforms organization to ensuring consistency in design tools to improved theme block placeholders.
• Lack of clarity between global vs local elements, causing folks to do things adding page content to their template or removing the post content blocks from their templates effectively breaking the experience.
• Discussion and blockers around removing the beta label with some block theme authors frustrated by the label being there with other folks concerned about what needs to be done in order to not consider the experience beta.
• Difficulties around managing layouts. Here’s a recent article that touches on the perspective for theme authors but the same general area is a pain point for users alike: Layouts and Wide Alignments in WordPress: Then, Now, and Upcoming Changes
• Ease the experience of switching to a block theme from being able to preview a block theme to ensuring there’s a pathway for widgets to be imported. Of note, some improvements for preserving the navigation block are planned for 6.1.
• Confusion around the various editors (post, template, site) and the connections points between them (or, more accurately, the lack thereof).
• Extending the Query Loop block, particularly for plugin authors and agencies.
• Desire for more gradual adoption pathways (ex: consider exposing the Styles UI for classic themes using theme.json) rather than needing to adopt an entirely new system.
• More options for governance with a special shout out to the add block nesting governance for theme.json work.

Demo ideas:

Depending on who you are and who the audience, the following ideas are worth considering. I nearly combined this section with the above but it felt wise to separate out what might be more visually and/or technically compelling. Everywhere I’ve noted “Coming to 6.1” means you’ll need to use the Gutenberg plugin in order to access the features or wait until 6.1 is out in the world (Nov 1st).

• How to use block based “template parts” without using block based “templates”. Bonus if you incorporate some additional locking to the template part! Coming to 6.1.
• How to add a block template from a plugin (inspiration from WooCommerce).
• Adopting the ability for any theme (including classic) ton enable appearance tools previously only available via theme.json. Coming to 6.1.
• Switching to a block theme (props to Carolina for a great, current guide on the complexities).
• Dig into the expanded template options, how to make the most of customization, etc. Additional information can be found in this recent post. Coming to 6.1.
• Build a basic theme in the editor or using some block theme creation tools.
• Show off various curation pathways and practical ways to use them (some examples can be found in this prior post).
• Use Twenty Twenty Three’s style variation powered approach as a great use case for exploring the power of block themes and what is now possible. Bonus points: Explore creating a style variation.
• Explore the 130 block themes (as of writing this) and dissect each to show how they are differentiating themselves. Looking through WP Tavern reviews might make this easier!
• Examine the ability to content lock patterns so that you can lock patterns as a way to better preserve the design as intended. Coming to 6.1.
• Add a zoomed out view to the Site Editor, allowing you to enter a mode where the focus is more on site building and composing patterns, rather than editing granular blocks. Coming to 6.1.

What’s coming to 6.1?

At a high level, here a quick look at just some of what’s to come. Please keep in mind that there’s still time yet as of writing this for more to make it and for items to possibly be removed, depending on any deal breaking issues found:

• New default theme powered by 10 unique style variations.
• More consistency and control with more design tools in more blocks with the latest update here.
• Expanded and refined template experience (Refining the template experience & Deeper customization with more template options.)
• Fluid Typography allowing for more responsiveness.
• More intuitive document settings experience.
• Header & Footer patterns for all themes.
• More robust Quote (allows nested blocks) and List blocks (uses inner blocks).
• Spacing presets for consistent design and more control (padding, margin, block gap).
• New modal interfaces and Preferences improvements, including preferences being saved in the database for a more continuous experience regardless of how you’re logging in (aka no more needing to repeatedly dismiss the onboarding modal for the block editor).
• Opt into Appearance tools to make any theme more powerful by adding support for border styles, link color, spacing (blockGap, margin, padding), and line height.
• New iteration on Style system with the latest update for the Styles Engine and some new abilities, like the following: the ability to style elements like buttons/citations/links globally, the ability to control hover/active/focus states for links using theme.json (not available to control in the UI yet), the ability to customize outline support for blocks and elements, and more. 
• Add starter patterns to any post type to make it easier for folks to get started building content.
• Evolution of layout options, including a new setting under Global Styles > Layout that gives users the option to override content dimensions defined by a theme, giving the users better control over the full-width content.
• Improved placeholders for a variety of blocks including the Post Content, Post Excerpt, Post Comments, and Post Comments Form, and various image blocks.
• Continued Accessibility Improvements that resolve focus loss problems when installing blocks from the directory, creating pages from the link control search results, navigating the guide component, closing the welcome dialogue without any content in the post editor, and after choosing a menu in the navigation block.
• Apply locking settings to all inner blocks in one click.
• Improvements to the block theme discovery experience, including showing pattern previews in the theme directory for block themes and adding a block themes filter to the Themes admin section.
• Proper navigation block fallbacks and improved menu management offering a better “out of the box” experience.
• Ability to content lock patterns so that you can lock patterns as a way to better preserve the design as intended.
• Add a zoomed out view to the Site Editor, allowing you to enter a mode where the focus is more on site building and composing patterns, rather than editing granular blocks.
• More Query Loop block supports including a new filter to build_query_vars_from_query_block, allowing Query Loop block variations to hook into the query and possibly inject custom query parameters, enabling developers to support all kinds of custom queries and create powerful variations on the Query Loop block.
• Allow the use of block template parts in classic themes without using the overall block templates as part of gradual adoption efforts.

For more technical details, check out the dev notes planned for 6.1.

What’s planned for the future?

A few specific posts and explorations do a great of peering into the future, both in the near term and long term. This is intentionally very curated as there’s so much I could link to!

• Shorter term: Roadmap to 6.1 set to launch November 1st, 2022. Not everything on this roadmap will be available with 6.1 so the post is useful to have in mind when thinking beyond just the next WordPress release.
• Medium term: The Great Unification and Revising the presentation of key Site Editor features, both design explorations that offer unique takes around unifying and clarifying the current experience.
• Longer term: Thinking through the WordPress Admin Experience.

If you’re prefer to listen to me rant talk about most of the above (one design wasn’t done at the time of the recording), here’s a video of a hallway hangout on the exact topic: