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