On today’s episode we are going to talk about what EVERYBODY is talking about in the WordPress Community, Project Gutenberg, right here on Your Website Engineer Podcast, Episode No. 355.

Hello, everybody. Welcome to a new episode of Your Website Engineer Podcast. My name is Dustin Hartzler and today we are going to talk all about Project Gutenberg. It’s going to be a little bit of a different episode this week. I am just back from a couple weeks of travel and didn’t have time to put a full show together as my babysitter was out sick the last couple of days and it’s just been a whirlwind of just getting back in the swing of things and getting back with work and whatnot.

So, today we’re going to talk about Gutenberg and there’s a piece of information in the news that I want to share with you about Gutenberg and then we’re going to talk about it. On the news front with Project Gutenberg there is an article over on Matt Mullenweg’s blog (ma.tt) talking about how the technology used has this patent clause in it that’s given by Facebook. So, Facebook created this technology called React and it’s a JavaScript framework. Calypso has been using it and this new Project Gutenberg has been using it. The big issue is, and I’m just going to summarize this into a long article that Matt wrote, is that Facebook has some patent clauses that’s built into the technology that Matt and the open-source community is not a fan of and it’s not going to be something that WordPress can work with long-term.

So, this new technology, React, which was used to build all of this Gutenberg project is going to be reevaluated. It is going to be something that they’re going to look at a couple different technologies that are out there because of this patent clause within Facebook. The big deal is that WordPress is open source and we like to be able to use it in any way, shape, or form but with this patent clause inside the React license, it’s going to just – it’s not going to be completely open like the WordPress community needs and thrives on. There’s talks about using a pre-React, which would cause the least amount of rewrite or view, which is in another JavaScript library that could work but it looks like Project Gutenberg is going to be rewritten with this new technology. So, is Calypso. Calypso is the technology that came out of Automatic a couple of years ago.

This new JavaScript framework that allows navigation within WordPress are very quick and snappy and it doesn’t allow for page reloads or most things happen out of page reload. So, that’s really nice, so all of that will be rewritten as well. So, that’s just in the news but let’s just go ahead and dive in to what Project Gutenberg is. The WordPress visual editor within WordPress hasn’t had many changes over the years and, for the most part, has stayed pretty much the same for the last dozen years or so. It’s not a bad thing but finally we think it’s time for a change. Other platforms like Medium and Ghost provide a unique and refreshing experience to writers, so why can’t WordPress as well?

So, there’s been many contributors and volunteers that have been working on this new Gutenberg WordPress Editor behind the scenes for the past six months. Their goal is to make adding rich content to WordPress simple and enjoyable. Today we’re going to talk about just what it looks like – some pros and some cons and just kind of give you an opportunity to learn about it and go install it yourself. So, what is Gutenberg? Gutenberg is a new take on the WordPress Editor. It’s named after Johannes Gutenberg who invented the printing press, a movable type more than 500 years ago. The current visual editor requires a lot of time to utilize short codes in html to make things work and the goal is to make things easier, especially when those folks who are just starting with WordPress are embracing the little blocks feature and hope to add more advanced layout options. So, as the team is working on this it’s in beta and it’s in the testing phase and I don’t recommend actually running this on a live site but if you have a test site or you’re looking at your – you’ve got a version of your website for development, you can go ahead and install it there just to see what all this hype is about.

There have been tons of improvements and there’s been – I guess they’re looking for getting about 100,000 active installs before it can be rolled into Core. Right now, it’s about 2,000 active installs, so it’s got a long way to go. Lots of downloads that need to happen before this can be added to WordPress. How do you install Gutenberg? It’s much like any other plugin. You go to the WordPress repository, you can just search for Gutenberg, and you can install it right from your WordPress dashboard. You can install and activate just like any other plugin that’s hosted in the WordPress repository. After you install Gutenberg, then you’ll see links under your post that will allow you to open Gutenberg Editor. So far, I haven’t been able to figure out how to do it by default on a brand-new post.

