Gutenberg Blocks – Text and Formatting

Let’s take a look at each of the standard blocks provided with Gutenberg.  First, the more typical blocks which deal with text and formatting:-

  • paragraph
  • heading
  • list
  • subheading
  • button

See these other articles for more formatting blocks and image-handling blocks.

All of these typical blocks can be found in the Common Blocks section of the editor, except for the Button block, which is stored under Layout Elements.  (Click on the plus sign  to open up the block choices).


Paragraph

The default block is a standard paragraph block, for normal text.  Styling of content is, in general, controlled by the theme, but there are settings for each block, which offer some styling choices which can be applied directly.  These controls can be found in the Block settings box on the right on a typical sized screen.

Paragraph Block Settings

Block settings include text sizes, drop-cap, and background and text colours.

Drop-cap is a nice styling option – it’s interesting to see that included as a basic option which will be implemented on the page without any additional styling.

Paragraph with default text size setting – in this theme that is 14px.

Paragraph with text setting small – 14px but can be customized with a slider, as can all of the text size settings.

Paragraph with text setting medium – 16px.

Paragraph with text setting large –  36px.

Paragraph with text setting XL – 48px.

You can choose background and text colour for a paragraph too. Should be used with care, I think!


Headings 

Heading are important for ease of reading online

Above are examples of the Heading block and the Subheading block, which can both be extremely useful in making your text more readable online. Since people often scan online, rather then paying attention to every word,  breaking up text with headings, subheadings and lists is very important.

Heading – H2 

Heading – H3

Heading – H4

Headings can be set to H2, H3 down to H6, the styling of which depends on the theme stylesheet. H1 is generally used as the title of the page.  

A Subheading is “smaller than a headline, bigger than basic text” and has no additional settings.


List Block

Unordered List

  • List item 1
  • List item 2
  • List item 3

Ordered List

  1. List item 1
  2. List item 2
  3. List item 3

List with Indented Sub-list

  • List item 1
    • Sub-item 1
    • Sub-item 2
  • List item 2
  • List item 3

List blocks make use of the standard <ul>, <ol> and <li> html tags with no additional classes.

Button

I have included the Button in my list of typical blocks because it is such a useful thing to be able to add a button easily. The Button block can be found under Layout Elements.   

It’s great to be able to add a button easily. Alignment, background and text colours can be chosen, as well as the click-through url, of course. The button is wrapped in a <div> with class wp-block-button and the button itself (<a> tag)  has class wp-block-button__link.

Other Blocks

There are a variety of other formatting blocks, including quotes and preformatted, which I’ll look at in another article. The text formatting blocks mentioned here, along with the image blocks, are those which I believe will be most used.