Grzegorz Ziolkowski and Birgit Pauli-Haack introduce Mary Job as the new co-host and discuss Gutenberg 12.6, Planning for WordPress 6.0 and Universal Blocks. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Birgit Pauli-Haack 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 co-host: Mary Job Mary Job’s Profile […]
Birgit Pauli-Haack and Grzegorz Ziolkowski discuss with their guest Matias Ventura restricting customization in a full-site editing world, Gutenberg 12.5 and Gutenberg changes coming with WordPress 6.0. 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 Twitch Stream session […]
Birgit Pauli-Haack and Grzegorz Ziolkowski discuss with their guest, Fabian Kägy Gutenberg 12.4, Developer Hours, and how to best implement extensibility of the block editor 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 Developer Hours – Register for […]
Birgit Pauli-Haack and Grzegorz Ziolkowski talk about WordPress 5.9 release and DevNotes for Full-site Editing and block themes, and Gutenberg 12.2 and 12.3. 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 Listener Questions Jessica Lyschik (Question tweeted) [Paragraph […]
Birgit Pauli-Haack and Grzegorz Ziolkowski discuss Gutenberg 12.1, Block Theme.json Builder, WordPress 5.9 Beta 2 and Twitter Spaces 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 David Gwyer has been working on a Block Theme Generator Ryan Welcher […]
Co-hosts, Birgit Pauli-Haack and Grzegorz Ziolkowski discuss with Ryan Welcher the Gutenberg 12.0 release, the updated WordPress 5.9 Release Schedule and a lot more. 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 Ryan Welcher, Developer advocate, sponsored by […]
We have been working on a plugin to help you create a Blockbase child theme. The idea is that you can use the existing tools to make changes to a Blockbase theme, and then export a bundle of templates and theme.json as a new child theme.
I tried to create a new theme called “Typewriter” using these tools.
Make changes to your site using the Global Styles editor. First I chose some new colors:
You can also use the Global Styles editor to update Typography and Layout settings:
Then I changed the fonts, using the Customizer:
I made all my changes using the Global Styles editor and the Customizer, but you might want to make more changes directly to the theme.json file after the theme is created.
Step 3 – Templates
Edit your templates using the Site Editor:
I managed to achieve everything I needed to in this theme using the Site Editor, but for some things you might need to edit the template files directly once the theme is created.
Step 4 – Export
Under Appearance there will be a new page called “Create Blockbase Theme”:
You can add the details for the theme here. These will be used in the style.css file. When you click the “Create Blockbase Theme” button, a zip file will be downloaded, which contains all the files for your theme. Here’s mine:
At this point you should have a zip file containing a working theme. You can upload this to your WordPress and activate it.
The theme contains an screenshot file, which you will need to update manually.
Now when you look at the frontend of your site it should look the same as it did before you activated the new theme. Here’s my new theme:
Further changes
Once the theme has been created you can unzip the theme zip file and make further changes to the theme files. This might be necessary to make more advanced changes to the theme. You can:
Modify and add configuration in the theme.json file.
Update the html template files in block-templates and block-template-parts
Add custom CSS to the file in assets/theme.css
Feedback
We’d love you to try this new tool and let us know how you get on in the comments!
Birgit Pauli-Haack, Grzegorz Ziolkowski discuss Gutenberg 11.9, WordPress 5.9 and Navigation Block. Surprise Guest: Riad Benguella 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 Announcements Nov 22, 2021 7pm EST / 0:00 UTC JerseyPress: What is Full-Site Editing?WordPress […]
Birgit Pauli-Haack and Grzegorz (Greg) Ziolkowski discuss this week’s Gutenberg 11.8 release, WordPress 5.9, the Navigation Block, Full-site Editing and the Plugin Machine. 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 Announcements Theme.json and block.json now available through […]
In this episode, Birgit Pauli-Haack and Grzegorz Ziółkowski discuss WordPress 5.9 Go/No-Go Decision, Gutenberg Releases 11.6 and 11.7, and ongoing discussions about Themes and Styles for the Editor. 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 Announcements Review […]
WordPress is introducing the Full Site Editor and with it new ways to build themes. These themes are called “Block” themes and integrate deeply with Gutenberg Blocks. These types of themes require the use of the new (and still in development) Full Site Editor.
The Site Editor is still being built, and block themes are in a nascent stage; they don’t yet offer the full gamut of features that will be available in the future. Block themes also require a very recent version of WordPress. How can we build themes which work with the classic dashboard to today and will continue to work with the Site Editor when it is more fully featured? This is the problem Universal themes are seeking to solve.
What is a Universal Theme?
Universal themes are an attempt to bridge the gap between the classic themes and block themes, by adding some layers to a block theme to make it work.
A Universal theme is a block theme that can use the Full Site Editor but can also be configured in a more classic way. That means that you can use classic WordPress tools, like the Customizer, Menus and Widgets dashboards as well as the Site Editor.
Templates
Block themes load templates from the block-templates directory. However classic themes load them from the root. To ensure that we don’t end up duplicating code and that users can move between the Classic Dashboard and the Site Editor, we use the function gutenberg_block_template_part inside our classic templates. For example header.php:
Because block themes use html templates, its not possible to translate any copy inside them. In most cases we can avoid putting copy inside our templates, but there are some cases where it is impossible, for example the 404 page.
In these cases we are simply providing a classic template instead of a block template so that the strings can be translated. We can avoid any issues of code duplication by using the approach described above for templates. Here’s the 404.php from Blockbase:
<?php
/**
* The template for displaying 404 pages (not found)
*
* @package Blockbase
* @since 1.1.1
*/
get_header();
?>
<main class="container-404">
<h1 class="has-text-align-center has-medium-font-size"><?php _e( 'Oops! That page can’t be found.', 'blockbase' ); ?></h1>
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'blockbase' ); ?></p>
<?php echo do_blocks('<!-- wp:search {"label":""} /-->'); ?>
</main>
<?php
get_footer();
Fonts & Colors
Global Styles allows themes to customize their font and color options via theme.json. This gives universal themes a way to modify the fonts and colors in a theme, by modifying theme.json. In Blockbase we have attached some hooks to the font and color controls in the Customizer so that when you modify them the changes are made in theme.json. This gives us a single source of truth for these settings.
Blockbase
We have created a universal theme called Blockbase, which can be used as a parent theme; any child themes created with Blockbase will automatically be universal themes. You can learn more about Blockbase at blockbasetheme.com.
Coda
Universal themes are a temporary measure. As the Site Editor continues to improve and more features are added, the need for universal themes will diminish. These wrappers will be made obsolete and in time universal themes will become block themes.
In this episode, Birgit Pauli-Haack and Grzegorz (Greg) Ziolkowski discuss Planning, Scope and Team for WordPress 5.9, Roadmap for WooCommerce Blocks, Gutenberg 11.5 Release and more 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 Announcements WordPress 5.9 Planning […]
Birgit Pauli-Haack and Grzegorz (Greg) Ziolkowski discuss Automattic becoming a sponsor of Gutenberg Times and Gutenberg Changelog, Classic Editor, Frontity, Theme.json, the Gutenberg 11.4 Release and more. 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 Announcements Birgit Pauli-Haack […]
Birgit Pauli-Haack and Grzegorz Ziolkowski discuss the preliminary roadmap to WordPress 5.9, Gutenberg 11.3 and Navigation Screen and Block 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 Preliminary Road to 5.9 by Matias Ventura Designing Intrinsic Layouts by […]
Birgit Pauli-Haack and Grzegorz Ziolkowski discuss Gutenberg plugin release 11.2, drag and drop, flex layout, core data shortcuts and modern WordPress 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 Chris Wiegman’s The Changing WordPress Ecosystem, Marcus Kazmierczak’s […]
Grzegorz (Greg) Ziolkowski and Birgit Pauli-Haack talked about the release week with WordPress 5.8 out the door, followed by the new WordPress.org Pattern Directory and Gutenberg 11.1. They also discussed what’s next with Gutenberg. 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 […]
With WordPress 5.8 launching on July 20th, it seems like a great time to round up some resources to help theme authors prepare for the future. By now, you’ve probably heard about block themes and the upcoming future of full site editing. Perhaps you have even begun to explore creating a block theme or adapting your current theme to some of the new features, like template editing mode. Whether you’re just starting out or already deep in the block theme world, the following resources should help you be aware of what’s to come and how to get involved in shaping the future.If you’re looking for a quick snapshot, it’s recommended to review the following for 5.8:
Since block themes are currently evolving along with the features to support them, it’s helpful to start by figuring out what will help you stay up to date with the latest happenings, as that makes sense for you. Here are a few options:
Since this is an area that folks across the WordPress community are diving into, there are some fantastic ways to keep in touch with what others are experimenting with, how they are solving problems, how they are getting started, and more. Especially during a time where we can’t meet up and look over someone’s shoulder at a WordCamp, hopefully these resources help bridge that divide even a tiny bit.
Check out the Theme Experiments Repo to see what others are building/doing to get started. You can even quickly create a blank theme to get started using resources within that repo.
While these are the resources we found most useful, we’d love to hear from you too. What resources have been helpful for you to explore block themes and the various pathways leading up to full site editing? Share in the comments so we can all learn together.
In the last post we shared the idea of a “universal” theme. This post looks at how we can use classic WordPress tools (in this case the Customizer) to customize a block theme, while saving these changes in Global Styles – making a universal theme!
Global Styles Everywhere
Block themes use a theme.json file to define many aspects of the theme, e.g. color palettes and typography. Gutenberg provides a tool to edit these settings (called Global Styles). When a user changes these values in the Global Styles UI, the changes are not saved back into the theme.json file but instead are saved to a Custom Post Type (CPT) in WordPress. Because this CPT can be modified using WordPress APIs, this gives us the power to make changes to Global Styles without relying on the interface in Gutenberg.
This simple idea is the basis for the color and typography customization options we have added to our universal theme Blockbase. The rest is just implementation details…
Implementation details!
When the Customizer loads, we create two new sections:
In each of these sections we create new settings and controls – each setting and control relates to a color/font option in Global Styles. We read the content of the theme.json file and use this to populate the settings in the Customizer. There is a helpful function in Gutenberg which merges together the theme.json settings with any user settings:
We read in an array of color palettes from the theme.json file and display these inside the “Colors” section:
Previews
One of the powers of Global Styles is that it relies on CSS variables. This makes it very easy for us to update the Customizer preview when the controls are changed. Some simple javascript injects new values for these CSS variables into the page, meaning that the preview updates instantly.
First we bind a listener to the control:
// For each of the palette items add a listener
userColorPalette.forEach( ( paletteItem ) => {
const settingName = userColorSectionKey + paletteItem.slug;
wp.customize( settingName, ( value ) => {
value.bind( ( newValue ) => {
paletteItem.color = newValue;
blockBaseUpdateColorsPreview( userColorPalette );
} );
} );
} );
This updates the global variable userColorPalette, which we then use to create our CSS variables:
function blockBaseUpdateColorsPreview( palette ) {
// build the CSS variables to inject
let innerHTML = ':root,body{';
palette.forEach( ( paletteItem ) => {
innerHTML += `--wp--preset--color--${ paletteItem.slug }:${ paletteItem.color };`;
} );
innerHTML += ';}';
// inject them into the body
const styleElement = document.getElementById(
'global-styles-colors-customizations-inline-css'
);
styleElement.innerHTML = innerHTML;
}
Saving
Customizer settings are usually saved in a site option or a theme mod. Since we are building a universal theme, we need to save these changes into Global Styles so that they are reflected in the Site Editor. The easiest way we found to achieve this was to hook into the customize_save_after action, read the settings from the controls, and then update the Global Styles CPT with the new settings. This code is used to get and read the CPT:
Color palettes are simply combination of color settings. When a user selects a palette we simply change all of the associated colors at once. This can be done with the Javascript API:
wp.customize.control( userColorSectionKey ).setting.set( color );
How can I use this?
The code above is just pseudo code, to explain the concepts. For a fully working example see Blockbase freely available in our free themes repository. This code has a GPL license and can therefore be copied and distributed freely.
However, if you are interested in building a universal theme I would encourage you to use Blockbase as a parent theme. This will mean you get all future improvements to your theme for free!
Ephitah
The Customizer gets a bad rap, and it’s true that it is clunky when compared to the direct manipulation that is possible with Gutenberg. Nevertheless, building these kinds of tools to update Global Styles without the framework of the Customizer would have been much more involved. There is some satisfaction in being able to take advantage of all the hard work that has gone into the Customizer in its final years!
Birgit Pauli-Haack and Grzegorz Ziolkowski discuss Developing Block Plugins, Gutenberg 11 and Upcoming WordPress 5.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 Building Blocks Plugins A Primer on Gutenberg Block Plugins for the WordPress Block Directory by […]
Birgit Pauli-Haack and Grzegorz Ziolkowski discuss Theme.json, Dev Notes for WordPress.5.8, Gutenberg 10.9 and Upcoming BuddyPress Release 9.0 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 & Theme.json FSE Program Polished Portfolios Summary FSE Program […]
Login