So, if you create a brand-new post, you create it and you have the old Visual Editor, you’ll have to save it then go back out to your all posts list, then next to edit, there’s a new link that’s called Gutenberg. It still keeps the edit link there and there’s the Gutenberg link so you can get access to both of them. I’d say once it rolls into Core and it’s this brand-new feature then you’ll just have the edit link and it will take you to the Gutenberg Editor. It adds a new menu in your WordPress dashboard, which is on the righthand side down towards the bottom. I guess that’s how you add a new post. I’m just seeing this now. Like, you can go to Gutenberg and you can say new post and then you’ll start a brand-new post with the Gutenberg Editor. The menu is probably there just for testing purposes.

I doubt that that will be there when the version is live in Core WordPress. Then if you take a look side-by-side of the Gutenberg Editor and the current Visual Editor you can actually see there’s a lot more writing space with Gutenberg. It really even works and looks good on mobile devices, which is nice. If you’re writing on a laptop screen, Gutenberg is going to be a nice change of pace. It’s focused on writing first and then tries to write everything in a less distracting way. So, with Gutenberg, it basically has – it’s still the same panel on the left-hand side as the regular Editor. On the regular Editor on the right-hand side you’ve got Publish and then you’ve got the Publish button, then you’ve got where you can put the future image, you can put the tags, categories, all that kind of stuff. But that’s in the new Gutenberg Editor but they’ve really changed the visuals. It looks much, much nicer and it has all of the settings for the page and whatnot.

So, after you’ve added the title to the page and that part is easy. The title stays very much the same. You’ll see this little plus button and it says “insert block” and you can add that and once you click on that you can add anything that you want. There are a lot of blocks that are in there. It shows you the most recent blocks you’ve used – so, the most recent eight blocks you’ve used, but then if you click on blocks, you’ll see – this is all in a little popup menu and you can add a paragraph so if you wanted to add regular text or you can add an image, a gallery, a heading, a quote, a list, a video, a cover image, audio, and then you can do some formatting things like a poll quote, tables are built right in, which is really cool, preformatted text, code text, customer html, classy text, a verse. You can do a layout block they’re called and this is a separator, so like a horizontal line or you can break it into more content then more a tag.

You can do button, you can do text columns, and then you’ve got widgets and you can add in the widgets, you can do latest post, categories, and short codes. Then they also have an embed stat, so if you wanted to embed something like YouTube or Twitter or Facebook or Instagram, WordPress, SoundCloud, Spotify, Flickr, or Vimeo. There’s a WHOLE bunch of them there. You basically will click on one of these blocks and then you can start editing it. The cool part is, like once you’ve added it, then there’s a little arrow on the left-hand side that you can move that whole block up and down. So, if you add a couple of paragraph texts and that’s all in one block and then if you wanted to move a table and put a table somewhere you could move it up and down between different blocks. It’s really, really simple.

There is – when you click on a block you have the ability to, like, left, right, and center justify. You can bold, you can italicize, and you can strikethrough, and you can also add links. Gone are the days of the tiny MCE Editor where you have all those buttons do all of the editing. All of the information and all the things that you want to do is on the right-hand panel. So, if you were in a text block and you wanted to highlight things or you wanted to change some color, you could go over to the right-hand side to the block area. You can change the font size with the little slider, so you can make the font bigger or smaller based on the size. You can change the background color or you can change the font color and that’s something that you couldn’t do before with WordPress, so that’s really, really exciting.

