Become an Early Adopter With the Gutenberg Plugin

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?

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 [email protected], 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?

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

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 [email protected], 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!

Did You Know About Reusable Blocks?

Created by Joen Asmussen, @joen

The WordPress block editor (a.k.a. Gutenberg) comes with a feature called “reusable blocks.” They are blocks, saved for later, edited in one place.

Have you ever wanted to:

  • Re-use the same snippet of text across posts and pages?
  • Save complex layouts to spare you having to copy/paste from one post to another?

Reusable blocks can do these things.

Like templates, you mean?

Not quite. Think of reusable blocks as snippets of globally synchronized content that are personal to you. You can edit all your reusable blocks in one place, and any post or page you inserted that block into, get the updated version as well. 

Where you might use templates to structure your website, you can use reusable blocks to structure your content. For example:

  • A testimonial on your homepage and your product page.
  • A “this post is part of a series” box that you insert part-way through your article.
  • A “Follow me on social media” section you can weave into the prose of your popular article.
  • Complex but static blocks, such as a “Subscribe to my newsletter” box, a contact form, a survey, quiz, or polls.

Key properties are that reusable blocks are unbeatable when you want to reuse a snippet of content, edit it in one place, and have the changes propagate to every instance.

Show me how

To create a reusable block, open the block editor and create the content you want to reuse:

Now select the content you want to turn into a reusable block, then click the three-dot “More” menu and choose “Add to Reusable blocks.”

Voilà, you’ve now created a reusable block. From now on, you can find this block, and any other you create, in the “Reusable blocks” tab in the block library:

This is also where you can insert the newly created block on any of your posts or pages.

Where do I edit my existing reusable blocks?

To edit a reusable block, select it and make your edits. When you make an edit, the Publish button will have a little dot indicator:

This dot indicates you’ve made a global change that potentially affects posts beyond just the one you’re editing, the same as when you’re editing templates. This lets you confirm the change was intentional.

Another way to edit your reusable blocks is to click the global three-dot “More” menu and selecting “Manage all reusable blocks”:

This takes you to a section letting you edit, rename, export, or delete every reusable block you created. 

What else can I do?

Here are a couple of tips and tricks you can leverage to get the most out of reusable blocks.

Give them a good name

When you name a reusable block, you are essentially choosing your search terms, as the name is what you search for in the block library (or when you use the “slash command,” typing / in an empty paragraph):

Avoid names such as “Gallery” or “Image,” as that’ll be annoying when you just want to insert one of those. You can avoid that with a unique name, such as “My author biography.”

Insert in the best place of your content flow

One obvious benefit of reusable blocks is that they are just blocks, just like everything else in the block editor. That means you can insert it anywhere in your content. You might want your rich author biography to sit at the top or bottom of the post, but This post is part of a series box that might sit well two or three paragraphs not to disrupt the reading flow.

A design shortcut

Maybe you created a complex layout you’re happy with, a call to action with the right image and buttons, and it took a while to get it just right. Go on and save it as a reusable block: even if you mean to insert it only to convert it to a regular block, it might still save you a minute. 

