Birgit Pauli-Haack and Grzegorz Ziolkowski discuss WordPress 5.8, Upcoming Live Q&A, and Gutenberg 10.7 and 10.8. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |🎙️ Pod Bean | CastBox | Podchaser | RSS Feed Show Notes New Podcast Review by Dave Smith Announcements Core Editor Improvement: Improve your workflow with […]
Last week I spent a little time putting Blockbase to the test. I had some explorations into warping text and images using CSS and SVG filters gathering dust, and I thought it would be fun to explore pulling those into a highly-opinionated block theme.
In the past when I’ve done a theme experiment like this, I’ve generally started with something like the emptytheme generator in the WordPress theme-experiments repository. This provides you with just the required files for building a block theme, so it’s a good minimal way to get started.
This time around, I used Blockbase. While it doesn’t yet include a quick generator script like emptytheme does, there is one in the works. In lieu of that, I just created a child theme like I normally would: by adding style.css, functions.php, and index.php files. I also copied over the child-theme.json file from the in-progress Quadrat theme, since I knew that would get me started.
My work in child-theme.json was very brief — I just changed a few variables and used Blockbase’s compiler script once. Then I copied and pasted over the block style effects from the plugin mentioned above.
Once that was all in place, I jumped into custom templating. I created just two templates, plus a custom header that featured a video loop of me waving at the camera (but filtered into oblivion using the tools at photomosh.com). I used a “Warped and Stretched Photocopy” block style on the header’s text, and “Photocopy” style on the featured images. Combined together, this created a highly stylized look and feel, reminiscent of (for better or for worse) the old days of Flash animations:
This all worked pretty well in the editor too! Due to a combination of Gutenberg limitations and browser bugs, I ran into an issue getting my SVG filters loaded into the Site Editor’s iFrame, but aside from that, things looked just like the frontend:
The filters did work great in the post editor though, so I can show you how that’s supposed to work by loading the header there:
In the end, the filters bug is not really a fault of the theme, and something I’m sure I could resolve if I choose to devote some more time to this exploration.
The theme is obviously a little over-the-top, but that was really the point of the experiment! I’m amazed I was able to fold my earlier block styles work into such a distinctive, full-featured theme with minimal effort.
Overall, I found that the benefit to using Blockbase was peace of mind. Compared to starting fresh or using emptytheme, Blockbase ensured that I had a fully-functional block theme immediately. It already contained extra templates for pages like 404 and search, and it was full of little CSS fixes for things that full-site editing just doesn’t quite support yet.
This eliminated a lot of extra busywork, and allowed me to dive right in and focus on the theme-building aspect that’s most exciting for me: the theme’s design and creativity.
The code for the theme is over here in case anyone would like to poke around:
Block themes use templates made entirely of blocks. The layout is configured using a combination of theme.json and CSS. The settings in theme.json are used to generate CSS – this is part of the Global Styles feature. The theme CSS is added after the theme.json CSS and together these rules define the layout for a theme. If you’re just getting started with block themes, this guide should help.
Can I style my whole theme with Global Styles?
Global Style allows us to set styles for some aspects of the theme, but many common customisations are not yet available. We are actively helping to add more customisations to Global Styles, but in the meantime we have been working on a mechanism to define a lot more theme styles in a custom section of theme.json, until they are available in Global Styles.
The result of this work is a new theme called Blockbase, loosely based on the classic theme Blank Canvas. This block theme attempts to make all the common theme styles configurable in theme.json, and provides the CSS needed to make them work until the blocks themselves support these settings. As more of these configurations are added to Global Styles, we will remove the corresponding CSS from Blockbase.
Can Blockbase be used to build more block themes?
We are currently using Blockbase as a parent theme for all of our block themes; in time we hope that it won’t be needed. This means that child themes only need to define their settings in a theme.json file, and the parent theme CSS will adjust to these settings. This approach gives us an agreed standard when configuring block styles. It also will make it trivial to move to the Global Styles implementation when that becomes available in core.
Blockbase is intended to be a representation of all the theme style settings that we believe should eventually live in Global Styles and be configurable by users. Some themes need customizations beyond what would be possible with Global Styles. These more unique styles continue to be defined in the theme CSS file.
How it works
Style configurations live in the “styles” section of theme.json. Rules can be defined for both “blocks” and “elements”, and these will be interpreted by Global Styles and generate the appropriate CSS.
The theme.json file also contains a section for “custom” configurations, inside the “settings” property. Settings defined in “custom” are output by Global Styles as CSS variables. These variables are used by the theme CSS files to style blocks and other elements.
Child themes of Blockbase are able to redefine these CSS variables by setting different values in its theme.json. The child theme inherits the Blockbase CSS, but with the new CSS variables defined in theme.json.
To avoid a child theme needing to redefine every value in the theme.json file, child themes can create a child-theme.json file and a script will generate a theme.json file, taking the defaults from Blockbase and updating it with the new values from the child theme.
This mechanism will be particularly useful as more customizations are added to Global Styles; in many cases it will only be necessary to update Blockbase itself and rebuild each child theme, to update the theme.json files. You can find out more about this in the theme’s readme file.
Code size
Aside from the benefits outlined above, we have also found that this approach to building themes has resulted in a drastic reduction in the amount of code we need to write for both the parent theme and any child themes. As much as possible we rely on the styles that come with Gutenberg, and only add extra rules where necessary. Blockbase CSS is, at the time of writing about 1000 lines of code, whereas Seedlet CSS is over 4000.
As more of these customizations are added to Global Styles, we will be able to remove the corresponding CSS from Blockbase, so we anticipate the size of the theme CSS to reduce over time.
How Can I Use This?
Blockbase is available on the Automattic themes repo. If there is interest from others in using this approach to build themes we can investigate making it available as an npm package for others to use.
Birgit Pauli-Haack and Grzegorz Ziolkowski discuss the Gutenberg 10.6 release, Features Coming to WordPress 5.8, Theme Settings in Theme.json and What’s in Active Development. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |🎙️ Pod Bean | CastBox | Podchaser | RSS Feed Show Notes Tweet that started a great discussion: […]
Birgit Pauli-Haack and Grzegorz Ziolkowski discuss Gutenberg 10.5 release, Block Patterns Directory, WordPress 5.8 release progress Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes WP Briefing: Your Opinion is Our Opportunity Do The Woo: WordPress Core and Gutenberg Blocks with Grzegorz (Greg) Ziolkowski. WP News: Curious about Full-Site Editing. […]
Akira Tachibana’s tweet Gutenberg Freaks (Japanese Podcast about WordPress & Gutenberg) My Name is by Grzegorz Ziolkowski Full-Site Editing Scope for WordPress 5.8 Full Site Editing Scope for WP5.8 Full Site Editing Go/No Go | April 14, 2021 Presentation: Full-Site Editing WordPress Mega Meetup 0008 (Full Recording) Query Quest: Call for Testing #5 FSE Outreach […]
In this episode I discuss Gutenberg 10.3, updates on Full-site Editing MVP and Block Patterns with my new co-host Greg Ziolkowski. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |🎙️ Pod Bean | CastBox | Podchaser | RSS Feed Show Notes Grzegorz aka Greg Ziolkowski About Grzegorz Ziolkowski Oleśnica, Poland […]
Birgit Pauli-Haack and Mark Uraine discuss a Plan for Full-site Editing Rollout, Gutenberg 10.2 release, and a Fond Farewell and Good Luck to Co-host Mark Uraine. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |🎙️ Pod Bean | CastBox | Podchaser | RSS Feed Show Notes Full-Site Editing Rollout FSE […]
In this episode, Birgit Pauli-Haack and Mark Uraine discuss Gutenberg 10.1, Dev Notes for WordPress 5.7, Full-site Editing Site Editor, and Testing Tools between releases. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes The master branch of the GitHub Repository was renamed to trunk Testing a Gutenberg Pull Request […]
In this episode, Birgit Pauli-Haack and Mark Uraine celebrate the 100th release of Gutenberg, WordPress Core 5.7, 5.6.1, and Testing Call for Full-site Editing. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes WordPress 5.7: A new dynamic hook to filter the content of a single block. FSE Program Testing Call #2: […]
In this episode, Birgit Pauli-Haack and Mark Uraine discuss updates to the Full-site Editing experience, and the releases of WordPress 5.7 Beta, Gutenberg 9.9 and WordPress 5.6.1. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes Full-Site Editing Outreach FSE Program: Bring your questions FSE Program: […]
In this episode, Birgit Pauli-Haack and Mark Uraine discuss block editor plugins, Gutenberg 9.8 release and goals for full-site-editing release. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes Case Study: A #Nocode Contributor Journey On The WordPress Gutenberg GitHub Repo. 24 hours Livestream of WordFest […]
In this episode, Birgit and Mark discuss Gutenberg 9.6 and 9.7 Releases, Full Site Editing, Pattern Directory and the upcoming Live Q&A. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes Gutenberg WalkThrough A YouTube channel by Mark Uraine Gutenberg versions 5.0 to 9.7 (YouTube) Gutenberg […]
In this episode, Birgit Pauli-Haack and Mark Uraine discuss WordPress 5.6, Gutenberg 9.5, Global Styles and the State of the Word 2020. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes Case Study: The Making of Open-Source Story by Yoast with Blocks – Live Q & […]
In this episode, Birgit Pauli-Haack and Mark Uraine discuss the upcoming Gutenberg Times Live Q & A, Full Site Editing, Gutenberg 9.4, and the Customizer. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Subscribe via Podcast apps or RSS Show Notes Next Live Q & A: Case […]
Birgit Pauli-Haack and Mark Uraine discuss what’s new with Gutenberg in Gutenberg 9.3 review the upcoming Block Editor in WordPress 5.6. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes The Queens Gambit WordPress 5.6 WordPress 5.6 beta 3 (News) WordPress 5.6 Development Cycle (Make blog) […]
In this episode, Mark Uraine and Birgit Pauli-Haack discuss WordPress 5.6, Tools for CSS and Theme.json, Twenty Twenty-One, and a mile long Changelog for Gutenberg 9.2. – Now with the right audio file. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes Need a Zip from […]
In this episode, Birgit Pauli-Haack and Mark Uraine discuss Gutenberg 9.1, Preparation for WordPress 5.6, Good First Bugs, Global Styles and Who’s Contributing the Latest. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes Dev Chat Summary: September 30, 2020 Editor chat summary: 30 September 2020 […]
In this episode, Birgit Pauli-Haack and Mark Uraine discuss Gutenberg 9.0, Global Styles, Query Block, Enhancements and more. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes Block Pattern Builder By BlockMeister Layout Grid Block by Automattic Card Component in Gutenberg Example of Media + Text block […]
In this episode, Birgit Pauli-Haack and Mark Uraine talked about the WordPress 5.5.1 maintenance release, Gutenberg 8.9, Block-based Widget Screens, G2 Components site and much more. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Show Notes G2-Components G2-Components Blog by Jon Q G2-Components Demo site Hallway-Hangout: G2 Components: […]
Login
