Gutenberg Revisited

Gutenberg — the new block editor from WordPress — was released in late 2018. I’ve now had the opportunity use it on several sites, and these are my initial thoughts about it. Please note this post is more designer/developer focused. For more of a general overview about the block editor, please read my previous post, Here Comes Gutenberg.

What I Like about Blocks…

Columns
Layouts that previously would have required a custom template can now be created in minutes. The primary example is the columns block. I especially love being able to use columns at will without resorting to customizing a child theme or creating a special page template.

con: The columns appear very narrow in the editor and it can be hard to drag blocks in and out of the column areas. If you use a bullet list inside columns, it starts to look pretty bad in the editor because there is not enough width to show the text without wrapping. All the content is smushed together.

Galleries
The gallery block is really nice. I like that it can be adjusted just like the old WordPress gallery to be multi- or single-column, link to the images or not. It’s a nicer visual representation of what the gallery actually looks like, whereas in the classic editor, it could often look nothing like the real gallery depending on the theme.

con: You need to install a plugin like WP Featherlight to make the images pop up in a lightbox when clicked, as far as I can tell. It would be nice if this was just built in to the gallery block as an option to turn on or off.

HTML block
As a developer it’s amazing to have a block just to insert custom code, if I need to add a very specific area to a page that needs to look “just so”, or maybe I need to insert a widget from a third party in javascript. Previously, this was a big problem because custom code could be hidden or easily edited/overwritten in the visual editor. This way it’s more protected and separate.

con: I’ve noticed several times that if invalid HTML is detected, the block shows a warning and allows you to expand a window showing the errors. The interface for fixing the html is super confusing and reminds me of the draft history interface, where nothing seems to be editable. I might be missing something here, but so far this has thrown me for a loop.

Classes
Possibly my favorite feature is the ability to add css classes on any block, in the Advanced area. Like the HTML block, this allows me as a designer to add specific styles to headings, paragraphs, or really any other area, without it being in danger of getting lost when the text is edited.

Re-usable Blocks
I haven’t used this nearly as much as I thought I would, but I still love that it is an option.

Pet Peeves

The way inline images work is just plain confusing, and I’m not sure I “get it” enough to even write much about it here. This was one of the most useful features of the old editor, so to see it degrade here is really unfortunate. Inline doesn’t gel very well with blocks, and it seems like once an image is inserted inline, it can’t be edited, only removed. What am I missing here?

A lot of the UI (user interface) elements don’t show up until you hover or click inside of a block. This is kind of cool, because it makes the whole view cleaner as you’re working. But it also makes it really hard to delete a block – you have to click in the block, click again on a three dots for “more” and then “Remove Block”. It can make deleting something simple like a button take way longer than I feel it should.

The whole editing window is much narrower than the classic editor. I think this is because some themes allow for full width images/content areas, so it helps show the difference between the normal width (narrow) and full width (wide). But many themes don’t have this ability and it’s annoying that the editor can’t be adjusted to be wider. See my above comment about how columns appear smushed together because they are so narrow.

Thumbs up for now

Overall, I think Gutenberg is a big step in the right direction, and it was needed. The ability to use columns alone, without a plugin, is huge.

There is definitely great room for improvement, but I’m already looking forward to updating existing sites to use more of Gutenberg and less of custom fields or plugins that are becoming obsolete. It’s already changed the way I think of laying out pages, and is making building a site easier and more flexible.

How to Remove Spam Comments

Ever wonder how to get rid of spam comments all in one go? Here are a couple of methods you can use to clean up your WordPress comments.

Reminder: it’s always a good idea to take a backup of your site before doing anything major like deleting comments, just in case you change your mind or accidentally delete real comments and not just spammy ones.

Use a Plugin

If you’ve let dozens, hundreds, or even thousands of comments (yes, it can happen) accumulate on your site, a quick way to get rid of them is by installing a plugin like Delete All Comments.

Here’s what to do:

Go to Plugins in your WordPress dashboard and click “Add New.”

Search for “Delete All Comments.” Install the plugin and Activate it.

Then, go to Tools > Delete Comments. Check the radio button for “Delete all comments which mark as Spam” and click Delete Now.

