Tag: Gutenberg

Leap into 2024 with these Site Editor Tools

annezazu

The Site Editor gives you a powerful way to visually create every part of your site and tell your story. It lets you handle everything from big stylistic changes to simple copy updates all in a single place. To help you make the most of this new way to WordPress, here are a few standout tools and features you’ll want to try. 

Command Palette

Think of the Command Palette as the ultimate shortcut tool, letting you do more with less clicks and without needing to remember where each option might be. It’s available across the editing experience, whether you’re switching between templates in the Site Editor or toggling open settings in the Post Editor, with specific contextual options depending on where you are. You can use the keyboard shortcut Cmd+K on Mac or Ctrl+K on Windows to activate it and get started. 

If you think of a command that doesn’t exist yet that would help with your workflow, open a feature request issue so we can consider adding it.

Read more about everything you can do with the Command Palette, including a list of available commands. 

Style Book

The Style Book helps you see all the blocks on your site as you style them. It’s built into the Styles section and can be toggled on/off as you’d like. This is especially useful when you’re aiming for design consistency for a client, trying to see how a change might impact a block that might not be visible, or wanting to get a different look at how a style variation will switch things up.

Work is also underway for the next WordPress release to integrate the Style Book into Style revisions to allow for an at-a-glance view of changes made. 

Learn more about how best to use the Style Book.

Styling shortcuts

Sometimes you get a design just right—the color contrast, the perfect padding, the exact font size. Instead of needing to manually recreate the design or copy/paste the block to fill in with new content, you have two powerful options built into the editing experience: copy/paste styles and apply styles globally for all instances of the desired block. 

Copying and pasting styles is perfect for more nuanced and smaller changes, like headings on a landing page that you intentionally want to be distinct. Applying changes globally is best for blocks like buttons and for changes that are likely to work well across layouts, like setting a specific border radius and color. This helps keep the creativity flowing and makes achieving design consistency across your site much easier.

Read more about the various styling options available. 

Distraction free mode

Just like an artist might need to take a few steps back to view their in-progress artwork, sometimes we need to get a different view of our site before diving back in. Distraction free offers you that alternate perspective with a pared-down experience that lets you focus purely on creating, like:

  • Hiding the top toolbar until one intentionally hovers over where it typically sits.
  • Removing many of the top toolbar buttons.
  • Automatically closing any open sidebars, like block settings and list view. 
  • Hiding the insertion point indicator, reducing visual clutter. 
  • Hiding the block toolbar for individual blocks.

It’s worth noting that this mode can be used when writing posts and pages too! For an added bonus and more views of your site, you can use the preview options to see how your site might look across different devices.

Learn more about making the most out of Distraction free mode. 

Patterns

Patterns are a collection of blocks that make it simple to add complex layouts and designs to any WordPress site without starting from scratch. They save time by reducing duplication and ensuring consistency. You can create your own, use theme-provided patterns, or lean on the Pattern Directory. 

You can also specify whether to sync your patterns so that one change applies to all parts of your site, or to keep them unsynced so you can customize each instance. For any patterns you create, you can assign categories to make them easy to find and organize. Use the Inserter with easy filtering options to add patterns to your content, and head to the dedicated Patterns section in the Site Editor to create or edit patterns to your liking. 

Learn more about creating patterns. 

List View

List View is the go-to tool for navigating between layers of your content, selecting exactly what you need, and getting a sense of how everything fits together. Similar to the Style Book and Distraction free mode, you can toggle it on/off as you’d like. It’s currently visible in the Top Toolbar and will remain open as you navigate through your site. Beyond providing a simple view of the layers of your site, there are more recent additions to List View that makes the tool even more powerful:

  • See previews of your images for Image and Gallery blocks reflected in List View to make it easier to find what you need.
  • The Escape key deselects blocks to make it easier to purely preview your content without any blocks selected. 
  • Lean on a keyboard shortcut for duplicating blocks quickly: CMD+Shift+D for Mac or Control + Shift + D for Windows. 
  • Drag and drop blocks at any level directly within List View.
  • Rename Group blocks and have the custom name reflected in List View for improved organization.

Here’s how a few of these improvements come together:

Learn more about using List View. 

As you explore these tools, remember that, except for the Style Book, you can use these features when writing posts and pages too. Expect the Site Editor and other tools to evolve with each release. To get a sneak peek at what’s planned for the next major WordPress release in March, check out the roadmap and stay tuned. 

Subscribe to WordPress News

Join other subscribers and receive WordPress news directly in your inbox.

Thank you to the contributors who collaborated on this post: Nicholas Garofalo, Lauren Stein, Joen Asmussen.

Designed with WordPress

Chloe Bringmann

The Gutenberg project has aimed to revolutionize how we manage web content as much as Johannes Gutenberg did the printed word. The project’s roadmap is comprised of four unique phases:

  1. Easier Editing — Already available in WordPress, with ongoing improvements
  2. Customization — Full site editing, block patterns, block directory, block themes
  3. Collaboration — A more intuitive way to co-author content
  4. Multilingual — Core implementation for Multilingual sites

With the upcoming release of WordPress 6.3, Phase 2 of the Gutenberg project is coming to a close; a journey worth celebrating.

This video is an ode to Gutenberg’s editing and customization phases, celebrating the new design tools and the possibilities they create. The piece encapsulates the exciting steps made in the past that propel the vibrant future of WordPress.

Everything showcased in the video is built entirely with the WordPress Editor, using currently available blocks, patterns, and themes. This new era has opened the ability for the design community to contribute to the project directly without depending on developers to translate their ideas into designs. Consider this an invitation for designers to join a new generation that embraces the diverse and expressive capabilities of WordPress.

The work that goes into Gutenberg is a powerful testament to the collaboration of coders, developers, and designers in our community. United, we strive to build WordPress into a realm of significance and lasting impact.

Video credits

Video credits: Tino Barreiro, Beatriz Fialho, Takashi Irie, Henrique Lamarino, Rich Tabor, Pablo Honey, Matías Ventura, and Holographik.

Thank you to the post authors Tino Barreiro, Nicholas Garofalo, Dan Soschin, Rich Tabor, and Chloé Bringmann.

How to Disable Gutenberg Styles on the Frontend

Jeff Starr

By default the Gutenberg Block Editor loads its default CSS/stylesheet on the front-end of your WordPress site. This is fine for most cases, but there may be situations where you want to disable the Gutenberg styles for whatever reason. For example, my free WordPress plugin, Disable Gutenberg, enables users to disable the Gutenberg Block Editor and restore the Classic Editor. Included in the plugin settings is an option called “Enable Frontend” that lets users enable or disable the Gutenberg CSS/styles as desired. This quick DigWP tutorial explains programmatically how to disable Gutenberg styles on the front-end.

