First Steps in Gutenberg Blocks: Headings and Colors

Just getting started in the Gutenberg block editor for WordPress?  In this post,  I’ll cover headings and colors.  It’s all super simple.   I’ll show you in this easy walk-through.

Using the Heading Block

When you start typing, Gutenberg assumes you’re creating a paragaph block.  Click anywhere on that block and you’ll get a pop-up that lets you change that to a heading.  The little reverse “P” on the left top corner shows you what kind of block you’ve clicked in. 

To change that block, click the little downward point triangle beside it. 

See, it even tells you that this is what’s going to happen if you click there.

And so then, when you click the little transform button, you can apply a different format for text (shown here). 

Choosing the T will change the block to a HEADING block. ( Or a list block or a preformatted block for writing code…or a quote, etc.)

Sometimes I get to the end of a passage and I want to create a new heading, but Gutenberg seems to hang a bit, not giving me the option of a new block.  Start typing and a paragraph block will start automatically. Then you can click on the new block and CHANGE it to a heading block (or a quote or an image or, in this case, a LIST block.

Fun With Color

It was probably much easier to follow these directions when I color the relevant “action” paragraphs blocks. You can color the backgrounds and text for all kinds of blocks very easily. 

Pick the block you want to color. (Click on it)  Then go look at the upper right corner of your screen. If Block isn’t chosen, click on the word Block. Click on the Color Settings option. 

Pick a color!  If you don’t like the options provided, pick on the multi-colored ball to bring up the color-picker and FIND your color.  This action will color the background of the whole paragraph block.  You can also insert the hexadecimal number for your particular shade, if you have one.

You can only color text for PARAGRAPH blocks at this writing, using the Gutenberg block color settings. And you can only do one color for the text of the paragraph.  So now going psychodelic without dinking with advanced HTML!  But you can choose both a text color AND a background color within the same paragraph block! 

The problem with Color Settings

  1. Gutenberg DOESN’T YET  let you apply text colors or backgrounds to HEADINGS or to LISTS –only to paragraph blocks
  2. You can apply color manually with additional CSS, but that’s more complicated and for another day. 
  3.  Gutenberg applies the text color to ALL of the text in a block. You can’t use this method to just color a single word or group of words. (You can do it, and again, I’ll show you how in a future lesson). 

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.