Delete all comments plugin settings screenshot

Voila! Your site is all fresh and clean. Make sure you adjust your Discussion settings to prevent future spam comments – skip to instructions.

Advanced: Delete with Database Command

Feeling techy? It’s easy to delete unapproved comments directly through phpMyAdmin. If you don’t know what that is, do not attempt this method! This is for advanced users only.

Here’s what to do:

The way to delete spam comments through phpMyAdmin is to delete the comments that have not yet been approved. If you have spam comments that have already been approved, you will need to use another method. Before doing this method, make sure you approve any non-spam comments.

Log in to phpMyAdmin.

Make a backup of your database just in case.

Look for the phpMyAdmin icon (under databases) and click on it. You should see a page like that when you are in the phpMyAdmin page

Select your WordPress database by clicking on it on the left. You will see a list of tables within that database.

Next, locate the tabs on the right side, and find “SQL”. Click on that.

Run the Following SQL command on your database:

DELETE FROM wp_comments WHERE comment_approved = '0'
Screenshot of phpMyAdmin running an SQL command
Advanced users can use this method to remove unapproved comments directly in the database through phpMyAdmin

Click ok on the “do you really want to… DELETE FROM…” message popup

You should see a status message saying something like “153 rows affected”. The number of rows will vary with how many comments were removed.

Log back in to your WordPress admin panel, and you will find all the pending comments gone! Hurray!

Adjust Settings to Prevent Spam Comments

Now that your website is squeaky clean and rid of spam, let’s make sure it doesn’t happen again!

Option 1: Turn off comments
If you aren’t interested in receiving any comments, turn them off in the Discussion settings like this:

Discussion settings for turning off comments in WordPress
Click the image to view it larger. Use these settings if you want to disable future comments on your website.

Option 2: Use Akismet Anti-Spam plugin
If you want to encourage comments — but not spammy ones — install and activate Akismet Anti-Spam plugin. You will also need to choose a plan (free and paid versions available).


The New Gutenberg editor from WordPress

Here Comes Gutenberg!

As soon as November 19th, 2018, WordPress will release a major update: version 5.0. With this update will come Gutenberg – a new editing experience for WordPress.

What is Gutenberg?

Gutenberg is a very exciting development in the WordPress world. For years, the page and blog post editor within WordPress has remained virtually unchanged.

Now, with Gutenberg, the editing interface is cleaner and allows for more custom page layouts and styling using blocks.

Screenshot of the new editor in action

Here you can see a paragraph Block is highlighted while I write my post

Blocks allow you to insert and style individual sections of the page such as headings, paragraphs, buttons, images, and more. It tales all of these normal page elements and separates each one into its own block, which makes it easier to do things like customize the color or spacing, or reorder them on the page (without messing up other sections). There is limited support for inserting columns as well, which can make for more interesting pages without having to resort to a custom coded page.

WordPress is looking ahead to stay competitive with other website platforms. And, they envision a time may come when the entire website will work using blocks, so that it can be viewed on any kind of device imaginable – not just the phones, tablets, and laptops that we have today. It is a forward-thinking vision and one that I’m truly excited about.

 

How will Gutenberg affect my WordPress website?

So far, Gutenberg seems to have very good compatibility with the websites I have tested it on. I have not seen any visual issues on sites that I have built. However, I will continue to test, and in the meantime am using the Classic Editor plugin to suppress Gutenberg until my tests are complete.

If your site uses the Divi theme, you may continue to use the Visual Builder to view and create pages. Gutenberg will be available as an option, but you’ll likely continue to use the Visual Builder, since it’s still a much more robust editing experience than Gutenberg.

The general consensus is that Gutenberg will not replace editors like Divi. However, over time there may be many more blocks and custom blocks available from WordPress and independent developers. This means the way we build WordPress sites will continue to evolve, and we have more tools at our disposal to create sites in a way that work best for each individual client — and I love that!

 

Where can I learn more?

There are lots of resources available that show examples of Gutenberg in action.

Check it out and tell me: are you excited about Gutenberg? Nervous, perhaps?

What do you look forward to doing with Gutenberg editor that you couldn’t do before?