Bonus: Disable Gutenberg plugin also enables restoring of Classic Widgets!

Why?

One reason why people may want to remove extraneous/unnecessary CSS/stylesheets from loading is improved site performance. So by disabling the Gutenberg CSS when it’s not needed, that’s one less asset that needs to load for every page request. That can have a huge cumulative effect on the performance of your WordPress site.

FYI the default Gutenberg stylesheet looks like this when included in the source code of your web pages:

<link rel='stylesheet' id='wp-block-library-css'  href='https://example.com/wp-includes/css/dist/block-library/style.min.css' type='text/css' media='all' />

So you know what to look for.

Disable Gutenberg styles on the front-end

Without further ado, here is the magic code snippet sauce to add to your WordPress-powered site. You can add this code using a plugin such as Code Snippets, or you can add directly via theme (or child theme) functions.php, or add via simple custom plugin. Many ways to add the following code:

// disable gutenberg frontend styles @ https://m0n.co/15
function disable_gutenberg_wp_enqueue_scripts() {
	
	wp_dequeue_style('wp-block-library');
	wp_dequeue_style('wp-block-library-theme');
	
}
add_filter('wp_enqueue_scripts', 'disable_gutenberg_wp_enqueue_scripts', 100);

This script disables the default Gutenberg stylesheet wp-block-library, and it also disables the theme-specific Gutenberg stylesheet (if applicable) wp-block-library-theme. That’s all it does, plain and simple.

Note: To re-enable the Gutenberg styles, simply remove the above code snippet.

Bonus: Disable other block stylesheets

In general, any WordPress stylesheet can be disabled using the WP core function, wp_dequeue_style(). For example, if you are using WooCommerce and the Storefront theme, you may want to prevent their related Gutenberg Block CSS/stylesheets from loading on the front-end. To do it, modify the previous code snippet so it looks like this:

// disable gutenberg frontend styles @ https://m0n.co/15
function disable_gutenberg_wp_enqueue_scripts() {
	
	wp_dequeue_style('wp-block-library');
	wp_dequeue_style('wp-block-library-theme');
	
	wp_dequeue_style('wc-block-style'); // disable woocommerce frontend block styles
	wp_dequeue_style('storefront-gutenberg-blocks'); // disable storefront frontend block styles
	
}
add_filter('wp_enqueue_scripts', 'disable_gutenberg_wp_enqueue_scripts', 100);

The wp_dequeue_style() function is what’s doing all the work here. It is very effective and can be used to disable any stylesheet that is registered with WordPress. Check the docs at WordPress.org for more details.

One for the road..

The code techniques so far are kept very minimal for the sake of clarity. But as you probably know, there is much more that can be done when customizing asset loading and so forth. For example, you can add conditional logic so the stylesheets will be disabled only under certain conditions.

To give you an idea of the possibilities, here is a “real-world” example showing how Disable Gutenberg conditionally disables the front-end styles depending on user preference in the plugin settings.

// disable gutenberg frontend styles @ https://m0n.co/15
function disable_gutenberg_wp_enqueue_scripts() {
	
	global $wp_query;
	
	if (is_admin()) return;
	
	$post_id = isset($wp_query->post->ID) ? $wp_query->post->ID : null;
	
	$options = get_option('disable_gutenberg_options');
	
	$enable = isset($options['styles-enable']) ? $options['styles-enable'] : false;
	
	if (!$enable && !disable_gutenberg_whitelist($post_id)) {
		
		wp_dequeue_style('wp-block-library');
		wp_dequeue_style('wp-block-library-theme');
		
	}
	
}
add_filter('wp_enqueue_scripts', 'disable_gutenberg_wp_enqueue_scripts', 100);

Again this is just an example taken from an actively developed plugin. So much more is possible, as WordPress core provides all sorts of useful functions with which to work. So have fun and build something creative :)

Note: The above code snippet taken from the Disable Gutenberg plugin is for example purposes only; so don’t try to use it on any live site. Instead if you want to explore, download the plugin and examine the source code.

Related Posts

More of our posts on Gutenberg Block Editor:


Widgets in WordPress 5.8 and Beyond

Chloe Bringmann

Copy and Design by @critterverse

WordPress 5.8 brings the power of Gutenberg blocks to widget areas — which means the highly customizable layout and styling options bring you closer to a WYSIWYG editing experience. I made a test site based on the oldie-but-goodie Twenty Sixteen theme, with three separate widget areas. In this post, I’ll highlight a few cool things that are now possible to do with your widgets and where things may be heading next.

A zoomed-out view of a single post with one sidebar widget area and two footer widget areas. The site content is about Marine Park Salt Marsh. A List View of blocks floating next to each widget area shows how the design is constructed.




Create Interesting Visual Effects With Overlapping Layouts and Duotone Images

Appearance-wise, users have a lot more control over widget areas than ever before — especially through the use of blocks with customization options like the Cover and Image block. Here’s what I can create in the classic widgets editor (above) versus what I can create in the new block-based widget editor (below).

Intersperse Widgets and Custom Code Throughout Your Visual Designs

Container blocks like Cover and Columns make it easy to weave dynamic or interactive elements into your designs. While this is a given for many widgets, the block versions of widgets can be easily wrapped and layered within container blocks to integrate them into your layout more fully.

In the example below, I tried placing a Search block in front of a Cover block, which creates a nice layered effect. I also inserted Custom HTML blocks within a Columns block to display different messaging depending on the time of day. (jQuery script)

Use Traditional Widget Layouts (Or Not) With Lots of Flexibility Over Title and Structure

Classic widgets have always had a lockup that includes a widget title. One cool thing about having blocks in widget areas is that you have complete flexibility over how titles appear. For example, you might choose to have a title over every widget, you might only want one title at the top of each widget area, or your design might not need titles at all.

Note: Some themes, like Twenty Twenty-One, are designed to flow content horizontally within widget areas. If you’re having trouble with a theme splitting your layout into columns, you could try keeping the lockup together by containing it within a Group block.

Side-by-side comparison of List View of a Sidebar widget area with and without grouped/nested lockups.

Copy & Paste Existing Layouts From the WordPress Pattern Directory

While patterns haven’t been fully integrated into the widget editors yet, one thing you can do is copy and paste patterns from the game-changing new WordPress Pattern Directory into your site’s widget areas. I used this horizontal call to action pattern from the directory almost exactly as is, with minor color and copy adjustments:

Footer widget area with a black box that reads, “Become a monthly patron” with paragraph text and a “Join now” button in a separate column. A painted image of waves hitting rocks is directly below with no space between them.

