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.
Admin Design Kickoff: The Design Team share early thoughts on how WP admin could be reimagined. Join the discussion to help shape this important part of WordPress.
What’s new in Gutenberg 16.4? (9 August): Download and test the latest feature updates in the 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, and get a peek at what the future holds for editor updates to WordPress CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress..
WordPress 6.3 “Lionel”: And finally, WordPress 6.3 was released last week. When submitting bug reports, please consider the official test report guidelines, and remember that the WordPress Beta Tester plugin has a handy “Report a Bug” button that works even if you’re running the 6.3 release version 🎉.
And we received one participant-submitted announcement:
Volunteers were asked to step forward to help facilitate the Test table, both in person and remotely on SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. @ironprogrammer volunteered to help lead in person at the event, but at the time of this writing there was no clear lead for coordinating contributors online in Slack. Contributors wishing to help are asked to comment below or raise their hand in Slack.
Test Team RepTeam RepA Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. Nominations
It was shared that the nomination process for the next Test Team Reps would begin soon, and team members were encouraged to help identify and nominate individuals who might be a good fit for the role (even themselves). [Ed. note: the 2023-24 call for nominations has been published.]
This post is a summary of the Momery Makeover call for testing for the FSE outreach program, the twenty-fourth effort. As always, I want to highlight those who helped to bring others along with them in this latest effort:
InstaWP for allowing the outreach program to use their tooling for free, enabling more folks to jump into this call for testing and for more creativity in what we are able to test.
Thank you to @bph and @ndiego for covering for two weeks of this call for testing when I was out on vacation. Your coverage made my break possible!
High level summary
Since this call for testing took place during the early stages of an iterative process, several aspects of the feedback provided have already been swiftly addressed, thanks to ongoing development for WordPress 6.3. The relatively limited amount of bugs received and feedback aligning with feature development reflects a level of solidness in the direction of recent improvements. These improvements encompassed a range of features, such as the ability to rename menus in Site View, add template parts directly from the Site View, publish pages, and introduce additional interface enhancements to improve the template vs content editing experience. Notably, 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. proved to be significantly more intuitive compared to the code view available for Templates and Template Parts.
@paaljoachim shared a video of his experience going through the call for testing if you’re looking to get a sense of a test contributor’s experience in more detail:
Bugs
The following bugs were all reported before this call for testing, reflecting known issues and showing a level of stability in the breadth of new features added to the Site Editor experience:
Right now we can use a Post ExcerptExcerptAn excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. or Post Content. Post Content is the whole entire post in the Editor, but the post up to the “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.” on the front end. This is the behavior that I expect on the front end. But I would really like the Editor to not show the entire post! It just makes the Queries too long.
When I created a new page by way of creating a draft page. I found that a draft page creation option was missing if I tried to create it under the Menu 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.https://s.id/1Nh2y. However, it showed up if I tried to add a non-existent page link via the Navigation block https://s.id/1NgZg.
Many of the feature requests tie in nicely with work either completed or currently underway (marked as “In the 6.3 board”). Across most of the following issues, the ability to access exactly what one wants in the Site Editor as a whole acts as a through point, whether when clicking “Edit Site” from the admin bar or trying to search for specific things with the Command Palette. Building into phase 3, the Template Part and Template revisions were seen as subpar in comparison to the new experience offered by Style revisions.
I went out of the site editor and found the blog page in the Pages screen. Viewed it. Then clicked Edit Site. I expected to have the Home template open up but instead clicking Edit Site on the frontend will only open the Front Page template, and not the template related to the specific page I am on.
I feel uncomfortable to roll-back template changes using the provided revision states located at the bottom of a particular template tab. The reason for this discomfort is that the revision states appear to be too raw. Since we rarely used the Code editor in building a site/pages in the Site Editor, seeing loads of 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 codes as reference points to roll back to feels unfamiliar within our current workflow.
I had to go to the side menu to change the Page template why from the About page I didn’t see the option to Edit the template page. I found the option when I changed to Contact page by chance. The solution? I don’t know which is the better option. Maybe that open right side bar by default when we change a page or template. Or open and close to see that this appears here. Or in the wizard (I don’t saw the wizard).
When typing in ‘page’ into the command centre – I didn’t expect ‘add new page’ to be the first item – rather than the ‘page’ template. Is this weighted in some way? It may just be me.
Part of the call for testing instructions included replacing a template part and creating a new menu, both of which caused some confusion. Each experience has improved with additional functionality added to the Site View for each respective section (Patterns, Menus). Outside of that, it’s worth noting that with Reusable blocks being consolidated into Patterns overall, a bug with Reusable blocks now has a wider spread impact. Currently, if you convert a set of blocks into a Pattern, the align full or align wide options are removed, leading to what feels like a broken experience by design since the alignment/flex position depends on the container. This is likely to come up as a broader piece of feedback. The Navigation block continues to receive feedback around the desire to have an easier and more consistent way to rename, regardless of where you are editing a menu (sidebar, in editor, in Site View).
Desire for simplified dimension controls for Columns block.
Finally, a few folks mentioned issues with the Post Content block that wasn’t replicable in later versions released after the call for testing.
I think creating a reusable block or a template part from the Site editor should be possible. People using the Site editor probably will know the difference. I like the idea of making things clear, but I’m not 100% convinced. I prefer to have a place to be able to edit everything, including content, and the other just for content.
I first tried to “Replace the Footer”, and while it added a new footer in the Home Template, it had a different name in the Library > Manage All Template Parts. It didn’t change the existing Footer into the new one which was what I expected from “Replace Footer”. Later I realized that this did exactly what it was supposed to do – create a new Footer to use.
Create a reusable block. NB! Before creating a Reusable block I had a full width block. After the conversion to a Reusable block the alignment controls went away and it seems that the block went to a no alignment. How do I have the Reusable block in full width alignment?
When I go to add three columns with the Columns block, I have the option to give the gap space between columns and I have the padding default left and right padding in each column. I am confused. I think that if I have gap option, should not have padding or reverse.
When searching for pages in the command centre – there was a slight delay before they showed as results – but there was no visual indicator that anything was happening.
This post is a summary of the Rapid Revamp call for testing for the FSE outreach program, the twenty-third effort. As always, I want to highlight those who helped to bring others along with them in this latest effort:
InstaWP for allowing the outreach program to use their tooling for free, enabling more folks to jump into this call for testing and for more creativity in what we are able to test.
Once more, bug wise, the call for testing was quite contained, reflecting a solid state in the experience considering how many new features are being built upon. Overall, the feedback mostly centered on iterating upon 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 previewing, improving template vs content editing clarity, confusion around which revision tool to use, and some more minor usability pain points, like poor drag and drop for the Details block or inconsistent triggering of the command center. There was plenty of positive feedback around how much smoother and cohesive the experience feels, with easier access to high level items thanks to the Site Editor additions of top level items in 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. for Pages, Styles, and Navigation.
The newly added details block is wonderful. I used it to create an FAQ section, which contained paragraphs, list of items, code, and quote blocks. When I rearranged the blocks, I found it incredibly easy to drag and drop them at any level of block hierarchy. This snap ability turned out to be a significant improvement for GB 15.8. Awesome…I noticed that we now have Pages in the Site Editor, which has made transitioning between editing page templates and editing page/post contents much more easy. However, I still feel the tension between them are still strong. This is mainly because the right sidebar of the template and page/post content still display their respective details and options.
Aubergine Variation background implementation causes height changes, impacting the 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..
After adding content to About page and leaving the cursor in a paragraph block, when I click on the CMD + K, not open the command center. In this case, open a Search to add a link (the popup that appears when a link is inserted). I have to click in the parent block to work fine in the command center. @soivigol in this comment.
Feature Requests
With a strong emphasis on block theme previewing and the feature itself being in an early state, numerous feature requests came up to polish that specific experience, alongside requests for more styling options for the Details block and an easier to find pathway for 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.. Block theme previewing is a game changer and the feedback provided here offers some solid iteration opportunities.
Once I clicked on the Live Preview link and entered the Site Editor with the Navigation Sidebar (the dark grey menu area) on the left, I was expecting to be able to navigate between all the installed block themes and 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/ block themes, similar to how the preview of classic themes work.
Outside of more specific issues, feedback was repeated around the confusion between editing a template and a page, which aligns nicely with the already shipped next call for testing that focuses on some improvements there. Beyond the following, two folks mentioned that the “Work with me” link showed up twice as there was a Page list block present in 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., causing the item to automatically be added after publishing. This caused some confusion and wasn’t intuitive to understand what was happening.
Desire for more information when clicking on links that move you out of the Site Editor, like “Manage all pages”.
Desire for more guidance around when to use which revision tool (Styles vs Templates).
Adding “Work with Me” again, I figured out why it appears twice on the outside navigation. I also see it twice on any template or the Header template part after the “Work with Me” page is published, if I leave the Editor and open the Editor again. The menu in the Twenty Twenty-Three theme is a “Page List”. When I add the additional Item, it always adds below or outside of the Page List. I couldn’t see how to add it to the Page List. But then when the Work with Me” page is published, it’s automatically added to the Page List, but it’s also outside where it was added originally.
When I made some revisions to the site design and clicked “Reset to defaults,” I expected to be taken back to the default settings of the active style (grapes), but instead the Editor presented me with TT3 default theme.
I was confused initially that the style revisions are stored together, not individually by block. I guess I expected this because they were on different “pages” and because I’m used to existing post/page revisions being separate.
Clicking into the Post Content group it acts just like 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. There is no page inserter but the inserter is at the bottom right of the Post Content. To me that feels strange. I expected to see the standard page inserter.
With the Details Block I felt very frustrated. In a first moment, I tried to drag and drop to move the selected content to “Type / to add a hidden block”, but it’s impossible why the Details block is closed when lost the focus. I had to use the keyboard (CMD + X) to cut the content and paste it. Additionally, I tried to click in the arrow to close the block (by intuition), but don’t occur anything. Only close when lost the focus and open when get the focus.
Core Editor Improvement: Smoother Site Editing: See some of the latest updates to the editor, including 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. history for styles, templates, and template parts.
WP Briefing: Episode 56: What to Know About WordPress Playground: Learn more about experiments surrounding the ever-growing WordPress Playground, and what coding and testing 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) opportunities this exciting project is making possible.
What’s new in Gutenberg 15.8? (May 17): Get the latest scoop on what’s recently shipped 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/.
WordPress 6.2.2 Security Release: This rapid-response security release addresses a shortcodes regression from 6.2.1, and further improves security around this feature.
FSE Program Testing Call #23: Rapid Revamp: Follow along with this #fse-outreach-experiment to test features planned for the 6.3 release. With clear instructions on setup and what to test, both experienced and new contributors to testing will find this an interesting way to test and explore new features.
And last, but not least:
WordPress’s 20th Anniversary: WordPress turns 20 this Saturday, 27 May! Celebrate this historic milestone with others from around the WordPress world!
@ironprogrammer drew attention to the recent release of wp-now (npm package), part of the WordPress Playground project. He noted that wp-now works with Node.js, and could be a possible replacement for wp-env. He gave an example of having navigated to a 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 source directory and running wp-now start, which quickly launched a new WordPress site to test the plugin.
@ironprogrammer mentioned that the utility could be a fast way for contributors to get set up for testing or development, and referred to WCEU as a possible testing ground for test contributors to try it out.
@oglekler provided a link to a MeetupMeetupAll local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. event that featured Playground, occurring shortly after Test Chat.
@ironprogrammer then shared his plans to draft wp-now setup instructions to propose for addition to the Test Handbook, and asked the team to try out the utility and report any blockers or challenges they encounter.
@boniu91 asked if PRs and patches could be applied to sites running on wp-now. @ironprogrammer confirmed having tested with plugin repos, but that testing with the wordpress-develop repo would be important before recommending it for broader Test Team use.
WP Briefing: Episode 55: Happy Anniversary, WordPress!: Celebrating 20 years this month, take a look back on how WordPress has been shaped by its amazing 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. community.
WordPress 6.2.1 Planning: This minor releaseMinor ReleaseA set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. brings an important bugfix to 6.2. Consider taking part in testing the RCRelease CandidateA beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. (today) or the final release next week.
Let’s talk: WordPress Core & Artificial Intelligence: Have you been following recent happenings in the world of AI and LLMs? Contribute to the discussion around how these important technologies fit with the WordPress open source project.
@ironprogrammer highlighted that the PR to prerelease Playwright test utils — aka @wordpress/e2e-test-utils-playwright — has been merged, and is slated for release with 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/ 15.8 🎉. He noted that this facilitates inclusion of the package in other test suites, and expressed hope that it would eventually contribute toward improved E2E coverage in WordPress.
@oglekler wondered how well Playwright worked in WP admin, outside of the editor context. She referred to reports of Quick Edit rows disappearing after an update, and whether an E2E test could help identify this.
@ironprogrammer clarified that the release of the @wordpress/e2e-test-utils-playwright package was in response to several requests from community members who wished to use it, and encouraged continued exploration regarding previous discussions about Cypress.
This post is a summary of the Front Page Fun call for testing for the FSE outreach program, the twenty-second effort. As always, I want to highlight those who helped to bring others along with them in this latest effort:
InstaWP for allowing the outreach program to use their tooling for free, enabling more folks to jump into this call for testing and for more creativity in what we are able to test.
Shout out to @pagelab and @valmedia2023 as first time contributors for this call for testing. Expect a badge on your WordPress profiles for your contribution!
High level summary
In general, the call for testing was relatively tame bug wise, with only a few obvious ones found, mainly in 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.. The usability feedback related to many ongoing projects in the Site Editor underscoring the impact of solving these consistent problems, in particular the clarification of the content <> template relationship and confusion around the overall experience of managing pieces of navigation. Most participants were perplexed by the “hybrid” content editing option in the Navigation section, which suddenly appeared, causing one person to believe they had encountered a bug.
While the new Grid layout type was the primary focus of the testing call, feedback on it was limited to suggestions for consolidating the various options between the grid layout, Columns block, Gallery block, and Table block. Despite being a focal point, there was little mention of patterns in the template creation experience, suggesting that the consistency in pattern mental model was successful.
First: the Instawp link was precious, and made everything work smoothly right away. The editor is becoming quite powerful, and I am increasingly enjoying the flexibility of working with blocks, layouts, patterns, and templates…However, it boils down to a higher cognitive load overall while performing tasks in the editor, compared to the classic editing experience. It is powerful, but it creates multiple contexts for similar operations, with an increasingly greater number of options and pop-ups. It is getting better, though. I know some of this can be attributed to the newness of everything, and it will take time until I — and everyone else — feel completely at home in the editor. We’re in a transitional era where users — and even developers — are becoming visual site builders, so I think this is inevitable.
It is incredible that I can create new pages from the menu and can edit the pages from the same site without having to page by page editing our content. Specially interesting to create a website for clients.
I created three draft pages: biography, discography, and buy. I assumed that the draft page referred to in the dark grey 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. under Navigation was the “page posts” page. Since we had only created draft pages before, seeing them listed under the new 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. oriented me towards a page content editing function. But when I was presented with “a page with many texts inside, which didn’t look like a page but should be a page,” I became completely disoriented. 🙃 I even created another local instance of WordPress, thinking that I had encountered a bug.
The Navigation block featured heavily in this call for testing, leading to most new issues touching on the current experience with three folks mentioning a delay in proper naming of draft pages. The experience of adding a new page in the Site Editor experience is an important one, particularly with the backdrop of adding content editing.
It doesn’t always display the full word “Inspiration” depending on how fast I type or pause while typing. Sometimes “Inspira” or “Inspirati”. Some sort of confused debouncing behavior.
Folks requested a few features in this call for testing mainly around the specifics of creating navigation and how that relates to using the Site Editor at large.
Going to the Editor. For a short moment I see Styles, Templates and Template Parts. Suddenly a half second later I see Navigation at the top. It is distracting seeing 3 areas and then a moment later 4 areas. I have sometimes clicked almost immediately and then I have end up clicking into the wrong area.
I miss the list view while editing on a mobile device as there’s no quick way to visualize the block structure without it. It is the most reliable and stable 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. navigation point within the block editor, in my opinion.
Usability feedback repeated much of what’s already known and is actively being worked on, including the tension between templates <> content and improvements to adding links to the Navigation block by reducing the number of steps needed.
Consider how the Grid block can power other blocks from Columns to Gallery.
Personally, I miss having all my content (posts, pages, categories) and navigation options visible at once, all the time, without having to see a bunch of other options for other tasks. It’s just easier than clicking three or four times in the site editor UI, in multiple places, just to see what content is available to add as a menu item.
The Grid block is a very small beginning of something that can expand into something very useful. That can become a base for the Columns, Table and Gallery blocks. With each their own variation/unique features.
The site already had a Navigation section and I wanted to rearrange the one I just created. But the Navigation section in the sidebar did not let me select which of the menus I wanted to adjust. It just took one of the oldest ones I had. I expected that somewhere perhaps on the bottom that I would be able to switch menus and even select which is primary and as well as other selections in how a specific menu is to be used.
In the new pages, it was confusing. I didn’t see where I had written the new content. When I changed to edit About page, then I can see how I had written the new content in the Post Content Block. Then, I went back to the new pages and I had to search the Post Content Block in List View to edit correctly the pages… when we go to edit new pages, I think that the Post Content Block should have a placeholder to see where to begin to write or add new content.
This post is a summary of the Build a Block Theme exploration for the FSE outreach program, the twenty-first effort. As always, I want to highlight those who helped to bring others along with them in this latest effort:
InstaWP for allowing the outreach program to use their tooling for free, enabling more folks to jump into this call for testing and for more creativity in what we are able to test.
Shout out to @jameskoussertari@soivigol@gaambo as first time contributors for this exploration. Expect a badge on your WordPress profiles for your contribution!
As a reminder, explorations are more open-ended ways of exploring the Site Editor and gathering feedback, sometimes involving work in progress features and very early prototypes. In this case, we used 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 augment the Site Editor into even more of a block theme building tool in order to test the limits of what’s possible and find gaps.
Using the Site Editor alongside the Create Block Theme plugin supercharges the experience, mainly by filling in gaps around font management and offering more nuanced creating/exporting options. With these added features, the Site Editor is both left to shine as a theme building tool and the current known pain points impacting regular site building come to the surface, like needing more clarity around where layers of styles are coming from. In general, feedback fell into three categories: Create Block Theme plugin pain points, missing options in the Site Editor (font management, synced patterns, desire for more styling options with certain blocks), and 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. considerations for the Site Editor that match the site building experience. This all underscores how addressing key points of current feedback about the base experience of the Site Editor, including on mobile, will cascade to improve broader use cases, like using it as a theme building tool. To make the feedback easier to understand, anything specific to the Create Block Theme plugin has been marked as such.
Since I’m not a designer but would love to have a proper spacing layout, good hierarchy of headings, and a harmonious color palette, I then copied some of those elements from a couple of themes. For spacing values (spacing.spacingSizes and styles.spacing.blockGap), I copied them from the Frost theme and adopted the predefined font size values of headings & paragraphs from the Beaumont theme. As for the color palette, I sought a monochromatic color scheme, which I generated from W3School’s color schemes.I previously wrote custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to set the site-title & post-title’s text-decoration to none, but later found out that it can be done in 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.. So my theme doesn’t use custom CSS anymore.
I did previously a Block Theme with code and created some sections with the Site Editor and copy/paste the code. But this advance is grateful! It’s incredible, can create a Block Theme no writing any code 🙌
Most of the bugs found related to the experience of using the Site Editor on mobile web with basic options like undo/redo buttons not being visible, with a few additional bugs across the broader Site Editor experience and Create Block Theme plugin.
When arranging the site title and site tagline next to each other with the Row variation, there’s no setting for the CSS property align-items, which with the value baseline would allow the smaller site tagline to be nicely aligned with the site title. I can add an extra class for this and it works in the backend, but in the frontend my class is overwritten by the default is-layout-flex class, which has align-items: center. In the backend, the order of the classes is correct, while in the frontend the custom classes load too early and are overwritten by the WP default classes, so I have to use !important here.
Outside of major missing features, like the ability to sync patterns globally or modify interactive states for blocks, most folks either expressed a need for more advanced features catering to power users, including the ability to disable templates or set fallback fonts, and additional options for individual blocks to broaden stylistic possibilities.
How the heck do I delete pre existing templates? Such as Two Page templates Page (Large 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.) and Page (No Separators). As well as the extra Single Post (No Seperators) template.
Patterns are a fantastic way to provide clients and users prebuilt layouts for rapid website creation. Unfortunately though, they lack one important feature, which would take them from being great to absolutely amazing. This missing feature is the ability to sync and edit patterns globally, without altering the content within them.
When I saved and returned to the previous screen a “System font” was added as well. How would I go about specifying a fallback font? Eg I normally use “Helvetica, Arial, sans-serif” as fallbacks for font-family – I guess this is only possible via custom CSS?
What I found confusing is that for typography, there’s the preset font sizes (S, M, L, XL) but there’s no interface to change those preset sizes globally from the editor. Same for the defaults of Padding, Margin, Block Spacing and similar items.
Outside of issues related to the Create Block Theme plugin, usability concerns all touched on currently known patterns of feedback, from improved grouping of templates to needing to reimagine the Styles information architecture to improve the baseline intuitiveness. In particular, styling challenges were the most common as folks sought to create something new from scratch and ran into points of confusion around the hierarchy of styles, how to quickly use the Styles interface, and current gaps in the experience.
I add a Header pattern and now I have one official Header template part where I see it has the Header template part label.The other newly added Header pattern does not have the Header template label but is in a Row. How do I make the new pattern become the Header template part?
After examining the troubled templates and patterns, I found that the image path was going to the theme’s root assets/images folder. Copying the required images to the said folder solved the problem. Learning from this, I wondered if the image copying could be done during the CBT overwriting process and whether the overwriting process of templates that used coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.’s patterns could output the result to the 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. template only instead of the HTML + 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. pattern to minimize confusion.
Styling buttons (the block and elements) is split into “typography” and “colors”. This hierarchy may make sense and it’s a way how many plugins in the past implemented in 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.. Still another way may be “I want to style buttons, now show me all controls to style buttons”. At the moment one has to go into typography for text and then into color for colors.
I didn’t have to use the Custom CSS. But for this, I have wrapped the featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. in a group block to give it margin. I think that it is a good idea to can insert Custom CSS, why in this case, it is a better practice to set an Additional Class in the Featured Image Block and give it style with a few CSS lines. It’s interesting to have this option, but the location is difficult to reach. I had a frustration until to I found.
Top level typography styles: The icons for the different entries sometimes communicate current state (eg the background color on the button item), but other settings (eg removing text-decoration underline from link) does not change that. So the list is kind of mixed of current styles and base-styles. The text Aa icon seems to have a different font (the one i defined?) than heading and captions (allthough heading / captions do inherit that font).
I had adjusted the font size under Styles -> Typography -> Text to be higher than the default one, however it would not apply to all blocks in the content. I had to manually update Post Date, Categories and Tags. For the Post Author and Post Content blocks changing the font size to a custom of 21px did not have any effect on the block. For the post content block, the font size is set at the surrounding div, but does not apply to the paragraph child elements, as there’s a default CSS p { font-size: 16px }, which came from a the font size setting in the Paragraph block, as I found out after some testing. I wonder where the 16px from came from, either from the Create Block Theme or some default setting in WP?
WP Briefing: Episode 54: A Bill of Rights for the Open Web: Dig into the four freedoms of 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. and how they relate to WordPress’s idea of a “Bill of Rights” for the open web.
Status update on the SQLite project: Learn more about how to test and provide feedback for this proposal to eventually offer SQLite support natively in WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress..
@ironprogrammer invited/reminded the team to consider submitting topics and/or applying to the 2023 WordPress Community Summit, emphasizing that ideas and input from underrepresented community members is especially important to summit discussions.
FSE Program Exploration: Build a block theme: In this latest #fse-outreach-experiment call for testers, approach 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 development with a design mindset, using only the editor and available tools (no code!) Accepting feedback through April 26, 2023.
Focal Groups 🧪
@ironprogrammer re-introduced this section as pertaining to Test Team discussions from 2021. Because contributorship has changed a lot since then, he asked that contributors interested in representing a particular focal group reach out to @boniu91 or @ironprogrammer (himself). He also noted that the team can adjust the focal groups to align with current needs, particularly if it would help inspire greater collaboration.
E2E
@oglekler noted their positive experience with Cypress, an open-source testing tool which uses Mocha and jQuery, and can be run headless. @ironprogrammer asked if it was compatible with the current WordPress E2E standard, Playwright, and suggested that discussion with other E2E contributors be held to discuss further.
@ironprogrammer suggested that a follow-up Make/Test post be considered to gauge interest on possible focal group rep interest, particularly for E2E.
Test Handbook
@ironprogrammer gave a brief update on the Test Handbook, noting that a new Contributor DayContributor DayContributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. page was under final review. The page will provide new Test Team contributors a good place to start 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. events. He encouraged contributors to share the page at future WordCamp Contributor Day events, and to raise suggestions for improvement in the #core-test channel, or to create a PR in the handbook’s official GitHub repo.
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..
