The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
If you’d like to help test Full Site Editing, please join the FSE Outreach Program. You can find current calls for testing for this program here and you can join the fun in #fse-outreach-experiment.
The team gathers in #core-test. Please drop by any time with questions or to help out.
@isabel_brison, a developer who has spent much of the last year diving deep into layout controls, took us through a look at 6.2 related layout changes including:
As part of this, she showed how you can now create layouts where the Site Icon can be next to the Site Title or a three cards can always have the same height with a Button blockBlockBlock 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. at the bottom. This led to a discussion both around how even a few additional controls has a big impact for increasing the design possibilities along with some pain points with the current system. For the latter, as it related to one of the demos, could we do something to make it easier for setting things like width automatically rather than individually for each column?
Thinking about layout from a designer perspective
@saxonafletcher, a designer who has thought deeply about these problems, shared some high level thoughts on how he aims to approach this work:
How can we make layout more accessible to more people regardless of technical knowledge?
We then dug into some of what’s coming up next with the Grid layout type:
Responsive out of the box.
Set min column width and the columns will adapt to the space available.
Can turn responsive off and then set columns (can cause super narrow columns).
@beckej, who works in higher ed and teaches students, commented on how simple this is!
Overview of sticky positioning
At the very end, we talked about sticky positioning for 6.2 and how it’s distinct from yet related to layout. Essentially, layout is about inner blocks whereas positioning is about how that content relates to the rest of the page. This was very nicely demo-ed with a community theme (more about the community theme initiative here) that Saxon worked on that greatly leans on sticky positioning. We ended by talking about some follow up items, including how it can only be applied to root blocks. This is a great time to give feedback as this work evolves.
Ideas for future calls for testing
After digging into sticky positioning, the work around the negative margins PR came up and we briefly chatted about perhaps getting both the negative margins PR and grid layout type PR behind experimental flags for some early testing, alongside the navigation section that was removed for 6.2.
We started with some quick introductions to get a sense of who was on the call, how we’re connected to the WordPress project, and what drew folks to help with testing replay.io:
Oliver: Sponsored by replay, been in WordPress community since 2017, used to work for Google where he worked on their first WordPress pluginPluginA 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 (site kit).
Paul: from Germany, self employed web developer, passion for automation and previously led a QA team.
Jason: used to be the tech lead for firefox devtools, worked on etsy with a big focus on their PHPPHPPHP (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. work, big fan of WordPress and PHP.
Paal: from Norway, helps a ton with testing and design, used to be a teacher and enjoys being a regular user, looking for sponsorship.
Anne: sponsored by Automattic for CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. & Test teams, runs the FSE Outreach Program.
Replay,io is a “time travel debugger”. It’s just like a video where you can pause, fast forward, rewind but the entire browser session is recorded. Replay is free for open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. communities so we’re trying to see if it’ll make a difference in how the community reports bugs and maintainers solve them. Oliver and Jason shared some additional details including a case study from Pantheon.
Examples
We briefly went through some examples with TechCrunch as an initial overview followed by an example from @paaljoachim.
Feedback on Replay.io
At a high level, there have been various notes around the Site Editor loading slowly in the Replay browser from folks using the tool. Since the Replay browser isn’t something to aim to get widespread compatibility with, the Replay team is going to dig in to see what might be causing the problem and how we can resolve that in order for a better experience in testing. This will be a huge help since the Site Editor is an obvious thing we want to be testing regularly. @franz00 kindly provided some examples of this (replay recording 1, replay recording 2) while trying to replicate a current issue.
From there, @paaljoachim gave some UIUIUI 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. feedback around using replay and setting up bookmarks. After the call, he recorded the following video and passed along the following notes:
Adding a preview button/icon. To view the video before deciding to save or discard.
Adding all the icons for Viewer and DevTools at the same time in the left sidebarSidebarA 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.. Using a separator between these. Reasoning is that the left sidebar icons are easier to notice compared to clicking the Viewer and DevTools buttons top right.
Editing/cutting in the video timeline.
Oliver and Jason shared a link to Replay’s discord and GitHubGitHubGitHub 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/ repo for folks to continue to share feedback.
Test automation
We briefly covered test automation where you can write your playwright tests and debug with Replay. There’s an effort in the WordPress project to switch to Playwright so it would be neat to explore more once the Replay Playwright integration is in a better spot.
Next steps
Replay to look into slow performing replays.
Replay to reproduce the GitHub issue we discussed on the call.
On January 18th, 2023, a few community members from the FSE Outreach Program gathered to chat about various upcoming features specific to BlockBlockBlock 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. Themers:
Applying local styles globally: push block design changes from post/template editor to global styles.
Inputs for Custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.: Ability to add custom CSS from site editor Styles panel.
Exploring the Style Book: feature that shows all blocks (including third-party) in site editor, making it easier to test everything when designing.
Edit block style variations: Ability to edit (not yet create) existing block styles of a theme from Styles panel.
Anne started things off with a mention of the latest FSE Outreach Program call for testing “Find Your Style.” Feedback can be left until February 1st, 2023.
A number of PRs and discussion issues were discussed with a particular focus on the benefits to theme developers and designers.
Provides a path for styling blocks in the content or site editor and applying those styles globally to propagate across the site to other blocks.
Features like this will help to lower the barrier for non-developers getting into theme design. Quality of Life improvements.
There is no clear indication in the list view or for blocks where the global styles have been overridden. – A specific comment mentions more exploration being considered.
It was mentioned that it would be good to have a way to turn off the option to apply block styles globally. – Issue opened (#47256)
A workflow that seems likely would be to apply styles globally and then export to the theme (via Create Block Theme pluginPluginA 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.)
Translations for New concepts
Translations for some new concepts and features do not always represent the purpose or main idea of the concept. There could be room for improvement in the way translation comments are added in block editor development.
As an example, the “Apply globally” string doesn’t have any translator comment. This is a good example of what a translator comment should look like.
A new control in the block settings panel allows site editor users to add globally applied custom CSS. For theme authors, this could potentially help with supporting users. This has long been a feature of the customizerCustomizerTool 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.. Having this available brings things closer to feature parity.
The idea of per-block custom CSS came up. The benefits and downsides of per-block custom CSS were also discussed. There are some concerns about having customizations spread out but also interest in potentially making it easier to add CSS without leaving the block settings. This concept has some developer discussion and a bigger discussion as well.
Set blocks to be static and sticky. This will be very helpful for theme authors as sticky headers, footers, and sidebars are frequently requested by clients/users. Follow-up issues are being tracked here.
A mechanism to migrate blocks in widgetWidgetA 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 to template parts. This is a bit of a misnomer since it imports only blocks into parts, not widgets. The widget group block doesn’t work at the moment. There are steps; it’s not a streamlined flowFlowFlow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
at this point.
Full-Page Patterns
There is a pain pointPain pointPain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life for theme authors that would like to organize and present full-page patterns in a user-friendly way. Users find building a page with multiple patterns too hard or outside their comfort zone. There are active, related explorations related to shuffling issues here and here.
We lightly went over the next call for testing coming up for the FSE Outreach Program focused on the navigation blockBlockBlock 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.UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. changes, browse mode, split tabs for blocks, etc.
Future of Custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. discussion
Once more the topic of revisionsRevisionsThe WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. came up with the custom CSS options as well. Overall, folks felt this will greatly help with the adoption of block themes and helps bring parity to the experience, while also expressing concerns around UIUIUI 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. overload.
We then switched to talking about the keeping up with block theme changes in general where Rich Tabor brought up an interesting bug/use case around block themes where switching to a style variation keeps you “frozen in time” in terms of additional updates to the theme. You have to switch to the default style and switch back for updates to occur. A regular check to ensure updates are propagated/able to be opted into would be great.
We lightly touched on layout controls and recent work there to stay up to date with Justin Tadlock mentioning that he always sticks to coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. in order to manage layout to make maintenance easier.
Finally, we ended talking about the new split in the block settings sidebar with questions around how folks might adopt this and needing to show best practices when that does happen.
Jeff Ong, Ellen Bauer, Nick Diego, and Edwin Cromley
Video Recording:
Topics:
We covered a wide variety of topics: the outreach program’s future, updates for the 6.1 release, aspects of phase 2 to wrap up, the current experience of developing and maintaining blockBlockBlock 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, and more.
What will happen to the outreach program now that 6.1 is out?
The outreach program is continuing as is! When it comes time to wind it down, it will be heavily communicated and, ideally, continued in some form or another. As with “gradual adoption” of FSE features, expect a more gradual phasing out.
The discussion around 6.1 feedback led to a conversation about managing updates for block themes. In particular, there were some layout changes that needed to be managed. Keeping up with these changes for each release can lead to a feeling of “Why did we build these themes already?!” when there’s so much to keep on top of with each release. It still is taking a lot of work with each release.
@bph the idea was brought up to have a compressed set of links to follow based on audience perhaps for the Developer blog, inspired by Rich Tabor’s twitter roundup. We discussed how there were also 2x the number of dev notes for this release compared to 5.9 and 6.0.
In general, there seems to be a cycle of finding a solution to work around current limitations > the gap getting filled in coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. > needing to update > cycle repeats. There are questions around when this process will get less intense.
Themeshaper
Questions around themeshaper came up with folks wanting to see more there and reminiscing on the kinds of posts that were shared previously as being quite illuminating. Speaking personally, I’m now trying to share more directly in Core when posting but it is an “outlet” that would be great to see revived.
Pixl theme discussion
After Matt tweeted about the Pixl theme, this led to questions around: “Is this the direction we’re heading in? Is it meant to be super simple block theme? Am I overcomplicating it somehow?” We talked about how it was likely just a note about a cool, quirky theme and that ultimately block themes are for all cases (or will be in the future as functionality grows). The goal is to do everything, from very simple to very high level. Nick shared that he’s, “Taking a lot of block themes and throwing them away. I took what was available and took it to the next level, like custom classes or custom code, that block themes couldn’t do at that time. Now, I’m stripping it out and refreshing it with a much simpler architecture.” Ellen is doing the same and it’s a lot of work. From there, you have to consider propagating updates. While this is a big part of being an early adopter, it’s still worth noting and it becomes intimidating to step into eCommerce considering.
Stability for maintenance & stability for UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. of block themes
We talked about how there’s a split when talking about stability: stability of block themes in terms of less maintenance and stability of the UX for end users of block themes. We discussed how patterns are a big deal for UX in general and shared some examples of using starter patterns, with Nick sharing a great resource he wrote.
Latest Phase 2 Update
We went through the latest phase 2 overview issue update, talking at a high level about what’s to come and how work is progressing. This included a lot of discussion around the ability to save, import, and export variations. Feedback was given that style variations are often ignored for clients and that it would be more useful to be able to copy style variations/copying block styles. At the same time, being able to import/export your own branding via style variations would also be wildly helpful.
We ended by talking about the betaBetaA 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. label, how it’s likely slated for 6.2, how another update will need to be done to ensure the issue is up to date, and how the label itself might change away from just “editor”.
Attendance: Rich Tabor, Damon Cook, Courtney Roberston, Paal Joachim Romdahl, Jeff Ong, Nick Diego, Vagelis, Sé Reed, Piermario Orecchioni.
Video Recording:
Topics:
The main topic centered around the work underway to wrap phase 2 gathered in this overview issue. Expect regular updates to this issue and know that other work will continue but there’s a big emphasis to complete the tasks outlined there.
As of last week, the following was in place:
Work has been completed (1)
Dev work is underway (9)
We’re in the design stage still (3).
Dev is assigned but hasn’t started (3).
Means work is stuck but there’s follow up to try to get unstuck (1).
Means work is stuck, either due to a problem or a time lapse of 14+ days, and unclear how to unblock (11).
From there, we dug into the following individual issues to chat through at a high level what we were seeing. At a high level, it stuck out to folks how many different explorations there are, conflicting designs at times, etc. By doing this work concurrently, these differences can be resolved and the solutions refined together.
We talked about how this was a change in the entrance to the site editor just as much as it was for navigating between content. There was a desire to be able to click on the site title in the nav component to take you to the front end of the site. We discussed the important of accessibilityAccessibilityAccessibility (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) testing for this change and it’s top of mind to test for the FSE Outreach Program.
Overall, this would be a great way to get a sense of how changes impact the entirety of the site and in creating a more unified approach.
When looking at this issue, various folks commented on how it feels like there’s a number of different modes and it isn’t always clear how they relate and don’t relate. Part of this is due to designs being in progress at various stages and including some work but not others.
We chatted about how the IA needs to improve around right/left sidebars. Is there a best practice for when to put things in left vs right sidebarSidebarA 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. in the design library? Are we at a critical point in that convo right now? What about RTL when it comes to moving where things “live”?
We discussed what consolidation of the various editors might look like and how the current work seeks to make everything more unified, with the option to edit content in the site editor for example.
Media library getting the “FSE treatment”
Previously, the outreach program had an exploration around media and site building leading Courtney to bring it up!
Feedback on the Quick Inserter prioritizing patterns in certain circumstances
We discussed some pain points around when the quick inserter prioritizes patterns, especially the struggle to be able to add a blockBlockBlock 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.!
Talked about having it be a user preference to start with blocks vs patterns.
There are generally two different mindsets when working with blocks vs patterns.
Could the slash inserter work with patterns? There’s already an open issue here.
Other topics and questions
Folks shared that responsiveness is still a big topic along with navigation block. Multiple people echoed both. Damon shared in the chat: “The Navigation block has SO much complexity, but tackling the challenges will likely surface many great ideas that can be rolled out to other blocks that have complete UIUIUI 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./interaction”. Finally, we chatted at the end about the history of the Query LoopLoopThe 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 naming (why not loop?), where folks can report issues when 6.1 is out in the wild, and what’s next for the FSE Outreach Program.
Attendance: Carolina Nymark, Daisy Olsen, Manuel Esposito, Rich Tabor, Herb Miller, Ellen Baeur, Ana Segota, Evan Mullins, Damon Cook, David Bowman, Jessica Lyschik, Ed Beck, Courtney Roberston, Amy L, Rita Best.
Video Recording:
Topics:
Apologies for the lack of timestamps – this conversation was vast and deep, making it hard to separate out into specific sections.
Pain points with blockBlockBlock 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, including naming conventions for color palettes/mapping colors, managing updates to the theme, oddities with switching between style variations/losing styles, and keeping up with all the various changes to CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress..
Pain points from users including “how can I change fonts”, using the navigation block, and confusion around the split between the post editor vs site editor (ie have to go into the site editor to manage styles).
Theme switching and the UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. around picking/choosing parts of Styles from a theme, which ties into this prior exploration.
Discussion around “Who are our users?” and how there’s a spectrum of use cases to cover from those who want a ready made theme to those who want to dig into the details. How do you build for each or all?
Discussion around having a pattern library/pool as a way to speed up development for themes with a note around how there are so many ways to build smarter for block themes and how much more accessible it is for designers compared to classic themes.
Discussion around using Figma and design tokens to create a system for updating/working with theme.jsonJSONJSON, 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.. The following links were shared: Figma Tokens & Style Dictionary (What’s used to transform the output for theme.json). This is currently being used by the VIP team at Automattic.
Discussion around custom blocks, when to build them, and why they are often times preferable due to the ability to completely manage updates rather than chasing after changes to Core. This led to a conversation around why themes aren’t able to require custom blocks (it breaks a users site when they switch away).
A follow up idea was shared after the hangout from Damon Cook to consider: “It would be super helpful to have a single Figma file with all blocks, colors, and properties that could go in a theme.json. It would undoubtedly be high maintenance and would have to be under active updates alongside new GutenbergGutenbergThe 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/ features being merged into core, but it could also have a webpage equivalent to markup/output. A WordPress theme Style Guide: Figma file with the equivalent of block output on a site for users to copy/paste the code into their theme and see everything on a page… kinda deal.”
Overall, while there is both excitement and interest in what block themes unlock, it’s also clear that there are a build up of pain points to address, whether through clearer resources or changes to Gutenberg itself. These conversations are just one way to start surfacing these themes (get it) and to begin finding ways forward.
We mainly talked through the following different posts that help show both the complex problems at hand and potential thoughts around how to approach solutions:
Throughout the conversation, we had mini dives into various topics, including talking about comparing patterns, template parts, and reusable blocks. We also discussed how there are various layers in which to approach this work from the end user level to the deeper technical considerations. The hope throughout it all is to make these more complex and detailed explorations more understandable and engaging.
What’s missing and what’s stopping people from switching to blockBlockBlock 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
Responsiveness continues to come up with Ellen sharing how she built their own system to handle this for now, knowing that they can always switch over. She believes this is one of the main reasons people are holding back from switching to block themes.
Onboarding to the FSE experience was brought up, particularly around how confusing it is that the BetaBetaA 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. label still exists since that seems to imply it’s not usable. There’s an open discussion around removing the beta label (in time) on this exact topic.
The question came up around “How do we get folks to use block themes if there’s a beta label?” and how difficult that can be.
People are very confused about when to switch in general though, even if folks like Ellen are building things that are ready to go for production sites.
Communicating the value of FSE
Nick has done some hardcore testing with folks who are new to the site editor and when watching them go into the experience and they change the typography of paragraphs but then can’t with headings! Why? We need to take a look at consistency across the tools we’re providing people. People get very frustrated and confused when one block has controls and another doesn’t.
Block themes truly is a better experience for getting a design into WordPress but the confusion added is a bit sad for the project that it gets a rough reputation.
Right now, it feels like more of a communication issue to the end user around what they should actually do and what they can do with consistent communication. Figma does this well.
This has come up in DevRel for WP Engine. When you’re talking about the basics of how to do XYZ, this should be on Learn and in docs. When you’re talking about the cool, cutting edge stuff, we need more of that. “Here’s how to learn the basics of creating a block theme but here’s how to take it to the next level.”
We discussed how if we can standardize block settings across all core blocks but allow agencies to turn on/off easily that’ll be huge for the user experience.
Patterns and opening up tooling
We spent some time chatting about issues for unifying the pattern modals and patterns as sections work since having consistency in the interfaces for patterns and in the larger editor can really help folks take advantage of what’s possible.
In many ways, it feels like users can rely on patterns and/or learn by doing over time as they explore more tools. As a result, exposing those tools doesn’t feel as risky as a pattern can guide the experience and, if they do want to dive in more, they can have access to the tools outright.
We discussed how valuable locking is when it comes to patterns as a way to curate and guide the experience more.
We went back and forth on the question of “How do we get people excited about what’s possible rather than worrying about folks breaking things?”
Difficulty with terminology
Terminology is still very difficult and unfortunately folks need to be generally aware of what to use when.
We talked about how there have been different names for block themes, like “full site editing theme” or “block-based theme”. This is causing confusion and also differs from what shows up in the Theme Directory.
We discussed how difficult it is to find block themes in the directory since the tag you have to use is “full site editing” , which both isn’t intuitive and hard to find.
This led to questions around having a separate menu item for themes or improving the filterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output..
Ellen shared how it’s unattractive to put free themes in the directory – “who clicks on FSE to filter?” Discoverability is so low – it’s not featured enough. She shared that they don’t put any effort into free themes.
We all felt that the entire theme directory was due for an overhaul but were curious about what some quick solutions could be for now to make it more attractive and interesting to add block themes there.
Perhaps there could be a block label in the section below:
Limitations of the pattern directory
In talking about the theme directory, we discussed how neat it would be to find patterns associated with different themes, partially as a way to entice people to download that specific block theme and improve the user experience.
Ellen brought up how it’s not possible to add patterns to the pattern directory that use third party blocks. This sometimes prevents submissions for block themes who have specific blocks for their theme.
We discussed how the pattern directory is overwhelming for users yet also limited: you can’t use named variables for color palette + can’t use third party blocks + no curation.
The crux of the problem is t hat block themers are creating blocks to fill gaps with core right now which then limits what can be added to the pattern directory.
We discussed how there perhaps could be a filter to allow for third party blocks vs Core blocks. For those who want to venture into needing third party blocks, they could then opt in by filtering to show those.
@shaunandrews recently shared a post about pluginPluginA 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 dependencies so some of that thought/design could likely be re-used there.
Nick shared how for the new feature in 6.0 where block themes can feature specific patterns from the directory, it’s still not granular enough. It would be nice to be ale to disable all patterns but then bring in a few from the directory to feature. There’s an issue open for this topic already!
We ended the call talking about how these dynamics often fragment the community – people building premium themes or patterns rather than using the Core pathways. This then moves everything away from Core distribution channels and harms the community/branding/experience of WP.
Ellen described it as feeling like you’re building against something.
We ended the call talking about how important it is to share feedback, engage in discussions, and help influence the direction of where things go so we can get to where we need to.
Ed discussed how he wishes there were options to pick and choose only certain parts of style variations rather than whole variation.
In order for that to be an option, there needs to be a combination of improvements/changes including more granularity with saving, the ability to partially switch styles, and exposing more style options. This is somewhat touched on here.
Overall, the resounding question was “How can we make it less overwhelming for users?” especially if they might want to take advantage of aspects of the style variations without switching entirely.
Right now, there are two extremes without much ease for middle ground options: all the options to customize in Styles vs wholesale full switching between styles (with variations).
What could we offer for theme developers? If we can extend this for themers, they can manage more granular options for their users rather than CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress..
How can we curate the experience?
Colin brought up a very important topic around curating the experience for folks, especially clients. He asked whether there was an issue that summarized the various approaches being taken (there is not and I followed up after around perhaps creating a Discussion issue).
This led to a conversation around various curation options through theme.jsonJSONJSON, 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 locking, and blockBlockBlock 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. locking, including being able to control who can do block locking with filters.
The question of “How can you build a theme and lock things down/curate for clients?” at the same time came up.
For example, clients need to be able to edit the navigation menuNavigation MenuA 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. and headerHeaderThe 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. but don’t touch the logo on the left! You could lock various items down to ensure things aren’t deleted.
In general, there was agreement that the power lies between theme.json and locking options.
During this conversation, a few folks from the agency world mentioned how theme.json is only useful if it works in tooling for existing agencies and design systems. For example, people are struggling a bit switching to theme.json from CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..
While, in time, folks should be able to rely on the site editor to build a theme, it’s a big workflow change regardless and not everyone is going to build from there. This is where the power of import/export functionality will be key.
Trying to push towards doing these things in theme.json but the amount of uncertainty around even just simply adding a theme.json feels nerve wracking.
We touched on the desire to standardize spacing options and have the same t-shirt sizing/spacing scale that is being done with typography controls. This will help guide the user while also give them flexibility to choose from some presets.
By having standardization, it’ll be easier to have content portability/theme switching/etc.
This conversation led to a discussion around how inconsistent the dimension controls are across blocks. It’s hard to know why one option is available in X block but not Y. There’s a sense they should all be available.
The initial reaction from two folks was “Ahhh two sets of tabs!” when first seeing some of the designs.
When thinking about the various tools, this brought up the question of “What’s a primary or secondary tool for each block?”. It seems wise for an audit of some sort to occur.
These pain points relate to both blocks not all having the same controls + understanding what’s in block toolbar vs sidebarSidebarA 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..
For folks in the agency world, there’s also an element of how different people need to look at each set of tooling (visual vs content focus) depending on what they are doing (are they a designer or a copy person?).
Keynote was shared as an example of an application that manages this experience quite well.
We went through the Query loopLoopThe 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 as an example of current pain points.
We briefly talked about when does it make sense to have as a standalone block with different controls being exposed rather than variations that comes with inherent limitations?
You must be logged in to post a comment.