FYI: Patterns have not been curated for or integrated into widget areas yet, so you may run into some unexpected behavior — consider this feature to be a preview of what’s coming next for widget editing!

Configuring Theme Design with theme.json

Jeff Ong

Starting in WordPress 5.8, a new tool — “theme.json” — is available to use in your theme. Maybe you’re hearing about it for the first time, or maybe you’re testing and developing themes with it already. Either way, I’m glad you’re here because it’s an exciting time for WordPress themes.

This post provides a quick introduction to this new framework, and describes what’s possible by sharing a few practical tips and examples.

What’s theme.json?

Technically, theme.json is just a file that lives at the top-level of a theme’s directory. 

Conceptually, it’s a major shift in how themes can be developed. Theme authors now have a centralized mechanism to tailor the WordPress experience for site authors and visitors. Theme.json provides theme authors fine-grained control over global styles, block styles, and the block editor settings.

By providing these settings and controls in a single file, theme.json provides a powerful framework that brings together many aspects of theme design and development. And as the block editor matures and adds more features, theme.json will shine as the backbone for themes and the editor to work together ?. 

Why Use it?

It’s the future! But if you’re like me, you might need something more tangible to be convinced. Here are a few reasons why you might use theme.json today:

  • Control editor settings like color, typography, spacing, and layout, and consolidate where these settings are managed.
  • Guarantee that styles apply correctly to blocks and elements across your site.
  • Reduce the amount of boilerplate CSS a theme used to provide. Theme.json won’t replace your stylesheet completely — there will be instances where CSS is needed to give your theme that extra flare (transitions, animations, etc.). But it can greatly reduce the base CSS needed from the theme.

How do I use it?

The rest of this post demonstrates a few theme.json configurations you can try out. The examples use the tt1-blocks theme.json — the block-based version of this year’s default theme. 

If you’re starting with an existing theme, you might try copying a theme.json from the WordPress/theme-experiments repository (for example, the fse-tutorial theme by @poena) and adding it to the root of your theme’s directory.

Change the typography settings of your site globally

