creativity with gutenberg blocks

This Is Why the WordPress Block Editor Will Light Up Your Creative Brain

At first I hated them. WordPress launched the new block editor December 6, 2018, and it tripped up my workflow. Why bother learning how to use Gutenberg blocks? This system breaks up every piece of content – even paragraphs – into separate units.  Goodbye nice big Visual Editor.

Now each element — paragraph, heading, image, etc., gets its own mini menu with it’s own set of styling settings.

What a nuisance having to manage a block for practically every line of text. So I thought.

Turns out, I’m becoming a fan.

Playing with these Blocks may spark unexpected joy

If you’re like me, these are some reasons to love learning how to use Gutenberg Blocks.

  • Blocks allow more control to make content look more interesting and engaging.  You have greater freedom to express yourself with with block-level settings instead of coding CSS and HTML.
  • You can now free yourself from plugins, shortcodes and hand coding needed to get a desired look. No more worries about removing or replacing shortcodes left behind by plugins you stop using.
  • The Gutenberg Blocks system allows you to save settings in reusable blocks. If you need to change your reusable block, re-save it and they all update across your site automatically. What a time saver!
  • With a few handy keyboard shortcuts, a speedy workflow is back. You’ll learn a few shortcuts here.

Gutenberg Blocks are here to stay, so here are 5 quick tips to help you work faster and make more beautiful pages with the Block Editor.

Tip 1: Convert any classic blocks to use the Block Editor

Let’s walk through how to change Classic to Gutenberg Blocks step by step

Even on an updated website, posts and pages created before December 2018 may still use the classic block structure.

Find your Classic Blocks to convert

It’s easy to see if you have Classic blocks in place. A Classic block has the label: Classic

classic block WordPress
This content is in a classic block

Click inside the block of text. If you see a tool bar with 10 or so icons, you’re using the classic editor interface.

Classic block with classic editor interface:

Another way to find classic blocks is to use the document navigation tool. This is a new feature that displays a list view of the blocks in your current post or page.

Click the three dashes in the menu bar at the top of your page or post:

You can see in this example we have a classic block in this page:

Now locate the “Convert to Blocks” option for the Classic block

Where the “Convert to Blocks” option appears may depend on your device and screen size.

On a desktop, to convert classic blocks you may need to use the “more options” button.

First, click inside your Classic block to activate it. Then look for a button with 3 stacked dots:

How to use Gutenberg Blocks by converting classic blocks

More options appear when clicking the button with three vertical dots. This is the block settings button where you’ll find the option: Convert to Blocks.

Now click “Convert to Blocks”

Convert classic blocks to learn how to use Gutenberg Blocks

On a laptop or tablet, the Convert to Blocks tool may be in a toolbar that’s stuck along the top of your window.

The conversion process is almost instant.

Poof! Your classic block transforms into an array of new blocks — with the correct block types applied automatically.

Tip 2: Learn to add new blocks and choose types of blocks quickly.

You can add new blocks just by typing. But to see a menu of choices, use the “appender” in the Block editor.

The plus sign is really a drop-down menu button, opening a choice of block types:

Turns out, the block appender button is just one of many ways to get familiar with blocks. There are faster ways to add them.

If you don’t want to stop typing to mouse over a list of blocks and pick one, here’s a fast way to insert a specific block type.

Notice the tool tip:

Start writing or type / to choose a block

Check it out: Typing a forward slash opens the list of block types.

Now you don’t have to take your fingers off the keys to select a block. 

There’s no need to select the paragraph block – that’s the default block you get if you hit return (no menu action required).

But if you need another block like a heading, column or image, type the first letter of the new block you want. You get filtered choices for faster selection.

Here the list block type appears just by typing the word “list” after the slash:

With your block type selected, just hit Enter. Your new block is in place without taking your hands off the keys.

Tip 3: Use the pound sign to style headings while you type

Make quick work of turning plain text into an H2 heading like this.

  1. Put your cursor at the start of a line of text you want to make into a heading.