To convert a reusable block to regular (blocks, select it and click the “Convert to regular blocks”:

Design by Beatriz Fialho.

Tip: You can also find some nice patterns on Gutenberg Hub or ShareABlock.

Take it with you

Need to move to another site? You can both export and import reusable blocks. Go to the Manage all reusable blocks section from the global three-dot “More” menu, hover over the block you want to export, and click “Export as JSON”:

The downloaded file can be imported on any WordPress 5.0 or newer website.

Try it

Create a draft post and play around with Reusable Blocks to see how you might start using them. You can always delete them when you’re done playing.

You can test importing and using a small reusable block I created as an example. It’s a “Further reading” block that shows the four latest posts from the category “Featured”:

It might work well as a highlight in an article, giving the reader something new to read or awareness of your other content.

The videos in this post show the reusable blocks flow in the upcoming WordPress 5.7.

Download the block from this gist, import it to your WordPress site, then customize to make it yours.

How to make the transition to the block editor (from the classic editor) in WordPress

Are you considering switching from the classic editor to the block editor? That’s great, as the block editor will give you lots of possibilities to create awesome, high-quality and high-ranking content! Not sure how to go about this though? Don’t look any further. Here, we’ll guide you through the process of making the switch to the block editor step-by-step.

Did you know we just released a free online course about the WordPress block editor? If you want to learn all about creating awesome content with the block editor, you should definitely check it out!

Why should you transition to the block editor?

Before we explain how to make the switch to the block editor, let’s see why we think you should make the transition to the block editor. Using the block editor has quite a lot of benefits. For example, the block editor makes it easy to:

  • create user-friendly, high-quality content;
  • give your content a great structure, look, and feel;
  • add structured data to your posts and pages, so your content might show up as a rich result in the Google search results.

Read more: The block editor: Why you should be using it

How to switch to the block editor

Switching to the block editor should go smoothly. Especially, if you follow the steps below.

In this video, which is part of our new and free Block editor training, we explain the steps you should take when transitioning to the block editor. And of course, we’ll also describe them in this article!

Step 1: Test the block editor on your site

When you’ve decided you want to make the switch to the block editor, the first thing you should do is test the block editor on your site. The best way to test the block editor is to use a so-called staging site. A staging site is a copy of your live website that allows you to implement and test changes without affecting your real site.

How to create a staging site

So, how do you create a staging environment for your site? There are two easy ways to get one:

  • Ask your hosting company.
    The first way is to ask your hosting company to create one for you. Most hosts should be able to do create a staging environment for your site.
  • Use a WordPress plugin.
    If, for some reason, your hosting company isn’t able to create a staging site for you, you can use a WordPress plugin and create one yourself. If you search for ‘staging’ in the WordPress plugin directory, you’ll find tons of plugins that can do the trick. However, make sure you pick a plugin that’s trustworthy. That means: check the reviews, active installations, the last time it was updated, and its compatibility with your version of WordPress.

What to test in the staging environment

Once you’ve sorted your staging site, you can update it to the latest version of WordPress, which automatically comes with the block editor. Alternatively, disable the classic editor plugin, if you have that installed. To test the block editor, simply check what effect this has on your site. While testing, it’s important to pay special attention to the following:

  • Plugins
    It’s essential to check whether your plugins work correctly with the block editor. Most plugins have already adapted to the block editor, so make sure you’ve updated all your plugins!

    If you encounter a plugin conflicting with the block editor, the easiest solution is to check for an alternative. Is there a similar plugin available that is compatible with the block editor? Sometimes blocks can even replace certain plugins, so you could check the available blocks and see if you can find what you need. It’s handy to make a list of all the plugins that conflict with the block editor, so you can remove them from your real site before you make the transition.
  • Shortcodes
    Before the block editor came, people used shortcodes to add various features to a website. Shortcodes are like shortcuts to a pre-created and pre-defined code on your website. If you’ve used shortcodes, make sure they display correctly with the block editor. This is especially important if you use plugins that insert shortcodes.

Step 2: Switch to the block editor!

Once you’ve tested everything, you’re ready to make the switch! Make a backup of your site and update it to the latest version of WordPress. This automatically comes with the new block editor. If you’re using the classic editor plugin, simply disable the plugin to enjoy your new block editor experience!

What will happen to old posts and pages?

A question we regularly hear is: will switching to the block editor affect my old posts and pages that were created using the classic editor? The short answer is: no. 

However, the long answer is that the content of your posts and pages made in the classic editor will be converted into a single Classic block in the block editor. If you want the full block editor experience with your existing posts and pages as well, you can convert this Classic block into separate blocks.

How to convert the content of old posts and pages

To convert the content of your existing posts and pages into separate blocks, follow these steps:

  1. Select the Classic editor block in the post editing screen.

    By selecting the block, the top toolbar will appear.

  2. Click on the three vertical dots in the upper right corner.

    As shown in the image, a menu will appear.Converting old posts and pages menu item

  3. Click ‘Convert to Blocks’.

    WordPress will now scan your content for HTML tags to place every piece of your content into a corresponding block.

Send us your awesome block editor content!

Do you want to inspire others with the content you’ve created using the block editor? We want everyone to see the endless possibilities of the block editor, by featuring examples on our blog. Therefore, we’re asking you to send us the awesome content you have created using the block editor! Leave the URL in the comments below and spread that block editor love!

The post How to make the transition to the block editor (from the classic editor) in WordPress appeared first on Yoast.

The creation of our first digital story using the block editor

We write a lot of blog posts. And, not only about SEO topics, but also about our mission, company culture, and our broader vision. We hope that by writing those kinds of posts we can give you a glimpse into who we are as a company, and who we are as people.

But, blog posts are transient. We post them, and we might update them from time to time, but they’re part of an ongoing blog feed. You may miss them sometimes. And, that’s why we wanted to start documenting these values and ideals that power our company culture in a more permanent way. That’s where the idea for digital storytelling came in.

In this post, we’ll talk about how we came to this idea, how we built our first storytelling page about diversity and prejudice, and how you could apply these principles to tell your own stories.

Do you want to learn how to use the blocks in the block editor to their fullest potential? Look no further and check out our free WordPress block editor training! It’ll teach you how to create a well-designed blog post with the block editor. Let’s create some amazing content!

Why storytelling

Like I mentioned before, storytelling felt like a good fit to talk about our values because it gives context to what we do. It’s a different way of presenting information that is not meant for quick consumption or optimized for catching attention. It’s not just focused on the information, it also takes into consideration the experience of reading it.

We chose the subject of diversity first because this subject touches one of our core values. When Marieke became CEO of Yoast at the beginning of 2019, there weren’t that many women in our upper management. So, Marieke started a project to coach and empower women at Yoast to reach those positions if they wanted to.

In this process she also created a presentation about diversity and feminism that she could give in other places outside the company, such as WordCamps, to inspire others into action as well. Turning this presentation into a digital story then made sense to us as a way to reach an even bigger audience. It would become a more permanent location where people could go to learn more by themselves.

The process of telling a digital story

Concept

Once the idea for this first storytelling project was born, Marieke wrote a draft based on her presentation script, and our design team got to work.

The design team has designed tons of pages across all our products already, and these follow a style guide (or at least they should!). But, we could not achieve the way we wanted to visually present this story with only the elements we already had in our toolkit. It called for a bold, playful design that guides the reader through this experience.

A central part of this experience would have to be our illustrations. Our illustrators have been experimenting with animation in Adobe After Effects recently, and we figured it would be great if we could use these animations in our digital stories.

Based on the draft of the text, they started sketching and storyboarding. They wanted each section to have its own character, and our visual style tries to be pretty inclusive already so that matched well with this subject.

Animation

In addition to that, this time they wanted to add subtle animations too. But having good quality AND fast performant animations on the web is still sometimes a challenge. We considered GIF, of course, and MP4 with autoplay, but it turns out you can animate SVG images as well, with a little help from AirBnB’s JavaScript library Lottie.js.

To do this, you create a vector-based animation in After Effects, then export as JSON. If you want to give this a try too, you can read how to create and export a Lottie-compatible animation from After Effects, and/or learn more about how we implemented Lottie-powered SVG animations in the WordPress block editor.

Video

We felt like the story would come alive more if some parts were video, and it would break up the layout of the page a bit, so the design team selected three sections to make an animation for. Together with EyesxEars, our in-house video production partner, we recorded Marieke presenting these short stories, then drew some supporting animations to explain the concepts visually.

By now developers were also getting involved, setting up the page structure in code. They built the different elements of the page using WordPress blocks, so we can reuse them in future projects. You can read our (more technical) breakdown of how we built our digital storytelling framework in the WordPress block editor.

Project management

Managing all this work across multiple teams under a short timespan was no easy challenge. We wanted to launch by the time Marieke gave this talk at WordCamp Nijmegen. To get it done in time, everyone was working simultaneously, which isn’t ideal, you don’t want anyone getting bottlenecked. For instance, development was waiting on the final copy while it was still being tweaked to fit the flow of the animations, etc. So next time we’ll definitely set up a planning for each involved department separately. That way everyone will have enough time to iterate.

This time it was our internal deadline – which was set well in advance of the launch – and great communication that saved the day. Having the team come together and work on a fun out-of-the-ordinary project like this was worth it. And Marieke was able to present it with pride during her presentation!

Takeaways

You may have already spotted a few learnings peppered throughout this article. This was our first substantial foray into digital storytelling, so there certainly were some areas we can improve in. And by reading this article, you can already benefit from those tips if you were planning to make your own digital story.

1. Write about why you do what you do

First of all, if you are thinking of making a digital story for you or your brand, consider this: don’t write about what your product is, or even how you make it. That’s marketing. Storytelling should be about why you do what you do. What motivates you to dedicate time to creating whatever it is that you create? Which values inspire you to pursue this career? This is what informs what you make and how you do that. Talking about that comes after the Why.

2. Think about how you want to frame your story

Secondly, take your time to write the story. A story has an arc to it. It should take the reader on a bit of a journey. Think about the best way to present what you want to talk about.

One way could be to frame the story in a problem: is there something you felt personally held back by or saw an opportunity to solve something that other people struggle with? Describe why that problem exists, and how you felt compelled to do something about it, and see if you can inspire others to do something too. If you’re not entirely sure yet/anymore why you do what you do, thinking about this is also a good way to find out!

Our first digital story is a variation of this. We talk about one of the values that underpin our company mission, “SEO for everyone”. We believe in equality for everyone, and diversity is, of course, one aspect of that.

Another way could be to write is as more of a historical account. You can share when you got the idea for this company or product, and how you went about getting to where you are now. You’ll probably notice while writing though that you’ll automatically come across the ‘problem’ that sparked your idea, but here it will be part of a larger story.

3. Make your story compelling

Next, think about ways to make the story compelling and/or interactive. People are less likely to read a massive wall of text than they are to view some videos or play a little quiz. Stimulate their brains a little, reward them for taking the time to read something that’s important to you by making it fun for them.

4. Involve your team in the entire process

And lastly, if you’re making a digital story with a team, try to involve them in the entire process. You may be telling a personal story, but if you are writing about your company values, you’ll want to know that your team feels the same way about them. Plus, involving creatives in the planning stages can spark a lot more ideas. Just make sure to then plan out a good schedule for when everyone involved has to do their thing. It’s not super useful to have designers make animations or developers building page elements already for a story that is still being written.

So, we hope you enjoyed this deep dive into our digital storytelling efforts! In the future we plan to use this framework more often to create unique and compelling experiences on our site that explain more about a certain subject, so keep an eye out!

The post The creation of our first digital story using the block editor appeared first on Yoast.

The block editor: Why you should be using it

At Yoast, we truly believe you should be using the block editor (formerly known as Gutenberg) in WordPress, simply because it’s a much better experience than the ‘classic editor’. Unfortunately, when we look at our statistics, we see that a large segment of our users still uses the classic editor. Which is why we’d like to explain why you really should start switching over.

Do you want to learn how to use the blocks in the block editor to their fullest potential? Look no further and check out our free WordPress block editor training! It’ll teach you how to create a well-designed blog post with the block editor. Let’s create some amazing content!

Why you should switch to the block editor

The Gutenberg project and with it, the block editor is literally where all the innovation in the WordPress space is happening. Think of it this way: the only car race you’re going to win by using old technology, is a classic car race. If you want to win in SEO in the next few years, I guarantee you’ll need to be on the block editor. If you’re not, and if some of your competitors are, they’re going to beat you.

While the block editor may be very good, you may think: why would I switch? If the classic editor is working for me, so why bother? Well: the block editor is only the first step in a longer process. More and more parts of the WordPress admin will start using blocks, and because of that, getting familiar with the block editor is essential.

Future versions will iterate on what the block editor already does, moving to site-wide editing, instead of just the content area. The first required step for that is defining content edit areas, something Matias discussed in this post on Make Core, one of the blogs of the core WordPress development team. That post by Matias prompted this post by Justin Tadlock on how the Gutenberg project is shaping the future of WordPress themes. This is getting me, and our entire team at Yoast, very excited.

The Gutenberg project aims at making WordPress easier to use. That’s a long term goal, but it’s already doing that now too. When we have site-wide editing, we won’t need to teach people how to use widgets anymore: they’ll be the same as the blocks they see in the editor. In fact, the entire distinction will be gone.

Reasons to use the block editor now

Besides all of these great developments, you really should use the block editor now and stop using the classic editor. Let me give you an overview of simple and clear reasons. With the block editor:

  • You will be able to build layouts that you can’t make in TinyMCE. Most of the stuff we did for our recent digital story required no coding. Plugins like Grids make it even easier to make very smooth designs.
  • You can make FAQs and HowTo’s that’ll look awesome in search results. Our Yoast SEO Schema blocks are already providing an SEO advantage that is unmatched. For instance, check out our free FAQ and How-to blocks.
  • Simple things like images next to paragraphs and other things that could be painful in TinyMCE have become so much better in Gutenberg. Want multiple columns? You can have them, like that, without extra coding.
  • Speaking of things you couldn’t do without plugins before: you can now embed tables in your content, just by adding a table block. No plugins required.
  • Creating custom blocks is relatively simple, and allows people to do 90% of the custom things they would do with plugins in the past, but easier. It becomes even easier when you use a plugin like ACF Pro or Block Lab to build those custom blocks.
  • Custom blocks, or blocks you’ve added with plugins, can be easily found by users just by clicking the + sign in the editor. Shortcodes, in the classic editor, didn’t have such a discovery method.
  • Re-usable blocks allow you to easily create content you can re-use across posts or pages, see this nice tutorial on WP Beginner.

There are many more nice features; please share yours in the comments!

If you haven’t used the Block Editor recently: go, try it! I’m sure you’ll be happy with it.

Read more: Pressing questions about Gutenberg: the new editor in WordPress 5.0 »

The post The block editor: Why you should be using it appeared first on Yoast.

What’s inside WordPress 5.3 Beta 1

It’s been a busy week for WordPress. WordPress 5.3 finally saw its first beta released and it is jam-packed with great features and improvements. In this edition of WordPress Watch, I’ll highlight some of those features. And of course, I have a few bonus links for you as well. Let’s see what this new WordPress version is all about!

WordPress 5.3 Beta 1

The first beta of WordPress 5.3 has been released. And, it holds a lot of changes. I’ve covered quite a few of them in my WordPress Watch posts here, but I want to give you a short overview of what you can expect.

Block Editor

The Block Editor, or Gutenberg editor, has seen a steady output of releases every other week for the last couple of months. WordPress 5.3 will include the current state of Gutenberg, version 6.5, into core. And that’s a huge update. Just to give you an idea of all the changes, here’s an overview of the most interesting ones:

  • Group block and grouping interactions
  • Gallery block improvements (reordering inline, caption support)
  • Accessibility Navigation Mode, which will allow you to navigate with the keyboard between blocks without going into their content.
  • Columns block improvements (width support + patterns)

But that’s not all. With the inclusion of Gutenberg 6.5, the block editor will also see a significant bump in speed. Since WordPress 5.2, the team working on the block editor managed to shave off 1.5 seconds of loading time for a particularly sizeable post – think in the range of more than 35 thousand words.

No more unwanted time-traveling with WordPress

As mentioned here before, Andrey Savchenko took it upon himself to fix WordPress’ erratic behavior concerning how date and time are stored. Andrey’s fix made it into WordPress 5.3, so that makes for a lot more stability and no more unwanted ‘time-traveling’ with WordPress! Andrey wrote up exactly what was changed and how that may impact you.

New Admin Email Verification Screen

WordPress 5.3 will also introduce a new admin email verification screen that will be shown every six months after an administrator has logged in. WP Tavern covered this new feature recently and if you’d like to know more about it, I encourage you to read it.

Even more improvements and new features

You might think that the features mentioned above, combined with the inclusion of the new default Twenty Twenty theme, are already enough to constitute a new major WordPress release. And perhaps you’re right, but there’s more. A lot more actually. You can check out all the new features and improvements in the announcement post for WordPress 5.3 Beta 1.

Twenty Twenty

With the first beta of WordPress, we also got our hands on the new default theme Twenty Twenty. Justin Tadlock over at the WP Tavern wrote extensively about what it looks like and how it works, so do check it out if you’re curious what it will look like. I do have to say, Twenty Twenty is the first default theme in a very long time that has me excited about a default theme.

Bonus links

The post What’s inside WordPress 5.3 Beta 1 appeared first on Yoast.

Three new features in Gutenberg 6.5 and more on WordPress 5.3

The work on the next versions of WordPress and Gutenberg is moving along nicely, which is why today’s WordPress Watch focuses on those two projects. But, there’s more going on in the world of WordPress besides those two projects. So, get ready for a few bonus links again! Hope you enjoy.

New features in Gutenberg 6.5

Improvements on the Block Editor continue ever so diligently. Gutenberg 6.5 was released and the release contained a lot of small improvements, including three new features.

Social Links Block

The first new feature comes in the shape of an entirely new block called the Social Links Block. The team published a GIF that demonstrates quite nicely what you can do with it:

Social Links Block, courtesy Make WordPress Core blog

Local auto-save support

The second feature contains an improvement that adds support for local auto-saves to avoid content loss even in environments with unstable internet connections. To solve this problem, the Gutenberg team have made it so that edits are saved locally, and a warning is displayed with the possibility to restore the local edits if available.

Experimental: non-local block installation

The last new feature is the most exciting one, in my opinion. This release includes a feature that is marked experimental. It adds the possibility to install blocks that are not available locally directly from the block inserter if you have the required permissions. Inside the editor, you can find a one-click search and installation of blocks from the block directory. Selected blocks are automatically installed as a plugin in the background and inserted into the editor with one click. How cool is that?!

You can read the rest of what’s included in the release post for Gutenberg 6.5.

WordPress 5.3

The work on WordPress 5.3 is moving along nicely as well. This includes the new default Twenty Twenty theme as well. Justin Ahinon published a great dev chat summary of where we are for WordPress 5.3 on the Make WordPress Core Dev Notes post. It’s an interesting read as it gives you a very good overview of the less obvious things going into WordPress 5.3.

Bonus links

  • Came across a site with an interesting overview of ACF resources. Go check it out if ACF is in your toolbox.
  • And, if Beaver Builder is in your toolbox, Mike Oliver created 20 free Beaver Builder row templates that can all be imported as a one-page template.
  • If you were curious to know which multilingual plugin is the fastest, WP Rocket has tested quite a few of them.

The post Three new features in Gutenberg 6.5 and more on WordPress 5.3 appeared first on Yoast.