Earlier this year, Zac Gorden of JavaScript for WordPress asked me to give a presentation at the 2019 JavaScript For WordPress conference on the WordPress Blocks Plugins Landscape. I was honored and privileged to also work with Zac also on sponsor relationships to make sure the conference was free for the attendees and the team behind the scenes was paid. All videos from the four presentation tracks – Headless WordPress, Gutenberg, Less-Technical and JavaScript – are now available for free.
WordPress Blocks Plugins Landscape: A video, a slide deck and a transcript.
The Slidedeck:
The Transcript
Mary: Oh okay. So Birgit is the founder of Pauli Systems, a distributed web consultant agency. She also curates and publishes for the Gutenberg Times. We’re excited to have you and I look forward to enjoying your talk. So I’m going to put you on now. Okay. You have it.
Birgit: Well thank you. Well thank you Mary. I’ve been looking forward to meeting you. But also to meet everybody else in this track. Glad to see all from around the world and we’ll spend the next 50 minutes together and talk about the great stuff you can do, with the block editor, beyond the core implementation. Well, it’s a brave new world out there. Can we share the slides now, Mary, or do I do that? Okay. All right. Okay. Cool.
So first a little bit more about me, as you heard. I’m the founder of Pauli Systems, a distributed web consulting agency. I’m also a co-founder of NPTech Projects, which is a non-profit, for non-profit, struggling. The non-profits are struggling with technology and we help them. One of our program, is our WP4Good Club, where we help non-profit content creators, as well as accidental techies, with their workers install and content creation. We do have monthly office hours, we share video tutorials. We also do one-on-one video calls and included in the membership in the club, in an account with a managed hosting provider, Pressable. So if you know a non-profit from United States and you know they need some help, send them along our way.
So I’m also, as you heard, a curator, publisher of Gutenberg Times. But we just started a new podcast called The Gutenberg Changelog and I co-hosted with Mark Uraine and I was also a speaker at this conference, like two doors down and from Automatic Design Team and he’s full-time, working on the Gutenberg editor. Later today, we will record our second episode and publish it over the weekend. So I hope you’ll check it out.
Also, save the date for the next Gutenberg Times Q&A. It will be with Pascal Birchler, also, a speaker later today. Alberto Medina and Cathi Bosco, on July 26th, 2019, 2 p.m. eastern daylight time or 1800 UTC and whatever that is a new world. We’ll discuss the new release of the AMP plugin for WordPress, that comes with AMP Stories for Gutenberg editor.
It’s a feature that lets you create stories that you know from SnapChat, Instagram and Facebook and now you can create them on your own website, where they last. So join us. For those who will watch this after July, 26, check out the Gutenberg Times website, with the link to the recording. It will be on YouTube and the transcript. [ note: here is the link to the show]
Hi Kevin. Hi Steve. So you can follow along or get the site afterwards. Here’s my master link to get all the other links. It’s at bit.ly/js4wpbirgit, all one word. So the landscape of Gutenberg plugins. I got a little bit nostalgic. When you think about my Windows XP screensaver landscape, with a lot of cloud-based approach there. So I found almost 100 plugins, in the WordPress.org repository and I put them into six categories and those are the clouds there. So we have: block collections, plenty of them. single purpose blocks, eCommerce blocks, blocks that integrate with third parties, plugins that offer block templates and help you with page layout and plugins that offer you tools, to better work with the blocks or the block editor.
So I’m watching the chat not closely. Because I’m trying to get through this talk. But I will do breaks, where I can catch up with you on the chat and the sections three or four times, during the next 15 minutes. So you’ll find a list of the plugins on the Gutenberg Times. There is no way I was able to find all the available plugins. There are quite a few that are not available in the repository. They exist on GitHub only or on different marketplaces.
Some of you may know that I’m also deputy at the WordPress Global Community Team, and I won’t promote plugins that are not 100% GPL or compatible. I also want to give a shout-out to the WordPress Plugin Review Team and Mika Epstein, who helps plugin developers to stay within the guidelines and keeps our ecosystem safe. So at this moment, the link to the plugins gives you 98 plugins. But I’ve seen later on this number will change, maybe. Because I will do the usual round of updates. So I have not tested though all of them in the post. But I definitely spot checked or spot tested the ones that we talk today about, talk about today. So let’s get in there.
Block Collections
So first up, our block collections. They give us a set of different blocks, that all work together. Although the collections work with most things, I’ve seen, they will work best with a theme they originate in, like the Atomic Blocks, with the atomic theme or the cadence block, with the cadence theme. There’s still quite a few things can go haywire when you have a theme that is not customized for Gutenberg blocks or for particular blocks that come with those plugins. The core team, early on, suggested the best practice that blocks are plugin territory and that they should be kept out of themes.
So last I counted, there were 30 blocks, block collections in the plugin repository. We’ll go through four of them, so you understand the differences and the variations in approaches.
Atomic Blocks
So some of the developers actually created container and section blocks that were still missing in the Gutenberg editor, until just a few weeks ago or months ago and the early block collections also received quite some attention in this space, before the Gutenberg editor actually went into core and one of them was Mike MacAllister and he came out with his Atomic Blocks in March of 2018, at the time when Gutenberg was at version 2.3. So Gutenberg is now at 6.1. So it received a lot of attention together with the new theme atomic block and that was specifically built for the Gutenberg editor.
In October of 2018, WP Engine acquired Array Themes with the Atomic Blocks and theme. That was actually two and a half months before Gutenberg even made it into core. The newest version of Atomic Blocks sports an array of ready made layouts and they are very robust and work with all the themes that I tested them. So I also shared the GitHub link on that slide, just because with the modern JavaScript, you get in the repository, only the built version of the plugins and the source code that helps you study up and learn from those that have come before you, is actually on GitHub. So where I found it, I also added the GitHub link to the slide deck, so you can research after that.
CoBlocks
Next on Rich Tabor, started early to contribute to Gutenberg and release additional blocks. He founded, also in 2018, CoBlocks with Jeffrey Caradang and then sold it earlier this year, to GoDaddy. CoBlocks compromise of 23 individual blocks from Accordion, over Google Maps, to click to tree to a masonry gallery. While many plugin developers use the sidebar of the block editor, for different settings, Rich tried to use the block toolbar as often as possible, as sometimes people don’t open the sidebar and don’t know that there are settings that they can use, hidden there. So you see in the animation, the shape divider, it actually has a color picker right on the bottom of the shape divider, where you can change the color of it, right there, from the block in the editor and don’t have to go into the sidebar and you see more of those examples, where he also uses the toolbar, the block toolbar more then the sidebar in the GitHub repository. It’s really a good place to study these kind of design patterns.
Kadence Blocks
This week, I used for the first time, Kadence Blocks and the name came up multiple times during our conversations, during our local WordPress meetups, where other members tried it out. It comes actually, with a built in block manager. So you can deactivate blocks that you don’t want to use. Any of the text blocks have a few more ways to add different fonts and sizes and change line height and other things.
This one definitely has a lot more options for each block then for instance, Atomic Blocks has. It really depends on who’s the intended audience for your blocks plugin. Is it the million of bloggers who want to get the content out as fast as possible? Or is it a group of people building sites for others and need a more flexible set of tools? I don’t think that the demarcation line is not yet really, clearly defined. But it definitely, the WordPress philosophy is decisions, not options and some developers adhere to this more than others.
WPMunich Blocks
And the last one is WP Munich Blocks. Hendrick Lührsen is one of the main contributors to this Block Collection. He came on the Gutenberg times live Q&A last November and he started using Gutenberg very early in Spring 2018 for gaming review side in Germany. His team’s work was also highlighted in an article at the WPTavern in August 2018 and when we talked, he showed off some of the blocks that they were using for their projects and a couple days later, they release three of them in the repository. Now they’re there are about 11 of them in there. This is also a shout out to my hometown, Munich, where I grew up and was born there and although I’m in the United States for over years now, I still go there once a year and visit my parents and I really love that town.
But in the plugin, you find besides the commonly used blocks like author, profile blocks or pricing table blocks, you’ll also find the timeline block, that is quite beautiful and also a semantically correct formatted events block. When you’re an organization that has events, but not plenty of them, like maybe 10, 15 a year, you do not necessarily need an events plugin for WordPress that can handle hundreds and hundreds of events. So when you have an events block that is semantically correct formatted, you can really be … That would be sufficient for advertising, promoting your events.
So, as promised I’ll do a short break and catch up with you, a few questions in the chat. Yeah. There is not a whole lot going on. Have you seen any block collections that you like, which one did you use? Maybe you want to share those and I’m drinking a little Chinese tea. All right. All right. No questions? No comments? Yeah. Steve. The landscape from before is actually originated from a National Geographic photographer that was brought in .. And the photo was bought by Microsoft too. Put in into XP. Yep. So, all right. So the next section’s all single block programs.
Single Block plugins
Oh. There’s another question. The events versus WP Munich? No. They are not custom post types, they’re content in the block editor that are displayed on either a page or post. It doesn’t have to be a custom. That’s also something that Gutenberg brought in the for front. Not everything that is a different content type does actually need a custom post type. You can just have another block with and fill in the blanks form.
So single post, single block plugins meaning singular purpose plugins are actually my favorite to solve. Because they mostly solve one issue and do one thing very well and the next one here, is a shout out to Kevin Bazira who was earlier in the chat and hopefully is still here. His 360 degree images view got me all excited. Because now I was able to share my photosphere that I created with my phone on my website and those images are so cool. Because you can use your mouse and navigate around the picture like you’re in the room. You can look and all the corners and don’t forget to look up. There’s a mosaic in the ceiling as well. If you have a Google cardboard, you can actually see them in virtual reality experience and like you’re standing right there with me in the Crypta of the [inaudible 00:17:29].
So, Kevin not only provides with two settings, like the pictures I mentioned and if you want to have it wide or the full screen width. But it’s enough to make me really be happy about it. Kevin also has six or seven other single purpose blocks in the respiratory. I think you should check him out. We also use this PDF view quite a bit. Kevin, great job. Thank you so much for that.
The next one, singular purpose, is something that we in WordPress use quite often. That’s the post layout for a collection of blocks like archive. Not only archive pages, but also if you write about something and then you say, “Okay. This category gives you more host about the same subject.” So I looked at two of them, one is called Post Layouts for Gutenberg and the other one is called Guten Post Layout. Yeah. We are all not particularly imaginative for the post titles. But it’s also what people will look for. So both take a little bit of a different approach to use the various spaces around the admin screen.
Again, decisions not options. So while payouts for Gutenberg uses 40 different options. Guten Post Layout only needs 17 different options and you get pretty much the same four. Sometimes the wide width option that Gutenberg block editor allows, the editor allows, doesn’t always work with that. So, only the Guten Post Layout actually works with a wider than normal display. but it’s also depending on the theme, of course and each plugin also needs to come up with lab testing with various theme. It’s still a little bit hazardous.
Block Gallery
The next one is Block Gallery from Rich Tabor. For a long time, the native gallery block also very attractive out of the box were not very flexible. Rich Tabor was pushing the borders of the boundaries of Gutenberg with this block gallery plugin and now it’s available either as a stand alone. So, well let’s see if I can let them get the movie going. Oh yeah. When I tested it before, it wouldn’t work. So you pick the pictures and then you see them in the block editor and then you get the few … Yeah. It can change the customs. So as long as you can change the color, you can change around the corners and also how you want the captions to be displayed. It’s quite nicely done. So that’s single purpose block here. So also blocks with slider. So the block gallery, actually three blocks. One’s a mason gallery, the other one is a normal gallery and then a slider gallery or gallery slider.
Math ML
The next one is more for special purpose, core committer, Adam Silverstein, who presented earlier today on the WP Hooks. He created this special block that’s a math markup language block, with which you can create and display math formulas written in MathML and the block uses a JavaScript library called Math Jacks to render the content. It’s pretty cool and really great for bloggers with an affinity for math problems.
As I said, there are plenty of other single purpose block there. I think the collection is now about 30 of them. But these are the side note and I saw this last night, that there were a lot more single blocks now available, especially from one company. So I need to go back and check them out. But I think it’s actually what we will see more and more. If you haven’t yet heard about the new feature that’s coming to core editor, it’s called Block Directory and that will probably have a few of the plugin developers go to single block purposes. The goal for the block directory is to expand the block inserter to search for blocks that are not yet installed on your site and if there is one that you like, it will install it in the background. So there are two teams working on it right now. One is the design team and they have some interesting prototypes already published. It’s on the make blog of designs or make.wordpress.org/design. Mel Joyce has done some great work and summary there.
And then the other team is the meta team and they discuss on make.wordpress.org/meta, discuss how to make the plugins and the blocks available to the block editor and most like it will require a subsection … That’s a difficult word … Subsection in the plugin repository just for blocks and it will probably involve some JSON registry to get it in to the inserter. But check out those teams’ discussions. Because now’s the time to actually contribute to the discussion, haven’t your opinions heard. But also, if you’re a plugin developer, get involved and see what it’s all about and what the future will bring.
So as promised, we don’t have other questions here in the sidebar. So I’m going right through it, through the next one.
Layout Template for WordPress Block Editor
So, the layout templates. That’s trying to do what [inaudible] listed for many, many years or still do in WordPress. Just got to get myself … Let that help you with building particularly page layouts. So with the first one, is called Guten Blocks Template and I put design next to it. Because that’s workers.org/plugins/design comes in. It allows you to download pre-made Gutenberg editor templates from their server and they offer free and premium designs and it’s more block as a service kind of plugin. It has an ever growing design library for various use cases and it claims to be compatible with other plugins and themes. The designs are all based on native Gutenberg blocks, which I found refreshing after I went through all of the other blocks that are always a little bit different. So this is definitely something to explore. Because of the variety is really big in be it list, be it column, be it statistics, or something like that. So, check it out.
Grids: Layout builder for WordPress
Next one is the Grids: Layout builder for WordPress. This one got some attention at the summit update by Matt Mollimick in [inaudible 00:26:15], Europe. It’s a layout builder for WordPress. But it was released by the team of the pre-Gutenberg page builder called Bricks and the company is called Evolve. This one has built on top of the block editor and based on the CSC grid. It provides sections in areas for native or for 3rd party blocks and I have found, playing around with it, it takes a bit of practice to get fast with it. The documentation link should help you with that. So, yeah. Check it out.
The next one, I come back to … I mentioned it before, coming back to the atomic block, for this category as well. Because you’ll find very nice templates and layouts for your website in their collection and they are increasing the number of it. Why do I know this? Because I have a favorite tab up there where you can say, “Okay. These are my favorites and those are that I’m going to use.” It’s pretty much like the plugins directory where you also can pick some favorites too. So you don’t have to search through all of them. This is very nice and I actually find it working on quite a few themes and there was no difference, pretty much, in how it was displayed.
The last one, I mentioned it before, is the story concept from SnapChat, Instagram Facebook. Those are visually rich user experience optimized for mobile viewing and they are now available on your website. You need to Gutenberg with the AMP plugin. You need the Gutenberg editor, I think 5.9 or 5.8 or newer to work with it and it lets you do pretty amazing things with the block editor. So being a photographer, I’m totally excited about this. I know we all have mixed feelings about AMP. But this also works even if the rest of the site isn’t AMP certified already. It really makes your content on the mobile phone, shine and it’s very easy to use. Again, in July 26, we will have the team who built this, Pascal Birchler was the lead developer on this feature and Cathi Bosco was a designer on the team to build this and we are going to go right into the middle of it on July 26th. But it gives you some page layouts here.
Any questions for now? A little break here and get another sip of tea. The tea is called GunPowder. It’s not harmful. It actually keeps me going. All right. The next one is integration with external APIs. That can mean a lot of different things for different people.
Blocks for 3rd Party Integrations
The Google maps is certainly external API, Google Drive, Instagram and many, many more. This space hasn’t expanded as much as I would like or as I hoped it would. But Gutenberg is only six months … Released the last six months. So some of the heavy lifting hasn’t been done yet. But there are some amazing plugins already available. So the first one is Google Maps. It’s not a single purpose one, it comes. So what you are seeing there … Oh. I got to click on another video here. Not so big. Are we still seeing this? Yeah. It’s all right.
Google Maps
Maybe now it’s not working. Okay. I hate this. But this is the Google Maps block by the defining CoBlocks and there’s an alternative out there. It’s called Google Maps by Web Factory. I don’t think the video is going to show. Okay. So I’m just going to do the still image here. Oh maybe. Yeah. Now, it does. Hey and again the block toolbar actually has quite a few settings there that people can use and then on the side, you can have additional map controls that you can either switch on or off like what kind of different controls do we offer those who view this on our website. Excellent. So that’s the CoBlocks Google Maps app.
EmbedPress
Another one in integration is EmbedPress. I’m showing information on the schedule of the soft cricket tournament that was in Sarasota, in Florida earlier this year in June, I think. They had the schedule in a Google spreadsheet and they needed it on the website fast. So I used this plugin to embed it, just right there on the website. So, the Gutenberg editor has quite a few … Well, quite many embed blocks that come right with it. But what impressed me was EmbedPress is not only the huge embed that they have beyond that, they also offer additional functionality with it and they have, for everyone of those tutorials on how to actually make it work with each of the services that they made.
As I said, I use this quickly to embed the spreadsheet. But you can embed media from 75 different sites and the plugin was brought to you from the team of OS training and the team that also offered published press and as a side note, Zach Gordon’s book React Explained, was published by OS Training by the same team. So shout out to them. If you need embed any services out there, go there first to check them out. If they offer you on the half or videos, they have actually have a little add-on for [inaudible] Vimeo and YouTube where you can be a little bit more granular on your controls what actually shows and not shows and who to show it to.
So it’s quite an impressive plugin and the next one is Instagram. When you use the Instagram embed block from the block editor, you can only display one picture at a time and corner Instagram feed plugin gives you some configuration tools to show any number of images from your profile and any number of columns with any background you want. You have a little more control over what’s displays and how you can check. You need an Instagram access token for it. It guides you through the process, the easy process there quite well. What I’m missing here or what Instagram is really good at is hashtags. But I looked at the API of Instagram and I didn’t see any endpoints anymore. It was a couple years ago when we did some implementation. But I need to dig a little deeper into the API, to maybe have additional features to display a certain hashtag, display certain other people that are not your profile. But that you want to be on your team or something like that. So there’s certainly room for expansion there. All right. Oops.
eCommerce
The next one is eCommerce. That’s a small section. But it’s also part of the integration with an external system. For one shopping cart. but if you have easy digital download site, you have one product block with a lot of configuration choices on the sidebar. So you can really narrow it down, which of the product you want to show in you blog post or on your page. To give them a shout out or to just have them there and say, “Okay. These are the topics and here are some books or software or whatever that you put into easy digital download.”
BigCommerce
The next one is BigCommerce. That software is a service eCommerce system and they came to WordPress space about a year ago. They had … Oh. By the way, Karen White is also a speaker at this conference and she will talk about headless eCommerce. So BigCommerce seems to go the opposite of Shopify, in terms of integrating with WordPress. They feel WordPress is best for content marketing and they are all in reaching out to the WordPress developers community. It’s good to have an alternative to WooCommerce when it comes to selling products online. Speaking of which, WooCommerce, of course gives the store owner and side owner many blocks choices to accomplish the task faster than going through 40 controls on one block and the WooCommerce Product Blocks is the full name of the plugin. It’s probably the most downloaded specific blocks plugin from the repository with about 400,000 downloads.
Tools Plugins
Okay. So, how are we doing? Shall we keep going? I can keep going. We have one more section, that’s the tool section. That’s the one that I find myself lost everyday when I test new things. So let’s start out with A, like animated blocks and animating blocks is something scary for me. But when you want to call out a special section on your page, it’s quite intriguing and it grabs your attention of your viewer, who doesn’t know where to look first. There are two examples in the block repository. One is called Animated Blocks and the other one is called Animating Block.
Do we have problems with the sound or with things? So Animated Blocks has 76 cross browser … See. It says free animation and you can add your own as well. So that keeps you occupied quite a bit. The other one, the animating blocks plugin has a little less tools and you get through your work faster. The one animation block is done by Paul Allen.
Enough with all the movement. So, the one big section is the Blocks without JavaScript meaning … While Gutenberg was based on React JS and a lot of developers have not yet gotten up to speed with modern JavaScript Stack. But for those, there’s actually help out there and not only ACF, Advanced Customs Fields.
Block Lab
But there’s also BlockLab out there. Check them out. You can install a plugin and test and build your blocks without JavaScript and some of them without PHP actually. I compared three of these tools for an article at the WP Tavern, called Block Building without JavaScript Testing ACF, Block Lab and Lazy Blocks and I published it a couple months. It must’ve been mid-May or something and these tools are there for ever coding level.
So this one here that you see there, is from a Block Lab. They all function the same. You create a field group in the normal admin space there, give the name and then some magic happens in the background and the block appears in your block editor and lets you fill in the blanks on the form that comes up in the block editor. So this is Block Lab.
Lazy Blocks
Lazy Blocks is probably easier to learn and you only need basic HTML to be successful in creating your own blocks. It also has been updated about a couple of weeks ago. It has quite a few different types of field including code rich text box or repeater fields. So if you don’t want to install a plugin, see what blocks are in there. Grab the right one, test it, it doesn’t work, it doesn’t have enough fields or you need to jerry rig it or then you go to the next block. That’s actually what happened to me with a team. I needed to put a team on someone’s website and I was testing around all of them and then I say, “Okay. Now, let’s test these and then I can really be very specific at what I need, My team, the information from the team to actually show.” and I really like that. So there is help out there, people.
EditorsKit
The next one is EditorsKit by Jeremy Caradang. He’s a Co-founder of CoBlocks and has really named his earlier Block Ops program to Editors Kit. It’s probably a lot of tools that are not in the default editor. But in his view, they should be. He also is active in discussions with the core team and contributed code and also button reports. So the Editors Kit has developed into a Swiss Army knife and great features for the advanced block editor user and content producer. You can do markdown support, rich texts additional formatting, device visibility, get more CSF support and more options for image and cover image and also integrates well with the ACF blog … Block. Sorry. Blog. Block. It’s hard. Definitely worth checking out and he’s very active in the community. So you can always connect with him again.
Reusable Blocks
One of my favorite features of the Block Editor, I don’t know about you. But maybe that’s a good question to close it up is actually the reusable blocks. I just love that. I can import and export them. I can put a group of blocks into the reusable blocks. But on a few sites, I’ve gotten myself into trouble. Because I didn’t know on which post where all the reusable blocks are added and a nice little helper is the Reusable Block Manager. A plugin by the people at Yes WeWork and this plugin saved me a lot of time. Andrew Thomas who builds sites news outlets and who will be guest at the Gutenberg Times live Q&A on August 2nd, told me that clients really needed this and they included it into their sites and also thought it would be helpful for others. So they opened it up for the repository. I’m very happy about that and I was able to clean out in less than a minute, the reusable blocks I built but never used and declutter my block inserter.
So that’s it. That’s the end of the tour through the landscape through Gutenberg plugins. You can ping me on Twitter. @bph. My DMs are open. DMs are direct messaging or you can write me an email to pauli@gutenbergtimes.com and I hope you are all inspired by all the good work that has been done out there. Contribute to them, learn from them and create your own blocks fairly soon. Thank you very much for joining me. It was a blast. Thank you.