Like this:

Fastest way how to use Gutenberg blocks to format headings in WordPress
Step 1: Put your cursor in front of your text

Type two pound signs (##)…

Heading shortcut key Gutenberg
Step 2: Type two pound signs in front of the headings

and a space.

Step 3: Add a space. Two pound signs and a space turn text into Heading 2 (H2)

Instantly your text turns into an H2 heading.

Use three pound signs for H3, and 4 for an H4 heading, etc., up to 6 pound signs for H6.

Tip 4: Get familiar with the Columns block

One of my favorite new elements the Columns block.

A three-column layout is a popular and powerful web design structure. A row of boxes adds horizontal rhythm and order to content for desktops or tablet size browsers.  They stack into a tower on small screens.

Now you don’t have to depend on plugins or wrack your brain trying to choose a theme with special coding to use columns

Columns organize your content by nesting blocks inside

Columns are now a core feature in Gutenberg. The Columns block allows you to create up to 6 columns and put other kinds of blocks in them. Yes, you can put more than one kind of block in a column.

One of my favorites ways to use columns is with image and text blocks. This makes quick work of laying out a grid of staff photos, like this:

how to use Gutenberg Blocks for a staff directory on a website
Image courtesy of Mount Vernon Family Therapy

You can even add links to content inside your columns to make navigating super easy for your visitors.

Such a layout used to pose a mind-bending shortcode-nesting challenge, especially when you had to include links.  Rearranging the content often required surgical precision cutting and pasting in HTML

Thanks to the columns block, creating a grid to show staff photos like this is now a breeze.  And reordering them is as easy as dragging them around.

Quick tips to master WordPress Column blocks

To jumpstart your work with columns, here are a few tricks that will help you get started with them quickly.

First, open the column block type and choose the number of columns from the dropdown box.

How to use Gutenberg Blocks for columns

Next, select the placeholders and insert content in columns

In this example we’re working with 3 equal columns:

You’ll see box-shaped placeholders for your column layout.

Click inside the placeholder to insert your content blocks.

Here’s what the first two columns look like with a list item added:

Finally: Celebrate! Your columns are done!

Choose your columns, add your content. It’s that simple.

Tip 5: Style your blocks the easy way — with style settings in the sidebar

One of the best ways to feature a snippet of content is with a contrasting style.

The sidebar now has a Block tab so you access design settings without coding or leaving the page.

The block tab is active for a heading block in this screenshot

For example, if you want to set off a block with a background color, check out “color settings” available for paragraphs. This bullet list has a background color of #efefef applied, for instance:

  1. Place your cursor in the block you want to style
  2. Check that the Block tab is active
  3. Click the down-arrow at color settings
  4. Choose your colors!

You can do this!

You need to have an engaging website

WordPress keeps adding great tools to organize your content so it engages your audience.

Build your confidence — get WordPress Tools and Tips by email:

Build confidence and know-how faster with Website Tools & Tips

Wrapping up

Blocks are a boon for WordPress developers and web designers

Block-level styling gives us more design control on each post and page. It’s clear to see how this will develop into a page builder or even theme builder system as WordPress developers intend. 

Blocks bring another benefit: Freedom from shortcodes. In particular, column layouts used to depend on plugins that involved wrapping text in shortcodes.

Sometimes you will have to deactivate or stop using an old plugin for a new one. Then raw shortcodes suddenly and show up for readers. And your layout breaks. Not a nice experience for users. Finding and replacing them takes a lot of time. Not fun for website managers.

Block-level design options give us more freedom for creativity. We have built-in features that persist no matter what plugin or theme we switch to.

Now we can focus on making each page more engaging, with easier-to-use settings and less coding!  Love that.

Make your next update more engaging

Don’t leave without tapping into accessible tech tips for WordPress —

Get more creative power with less hassle with Website Tools and Tips:

Get more tech power with less hassle with Website Tools and Tips:

Next step: Got a question about how to use Gutenberg Blocks? Ask in the comments —

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.