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.
- @nomadskateboarding for sharing videos and bugs from a mobile only perspective throughout the exploration in the #fse-outreach-experiment channel.
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 Block Theme plugin 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.
Watch the experience
@paaljoachim and @nomadskateboarding both took videos sharing their experiences that you can watch below:
High level summary
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 UX 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 CSS to set the site-title & post-title’s text-decoration to none, but later found out that it can be done in theme.json. So my theme doesn’t use custom CSS anymore.
@franz00 in this comment.
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 🙌
@soivigol in this comment.
Bugs
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.
- Styles: Changing the Layout, Padding, and Block Spacing values causes error (resolved in Gutenberg 15.5.1).
- Try removing default align-items styles from flex layout (pull request).
- Unable to select colors on small screens.
- Unable to change margin or padding on mobile web.
- “Manage all templates” and “Manage all template parts” link not visible on smaller screen size.
- Add New template in Manage All Template section not clickable on smaller screen sizes.
- Top Toolbar not visible until selected when on mobile.
- Unable to change margin or padding on mobile web.
- Undo/redo buttons not visible on smaller screen sizes.
- [Create Block Theme plugin] Fonts not properly being updated in the Site Editor.
- [Create Block Theme plugin] Remove settings.layout.definitions from theme.json.
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.
@luminuu in this comment.
Feature Requests
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.
New:
- Site Editor: add option to disable templates.
- Styles: add gradient support to text color options.
- Styles: ensure a way to set fallback fonts.
- Style Book: Include links in paragraph to show impact of adjusting link color.
- Slash inserter: have to drop keyboard on mobile when searching for a block.
- Block recovery leading to content loss when it works to convert to classic then blocks.
- [Create Block Theme plugin] Automatically enqueue style.css when creating a blank theme.
Previous
- Site Editor: add home to list of new templates (resolved in Gutenberg 15.7).
- Site Editor: add ability to turn off double confirmation multi-entity saving screen.
- Styles: add support for font size presets in global styles.
- Styles: update Welcome Guide to include a reference to font management when that feature is merged (new).
- Styles: standardized way to modify interactive states (:hover, :focus .etc) for blocks, in particular for buttons.
- Social Icons: More sizing options needed.
- Next / Previous Page blocks: enable an icon-only or text-only display.
- The wp:pattern block, namely the desire to have a way to sync and edit patterns globally.
- [Create Block Theme plugin] Consider adding empty templates for the Start blank option.
How the heck do I delete pre existing templates? Such as Two Page templates Page (Large Header) 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.
@jameskoussertari in this comment.
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?
@soivigol in this comment.
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.
@luminuu in this comment.
General usability
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.
New:
- [Create Block Theme plugin] Overwrite: consider whether moving template contents to a pattern is correct behavior
- [Create Block Theme plugin] Copy images to theme folder when overwriting.
Previous:
- Grouping contextually related templates.
- Move template part replacement flow to the transform menu.
- Surface related patterns in the template inspector.
- Shuffle content blocks when templateLock is contentOnly.
- Template editing: convert semantic patterns to template parts upon insertion.
- Simplify adding sticky positioning to template parts.
- Template panel: “Default template” can be a confusing option label.
- Revisit Global Styles IA to offer a more coherent styling experience.
- Communicate more style changes in the Aa icon for Styles.
- Design tools: Better handling of unset / inherited values
- Clarify UX when styles are coming from multiple sources by showing a hierarchy of styles.
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 core’s patterns could output the result to the HTML template only instead of the HTML + PHP pattern to minimize confusion.
@franz00 in this comment.
I like the link to Global Styles in the Appearance > Editor menu.
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 customizer. 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.
@gaambo in this comment.
I didn’t have to use the Custom CSS. But for this, I have wrapped the featured image 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.
@soivigol in this comment.
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).
@soivigol in this comment.
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?
@luminuu in this comment.