Gutenberg Editor – Review

I don’t often review something in beta, but the Gutenberg Editor is getting closer to becoming an integral part of WordPress, so it’s time to start digging in to see what it can and cannot do, what’s good and what’s bad, and what it means for the future of WordPress.

What is the Gutenberg Editor?

The Gutenberg Editor, named for the creator of movable type Johannes Gutenberg, is an upcoming replacement to current TinyMCE design. The current format has been the editor that everyone has gotten used to for many years. It’s intuitive and easy to add text, media, links, HTML. Themes and plugins that use text modules, like Divi, use TinyMCE as the editor. It’s gotten streamlined over the years and many feel that it needs an update. The Gutenberg Editor is more similar to the editor you’ll find in web-building platforms like Squarespace. It creates paragraph blocks where you choose the content type from drop-down box and then place your content within the block. The first thing I noticed that I don’t like is no access to the Divi Builder. My preference of content creation is to write in the TinyMCE Visual Editor, add all of my images last in their proper locations, and then copy the content and paste it into my custom blog layout. That’s not possible with the Gutenberg Editor (at least with the beta version).
I started this post in TinyMCE and then did a copy and paste into the Gutenberg Editor. Each paragraph and header pasted as its own block. I like that. It is easy to create the content blocks. Just hit enter. Each paragraph is its own block. You can also insert blocks by clicking Insert in the upper right corner of the screen.

Drop Caps

If you want a drop cap simply click on Block to the right with your cursor placed on the block that you want to have the drop cap. Click the switch to On and you have a drop cap.

Uploading and Placing Media

Media such as images are placed into content a couple of different ways. One is to click the image icon at the bottom of the content. You’ll have to click the arrow to the left of the content block in order to move it into place. It’s a tedious process. Image alignment still works as expected.
Another way is to click the Insert button at the top right and choose what to insert. The block will be placed at your cursor’s position. The image above was placed using this method. Using the insert feature you can place common blocks, formatting, layout blocks, and widgets.

Cover Image

The Cover Image feature is interesting. Insert a Cover Image and then add your text over it. Choose Fixed Background for parallax and Dim Background to darken the image so your text stands out. This is one of my favorite features so far. 

Classic Text

It does have a Classic Text block that brings in the familiar features of TinyMCE’s Visual Editor. It doesn’t include the Text tab or a media feature. Plugins that add shortcodes to TinyMCE do not appear within the menu. Hopefully this is due to the plugin still being beta. The Insert drop-down box does include a shortcode block, but you have to paste in the shortcode.

Settings Sidebar

To the right of the screen is a list of options with tabs labeled Document and Block. Document includes the expected options for publishing, choosing categories and tags, setting the featured image and excerpt, allowing comments, choosing the post format, and ads a new feature – viewing the table of contents.
The Table of Contents shows your headers in an outline form. Clicking on one takes you to that header. I like this feature a lot.

Text Tab

Changing to the Text tab in the upper left corner reveals a few tags you can add to your content. This works like the Text tab of the TinyMCE editor.

My Initial Thoughts About Gutenberg Editor

There are a few things I like about the editor. I like the drop cap feature and the clickable Table of Contents. The Document area to the right is cleaner than the current settings area. I like the ability to insert a widget for latest posts, categories, or shortcodes into the content. I like being able to choose the author from the editor. I like the auto-save feature. I also like the multi-column feature in the Insert drop-down. I love that it can display cover images with text overlays in parallax. Unfortunately what I do like is far outweighed by what I don’t like. There are no SEO adjustments for my favorite SEO plugin. I can’t use the Divi Builder (my building tool of choice). I can’t publish without a sidebar like I can with Divi and Extra. Hopefully this will be fixed before it’s added to WordPress. It doesn’t show my my word-count. This is important for writers who charge clients by the word or someone that tries to target a word-count range for their posts. Overall the Gutenberg Editor feels awkward to me. I’m not even sure what the goal is, but it doesn’t seem to be to make the UI easier to use. I like the idea of a clean UI, but I don’t like common features turned into blocks as options to insert into different locations from a dropdown box. I found the old method of showing them at the top of the editor to be more intuitive. The content being broken up into blocks makes my content feel disjointed. There’s no drag and drop feature, so you have to move blocks around with the arrows. It’s actually easier to copy and paste the content than it is to move it. The worst part is I can’t use the Divi Builder to create my layouts. Matt Mullenweg has stated that the Gutenberg Editor will replace TinyMCE in WordPress 5. I think at the most it should be an option – not a replacement. Let those of use that want to keep the editor we’re used to have our choice. Don’t turn WordPress into Squarespace or similar UI just to be changing it. WordPress doesn’t have to be like those editors. TinyMCE is simple to use. The Gutenberg Editor doesn’t feel like an improvement. Instead, it complicates the process by adding steps that are not needed. I want tools across the top like a ribbon – not in a drop-down box that adds disjointed elements to the page. This isn’t the kind of word processor I would use to write with. It just makes creating content more difficult or confusing. The user interface should never get in the way of creating content. I suspect that if TinyMCE is removed from WordPress we’ll see lots of third-party plugins that will add it back with even better features than before. The majority of this article was written in the Gutenberg Editor. I did start to get the hang of it but it never felt as intuitive as TinyMCE. I ended up pasting the content back into Divi to publish with my Divi blog layout.

Let’s Discuss

  • Have you tried the Gutenberg Editor beta plugin?
  • Do you prefer Geutenberg, TineyMCE, or would you rather have something else?
Let us know what you think in the comments. Thanks for reading and please subscribe if you haven’t already. Featured image Munich – Deutsches Museum, from Wikimedia commons

Divi Background Gradient Review

