Many developers have been talking about the Gutenberg editor for weeks now. Blogs, ads, you name it, there's been a lot debate over this topic. Some are a bit worried about this change, others are excited. No problem. We are here to go over the basics of Gutenberg and dispel any crazy myths that this might be the end of WordPress.
Before we get started, if you are a beginner to WordPress and website design, we highly recommend checking out my guide on the subject. Once you get your site up and running you’ll have a better idea of where Guttenberg comes into play, whether you run an e-commerce site, you're a drop shipper, or any anything in between.
What’s the big deal with Gutenberg anyway?
The real scoop is Gutenberg isn’t anything to get flustered about. It’s actually a very simple editor, fairly straightforward… despite a few small kinks which will be touched on.
Basically, WordPress wanted to create an easy to use platform that would work well for beginners but that's robust enough for seasoned developers.
Gutenberg introduces blocks, boasts the need of less plugins (which can be troublesome), its compatibility with most mobile devices, and how it looks more like your website in edit mode.
Overall, ease of use and flexibility of the editor are supposed to give users more control to create visually appealing pages.
WordPress offers a quick overview on their website.
Without further delay, let’s talk about some of the features and how they compare to the Classic Editor.
Unlike the current WordPress editor, Gutenberg uses a blocking system which is very similar to Divi theme modules. If you are unfamiliar with the Divi theme, be sure to read my review.
Whether you want to add text, images, columns, or something else altogether, blocks are what you use to design your page using Gutenberg.
Much like the classic editor, there is spot for the title and the description. You can easily add an image by adding an image block.
You can change the sizing of an image two different ways. You can drag the corner of the image to make it big or small. Or go to the right side column with the blocking information and choose the size you would like or change the dimensions.
You can also change the order of the blocks by clicking the upper left-hand corner and click on the “move down” icon to change the order of the blocks. You can also drag the image or block of text up or down as well. Pretty simple.
Formatting images around text
But what if you want the text next to the image? This was a little difficult to figure out as it wasn’t quite as intuitive. There isn’t a feature to drag and drop the text next to the image.
What was discovered was the user needs to shrink the image and click “align left” or “alignright” in the upper left-hand corner above the image. From there you can adjust the image size to your preference. Gutenberg shouldn’t have a problem modifying this and making a more intuitive interface for this feature in the future.
Another feature needing improvement is columns. Columns are a nice feature as you can add more than one piece of content such as two different articles or blog posts side by side so users will have some choices on what to read.
You can easily add columns by adding a block, however, it only gives you two columns for content. If you wanted to add a third column it gets a bit more tricky. After a bit of playing around a vertical ellipsis was discovered that appears if you hover over the left side corner of your second column. Once you click the ellipsis you will find a toggle on the blocking column where you can choose the number of columns you want to add by dragging the toggle to the left or right.
We liked the ability to add more columns but we had to do a bit of detective work to find out how to create additional columns.
Downside of Columns
Another important thing to note about columns is once you delete a column you lose your content. So be sure to SAVE your content if you plan to remove a column. Once it’s gone, it’s gone and that could make a good day go bad.
More on Blocks
Gutenberg also added some blocks that are useful and very similar to widgets and other gadgets which you can use to emphasize your blog. What’s great about this is it can eliminate the use for some plugins.
You can use blocks to drop in videos, audio, add buttons, codes, files, embeds, and more. You also get a few design elements. For instance, there are horizontal lines, layout elements, a separator, read more, just to name a few.
A few of these are new and it’s highly likely they will continue to add new blocks.
For example, it’s super simple to add an affiliate blog and add a “buy now” button that matches the buy buttons Amazon uses. We love the simplicity of adding these blocks and having more control over the look and feel of content without going through the trouble of adding plugins.
Another important note is you may want to use the classic editor block because not all plugins are compatible with Gutenberg. This may be a pain for users using several plugins. However, it’s simple to use, you can drop the classic editor block in, and add your plugins if needed.
So basically, don’t worry if you think Gutenberg has dropped the ball on some of the features of the classic editor. What Gutenberg does is keep the features used in the classic editor but made it cleaner and more user-friendly. You just need to dig around in Gutenberg a bit to find them.
Not too Shabby
Ultimately we see Gutenberg editor as a good writing experience and a nice upgrade from the classic editor. The jury is still out on how the new themes and plugins will work with Gutenberg. There’s no doubt there will be some growing pains while Gutenberg’s developers troubleshoot the kinks and site developers get accustomed to it.
Blocks give the user ease of use. Simple drag-and-drop ability makes it easy to create and control your content. Beginners and the “technically-challenged” will definitely appreciate its ease of use. Overall it’s a great improvement to the Classic editor.
WordPress claims the editor mirrors your website. This is partially true. It does look more like your website. So you get a better idea of what it looks like before it goes live but it’s not exactly perfect. There are still some sections and images that don’t come through right away when comparing.
This may be a glitch and as always, sometimes a good “refresh” of the page is all it takes to fix it. Just keep this mind when using Gutenberg and don’t always trust that what you see in Gutenberg will look exactly like your live website.
This being said, it doesn’t mean to throw the baby out with the bathwater. Having a better idea of what your content will look on your live page is still a nice improvement over the classic version.
It’s also important to note that right now Gutenberg is still very new. Think of it as a toddler, functional but still stumbles around from time to time. If you find yourself getting a bit frustrated, give it time to grow and develop as they are continually updating it.
Give it a try and let us know what you think!
Hope this has been helpful, to get a better idea of Gutenberg Editor and compare with Classic Editor, check out my video on the subject below: