A Guide to WordPress’s Gutenberg

By November 10, 2017Blogging, CMS, Tutorial

How To: Gutenberg

Dropcap

WordPress is contemplating some major changes to its platform with the recent release of its new editor — Gutenberg. WordPress notes, “the new post and page building experience will make writing rich posts effortless”. You can try out the new editor as a plugin and get an idea of what Gutenberg will allow you to do by visiting this demo site.

While still in beta and ‘buggy’ at times, Gutenberg feature updates are substantial and will have a notable impact on the user experience. For starters, this is what a new blank page (or post) looks like:

Blank Gutenberg Post

Pretty different!

Instead of one big chunk of text, individual paragraphs, headings, and other elements each get their own “block” making it slightly more similar to a lot of the page building applications that have taken over the web design space the past few years.

This blog post is a tutorial for people interested in exploring some of the text styling options available in the new editor.

Adding a Paragraph

When you’re finished with the paragraph block Gutenberg provides automatically on every page you create, there are a couple of ways you can add a new paragraph. The most basic is the one you’re already familiar with: just hit enter / return on your keyboard. This creates a new paragraph block quickly and you can keep on typing. You can also click on the encircled plus sign which is located both under the content area and in the top left toolbar and select the “Paragraph” block option.

Paragraph Block

Basic Text Styling

You’ll find that the current basic options available for styling are slightly more limited than they used to be (for now at least).

Text Styling Options Toolbar

Most of the options you’ll probably recognize and understand immediately from other word processors. The only one that needs any explaining is the paragraph dropdown which allows you to change the block from a paragraph to a heading, a quote, a list, pre-formatted text, or a verse. We’ll expand more on those later.

To the right you’ll see a few options that you can apply to the block. These options apply to the entire block and vary depending on the type of block you are using.

Drop Cap

There’s now a built-in drop cap options which is nice. It’s a simple toggle on and off.

Styling options for entire block

Changing Font Slider

The font size slider is a bit awkward. You would assume that since its initially set to the middle, that’s where the slider needs to be to get the exact size your font is currently. But if you click on the knob in the middle of the slider and drag it just enough to activate it, your text explodes to over 100pt and you’ll need to hit the reset button next to the slider.

Font Size slider in WordPress's Gutenberg Editor

What the slider being in the middle really means is that your text size is unset, when displayed on the actual page it will default to whatever your theme’s CSS says the size should be. Don’t try to use the slider to put the text back to the size it was before. By default Gutenberg displays text in the editor at about 16pt size font, but that is not necessarily the font size your theme will display your text at. So if you try to set the text to 16pt font to match what other text looks like in the editor your text may end up being larger or smaller than the rest of your content when viewing the actual page.

Changing the Color of Text in a Block

There are background and font color options below the slider that affect all the text in the block. You cannot apply these options to just a portion of the text, they affect everything in the block.

Color changes applied to entire block

Though I had highlighted just a section of the text, the entire block turned blue when I selected a color.

If you want to alter just one section of your text there are two ways to achieve that. If you’re a complete beginner with this stuff and don’t know HTML skip to the next section.

Selective Color Through HTML

Block Options

The first way is to edit the HTML of the block you’ve already made. When you hover over a block, you’ll see three dots aligned vertically to the right. If you click on that you can choose to edit the HTML.

From there you can just wrap the text you want changed in a <span> tag and style it however you please.

<span style="color:red;">YOUR TEXT HERE</span>

Classic Text for Selective Color

Block Option Dropdown

Gutenberg doesn’t do away with the WYSIWYG toolbar but if you want to find it you’ll need to dig a little deeper. Click on the encircled plus sign, then in the pop up choose the “Blocks” tab, scroll to the “Formatting” section and select the “Classic Text Option”.

This creates a block that works like the current WordPress editor and provides the toolbar just for this section. I advise you type something, even just gibberish, immediately when you create a new block because if you click away it’s easy to lose track of an empty block in Gutenberg.

Hit the “Toggle Toolbar” button (its the last button on the first row) to reveal a second row of options including the basic change color dropdown. Copy and paste your text into this new block if you want to change the color of just some of it.

Text Selected for Changing Color in Gutenberg

Note: Leaving the toolbar expanded when clicking away seemed to occasionally cause text to overlap making it appear broken. Be sure to toggle it back to one row before moving on.

Multiple Columns

One of the most useful updates in Gutenberg is built in column options for text. Click on the encircled plus sign to begin creating a new block, go to the “Blocks” tab, scroll to “Layout Blocks” and select “Text Columns”.

Multiple Columns in the WordPress Gutenberg Editor

The block options on the right allow you to add up to two more columns. 

You can style the text using the limited toolbar up top, but there’s no classic text toolbar access for multiple columns, or for any other block as far as I can tell. If you want to do any more styling you’ll have to add it in the HTML editor.

Lists

Gutenberg Block Options

The last thing we’ll cover today is lists. Since every new paragraph is it’s own block (with the exception of paragraphs in the “Classic Text” block) Gutenberg has a special block just for bulleted lists. Create a list block by selecting the “List” option (in the “Common Blocks” section under the “Blocks” tab) from the encircled plus drop down.

Again, very limited styling options unless you style through the HTML editor.

Because lists are their own block type there doesn’t appear to be a user friendly way to create lists inside of columns. For now you’ll need to use the HTML edit to achieve that.

Moving Forward

There are a few more text styling options to go over like the “Quotes” and “Verse” blocks and elements beyond text like image blocks and tables, but we’re going to wrap things up here for now.

If you have any questions, comments, or requests you can Tweet us or follow us on Facebook to stay up to date with all our blog posts!

If you’d like some help building your upcoming website, feel free to reach out to Firefly Digital for any of our digital marketing services.

Get a Quote

 

Verification