Gutenberg! The new Block Editor from WordPress

This is a really cool editor. It reminds me a bit of Divi, without tears and drama. It’s easy to use, intuitive, and oh-so-very-fancy. This editor changes everything.  

Gutenberg breaks new ground for easy blog design.

It’s not perfect.   I mean, what is?  For me, it’s just so SURPRISING. So much of what I’ve been struggling with to create a beautiful, engaging experience is simplified.  

 

I had gotten pretty bored with blogging about blogging. There is only so much struggle you can do with style sheets, trying to create a freakin’ drop cap, before summer beckons. Gutenberg is a step beyond style sheets.  It allows you to truly play with design in entirely new ways. 

On my food blog, Second Helpings,  I was using a very simple theme, Lingonberry.  It’s my fun blog, a recipe and cooking blog for low-carb and keto ways of eating.  Anyway, I figured I would get around with the design oh, sometime later, after I had a good twenty or thirty posts published. Lingonberry is nice, clean. Simple.

Yesterday, I popped on, started a post about omelettes, and the little WordPress fairies asked, did I want to try the new blocks editor?  Why, SURE, I thought. I wonder what this is?  (I trusted WordPress to make changing back to the old editor a very easy proposition. And it is.)  

I accepted the change from classic to “blocks” –and just like that, I saw the DROP CAP option.  I have been working on trying to create a damned drop-cap for six months before I gave up and took a break from the whole darn problem . And the blog itself.  And bam!   There it was. A Drop-Cap toggle switch.  Okay,  I was gonna give ‘er a try.  

Gone is the Visual/HTML tab at the top of the page.  You’re in a space that is MORE WYSWG than ever, but at first, it just seems like an odd, blank canvas.    You start with a screen that looks like this:

Screen Shot 2018-11-15 at 3.54.26 PM.png

It’s SIMILAR– the box on the right has most of the usual options but they’re different.

Screen Shot 2018-11-15 at 4.12.37 PM.png
Here are the new options: Document level features and Block features.

Your text and images and content are sorted into “blocks” — blocks of text, image blocks, quote blocks.    If you start typing, it assumes that you’re using a text block, and off you go.

Block Level Features are slightly different than the whole document. That’s where you’ll find the Drop Cap toggle.

The Paragraph Block

If you move from the Document Tab in the upper right corner to choose the Block Tab,  you’ll see the kind of block you’re editing (or about to edit) and its options. 

There’s also a little plus sign, inline on the face of the editing area itself, that lets you choose a kind of block you want to put in other than text.  The little plus is called “The Inserter.” 

Screen Shot 2018-11-15 at 4.24.51 PM
A close up of the Inserter

The three most common types of block are available for you to pick, easily, directly from the inserter: picture, headings (H1, H2, H3, etc.)  and quotes are available as little icons on the right top of the “inserter”.   Here’s the inserter with the mouse hovering over the quote marks, telling us we’re about to create a quote. 

Screen Shot 2018-11-15 at 4.25.01 PM.png

Click it and voila!

Screen Shot 2018-11-15 at 4.25.23 PM.png

Creating Pull-Quotes

When you select the quote block, the upper right corner changes to give you the features of that block and the changes you can make.  Here, I’ve selected the quote block and now I can choose the Pull-Quote feature. Note that there are also color settings. Choosing “Main color”  changes the color of the top and bottom lines that frame the pull-quote.  You can also change the text color. 

Inserting Media is a Snap

In the classic editor, it takes half-a-dozen clicks to upload new media and insert it into your text.  With the blocks editor, it takes three?  at most?

Choose the Image icon and this block will appear:

Screen Shot 2018-11-15 at 4.13.15 PM.png

 Putting in an image used to make me have have to go allllll the way up to the top of the screen,  pick the add media button, and then I’d be whisked off to the media library, where I’d have to UPLOAD and then double check that yes, indeed, this is the picture that you want to use–and then go back to the editing screen. Hopefully I would remember where I was and what I meant to say next.  Since I am as attention deficit as the next blogger,  this was very distracting. I used to delay putting in any pictures until I was almost ready to publish,  because it would break me away from actually writing.   

There’s far too much to go into in one post.  Here’s one more about how this editor keeps me on-task: the Information Icon. 

Undo, Redo and Information

Up in the left hand corner, there is a row of icons: a little plus (for the inserter), a backwards error to GO BACK one step, or many steps!  And a forwards error in case you went back a little TOO far in undoing something! Damn! How useful!  And then there’s the little Information icon.  It will give you a heads up about what you’re written: number of words, paragraphs and blocks you’ve used.

The Blocks Editor has a Name: Gutenberg.

After fooling around with it for hours, okay, days, I knew several things: I loved it. I wanted to write about it. And I couldn’t figure out how to GET it on my other blogs!  (For example, THIS one.)  I tried starting a couple of new posts, but the fairies didn’t make the offer.  This left me wondering, had I just stumbled into an early beta?  

I accosted the WordPress fairies directly. (That is, I asked in the help chat.) 

Be careful. Treat them nicely. They are magic.

The WordPress Support person explained that I had to use the BLACK EDITOR to switch to Gutenberg MANUALLY.  Not all WordPress.com themes will support Gutenberg, but luckily mine (The Entrepreneur) had no trouble with it.  I just had to TURN IT ON.  

That takes only about three steps.

Open the Black (WP Admin) Editor

If you see BLUE when you write a post, you’re using Jetpack.  The WP Admin editor has a black sidebar on the left, rather than Jetpack’s blue sidebar.   At the very bottom, there’s a button for WP Admin. Press that button and you’ll see the sidebar change to black and you’ll see many new options. (I’ve gone over this before in a previous post on the Black Editor.)

You’ll see Gutenberg there at the bottom of the list.  Click the little pencil icon and you’ll see this:

Choose DEMO and a demonstration page will introduce you to Gutenberg. Click the ACTIVATE option — and you’re off and running. 

An odd thing:  I can use Gutenberg ONLY from the Black Editor in this blog, but in my other blog, (the one where I was asked if I wanted to try it)–it’s now the default in Jetpack (the Blue Editor).

What’s up with that?

More soon on Gutenberg and its Features

I have just scratched the surface on all the things you can do with Gutenberg.  I’ll be writing more about the features and foibles of this new capability in my next posts.  

Thanks for dropping by.  Best,  ~Lola

Author: Lola

Recovering academic, real-life, honest to cornflakes anthropologist (Ph.D. and fieldwork and everything), tech-head and social media researcher.

Leave a Reply

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