"settings": {
	"typography": {
		"fontSize": "30px",
		...

Making the change above in theme.json would result in the following updates to your theme’s body typography styles (before and after):

Changing the base color settings of your site globally

"styles": {
	"color": {
		"background": "#ffc0cb",
		"text": "#6A1515"
	},
	...
}

Changing spacing / padding settings on specific blocks

"styles": {
	"blocks": {
		"core/code": {
			"spacing": {
				"padding": {
					"top": "3em",
					"bottom": "3em",
					"left": "3em",
					"right": "3em"
				}
			}
		}
	}
}

Set a custom color palette in the editor for specific blocks like a button 

"settings": {
    "blocks": {
		"core/button": {
			"color": {
				"palette": [ 
					{
						"name": "Maroon",
						"color": "#6A1515",
						"slug": "maroon"
					},
					{
						"name": "Strawberry Ice Cream",
						"color": "#FFC0CB",
						"slug": "strawberry-ice-cream"
					}
				]
			}
		}
	}
}

Enable and disable typography controls

In the following example, the ability to supply a custom font size and line height for all heading blocks is disabled:

	"settings": {
		"blocks": {
			"core/heading": {
				"typography": {
					"customFontSize": false,
					"customLineHeight": false
				}
			}
		}
	}

What’s Next?

I hope this gives you a sense of what’s possible and where themes are going. The above examples just scratch the surface of what kinds of theme design configurations are possible, and I’m very excited to see what theme authors create.

If you’re interested in learning more, here’s the developer note on theme.json, and here’s the documentation for theme.json in the handbook.

Thanks to @kjellr, @chanthaboune, @priethor, @annezazu for helping with and peer-reviewing this post.

Coloring Your Images With Duotone Filters

Chloe Bringmann

Created by Alex Lende

Beginning with WordPress 5.8, you can colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images to integrate well with your themes.

Filters? Like on Instagram?

Duotone doesn’t work in quite the same way as Instagram filters. Whereas Instagram filters do color adjustments (color levels/curves and sometimes a vignette for the photo editors among us), the new duotone filters entirely replace the colors of your images.

Photo by Charles Pragnell.

You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights.

For example, a grayscale filter can be created by selecting black and white as shadow/highlight colors, and a sepia filter by choosing brown and tan.

Analogous colors can add a subtle effect and work well for cover backgrounds where the overlaid text still needs to stand out.

Much more vibrant and interesting effects can be made with complementary colors.

How Do I Add Duotone Filter?

The duotone effect works best on high-contrast images, so start with an image with a lot of large dark and light areas. From the block toolbar, use the filter button and choose a preset:

You can also choose colors from your theme’s palette, or a custom color of your choice.

In addition to the image block, duotone can be applied to both images and video in the cover block.

Duotone

Will This Overwrite Images in My Media Library?

Images and videos in your media library will remain unchanged. The duotone effect works using SVG filters and the CSS filter property, so the image or video is never modified in your library. On the one hand, this means that you can apply a filter to an image that you link to that doesn’t exist in your media library. On the other hand, this means that the filter won’t show up in RSS feeds or places that use the image URL directly.

Can I Add Duotone Colors to Blocks or Themes That I Develop?

The API for adding duotone colors to blocks is experimental in Gutenberg v10.6. Still, the documentation for using it in your own blocks can be found and will be updated under Supports Color in the Block Editor Handbook. Themes can add duotone presets with theme.json. More information can be found under Global Settings & Styles Presets in the Block Editor Handbook.

Try it Out Now Using the Gutenberg plugin

The duotone feature was released in version 10.6 of the Gutenberg plugin, so you can try it out now prior to the WordPress 5.8 release in July.

Thanks to @joen and @mkaz for assistance writing and reviewing this post.

Become an Early Adopter With the Gutenberg Plugin

Chloe Bringmann

Copy by Anne McCarthy (@annezazu) and Design by Mel Choyce-Dwan (@melchoyce)

In WordPress circles (whether it’s your local meetup, a trusted publication, or your networking group), you may have heard terms like Core Editor, Gutenberg, and the Block Editor used interchangeably over the last four years. And if you’re following contributor work on the project itself, you may also have heard some additional nuances—Gutenberg plugin, Gutenberg, or Block Editor. 

It can get a little confusing, so let’s take a look at four terms that will help you find your way: 

  • WordPress – WordPress refers to the open source software but also to the community that surrounds it. 
  • Gutenberg – Gutenberg is the code name for a multi-year project to update editing areas for the WordPress software.
  • Editor – The editor refers to a section of the software that allows you to update content on your site’s posts and pages. 
  • Gutenberg Plugin – The Gutenberg plugin is where early work to update the editor is shared.

The Gutenberg Plugin

Now that we’ve cleared up the definitions, let’s talk about the plugin. When might you use it? What would you use it for? You can think of it as an early access program or a “WordPress lab.” The plugin is updated every two weeks, which means that bugs that have been reported are often fixed and that what you see changes rapidly. 

The Gutenberg plugin also contains features that aren’t yet ready for their WordPress debut but are ready for curious users to test and provide feedback. This is a common practice that allows stable features to make it to your site in WordPress releases while allowing experimental features to be tested and refined. To get a sense of whether using the Gutenberg Plugin might be something you want to explore to get access to earlier features, check out the “What’s New” release posts and the Core Editor Improvement post series. 

Do I Need the Plugin to Use Gutenberg?

It depends on your comfort level! Generally speaking, it is not recommended to use the plugin on a site that has launched and is actively in use unless you’re very comfortable with the code side of WordPress. Fortunately, each WordPress release comes ready to go with multiple versions of the Gutenberg plugin. 

But if you are a keen beta tester who loves reporting feedback, or you feel comfortable navigating how to opt-in/out of the experimental aspects of the plugin, here are a few reasons you might want to dig into what the Gutenberg Plugin has to offer:

  • Test new features and give helpful feedback. For example, you can use the plugin to help test Full Site Editing. 
  • Get early access to the latest & greatest while navigating when to opt-in or out of experimental features. 
  • Prepare for the future whether you’re a theme author, plugin developer, agency owner, etc. 

Do you use the Gutenberg plugin and share feedback on GitHub? Thank you! This kind of feedback is what helps ensure stability in what’s shipped in WordPress releases. 

WP Briefing: Who Is WordPress?

Chloe Bringmann

In this episode, Josepha explores the five groups within the WordPress ecosystem and provides a high-level example of how they interact and support one another. As always, stay tuned for the small list of big things and a contributor highlight.  

Have a question you’d like answered? You can submit them to wpbriefing@wordpress.org, either written or as a voice recording.

Credits

References

Transcript

Hello, everyone, and welcome to the WordPress briefing, the podcast where you can catch quick explanations of some of the ideas behind the WordPress open source project and the community around it, as well as get a small list of big things coming up in the next two weeks. I’m your host, Josepha Haden Chomphosy. Here we go!

In the first episode of this podcast, I said that there’s a lot that goes into WordPress, that’s really hard to see. One of the hardest things to see about the WordPress project as you get started is the overall structure. There is quite a bit of documentation that can clarify the basics: the names of teams, what they work on, and where, and when they meet. The way that they influence and support each other can really feel like a bit of a mystery. So today, I’m going to break down the WordPress community into five big groups; I want you to keep a couple of things in mind. 

Firstly, these are high-level and based on my observations. Each of these groups can be further broken down into subgroups. So while you may not feel represented in this exact five, you are included if you were to dig a little bit deeper. The second thing to keep in mind is that the makeup of these groups is pretty fluid. Many community members find themselves in more than one group, but generally not far off. Some group two folks end up in group three, depending on the situation, people in group four can also end up in group five, and so on. As with so many things that I share, I’m not trying to insist that one size fits all. I’m not trying to put the WordPress community into a box. This is just a basic framework to understand how it all fits together. Alright, are you ready? I’m ready. Let’s do it!

Okay, I have a broad definition of the community, which I have mentioned before. I believe that the community is anyone who has interacted with WordPress, whether they know it or not. So, I’ll start from way out there and work my way in that first group; we’re going to call our Visitors. 

Visitors are people who arrive at a WordPress site to gain information or engage in an activity. Sometimes they know it’s a WordPress site, but most of the time, they don’t. The second group are Users, people who use WordPress as their CMS. So, that’s website builders, website designers, small businesses, content creators, and the list goes on and on. The third group I like to refer to is the Extenders. Those are people who extend WordPress through the creation of blocks, themes, plugins, and more. There are also people who teach WordPress to others through WordPress podcasts, and newsletters and tutorials. The fourth group I refer to as our Contributors is the people who contribute to the open source software and the infrastructure supporting it, but not necessarily the same people who contribute directly to their own product. And then there’s group five, Leaders. Those are people who help drive the vision and strategy for WordPress; the most notable member of that group is of course, Matt Mullenweg. And I’m also in that group. 

Each of these groups directly influenced the groups on either side. For example, a WordPress user is affected by both visitors and extenders. Imagine a content creator who shares their passion for photography through a WordPress site; this photographer may have visitors that need to purchase photos. In response, the user now has a need to make it possible for visitors to purchase photos on a site. So they go to what we consider the extenders, people who have built a plugin that supports that need. And as a result, that user can install that on their site. And they have have satisfied the need of the visitors to their site, the people who now can purchase photos. 

There are a lot of examples like this in the WordPress project. Every small pattern that you see is mirrored in the larger patterns across our ecosystem. And every large pattern you see in the ecosystem can be seen among our teams. It’s pretty cool to look at really. So, why should this matter to you? From a very practical standpoint, this matters for anyone who’s trying to learn more about contributing to the WordPress project. These five groups mirror very closely the five steps of volunteer engagement that we see across the ecosystem and from a more philosophical standpoint, it’s just kind of nice to know who your neighbors are. Without the influence and support of the groups around us, it can be hard to know whether we’re on the right track or not. So take a look to your left and look to your right, and get to know your partners in this project.

That brings us now to our community highlight, the segment where I share a note about contributors who have helped others along the way, or WordPress success story. This week’s highlight is from @CoachBirgit, Birgit Olzem, a longtime contributor and a friend of mine. Her success story goes like this. 

WordPress has allowed me as a mother of five to leave a toxic marriage for good. 

Later, the community picked me up when I became seriously ill. 

So I can say from the bottom of my heart, that working with WordPress has saved my life.

And now our small list of big things. I’ve got three things for you this week. I think that they’re all very important. And I hope you check them all out. The first one is a reminder that word camp Central America is coming up on April 15 and 16th. If you have not registered for tickets, you still have time, I will share a link to the registration page and the schedule in the show notes below. 

The second thing on our small list of big things is that the Gutenberg 10.4 release is coming out later this week on April 14th. It’s an important release because it’s when we take a look at the current iteration of full site editing tools that we have, and decide if it’s ready to get into the WordPress 5.8 release. There’s a post that has a little more information about that which I will share in the show notes below as well. If you haven’t checked out the Gutenberg plugin lately, obviously I think it’s a good idea to do that in general, but definitely a good idea to check it out now. 

The third thing on our list today is a reminder to check out our most recent block pattern tutorial, I’ll share a link to that in the show notes. It’s this kind of tips and tricks, tutorial, the “show me how to do it,” kind of thing in the style of CSS-Tricks. If you or anyone that you know might be interested in sharing a similar style of tutorial, there’s a link to a form in that show notes as well so that you can share with us your name and the topic that you’re interested in. We’ll take a look and see if it’s something that we definitely need to make sure our users know how to do. So, that my friends is your small list of big things. 

Thank you for joining in today for the WordPress briefing. I’m your host, Josepha Haden Chomphosy. I’ll see you again in a couple of weeks!

So you want to make block patterns?

Beatriz Fialho

If you’ve ever built something for the WordPress block editor — a theme or a plugin — you may have also heard about block patterns.

Looking at the patterns that come bundled with WordPress, I thought it would be nice to dedicate to them a short post. They’re pretty nice, useful shortcuts when you know them, but there’s a good chance you may not know what they are or why you might want to use them.

What’s a block pattern?

Patterns are collections of pre-arranged blocks that can be combined and arranged in many ways making it easier to create beautiful content. They act as a head-start, leaving you to plug and play with your content as you see fit and be as simple as single blocks or as complex as a full-page layout.

They live in a tab in the block library. You can click or drag and you’re able to preview them with your site’s styles.

Basically, a block pattern is just a bunch of blocks put together in advance:

	<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator -->
<!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div>
<!-- /wp:image -->
<!-- wp:quote {"align":"center","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote>
<!-- /wp:quote -->
<!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator --></div></div>
<!-- /wp:group -->

That’s also how you create them: just use the block editor to configure a smattering of blocks to your liking, and the hard part’s over.

How do I get them in the block library?

There’s more documentation in the handbook, but what it boils down to is this:

<?php 
/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
	'my-plugin/my-quote-pattern',
	array(
		'title'       => __( 'Quote with Avatar', 'my-plugin' ),
		'categories'  => array( 'text' ),
		'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
		'content'     => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
	)
);

?>

? That’s a snippet of PHP, which means you can drop it in a WordPress plugin, or perhaps more simply, paste it into the functions.php file from your theme. Done:

For patterns that include images, it’s worth thinking about where those are stored. The TT1 Blocks theme (which is a fancy name for “TwentyTwentyOne Blocks”) stores images in the theme library.

Now what?

The thing about a block pattern is, as soon as you insert it from the block library, it stops being a cohesive unit — now it’s just a smattering of blocks, detached from the pattern you created and meant to be customized to your liking. It’s a shortcut, not a template. That also means you don’t have to worry about switching themes or deactivating pattern plugins: the blocks you already inserted won’t go anywhere.

That being said, if you like this one pattern so much you want to use it again and again, with no customization at all, you can make it into a reusable block:

Reusable blocks are created, as the name implies, to be reused. The feature is a great way to store small bits of commonly used snippets that you can edit in one place to update in all. “Follow me on Twitter,” “Article series,“ or “Subscribe to my podcast” are great examples of that.

What makes a good block pattern?

Patterns, as they ship today, are limited by the features available. If the block editor doesn’t allow you to customize letter-spacing, your block pattern can’t either. While the Global Styles project will expand what’s to blocks, in the meantime, we have to work with the available tools.

Even then, with the most basic ingredients — color, photography, typography — it is possible to do a lot:

Three columns with images and text
Media and text with image on the right

I designed these patterns to potentially land in WordPress core, which all have a few properties in common:

They share a theme.

You can think of a pattern as a section of a website: it is meant to be part of a whole, and so it works best when it can exist in the context of other patterns that share the same theme. There are a few sharing a Nature theme in the patterns above, a few sharing an Art theme, and others sharing an Architecture theme. When seen together, it becomes easier to see how you might be able to piece together multiple pages of your site, one page at a time.

They share a minimalist color palette.

By being parts of a whole, patterns will inevitably land in a context that uses different colors. With a reduced color palette, there’s both a better chance of fitting in and less to customize to make it just right.

The best patterns do things you might have not done otherwise.

Whether that’s images offset to create a unique silhouette, or just using less visible features (like fixed positioning in the Cover block), it’s a way to surface creativity.

Tip: You can use any block in your patterns, including blocks that came from a plugin. And if that block is in the block directory, it will prompt you to install it with one click if it’s missing from your self-hosted WordPress:

Here’s a plugin for you

<?php 
/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
	'my-plugin/my-quote-pattern',
	array(
		'title'       => __( 'Quote with Avatar', 'my-plugin' ),
		'categories'  => array( 'text' ),
		'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
		'content'     => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
	)
);

?>

In case you want to make patterns, this example plugin features two of the patterns you saw above. Drop it in your plugins folder and they should show up in your block library.

Installed pattern under “Text” Category

Feel free to tweak it, customize it, and make it yours. It’s GPL, after all!

Thank you @joen for the help writing this post.

WP Briefing: Talking Full Site Editing with Matías Ventura

Chloe Bringmann

In this episode, Josepha is joined by Matías Ventura, also known as “the spark behind the vision of Gutenberg.” Josepha and Matías discuss full site editing and answer your questions, from “is full site editing a standalone plugin?” to “will full site editing break my current site?”

Have a question you’d like answered? You can submit them to wpbriefing@wordpress.org, either written or as a voice recording.

Credits

References

Transcript

Hello, everyone, and welcome to the WordPress briefing, the podcast where you can catch quick explanations of some of the ideas behind the WordPress open source project and the community around it, as well as get a small list of big things coming up in the next two weeks. I’m your host, Josepha Haden Chomphosy. Here we go!

Josepha [0:41]: This month, we have a bonus briefing, so I’ve asked my dear friend and colleague Matías Ventura to join me. Matías was recently called “the spark behind the vision of Gutenberg.” With full site editing coming our way in 202, I asked if he would join me for a quick Q&A. Welcome, Matías. 

Matías [0:56]: Hello, hello! Thanks for inviting me. It’s a pleasure to be here.

Josepha [1:00]: Well, I’m delighted to have you. And I think that we have a lot of excellent questions. All right, so Matías, we actually ended up with questions in about three different groupings. And so I’m going to start with the “what is it about full site editing,” sorts of questions that people had. We’re gonna work our way into “what are we doing with it?” and then “how are we planning on getting this out the door?” Then, a couple of big picture questions that people asked. We’re just gonna leap right in this full site editing part of the Gutenberg plugin, or is it a standalone plugin?

Matías [1:39]: Okay, we’ll start with the basics. Full site editing is part of the Gutenberg plugin right now. I think it’s important to mention that full site editing is like an umbrella for several projects that we’re working on. They are all aiming to bring blocks into more parts of your site so that editing becomes easier and more expressive, and so on. So full site editing right now encompasses adding a ton of new blocks. I think we have around 20 new blocks coming in, including navigation query, site, title, logo, etc. There’s also the interface to interact with templates outside of the content; that’s another big part of the full site editing project. We also have a lot of new design tools included, many of these have been released in previous major releases, but they still comprise a strong part of what full site editing is. We also have something called Global Styles, which aims to allow people to configure the visual aspects of blogs across the entire site, not just on any individual blog. And of course, then there’s a whole layer of how we utilize these tools. It can get complex because there are many layers and projects that need to come together. So yeah, all of these are accessible through the Gutenberg plugin right now.

Josepha [3:07]: Yeah. So it’s not a standalone plugin. If you wanted to check out full site editing the site editor experience as it is now, you would just have to make sure you had the Gutenberg plugin on your site. Right?

Matías: Yes, correct.

Josepha:  So a couple of the questions related to this are how exactly do I enable it on my site? And what is the easiest and safest way to try this on my site? And I think the answer is, is right in there. It’s in the Gutenberg plugin. And so if you have that plugin, you don’t need the testing plugin or anything else to make that work, right?

Matías [3:51]:  No, you like, you might need to install a theme like Twenty Twenty One blocks that unlock some of these new interfaces that we just talked about. Like other of these pieces are available for anything. But some of these, like the interface to edit templates, right now only talk with things that know how to express their desire. 

Josepha [4:14]: And I think we have less than 10 themes right now that do that, but I’ll leave some links to at least 2021 blocks in the show notes. And then, if there are another one or two themes that I can find, I can add those in there as well. 

So you have to have the Gutenberg plugin; you have to have a theme that works with that site editor kind of experience. And then you’re safe to try everything out. It shows up in your left toolbar just like any other thing, like if you were working with plugins, or if you were adding a post or anything else, right?

Matías [4:51]: Yes, correct. And so, some of these details are being worked on right now. Like how and where you access things, and so on. These things are subject to change, but right now, you have this site editor beta in the sidebar when both you have the plugin running and a theme that’s capable.

Josepha [5:10]: Yeah. Excellent note. If you are running this on a production website, I would recommend you not do that unless you are very, very good with WordPress. It’s a really safe and easy thing to test and try out. But because it is still in beta, I recommend always putting it on a test site. I have a couple of different test sites that I run on myself. Another question that I had was, “will full site editing slow down my site?” And I think we have some refreshed performance tests coming out about that. And maybe they’ll be out by the time we publish this podcast.

Matías [5:49]: Yeah, I mean, like the performance has been one of the major focuses for the whole project. In many cases, it should speed up things because we’re like, I think one of the big pieces that these projects bring into the picture, especially for themes, is that it allows only the necessary assets to be loaded on the front end. For example, if for a given page, there are, I don’t know, 10-15 blocks being used, you would only get the CSS and scrapes and so on related to those blocks. This can cut down on a lot a ton of CSS that themes used to end queue on a side, particularly if you were trying to customize many widgets and so on, like a lot of themes have the full styles or multiple widgets, even third party plugins, and so on. So one of the advantages of having this blog system is that we can know at the time of rendering what blogs are being used and only load those assets. 

Josepha [6:50]: Excellent. Another big question that we have is, “does full site editing work with the classic editor? And does it work with other builders?” I think that’s a really big answer if you’re going to get super deep into it. But I think that the short answer is yes, it does. Is that fair?

Matías [7:08]: Yeah, I don’t think it touches a bit on that full site editing is not like a single thing. There are multiple projects around it. So again, like the template editor that only deals with blogs, it doesn’t have a lot to do with a classic editor. But the classic editor use for both doesn’t change anything at all; like the same way that when the block editor was introduced, it didn’t change how you could still write posts in the classic editor. You will still be able to do that.

Josepha [7:41]: And if you are brand new to WordPress person, or, I mean, I guess at this point, you don’t have to be super brand new. If you’re fairly new to WordPress person and have no idea what we’re talking about when we say the classic editor, you don’t really have to worry about it either. You don’t have to go and find out what that is; the block editor that you have right now works perfectly for what you’re trying to do. So if you don’t know what I mean when I say classic editor, don’t worry about chasing it down either. 

I think that this last question we accidentally answered earlier, but I’m going to go ahead and ask it anyway since I received it. “I keep hearing that you can use the site editor with the 2021 theme. But I don’t seem to be able to. What am I missing?” I think the answer is that there’s the Twenty Twenty One theme shipped with the WordPress release 5.6. And then there is the Twenty Twenty One blocks theme; those are two different themes. The link to the Twenty Twenty One block theme is going to be in our show notes this time around. And so, if you have been trying to use the full site editor with Twenty Twenty One and not succeeding, try the link to the one below. And I bet that that will work for you.

Matías [8:50]: Yes, that’s correct. 

Josepha [8:51]: All right, excellent. Well, that brings us kind of into our second set of questions, which is about how we are doing it. The first one that folks have is “will full site editing be on by default in the next release. In this context, the next release is WordPress 5.8. But I think it’s a safe question to ask if full site editing will be on by default in the release that it’s planned for.

Matías [9:15]: Yeah, and for this, I need to go back to the same principle of many projects because there are many pieces of full site editing, and we have been merging them in major releases, particularly like the blocks and the design tools. There are more coming in that we want to make accessible as soon as possible. The full experience that requires a theme to opt-in to templates using blogs won’t be by default; it requires a specific theme running. A lot of these details we’re still like determining exactly what projects are ready to be merged and so on. But yeah, if you have a theme right now that works the way you want, it doesn’t change anything there. If anything, it adds some more capabilities and more customization tools, and so on. And the theme can also regulate how much they want to incorporate.

Josepha [10:13]: Matías, you’ve mentioned a couple of times in this podcast so far like this is a really complex and really complicated part of this work. And just for anyone out there who’s either encountering Gutenberg or full site editing or this podcast for the first time, I think a tiny bit of context that’s worth having here is that Matías and I have been working on this together in various capacities for like, five years. And Matías has probably been working on this for practically a decade. So, when we say that this is a really complicated problem, and when we say that this is a complex set of issues that we’re working with like, it is all that we have been thinking about for I want to say at least the last three or four years, but certainly it’s all that we have been trying to untangle for quite a bit of time before that as well. So we don’t take it lightly when we’re like, “this is complicated;” we mean it. It’s really complicated. And we’re trying our hardest over here as WordPress. 

The next big question, since we’re all stuck in the “it’s very complicated,” part of things is the question, “will this update break my current site?” Like, if I have a site that is updated and ready, and it’s exactly as I wanted it to be, and it took me two years to get there will full site editing, whichever release it’s in. Currently, 5.8 is what we’re planning for. Will that break anything on my site as I know it right now?

Matías [11:44]: No, not at all. One of the major things that the WordPress team, the WordPress community, always cares so much about, never to break things. Many of these things are stepping stones that you can adopt, as we’ve talked about full site editing. But for example, we also have a few concurrent projects around the widget screen and the navigation screen that are meant to bring blocks into existing interfaces. So again, the theme doesn’t need to change, and a lot of care is being put into making this more like you’re unlocking new features, and nothing really breaks or falls apart.

Josepha [12:23]: This update, like all the other updates, should have minimal, minimal impact on what you have to actively fix on your site. Every once in a while, a bug is gonna get by. We can’t say that we’re 100% perfect with not breaking things. But also, we always and I and I know that we’re planning on this for our remaining releases for the rest of the year. At the very least, I can’t imagine we’d ever change it. But after every major release, we always make a plan to have a minor release within the next one or two weeks. Because we know that a broken thing on a site is really incredibly impactful, even if you’re only 1% of the sites that had that happen to it. And so I think that’s true in this case, too. And getting that feedback back from all of the people who are actually using WordPress is the thing that makes us be able to kind of move quickly when we do see those problems. 

One of the questions that we have been getting is, “can I see a live preview without saving the changes that I made?” When I got this question, I didn’t actually understand it. And so I went and looked at a site without the Gutenberg plugin on it, and then a site with the Gutenberg plugin on it. And of course, on sites without Gutenberg, without the block editor, without full site editing, when you are looking to preview, you have the option to open up your preview in a new window. And you don’t have that with Gutenberg because it’s supposed to be a true WYSIWYG editor. A true what you see is what you get, editor. I think that the answer to this is, yes, you can see a live preview without actually saving the changes on the front end of your site. But you don’t actually have to reload anything. You don’t have to open it up in a new window. You don’t have to, like, actively click “please show me a preview” because what you see in your editing screen should be what you see at the end of your app as an end-user.

Matías [14:28]: Yeah, that’s the sort of the main gist to it. Yes, the site editor is built so that it always reflects the front end as truly as possible, so that’s one layer. Also, the preview tools should allow you to see in different devices like mobile breakpoints, and I don’t know if they will have breakpoints and stuff like that. There are a lot of things in the current interface that is just not enabled. There are some challenges in the sidebar. Because the site editor is not just focused on a single post, it’s focused on the entire site. So, there can be many, many changes that need to be shadowed for the site. 

If you’re changing the site title, some of the global styles, aspects, and so on need to be orchestrated. So, to see in the previewing new window, there are some challenges there to integrate. Again, the interface is not final yet; a lot of these things are still being tweaked and improved. There are many things from the regular post editor that are not enabled yet. But they will be enabled. So yeah, it’s a, I guess, it’s not a simple thing to answer. Because, again, the idea of previewing the site that’s core to the whole project is that you’re always interacting in the same way that when you’re in the customizer, you’re seeing the preview all the time. That’s the main scope of this project,

Josepha [15:54]: Excellent. Changes like that changes to your workflow can be really hard to get your mind around, especially if part of that existing workflow was there to create some confidence in what you’re seeing with your users. And so I understand. Now that I’ve researched that question a bit, I see where that’s coming from. Based on existing workflows and existing patterns that we have for ourselves in WordPress, will we need to have a theme to use the full site editor?

Matías [16:33]: I think we’ve already covered some of these. And again, they are tools that can work on any existing theme. There is other stuff that needs space-specific themes to opt-in into these tools, like blog templates and so on.

Josepha [16:50]: Yes, I think the question that we have next, because I see that the literal next question I have is actually something we have covered; just because we’re being pretty conversational about it, not because anyone already asked the question. So I’m actually going to skip to the last question of this section that I received. I got this next one via Twitter. The question is, “how do you view the role of themes once full site editing is fully rolled out and all the page elements (content, headers, widgets, footers, etc.) and all the views are managed via blocks and block patterns? Will things become typographic and block styles?”

Matías [17:28]: I think this is a great question because it goes to the heart of, why are we doing all this. One of the main reasons is to empower users more. WordPress has been democratizing publishing for a while; this is another step into allowing themes to get more customization tools and more control over their site if they want to. I think the recent call for testing has focused on the 404 page, for example. That’s something that forever has been locked away from users. And it’s also something that, as a theme developer, and I used to develop themes a long time ago, that was one of the things where you decide what sort of approach you take for the 404 page. Maybe sometimes you want to have something more whimsical. Sometimes you need something more serious. And committing to one when you can have such a diverse and broad user base can be challenging. With these, it becomes as easy as offering a few different patterns for that template. Then the user will always be able to change the copy and modify something. So again, it opens up a lot of these things that used to be locked down. However, from a theme perspective, I think this doesn’t reduce the theme at all. If anything, it allows the theme to focus less on coding and functions and more on design expression and aesthetics. I don’t think that would ever be exhausted. That will always remain as diverse as humans are interacting with WordPress. And so it’s not that I don’t see it’s just as like, typographic and block styles. How do you express a template, how do you express the structure, what choices you quote, what choices you make as a theme builder? And of course, there are many degrees of control there. Because a site maintainer may not want the 404 template to be editable, that sort of control will always be present.

Josepha [19:38]: Yeah. And really fast. I have to add a caveat to a thing that you said in there. For anyone who’s listening keenly, you may have heard Matías say that the users can update any of the content there – any of the copy. In this context, we’re talking about users as in the people who are maintaining the site, not people who are visiting your site. Visitors to your site will not be able to change any copy on your page unless you’ve done something very interesting with your WordPress site, which is also fine if that’s what you prefer to do. By default, your visitors can’t change everything on your website, which is good news, frankly.

So I’ve got one logistics question, which I’m happy to take. And then one is kind of a big picture question that I also got from Twitter. “What about the classic editor block; what is going to happen to that? And when will we know?” So ages and ages ago, before COVID? I think so. Probably maybe a couple of years ago, Matt said that the classic editor plugin would be supported through the end of 2021. And that is still the case; there will be active support on that through the end of 2021. After that, it will not be actively supported anymore. It won’t be removed from any place that you can get access to right now. In a “this is the end of its lifecycle” sort of way, we just won’t have anyone who is currently committed to maintaining that plugin anymore. So that’s what’s happening at the end of the year. And yeah, at the end of 2021. The big question that we have is, “why is full site editing being so rushed?” I think this is a bit of a loaded question.

Matías [21:32]: Yeah, I think I think it’s still a fair question, though. I think we’re dealing with two things here. And one is ensuring that we release things in the best state possible. And also, some of the urgency is to offer tools that we know that people lack right now and that could really benefit from. Making that determination is very tricky. The full site editing project has been in the works for the last couple of years. If we count the initial phase of Gutenberg, that’s four to five years. We’ve been doing many calls for testing, which I think have been super useful to catch issues and reflect as a community on where things are going; how do we integrate with these? How do we use it? What are the shortcomings? What do we need to do? Based on all of these, we’ll continue to make decisions on when things become ready. We’re not committed to releasing something that’s not in a good state. And I think we will always be very careful about that. There are these two competing senses of the urgency – of getting some of these tools out, and because it also benefits from the feedback loops. I always say that, in many ways, the initial phase of Gutenberg, to me, is not finished. We took the initial two years to do the 5.0 release, the initial block editor, and so on. But, it’s still being improved at a very fast pace, among all the recent major releases improvements to the editor were included; that will continue to be the case. In many ways, phase one is not finished. And the moment we choose to release some of these tools or editing tools, it won’t be finished either. They will need to continue to grow, mature, and incorporate a lot of the feedback. Even the things that the ecosystem is building around. I’ve seen a few themes already that are incorporating a blank canvas template so that you can use them in some pages and take over and do everything with blocks. So even the community and ecosystem as a whole is also sort of paving the way for what needs to come.

Josepha [24:06]: I think from my perspective, and of course, I’m on the people side of things, the communication side of things, the logistics side of things; I have a frequently a very different view from what a lot of other folks are seeing. And so from my side of things, I have to say, I’m communicating about this change in a really broad way, which has not been happening since 2019 when we started the work. We’ve been communicating broadly with the WordPress community, but not with everybody who uses WordPress. So, I think that for a lot of people, this looks like a project that we started really actively working on in the last six months or so. And now we’re just racing toward a finish line. I think that there’s, there’s not been a lot of awareness of everything that’s gone into it. And so, on the one hand, it feels a little less rushed to me knowing the full length of the history on this. But also, as you said, I really think that this gets a bunch of tools to people who otherwise have not been able to accomplish these things in WordPress or otherwise. I am so anxious to get something to people who really can benefit from this change the most. And it’s the nature of the open source, right that like, one, as long as you have users, you’re going to have stuff you have to fix in your software. So we’re never really, really going to be done with this; there’s not going to be like a done point of WordPress. And the second thing is, I think it’s generally true that you don’t really start getting full user feedback until after you have launched your major release. I think that we see that a lot in open source software; you can bring in as many people as you think you can in your user tests heading up to it. And in your accessibility tests. And, in general, quality assurance tests. You can bring in a lot of people and still not have gotten the full understanding of the various niche use cases that your users will bring to you. Because at this point, we’re like 40% of the web. And that means that we’re serving this majority collection of increasingly minority voices and niche voices in the space. And so, a little bit I feel a sense of urgency; I feel a bit of anxiousness about trying to get this out there for one, to get the tools in the hands of the people who can benefit the most from them, but also so that we can start really getting the full stress test of this software out and get that feedback in so that we can really build something responsive to what our users need our long tail, “anyone who ever uses WordPress ever,” definition of users. And so, that’s why I feel a sense of urgency around it. Even though you know, as I said, you and I have been working on this for like five years, and you’ve been working on it for a decade or something. I actually don’t know how long it’s been worked on.

Matías [27:35]: Now that makes me feel a bit old.

Josepha [27:40]: Nobody makes Matías feel old. He is a lovely, wonderful colleague. Sorry, Matías, If I made you feel old.

Matías [27:46]: No, that’s totally fine. I also want to add that full site editing is not like a single toggle that’s going to drop into a major release. So I think that’s important to consider, I think this entire year is going to see a lot of these tools being, and sometimes the sort of the end-user is not the, again, the site maintainer. Still, you can also be the theme developer; I think there are many tools that would be empowering for theme developers to use. Again, we mentioned there are like five to ten themes, block themes right now. That needs to grow a lot, and that only grows through these sorts of feedback loops. And the theme community pushing things forward and seeing where things can lead to. I’m very excited about the pattern directory integration because I think that can also combine with blog themes in very powerful ways. Imagine if, I don’t know many of these patterns that are very common on the web and very needed, that if we can refine them together with a second community and make them available across themes, you can combine a header from one theme with a content of another; all these sorts of mixtures could happen. All of this needs exploration, the creativity of the entire community, and so on. In that sense, getting all these tools, even if it doesn’t immediately change anything for like the site itself, starts to unlock a lot of things. 

Josepha [29:27]: I’m going to take a bit of your answer from there and tie it all the way back to your first answer that we had when you joined me today. And say, I think you’re absolutely right. We have a set of users in our theme authors and our plugin developers as well that we desperately need to get looking at this set of tools. I hope that what we are shipping in the first iteration of this serves as an opportunity for all of those theme authors and agency owners, plugin authors, WordPress site configurers freelancers. Like, I really hope that this puts it into a really accessible, easy-to-access space for them so that they can do those experiments based on what they know their users need the most. They are the group that has the closest access to site maintainers. And what they need compared to, for instance, me or a potential you like we have a lot of information, you and I, we do a lot of tests, we have a strong sense of what is needed at the moment, but we don’t have as a close connection that our theme and agency and plugin folks all have. And so that’s another part of why I’m so excited to get this out in the current iteration of it.

Josepha [31:04]: That was a lot of questions in a little bit of time. This is going to be officially my longest WordPress briefing. Matías, I am so glad that you were able to join me today. And I think that everyone’s going to be really, really excited to hear your answers to these questions.

Matías [31:23]: Thank you for having me.

Josepha [31:25]: All right, my friends. That brings us into our small list of big things. I’m going to skip our community highlight today just because we had a slightly longer word press briefing in our bonus iteration today. But the small list of big things. The first thing is WordCamp Central America is coming up on April 15; there is a registration link in the show notes that you can access your tickets with. I recommend that you go; we’ve got a lot of excellent speakers coming up there and a lot of good content and good training and learning for y’all. The second thing is that Matt Mullenweg and I have listening hours coming up with the community in the first week of April. I’ll add the link to register for those in the show notes as well; it’s just a few minutes for you all to stop by, check-in, see what’s going on, and share some celebrations or concerns with us. And I hope that I see you there. 

So that my friends is your small list of big things. Thank you for joining in today for the WordPress briefing. I’m your host, Josepha Haden Chomphosy. I’ll see you again in a couple of weeks!