Then you can do some block alignment whether it’s going to wrap around an image or not. That’s all on the right-hand side. Within the document itself, I guess on the right-hand side, there are two panels. One is the document, so that’s where you set the visibility whether it’s going to be a public page. You’re going to be able to add the post format, when the published date is, and it’s going to show you all the revisions on the right-hand side there in the documents. You also see the categories and the tags, the featured images, the excerpt, and the discussion. So, all of the stuff that used to be either on the right-hand sidebar or the post-meta stuff at the bottom of the page inside the WordPress Editor, that’s now on the right-hand side in your document. You can preview things. You can update or post changes and the coolest part is the page does not refresh when you click save. So, that’s probably one of the most exciting features to me. You can type out all this stuff. You can hit publisher, you can hit save, and the page doesn’t refresh. So, that’s really nice, especially if you’re doing some edits to a post or a page. Every time a page refreshes it just takes more time for you to edit and go through and just wait for the changes to be made. Now with Gutenberg, it just updates right away and you don’t have to refresh that page. So, that is really nice. Let’s see what else is coming in Gutenberg. The goal is just to make this rich content simple and enjoyable and the thought process behind it is once you learn how to add one block and then you kind of understand how to add any type of block. So, the panel on the right-hand side changes depending on what you’re using, so you have a text block, you have the ability within the text block to have a drop cap, so that’s where the very first letter is much larger.

So, you can do that and you can turn that on and off. But the formatting panel for the block is a little bit different depending on if you are using a block quote. A block quote right now will only allow you to add additional CSS classes; whereas, as paragraph text gives you the ability to add that drop quote, change the font size, change the background color, change the text size, and change the block alignment. I’m looking at a table here I have created and that will give you the ability to add an additional CSS class. I also have a block that it is the latest posts and then in the block settings there it says that I can display the date of the post, so I can turn that on and off and I can show the number of posts to show and any additional CSS classes. So, if I wanted to add a class to this specific area I can do that from the block settings as well.

So, each block has its own settings. Most of them will be similar and I think some of the font things and some of those customization things should be rolled into more versions or in the later versions, so I don’t think all of the stuff is working quite right but the whole premise is once you’ve figured out Gutenberg on your very first post, then you’ll understand how to do it when you’re building a page, when you’re building whatever. It’s going to have that very same experience with this new block editor. Like I said earlier at the top of the show, it does work very well on mobile right out of the box. If you need to quickly insert an image or a paragraph before publishing on the go, you can do that very, very easily within Gutenberg. The JavaScript works really well. The one thing also is that the tiny MCE toolbar that you’ve been used to, and seeing for a long time, is replaced with a dropdown menu.

If you click on the insert button and it just kind of works. Like, it’s almost like – one thing that I noticed is it feels brand new. It feels like it just gives WordPress this brand-new experience and it’s almost like when a lot of features were rolled into the customizer. You could do things in the customizer. You could see the live preview automatically. Everything just kind of worked. I really enjoyed that. It gave WordPress a freshness when the customizer came out and now that’s happening with Gutenberg Editor, as well. Everything is live preview, so when I was telling you earlier about when you can change the color and you can change the background, all that kind of stuff, like that was live. As soon as I flipped those switches, I could see that in the WordPress Editor right away and it was no problem whatsoever.

Right now, with the tables, you can only add a two-by-two table but I’m guessing they’re just trying to work on making sure that works right. There is also a live block html, so you can insert your code and then see a preview right from within the block, so you don’t have to do a full-page preview. So, if you added an image and you want to make sure the image is right, you can just click from the html view into the preview view and you’ll see that image. So, that’s really nice. Drag and drop images – you can drag and drop right into the middle of a post, right in the middle of a block, so that works. Then you can add additional CSS classes if you want. The recent blocks, like I said, was really cool. It gives you the ability to have the last seven or eight blocks that you’ve used right in the quick panel so you can see those right away.

Let’s see if there’s anything else that’s of big value. Oh, another thing that I didn’t get to test but it is something that is REALLY useful, I think. It’s that they added a table of contents on the sidebar and there are clickable links so you can easily jump to sections in your article. This can come in really handy when you’re writing long-form content. So, if you have a big long blogpost and it’s separated by h2 tags, then you can use those as headings and people can click on those directly. Maybe you have a table of contents at the top of the page and then it will automatically generate anchor lengths to these different sections within your post, which is really nice. It’s a big change. That’s never been part of WordPress before. You can create a button. This one is nice because there was never an easy way to create a button before.

