Today’s WordPress Watch has a strong focus on the Gutenberg block editor. Two different tweets prompted me to focus on what you can do with the editor a bit more. We’ll discuss improvements to the editor, as well as useful plugins that integrate with the block editor, so I hope you enjoy this edition. Don’t forget to check out the bonus links!
Block editor keeps on getting better
This December is the one year anniversary of the merge of the Gutenberg project in WordPress core. If you’re still postponing moving to the block editor, it’s good to know that it keeps getting better. Not just better at certain things it does – like speed and settings – but also when it comes to options and possibilities.
So, if you want to try the latest and greatest version of the block editor, you can install the Gutenberg plugin in your WordPress site. If you’ve tried it before and it didn’t take, I can guarantee you, you’ll now see a much-improved version of the block editor with the latest version of Gutenberg.
Plugins integrating with the block editor
Over the last couple of months, we’ve seen a lot of powerful improvements committed to the Gutenberg plugin, but, we’ve also seen a lot of plugins integrating with the block editor in extremely interesting ways. I’ve already mentioned several of these plugins in some of my previous WordPress Watch posts. Today, I’d like to highlight two specific plugins that have become part of my favorite block editor enhancements. Namely: Editorskit and Atomic Blocks.
Atomic Blocks is one of those plugins that gradually keeps getting better at what it does. This tweet, for example, demonstrates quite nicely what kind of improvements you can find:
Editorskit, just like Atomic Blocks, adds an array of interesting blocks to the editor, but it has a slightly different focus. Find out what they are and what they do here. Technically, you could use both plugins side by side. Editorskit also shared an interesting tweet last week demonstrating their progress:
If you’re still putting off switching to the block editor and you haven’t played around with it lately, now’s a good time to try again.
Andrew Lipattsev from Google shared an interesting tweet highlighting two different kinds of AMP integration success stories.
It’s Monday, time for a fresh WordPress Watch. We’ve got more news on Twenty Twenty in WordPress 5.3 and there’s an update on what’s going to be the next big focus of the Gutenberg project. There’s also exciting news about the integration of two different solutions. Let’s get to it!
The Block Editor will soon celebrate its first birthday in Core and with every update it grows more capable. The promise of the block editor is to give users the freedom to design and structure their sites as they see fit. The responsibility of a theme is to empower users to create their inspired vision by making the end result look as good, and work as well, as the user intended.
Twenty Twenty is designed with flexibility at its core. If you want to use it for an organization or a business, you can combine columns, groups, and media with wide and full alignments to create dynamic layouts to show off your services or products. If you want to use it for a traditional blog, the centered content column makes it perfect for that as well.
An example of what a blog post in Twenty Twenty will look like was also shared:
Content Areas are the next big thing in Gutenberg
The Gutenberg project and the accompanying plugin has had its biggest focus on the content editor itself. Up until now. Matias Ventura posted a thorough update on what is going to be the next big focus: content areas. In Matias’ own words:
Content areas represent parts of a site where blocks can be added and manipulated. Since content has a very specific meaning in WordPress already, we can also refer to these as block areas more generally to avoid opaqueness. Block areas would include headers, footers, sidebars, and any other meaningful template part outside of the post content that contains blocks.
The rest of the post, and it includes a video and code examples, is an interesting read into the future of where the Gutenberg project is going and how much of a page builder Gutenberg will actually turn into. Spoiler alert: a lot.
LifterLMS meets Elementor
It’s always nice to see deep integrations between two different solutions that instantly make both products better. LifterLMS, one of the most versatile online course and membership software solutions out there, can finally be integrated with Elementor properly.
The folks over at Tangible Plugins built a plugin that bridges both solutions perfectly into one deep integrated solution. Definitely worth checking out if you’re using Elementor!
Smooth integrations with Gutenberg
Came across a tweet from Rich Tabor, creator of the wonderful CoBlocks plugin that highlights a new feature available in the latest Gutenberg plugin. I could write out what it does, but I Rich has included a GIF in his tweet that explains it way better than I could ever put it into words:
Lots of noteworthy news from WordPress land over the last week. Gutenberg is back on our radar with a new version. I’ll also highlight a new project that’s underway that aims to find a better solution for all those notifications in your WordPress Dashboard. And, there are bonus links. Of course! Let’s dive straight in!
The Cover Block saw two new significant functionalities in Gutenberg 6.4. You can now resize the Cover Block and it’s also possible to use a solid color as a background instead of a video or an image.
Go ahead and try out the new Gutenberg Local Environment, and if you come across any issues, please report them over on the Gutenberg repository.
WP Notify progress
One of the most exciting projects currently underway is the WP Notify project. Its aim is to provide much better handling of any and all notifications you can typically find in your WordPress Dashboard.
Jonathan Bossenger has taken the lead on this project and gives us frequent updates over on Make WordPress Core as well. If you haven’t checked out what the idea behind WP Notify is exactly, you should definitely check out his first recap post. You’ll get a good feel of where the project is headed.
New Prevent Search Engines setting
WordPress 5.3 will introduce a new and much better setting to prevent search engines from indexing sites. Our very own Jono Alderson was involved in making this happen. Read more in this introduction post on Make WordPress Core.
StudioPress released Genesis 3.1 and it has bumped the minimum requirements across the board. It will need WordPress 5.0, PHP 5.6 as a minimum, higher and up-to-date if obviously even better.
A new week, a new WordPress Watch. We saw work for WordPress 5.3 getting properly underway. There was also news about some exciting integrations built to for the Block Editor. And, of course, we have a few bonus links for you as well again today. Let’s see what happened this week in the world of WordPress!
The focus of WordPress 5.3 is on polishing current interactions and making the UIs more user-friendly. And, as I’ve mentioned previously here, there will be a new default theme again; Twenty Twenty. The general idea is that Twenty Twenty will be based on an existing theme that already does cool stuff with the Block Editor and modifying it to fit with the 5.3 release.
If you’d like to see a list of tickets that are slated to be fixed for WordPress 5.3, have a look at this list on Trac.
When it comes to creating blocks for the Gutenberg block editor, I’ve mentioned ACF Blocks a couple of times before. It’s a wonderful solution that allows you to create blocks relatively easy. However, as of last week, I learned there to be another contender for best block creating facilitator. Namely, Block Lab.
A tweet by Steven Cronin alerted me of a talk Luke Carbis, the creator of Block Lab, was giving at WordCamp Brisbane:
To demonstrate the power of his Block Lab solution, Luke asked the audience what custom block he should build. Which he then created during the rest of his presentation. That’s a powerful solution if you ask me. Go check out Block Lab or go straight to the plugin repository and start playing around with it.
Block Permissions add-on for Members plugin
One of the earliest plugins I can remember – and I’ve been using WordPress since 2005 – that extends WordPress’ user management perfectly is Members by Justin Tadlock. Justin mentioned on Twitter that he’s working on an add-on for the plugin that will add block permissions based on the capabilities of the logged-in user.
Meaning, if you’d like to publish content but have certain paragraphs, images, or any block you like, really, only be visible for logged in users, you could do that with that add-on. You can read more about this add-on here.
The past week was all about two big plugins releasing important updates. Both WooCommerce and Gutenberg got significant improvements. Gutenberg saw another accessibility improvement and WooCommerce now has even more integration with, well, Gutenberg . Let’s dive in and see what’s what!
WooCommerce introduces more Block Editor integration
WooCommerce 3.7 was released last week and it brings deeper integration with our new Block Editor. While WooCommerce already provided the option to use a Featured Category, Featured Product, and Best Selling Category blocks, for instance, this version added three more blocks:
Product Categories List block; this block allows you to show product categories in a list or dropdown.
Featured Category block; this block lets you select one or multiple categories to feature on your site, and it displays the category and a link to its category archive page to customers.
Products by Tag(s) block; this block gives you the option to feature a selection of products linked to a specific tag or set of tags.
Of course, the rest of the plugin also saw overall refinements. You can now, for example, find all WooCommerce Blocks more easily when you click on the plus symbol to create a new block by typing “WooCommerce”. Read up on what these integrations look like in the WooCommerce 3.7 introduction post.
Gutenberg version 6.3
One of the areas where the Block editor still needs improvement is the accessibility of the editor. The block user interface introduces navigation from within the block itself, as well as from one block to another, which can be complex. This makes it very challenging for screen reader users to navigate the content of their posts. Gutenberg 6.3 fixes this with what they call a Navigation Mode. Or in their words:
To address that issue, we’re introducing the Navigation Mode. By default the editor is loaded in this mode, it allows you to move from block to block using a single Tab press. You can also use the arrow keys to navigate between blocks. Once you reach the block you want to edit, you can enter the Edit Mode by hitting the Enter key. The Escape key allows you to move back to the Navigation Mode.
This is a great start to make the editor more accessible for many different types of users. You can read more about why accessibility matters here.
As with the WooCommerce update mentioned above, this new Gutenberg release also comes with smaller improvements. Things like support for text alignments in table block columns, and border color support for the separator block. As usual, you can find out more about what’s new in Gutenberg 6.3 in their release post.
You might think it would be quiet in the world of WordPress because of the summer holidays, but there are some interesting things beeping on my radar. What about the next major version of WordPress: the 5.3 release? Also, the developers of Atomic Blocks and EditorKits haven’t been loitering around; they’ve added some useful features to these Block editor plugins. Read on!
WordPress 5.3: Planning and scope
The WordPress Core team had a good discussion last week about the next major version of WordPress: 5.3. The general idea is that the 5.3 release will be planned for November 13, a week after WordCamp US. As for the scope of what will be in WordPress 5.3, this is the proposed list of items:
Grouping: Support for dividing your page into sections;
Motion: Support for visual motion when moving/arranging blocks;
Column patterns and widths: Support for fixed column widths, and predefined layouts;
PHP 7.4: Support for the new version coming end of November;
And also: Build/Test updates, better administration of emails, and a lot of under-the-hood improvements!
As you can see, most of these updates are focused on polishing current interactions in WordPress and are aiming to make the UIs more user-friendly.
In the Dev chat for WordPress 5.3 that followed, the new default theme (by the name of, you’ll never guess it, Twenty-Twenty) was mentioned.
Block Editor plugins: New powerful features
It’s been 9 months since we were all introduced to the new Block Editor in project Gutenberg, and it’s been amazing to see what clever integrations people have come up with to extend it. The new features of two existing plugins caught my eye last week: check out these great additions to Atomic Blocks and EditorKit.
Atomic Blocks introduced a new Section and Layout block. It provides pre-designed section and layouts for your site. A very clever way to inject predefined designs to your content. You can check out this video to get an idea of how powerful this feature is.
The other features that caught my eye are part of EditorKit. It’s a plugin that provides a set of block options to extend the way you are building content for WordPress Gutenberg Block Editor. And it, too, has a video showing its options:
As you can see, these two plugins allow for wonderful extensions of the Block Editor. Take them for a spin if you haven’t tried them yet.
We’ve talked about WPGraphQL before here, and for those interested, I discovered a WordPress source theme for Gatsby that uses WPGraphQL on the WordPress end on Github. Check it out if you want to play around with new technologies.
Decided to throw in an SEO link as well as I stumbled upon a pretty awesome resource if you use Google Sheets. It’s called Sheets for Marketers and it features over 100 templates for everything: from on-page SEO to reporting and from scraping to project management.
After a short break, we’ve returned with a new WordPress Watch. In today’s edition, let’s check out a cool new way to share your code in the block editor. We’ll also look at some nice updates to the Gutenberg project – which includes new features for the block editor in the next major release of WordPress. And, there’s some news regarding accessible themes on WordPress.org. Here we go!
Syntax highlighting code in the Block Editor
Up until now, it’s still been kind of a pain to share code with proper syntax highlighting in the Gutenberg block editor. I say up until now because Weston Rutter released a cool plugin that takes care of this wonderfully now.
The WordPress Theme Review Team has been pushing the standards towards better quality themes for a while now. One aspect that receives a lot of focus is the accessibility of the themes available on WordPress.org.
For example, the TRT recently announced that all themes will be required to add keyboard navigation. Another example is the requirement to include skip links.
Now, having Accessibility requirements is great, of course, but seeing them implemented by theme authors is where it’s at. I’m really happy to see tweets like this one by Alexander Agnarson from Alx Media, announcing that all of his themes are now making use of skip links. You can check out his themes here.
It was another full week with lots of WordPress news. Today, we’re highlighting a cool WordPress newsletter plugin that had a big update. We’ll also see that Gutenberg got yet another polish and we’ll have a bunch of bonus links for you. Let’s check it out!
More Gutenberg refinement
The latest release of Gutenberg, version 6.1, added a lot of refinement to the editor. The two most noticeable changes are animations for when you move blocks, create a new block, delete them or remove them entirely. The second one is a speed optimization for when you’re typing long posts. Making typing 30% faster on long posts!
Block Directory Concept
In a previous roundup, I’ve mentioned work being underway to add an interface to the WordPress Dashboard to add and manage Blocks. Blocks being plugins that add specific functionality to the Block Editor. It was mentioned by Matt Mullenweg during his WordCamp Europe presentation as well. Mel Choyce has now published a lot more details into what this Block Directory could look like over at Make WordPress Core blog. Detailing with lots of screenshots, she demonstrates what the flow of managing blocks on your site could look like. Mind you, they’re still concepts, but you get a good of idea of where this is going!
MailPoet, a second start
Mailpoet is a plugin that allows you to send a newsletter from your WordPress sites. It was quite popular back in the days and disappeared a little bit off our radar. After a long rewrite, their new version seems to be getting traction again. They recently announced a new free plan that includes their in-house sending service. According to Kim Gjerstad, the co-founder, they want to grow their active websites faster. Also noteworthy, 25% of their users are using WooCommerce. Check it out if you’re in the market for a WordPress native newsletter option.
Since WordPress updated their minimum PHP version to 5.6 (for the time being), it has allowed for some updates in PHP Coding Standards as well. Check out what’s been discussed about that last week.
You might know that structured data in the form of Schema.org can do wonders for your search results. It also forms the basis for an ever-increasing amount of new and exciting developments on the search engine front. Google has said many times that structured data is beneficial. Today, we’re going to look at a relatively new and exciting piece of structured data: the HowTo Schema. This is a how-to about a how-to on HowTo: HowToCeption!
Did you know Yoast SEO now comes with structured data content blocks for the WordPress block editor? You can automatically add HowTo and FAQ structured data to your content! »
What is structured data?
Structured data is a sort of translator for search engines — it adds context to code. Schema.org is a so-called vocabulary, in other words, a dictionary. By adding Schema.org search engines can instantly figure out what every piece of content means, semantically speaking. This gives search engines the power to do cool stuff with your content, like highlighted snippets in search results, the Knowledge Graph or the carousel. There’s structured data for books, articles, courses, events, jobs, local businesses, music, recipes, products, reviews et cetera. Structured data is getting more important by the day and we’ll see more types emerge in the coming years.
If you want to learn more about structured data and find out how to implement it yourself so you can win those coveted rich results, you can enroll in our Structured data training!
What is HowTo structured data?
According to Schema.org, a HowTo is “an instruction that explains how to achieve a result by performing a sequence of steps.” You can use HowTo structured data to mark up articles that come in a how-to form, but that are not recipes. If there is an element of consumption, it should be a recipe.
HowTo Schema.org was introduced in April 2017 and has now made its way to Google’s search engine. Google is always looking at structured data to do cool stuff with, so it’s easy to see why HowTo is an awesome addition to the roster. How about this, since your Google Home can now read your structured data powered recipes out loud, why shouldn’t it be able to read that how-to on how to fix a leaky faucet or change the busted lights in your kitchen cabinet? Google already has an action that works with smart displays. Google has confirmed that it supports new forms of search results snippets, like FAQs or frequently asked questions, Q&As and How-Tos.
That’s cool and all, but isn’t there a lot of code involved in building a how-to page with valid structured data? Yes, but Yoast SEO has an answer to that. Read on, my friend!
How to add HowTo structured data using the WordPress content block in Yoast SEO
Looking for an easy way to add it HowTo structured data to your WordPress site? Well, you’re in luck as we have one! In Yoast SEO, we’ve introduced the concept of structured data content blocks for WordPress’ new block editor. These blocks, including one for HowTo and FAQ structured data, automatically add the necessary code to the pieces of content that you add to this block. Of course, it validates perfectly in Google’s Structured Data Testing tool. Now adding structured data to your how-to article is as easy as filling in the fields!
Here’s how to add a how-to to your site:
Open a post in the block editor or add a new one
The HowTo content block only works in the WordPress block editor.
Hit the + button and pick the Yoast SEO HowTo content block
You can add your how-to anywhere you want.
The HowTo content block appears on your screen
In the block, you’ll find a way to add a total time it takes to do this how-to (optional), a description field, a first step and a step description. You can also add an image per step, delete it and move it up and down the list.
Add the first step
Give it a relevant, descriptive title and fill in more details for the step, if necessary. Determine if you can make the how-to step made more understandable by adding a relevant image. Sometimes, it might be better to add an image to every step.
Add a second step, a third step and a fourth step
Add as many steps as you need to get this how-to task done. Need to switch steps around? Use the little up and down arrows next to the Add image button. To delete one, simply hit the trashcan button.
And the structured data? It’s added automatically!
Really? Yup! You can test it in the Structured Data Testing Tool.
Ready? Check and publish!
Once you are done, re-read the how-to and publish when ready. Check it to see if everything is in order and easy to understand for your user. If not, make improvements.
Test the how-to in Google’s Rich Results Testing Tool
You can use Google’s Rich Results Testing Tool to see how your how-to might look in the search results. Here’s an example for our article on How to build an FAQ page.
Testing in the Structured Data Testing Tool
Here you see the result in Google’s Structured Data Testing Tool. Of course, this screenshot is truncated, as the HowTo part of the structured data is fully integrated in the graph Yoast SEO renders. This makes for a beautifully interconnected piece of code, but also very long:
Adding structured data to your site with WordPress or Google Tag Manager
In general, adding structured data requires you to edit the code of your pages. For most people, that requires help of their developers. As you see, there is an easier way. Yoast SEO adds a lot of structured data by itself, but you can also add structured data via the dedicated Yoast SEO structured data content blocks for the block editor.
In addition, or if you don’t use WordPress, you can add structured data via the tags, triggers and variables available in Google Tag manager. What’s more, this way of adding your data gives you an extra amount of flexibility as you can save your variables and reuse them or even dynamically fill them. There are loads of options to explore. Annelieke wrote a post on how to add structured data to your site with Google Tag Manager.
It’s easy to build a how-to with valid structured data
This was cool, right? Well, you can use this for yourself, but keep in mind that it might take a while for search engines to pick this up. Even then, it’s hard to predict if search engines will do anything at all with your structured data. Using the various testing tools give you a good idea of validity of your structured data, but if it leads rich results is up to search engines!
WordPress 5.2.2 launched last week, but of course, that wasn’t the only news happening. There was a lot going on in the world of WordPress as it was the week of the largest WordCamp Europe (over 2800 attended!). Let’s see what happened this last week!
The Gutenberg project kept publishing improvement after improvement and it saw the release of version 6.0 last week. The most important new features are the polished Widgets screen and an improved Group block. This release also features a layout picker for the Columns block, allowing the user to choose from pre-defined layouts or to start from scratch.
Diving deeper into WPGraphQL
A couple of months ago, in a previous roundup, I mentioned the WPGraphQL project. And, a few of you reached out to me privately about that. Particularly about what the project aims to do and how to use it with WordPress. Now, I could, of course, write out an extensive explanation of what the possibilities are, but why bother if there’s a great video that does all the explaining for me:
To demonstrate that the WPGraphQL project is getting a lot of traction, Jason Bahl, the lead developer working on the project, announced that he’ll be joining the Gatsby team to work on the WPGraphQL project full-time.
Post Status Online event
Post Status, of PostStatus fame, has announced their first online conference. They’re going to stream 14 presentations which will also be downloadable. It’s also a great opportunity to chat with like-minded folks. Post Status Publish focuses on web professionals and will take place on July 8 & 9. You can learn more about the event here.
WP Engine news
One of the most prominent managed WordPress hosting companies out there, WP Engine, had a lot to share over the last couple of weeks. First, they launched DevKit, a WordPress local development environment and build toolkit, that seamlessly works with WP Engine and encourages better and faster code. Go check it out if you haven’t yet. It’s a pretty cool tool.
They also announced them acquiring another respected WordPress hosting company called Flywheel. Pretty big news in the world of WordPress hosting companies.