Divi has recently gone through a series of updates and one of those updates added some interesting background features including gradients. As you may know, I’m partial to gradients (see the article WordPress Design Trends 2017 – Gradients) and I see them becoming more popular throughout the year. As you can imagine I was excited when I heard that Divi was getting a gradient tool. Does it meet my expectations? In this review we’ll take a look at the new gradient tool as see what it can do.

(Note – this article contains affiliate links to help keep this site running)

Background Settings

The new background settings includes four tabs: Color (for solid colors), Gradient, Image, and Video. Gradient is the second tab. To create a gradient, click the plus in the center.

Visual Editor Example

You’ll see the default gradient with two colors with boxes labeled Select Color. Click on these boxes to choose your colors.

From here you can move the circle to the color you want or select the color from the circles at the bottom. Once you’ve chosen your color you’ll see the hex code that you can copy if you want. You can also paste hex codes into the code field. If you move the circle, a circle will appear filled with the color to help you decide if that’s the color you want. The sliders on the right change intensity and opacity.

Once you’ve chosen your first color, select the box for the second color and make your choice.

Once you’ve chosen your colors select somewhere outside the gradient color box and you’ll see your gradient. If you don’t like the colors you can select the color boxes and choose another color.

Gradient Settings

Under the gradient is a section with settings that include Gradient Type (choose from Linear or Radial), Gradient Direction, Start Position, and End Position. These controls allow you to change the direction the gradient flows and how the colors blend together.

You can even keep them from blending if you want. Playing around with the controls can create some interesting backgrounds.

Choosing Radial gives you another set of options called Radial Direction which includes center, top, bottom, left, right, and several combinations.

Image Blend

You can even place a gradient over an image using the Image Blend tool. Click on the Image tab and load the image you want. Go to the drop-down box at the bottom called Background Image Blend and select Overlay. Your gradient will appear over the image as an overlay. (I took this photo of a log cabin at Cades Cove here in TN).

You can adjust the gradient controls to create some interesting effects. You’ll see the results in real-time.

Thoughts on the Divi Gradient Tool

The gradient tool is intuitive to use. It’s easy to create and modify gradients. There are enough adjustments and features that you can create dozens of gradients and none of them would look alike. You can even have a different gradient for each column in a row. You can place the gradients over images, which opens up a lot more possibilities. For example, you could use an image of a texture behind your gradient. By themselves the gradients are visually interesting. Throw images into the mix and the possibilities are endless. Since they’re created within the modules you can save the module to your library and reuse the gradients.

The gradient tool is fun to play with. I like adjusting the colors to see what I can create and I like seeing how they look over the images. The gradient tool is a welcome addition to Divi and I highly recommend using it for your designs. Now, if they were to throw particle animation in there I would probably not have time to write.

The example shown uses the text module. The background options are also available in rows, sections, and many other modules. The background gradient tool comes with many of the modules in Divi, Extra, and the Divi Builder plugin. You can get them at ElegantThemes.com.

Let’s Discuss

  • Have you tried the Gradient tool?
  • Do you prefer using Divi’s gradients or something else?
  • What features would you like to see added to the gradient tool?

Let us know what you think in the comments. Thanks for reading. Please subscribe if you haven’t already. 

Disclaimer – I am a contributor to the Elegant Themes blog. I am also a customer. This in no way affects my opinion of Elegant Themes’ products. I take pride that all of my reviews are unbiased and fair. Honesty and credibility are my highest priority. 

Divi Wireframe View Review

Elegant Themes recently updated Divi with an interesting feature for their front-end builder (called Visual Builder). One of the reasons I like building with Divi is the Divi Builder makes it easy to create a layout fast. You can place sections, rows, and modules, chose the number of columns per row, and customize every element and rearrange them by drag-and-drop.

The Visual Builder

The front-end builder works similarly, but I found it more difficult to visualize the layout than with the back-end builder because the sections, rows, and modules were almost invisible. I didn’t use it. Instead, I used the back-end almost exclusively. When I did use the Visual Builder I would change to the back-end to make layout changes, add modules, etc. This back and forth motion made me stick with the back-end builder. Until now.

The Wireframe View

The Wireframe View lets you clearly see the sections, rows, and modules that build your page. You don’t have to mouse over them to make them appear, and you can see more modules at once. You can easily switch between views while staying on the same page. The example above is the same page as the one above it. You can see how the longer pages are much easier to see and deal with from a design standpoint when looking at them in the Wireframe View.

The Wireframe View also lets you take advantage of the extra features in the front-end options windows. Features that are not available in the back-end such as collapsible options, a powerful option search, and the ability to edit labels directly where you see them. The Wireframe View sits next to the desktop, tablet, and phone views and switches almost as quickly.

Thoughts About the Visual Builder and Wireframe View

The Wireframe View solves a lot of my complaints about the Visual Builder. There are still some things we can’t do from the Visual Builder, such as use most third-party modules or use post settings, but the recent updates have added enough to make me use it. Elegant Themes has even more views planned, so the Wireframe View is just the start of something bigger, and I’m sure better, that’s to come. Divi now has excellent back-end and front-end builders. No matter what style of building you prefer, Divi has a mode to fit with your style.

The Visual Builder and Wireframe View come with Divi, Extra, and the Divi Builder plugin. You can get them at ElegantThemes.com.

Let’s Discuss

  • Have you tried the Wireframe View?
  • Do you prefer using the Wireframe View or the back-end builder?
  • What features would you like to see added to the Wireframe View?

Let us know what you think in the comments. Thanks for reading. Please subscribe if you haven’t already. 

Disclaimer – I am a contributor to the Elegant Themes blog. I am also a customer. This in no way affects my opinion of Elegant Themes’ products. I take pride that all of my reviews are unbiased and fair. Honesty and credibility are my highest priority.