There are not a lot of options right now but I’m guessing, again, another thing that’s coming with more and more options. The embed pieces are there, again, like I said, hundreds of different places where you could embed content from. You just add a URL and it just works. So, that’s kind of just an overview of what Gutenberg is. It’s really hard to visualize I know in a podcast but the importance is to try it out and see what it looks like beforehand. I think there’s going to be a LOT of developers that need to do some work to make their plugins work better with their options and their settings and their themes to be able to just work better with this Project Gutenberg. That’s why it’s out there now. That’s why they’re starting to work on it. I think that when there is going to be a change in the technology because this will be rewritten.

It’s not going to change how it works and displays. It’s just going to be a matter of working and reworking the code so it’s using a different JavaScript framework. Just looking at some advantages of using Gutenberg, it is a newer medium-style editing experience and if you’ve ever used that you are definitely going to like the Gutenberg Editor. It’s less distracting and you have more screen real estate to do your work or to create that poster page. Blocks are fun to use. Alignment options are a step forward where you can align certain blocks. Some blocks can be centered or right-justified. Others can be centered or right-justified depending. You do not have to do the whole page and it makes it much easier to try to figure out how to get your content exactly as you want it. It works great on mobile. That’s another pro, like I said. Now, theme and plugin developers have the ability to create their own custom blocks and it’s much easier to use for beginners.
Some of the most basic things that have been really hard to use for WordPress are now much, much easier. There are some disadvantages of Gutenberg right now. It’s missing markdowns so you can’t use it for markdown support. It looks like it could be a little easier or a little harder to use initially but once that learning curve is over it is going to be much, much easier within WordPress space. It doesn’t support custom plugin box or custom meta plugin box for Yoast, for example, but that makes it pretty much unusable for production sites right now but I’m sure that they are starting to add those features in Gutenberg as well. It doesn’t support responsive columns yet so, hopefully, that is something that’s coming.

A lot of reasons sometimes why the visual builders are added is because they want to add columns and column support and put text in different columns, so that’s something to think about and it’s time for columns to get into WordPress Core. Then backwards compatibility could be an issue when it comes to old themes. Old themes need to be updated in order to display things properly. Who knows? We’re not exactly sure yet. Then one other piece of information is that some are worried about the accessibility of Gutenberg. Make sure to check out the posts that Yoast wrote about using Gutenberg with a screen reader. So, there are some issues there. I’m guessing that since it’s all still in Beta that there’s still a lot of work being done to make it work right and then they will add the accessibility features as they’re rolling out these changes.

So, in summary, I am quite impressed with the way Gutenberg looks. It’s definitely something we’re excited for in the future and I’m excited to see how this progresses. They’re at – Version 1.0 now is the current version of Gutenberg, or 1.1, I guess, and it looks like about every two weeks or so they’re rolling out a latest version and more updates. So, we’ll see what that looks like over the next couple of weeks. I’ll keep you updated on what web technology they’re using for Gutenberg and how the project is progressing. So, I feel that there was a lot of talk. Like, every week I was talking about Gutenberg and everybody in the WordPress Community is talking about Gutenberg, so I wanted to dive in and just talk about what it is and how it works and I want you to go out and install it this week on a test site because I think you will really enjoy the experience and see exactly what we’re talking about of the new wave of WordPress.

I believe I shared this in a previous episode but the goal is to have Gutenberg come out with WordPress 5.0, so that would be kind of like a big milestone. I know WordPress doesn’t do milestones and then just release the next version after next version but it would be a really cool idea to launch this with 5.0 and kind of signify, like this is a brand-new version of WordPress because the Editor is all new and it looks awesome and it’s a lot of fun to use. So, that’s the show, the update for this week. Take care and we’ll talk again next week. Bye-bye.