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.
Please drop by any time in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. with questions or to help out.
We are currently in the WordPress 6.6 release cycle. The deadline for leaving feedback on this Planning Proposal post has ended, and we expect a release squad to be announced soon. Please leave a comment if you have any updates to share about this.
Week in Test Post: Wondering where you can contribute and learn? The Test Team’s got you covered. Check out this post and pick any issue mentioned in it.
There are currently 15 open tickets in the 6.5.3 release milestone. More information about this release is in this post, including the bug scrub schedule and how you can get involved.
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/ 18.2 is scheduled for April 24 and will include these issues.
Hallway Hangout: Let’s chat about what’s next in 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/ : If you’re interested in joining, the Hallway Hangout will happen on Thursday, 25 April 2024 at 04:30 GMT+5:30. A Zoom link will be shared in the #coreSlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel before starting and all are welcome to join.
Dropping support for PHP 7.0 and 7.1 : Support for 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. https://www.php.net/manual/en/preface.php. 7.0 and 7.1 will be dropped in WordPress 6.6, scheduled for release in July 2024. The new minimum supported version of PHP will be 7.2.24. The recommended version of PHP remains at 7.4 or greater.
3. Test Team Updates
Week in Test Post: Wondering where you can contribute and learn? The Test Team’s got you covered. Check out this post and pick any issue mentioned in it.
Use a spider to crawl the test website. @nagpai worked on a draft of this at WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Asia. He will be working on pending things during this week.
There were enough folks who I don’t know so am going to leave out WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ usernames on this!
@annezazu@elmastudio@greenshady@arrayhq@luminuu@richtabor@jffng, Nahuai Badiola, Sonia Gaballa, Jeffrey Pearce, Henriette Stewart, Jason Crist, Kafleg, Sarah Norris, Jos Velasco, Digamber, Arkadiusz Salek, Patrick Posner, Gravnetic, Vikas Singhal, Jeremy Techtmann.
Video Recording:
Notes/Links:
Context setting
Mike reached out to @annezazu to share some feedback about his recent 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. theme building experience and they decided together to turn it into a hallway hangout in order to have it benefit the wider community and gather more insights.
Mike’s high level thoughts
Point 1: The elements that you need to build a block theme are solid, reliable, and they aren’t changing everyday. You can build a block theme for broad use a lot faster and in a better way. If you’ve had hesitations about that, get in there and try it again. Have an open mind.
Point 2: Folks expect to intuitively know this stuff but you do have to treat it as a new tool to learn. You put a page builder on your site, you don’t expect to just know it. Take this new experience with a fresh perspective and learn it in the same way.
Point 3: Follow people who have been building themes and learn with them.
Thoughts on current adoption blockers
Ellen chatted about her experience jumping into the experience early on and how they felt the different pain points. From her perspective, the biggest issue is that adoption from users is way behind the potential of what’s available partially due to the reputation of 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/. How can we change this?
We no longer have a technology problem in WordPress. It’s capable of whatever you want it to do. Now, we need people building on it.
Mike
We discussed how we can show off what’s being built and how TT4 is a way to do that, especially since full page patterns are coming to this new default theme and the theme in general matches a more real life use case outside of blogging.
Highlighting block themes
Block themes are the introduction to the new WordPress and highlighting them more feels blocked by various CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.tracTracTrac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets. For example, folks talked about wanting an introduction video for themes and a better option for demo content. Seeing a preview of patterns is nice but there’s a desire for more.
@richtabor mentioned trying out a playground blueprint where you can pick patterns, templates, post content, image sources, and have folks dive into the theme to try it out. Perhaps it could reuse the starter content APIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. and extend what’s already there.
This naturally led to a conversation bout the refresh of the Theme Showcase and the ways that can help highlight block themes more. This is especially important since block themes pave the way to use the site editor.
“The themes page is really better these days. but we have to improve it even more. The main thing is we need Block theme users, we need to show them the importance of using it. If we have users, we will get more beautiful themes.” –
Kafleg in the zoom chat.
We talked about wanting a built in way to demo using WordPress.org that’s so good that theme authors link to that instead of their own demo on their own site. @luminuu shared the idea of “A separate multisiteMultisiteMultisite 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. for theme demos so you can fully customize that demo to the theme’s needs.”
Exporting theme
Mike touched on his experience of using the Create Block Theme plugin and how the overall workflows needs to be refined, including in exporting the theme. This would help make it a defacto tool for now until more functionality can be added into Core itself.
Pattern management
We discussed the potential and power of patterns alongside the overall pain points in managing/maintaining them. Mike talked about the early days before you could create them in the interface and how cumbersome the process was (had to create in the page, export the content, put it into a file, figure out the image, etc). Maintaining patterns is immense still: have to manually put in a file, translate the strings again, change the image tags, etc.
“If you were to tell this to a new user for distribution, they would say no way.”
Mike
We talked about incorporating this more into the 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 folks, some of whom were on the call, and they haven’t had the bandwidth to add it in yet. However, it’s clear that this is a part of the 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. that isn’t covered well anywhere right now and definitely needs attention. We talked about the broader discussion kicked off here.
Interoperability
We talked about the long term aim to have things be interchangeable between patterns, templates, style variations, etc. Ellen shared a vision of how simple it would be to upload patterns to the directory and easily reference them in new themes she’s creating. During this conversation, we touched on a wide range of issues:
“My idea was always how can be get components like patterns and style variations out of one theme and maybe/possibly make them interchangeable and usable within multiple themes. So maintaining patterns of a theme from the patterns library would be amazing…I feel so much that the seeds are all there we just need it together.”
Ellen reflecting ont his topic.
There’s a draft PR for TT4 to include patterns via 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. which helps also push this forward. We ended talking a bit about nailing a color system for a theme without needing to repeat yourself with @richtabor talking about his “colorways” idea.
Theme documentation call out
@greenshady is doing a ton of work to overhaul the theme handbook and folks are welcome to share feedback along the way as we all continue to help push block theme and adoption forward.
Action items
Create a trac issue about a live preview link using playground that perhaps works with the starter content API to provide a set experience for folks to try out block themes.
To start, we did a brief round of intros for @alexstine and @joedolson before deciding to dive into the actually content to give more time to the topic. Overall, the following demos were done with a screen reader, each marked in the YouTube video with chapters:
Manage 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..
Edit 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. to add Site Logo.
Using the Command Palette.
Overall discussions
Outside of that, two discussions broke out in between demos around the following:
The number of different modes, along with the usefulness of List View combined with focus mode, and the ways in which edit and navigation mode weren’t created at a time when nested blocks existed. A broader discussion is underway around providing a focused mode for any container block.
Balancing verbosity
Throughout the discussion, there were different mentions of too much verbosity, like upon entering Site View of the Site Editor, compared to moments where there’s a lack of information, like upon selecting 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.. On the flip side, with the Command Palette, what’s announced is incorrect information!
On the discussions of different modes
@alexstine doesn’t like the different modes and finds List View is easier to work with partially because you don’t know where to navigate around in the canvas otherwise with the keyboard. It’s very unpredictable what direction you will be traveling based on what you select. Right now, we’re in a situation where we have too many ways to move around: arrow keys in the canvas, have an edit mode, have a navigation mode, have list view. Can we consolidate? @afercia added context that edit and navigation mode were done when there were no inner blocks. It was a way to simplify navigation between blocks but the structure of the blocks was way simpler. This led to a broader discussion around showing List View for individual blocks, similar to what’s been done with the Navigation block, where you can only see the “tree” of that specific block with the inner blocks. @joen jumped in to talk about design explorations on exactly that where you can use a “focus mode” to zoom in on just that part of the page and have List View for just that part of the system.
Manage navigation menudemo
From the demo, here are a running list of notes in order:
Wasn’t able to manipulate the individual items in the Site view. Had to enter into Edit view to make changes.
It was hard to know what would trigger editing.
Upon getting into Edit View, there was tons of verbosity and ultimately focus loss after trying to edit.
@alexstine had to then navigate back to where he was which showed the huge cost that comes with focus loss moments.
@alexstine demoed how one can select the navigation block but it’s not clear how to act upon it without knowing how to get to the toolbar view. Keyboard users don’t know that pressing right arrow key would lead to what you need.
Detaching page list is a confusing to understand and is required before you can edit the links– can we update the language? The language is hard to understand in general and also impacts synced patterns currently.
After detaching and editing, the navigation block still doesn’t give a lot of information.
There’s not a way to get more information about the current link you’re working on (what the URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org is, where it’s pointing to, etc).
Information is more limited here and it’s assuming pre-existing knowledge about the menu.
Open up the panel to save but it doesn’t say what’s in there when you first enter. It would be nice to have more info upon entering the Save section rather than going through each section to learn more.
If you are in navigation mode and you save the Site editor changes, instead of focusing the save button again, it focuses the first button in navigation mode.
Back button in Site View doesn’t have context around what you’re going back to.
Changing Site Icon demo
This worked fairly smoothly once he found where the template parts are.
He went into Templates first before going to Patterns based on his experience working with templates.
While going through the Template section, @alexstine noted that it might be worth considering not having each template as individual tab stops.
Having a summary of “My patterns: zero, theme patterns: 19” upfront when entering this section would be helpful.
Confusing to have template parts under patterns rather than templates. This is due to being in an in-between state with template parts.
@alexstine struggled to open up the Header pattern and, upon opening it, lost focus same as before with the navigation block.
Being able to rename group blocks would be a huge help but it’s unclear how that’s announced. This is currently a feature slated for 6.4 so let’s get some testing in place!
Ran into a problem where the 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. is open once you select a block in the Post Editor but in the Site Editor, it doesn’t open, causing you to need to do a lot of navigating to get it open.
Alex demoed the editable list view for the navigation block in the sidebar, where all inner blocks of navigation block are there.
A larger discussion around showing heading level occurred, along with the lack of document overview in the Site Editor. Instead, we discussed showing the heading level icon along with the text in List View.
Searching within the Command Palette doesn’t share how many results are shown.
When going through the results for the command palette, numbers are read off but only shows 5/5 and it’s hard to know to keep going since more than 5 were listed.
Doesn’t announce enough results found and there’s an incorrect number of announcements.
Need more 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 at the start before these features are implemented.
A third party library was used so it’s tricky to keep BC when addressing problems.
Inert usage
Broader discussion and demo of inert was done with the Comments block
When selected, it only announced “selected” because this form is specified as inert.
Using inert makes something non interactive which is something we do desire (aka folks won’t try to submit a form) but if we’re using a technique that causes it to not exist for one group of people, it’s inactive and absent. There’s no parity between the experiences. For screen reader users, there’s no preview.
This entire discussion is very similar to how to hide content, like using display:none. Anytime you say something is inert and if it were invisible, it’s fine and has no impact.
In this case though, we’re using inert to reflect a preview state while that preview state is nonexistent for screen readers.
Follow up issues:
I (@annezazu) will follow up to open each of these but welcome folks to help me out here as anyone has time 🙂
Focus loss after entering edit mode for the navigation block and for header template part.
Update detach language for navigation block and synced patterns.
Add more information when you open up the save panel without needing to go through each section.
Open bug for when you are in navigation mode and you save the Site editor changes, instead of focusing the save button again, it focuses the first button in navigation mode.
Back button in Site View needs to provide more context around what it’s going back to.
Heading in List View doesn’t indicate the heading level – show heading level in list view and have aria label show heading level.
Consider not having each template be a tab stop when in the Site Editor > Template view.
Provide a summary upon entering the pattern section (ex: “My patterns: zero, theme patterns: 19”).
Open sidebar upon block selection in the Site Editor to prevent labor of navigating to get it open (match experience in Post Editor).
Bug with Command Palette announcements for results.
When I was the only one in attendance, I decided to still record an update on both WordPress 6.4 and the FSE Outreach Program. To do so, I went through the Evolving the FSE Outreach Program post and went through various top 6.4 related items. Anything starred is not yet merged:
Introducing new design tools (more 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. supports, background image for group block, aspect ratio on image placeholder, add block instance elements support for buttons and headings)
Introducing Block Hooks with a mechanism for more finetune control post 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. 1.
Phase 2 board: tracking the high level projects alongside medium projects that ladder into the larger work.
UX and Polish board: tracking smaller, developer ready items that help polish the experience. This is a great place for folks who want to dive in to help without needing to stay up to date on the larger projects.
From there, we discussed the larger topic of reintroducing content editing to the site editor, including where hints in the interface should be, the need to have strong user stories around using this functionality, and ensuring clarity between template and post editor. We very briefly touched on how there will be expanded Detail views of page, template, template part, styles without going into much detail.
With Ben on the call, we went over the focuses for 6.3 for navigation, including: adding back the navigation section to the Site Editor, improved link control, and using slugs to reference menus. We talked about the problem with how you can repeatedly import classic menus, leading to lots of extra menus, and discussed the need to see where menus are used when they are listed out so you know which to delete.
We ended on some interesting technical happenings that lead to some powerful 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./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. options:
Simplified layout controls trying to bring together multiple tooling options into a more condensed interface.
Expose revisions (styles, templates, and template parts), including chatting about a current bug in the experience preventing us from testing in the outreach program. We went into some detail talking about Style 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. and watched a demo of what that could look like to have visual revision history.
Add a command center option for ease of access to get where you want in WordPress.
Lots of work has momentum right now so stay tuned for much of it to be tested!
We kicked off the call with an introduction from @elblakeo31, a member of the FSE Outreach Program who has long been seeking to use the latest and greatest as soon and as much as possible. As an early adopter himself, part of his work is helping people adopt new technology too.
Clients are now reaching out to me about FSE features and want to use it. We’re starting to see a transition from people being very wary to really wanting to use the CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. features that WordPress has offered.
@elblakeo31
General Approach
They have had seven different sites moving to the Site Editor in production. They are purposefully not trying to create themes for these projects and are trying to use as much of the site editor as possible. Currently, they are using child themes for some of the projects but mostly just taking Twenty Twenty-Three and using that outright. Blake sees a huge advantage in using the Site Editor directly as a design tool rather than using figma before replicating in WordPress. There are some challenges here in that folks are used to Figma and the Site Editor has a learning curve, along with some limitations (like a more dynamic navigation experience). Alongside this, a lot of work is done to evaluate what plugins are needed on a site and to ensure whatever they might want to use has support within the Site Editor. Generally speaking, they try not to build that many custom blocks and instead rely on patterns with an emphasis on employing as much as possible from the curating the editor experience doc. This is especially true with larger organizations, like a big university, where they need to lock things down more.
What does a web agency look like in a site editor universe?
How can we provide services when clients can do so much on their own with the Site Editor? This naturally came up as a point of conversation with Blake sharing how he aims to train clients to use the site editor capabilities and how “a lot of time spent developing is now spent on teaching”.
The biggest challenge right now is teaching people a new tool. Coming into 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/, there’s already some “trepidation and anger” from folks at times. Whatever size website a client is working with them on, if they’ve used WordPress before, they are a bit feature fatigued. To help combat this and bring them into the future, they spend a lot of time bringing them into a culture of collaboration and experimentation which folks don’t normally want. As a result, they specifically choose clients who appreciate some level of experimentation that comes with adopting new tech.
Right now with the latest release, we’re at a point where I can bring projects into production and feel confident that they’ll stick.
@elblakeo31
When are you deciding to use a child themeChild themeA 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/. vs TT3? What drives that decision?
Blake shared that he has talked to a lot of folks around best practices and aims to do as much as possible in the editor. He knows too that he’ll get more support from the community if he’s pushing the limits of Twenty Twenty Three than another theme. As he’s digging in, he’ll also document anywhere code is added to keep up to date with what might change in the future. Fonts is a great example of this and comes up a lot. In the future, fonts will be managed more directly in Core but, currently, they are using the Create 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. 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 to handle.
What process do you follow for using the site editor directly as a design tool vs figma?
Since the early days of using a WYSIWYGWhat You See Is What You GetWhat You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. editor, Blake has dreamed of not using anything except an editor to mock things up and to cut out needing to use things like Adobe. It feels like a waste of time to have multiple sources of truth when it could all be in a single editor. In terms or process for this, they’ll follow something like the following:
Add content into WordPress using Twenty Twenty-Three with no style changes.
Add in some style elements with the site editor and explain various style pieces to a client directly, alongside options they have going forward depending on what they want to do.
Build anything custom, like custom elements or adding plugins to improve the 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) of sites.
In the 7-8 sites using site editor, they haven’t gotten to a point where a client says this won’t work for me. Because they have not done any mockups, they’ve ended up literally leading them through with the Site Editor. Metering client expectations is one of the biggest tools for the trade as a result: “There’s this new technology that will position you better in the future but there are limits at the same time.”
I can relate to everything Blake is speaking on. I’m only an agency of one, but I follow the exact same approach for all my builds, including using TT3 as a base, or the Frost them from Brian Gardner. I mockup in the site editor. Collaboration is via a P2P2P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. or a communication page I’ll make, as this gives the clients easy opportunities to work with blocks and get comfortable.
Micro in the chat of the zoom
What kinds of clients do you work with and how does your approach change depending?
In general, there are three kinds of clients:
Create something from a template: Someone comes with a full design mock up saying they want X. This is becoming more and more rare as their agency is known to create things from scratch. Often times take a design and use either a custom block or an HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. block if they want a pixel perfect match.
Small build out: Wants a website designed and built from scratch that isn’t a large organization. They’ll work with folks to get all the content into WordPress. Set up 1-3 hour calls to talk about content, look at different WP sites, and see what the client wants to do (drop it in a google doc or wants to get into the WP editor right away). Then have a meeting that’s more design focused to emphasize and create patterns, find sites they like, etc. That iteration process then just continues.
Big organization like a university. At this level, focus more on features and act as almost consultants working alongside an IT team that’s aware of WP. For larger orgs, it’s whatever they want. Recently, built 80% of the site then did a teaching piece and eventually will do a finishing piece. For other orgs, it’s more about giving lessons and guidance on how to use it to employ best practices. These can often take longer.
On the education piece, a lot of time is spent getting folks comfortable with the editor, including designers. Having folks get comfortable with site editor, including designers. Each block has different controls, etc. once you have some of that in place, can have folks go wild. Blake shared how he tries to get folks to think about being designers themselves of the block editor and thinking about blocks as the fundamental level of a design.
What clicked to make you feel confident in using the site editor in production?
Another attendees asked this and Blake shared how every time there’s a new release, he spends a ton of his own time testing things. Often times, he’ll spend a weekend seeing if he can get a project to work in the Site Editor and share it ahead of time for a client to see if it will then work for them. He’s finding increasingly that things are working and he can just give things to the client. With the latest release, he has always moved away from using the Gutenberg plugin as a stop gap (“It’s been liberating to move away from that”).
Other
We talked through some aspects of maintenance, the broader adoption of the Site Editor within the WordPress community, and looked to the future with a few 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/ issues. This include a more in depth discussion around template parts, patterns, and reusable blocks with a look at a recent discussion on ways to unify.
VIP’s design system bridge repo that contains a tool making it easy to sync figma design system values 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..
@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. https://www.php.net/manual/en/preface.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.
