previously published as “Gutenberg Blocks – Text and Formatting”

Let’s take a look at each of the standard blocks provided with the Block Editor (previously known as the Gutenberg editor).  First, the more typical blocks which deal with text and formatting:-

• paragraph
• heading
• list
• button

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

All of these typical blocks can be found in the Text section of available blocks, except for the Button block, which is stored under Design.  (Click on the blue plus sign  at the top of the page to open up the list of all available blocks).

---

Paragraph

The default block is a standard paragraph block, for normal text.  

Styling of content is, in general, controlled by the theme, but the Block Controls Bar provides the means to format particular elements of text. There are also Block Settings, found in the settings sidebar on the right on a typical sized screen, which offer some additional formatting choices which can be applied directly. 

Text Formatting Options in the Block Controls Bar

Within a paragraph, heading, list or other text block, the block controls allow you to:-

• left align
• right align
• centrally align
• make text bold
• italic
• add a link
• highlight
• strikethrough
• and other options…

Click on the More dropdown in the block controls bar to see the more advanced options, which are not initially visible.

Paragraph Block Settings

If the settings sidebar is not open, click on the settings icon in the top right to open it.

Typically, block settings include colours – for text and background, typography settings, such as font size, line-height, font family, and dimensions, such as margin and padding.

If a setting is not initially visible, click on the more options icon (3 dots) to view other settings. Note that themes can control which settings are available, so the settings shown may be different on your site.

Drop-cap is a nice formatting option, which may be enabled on the site. It provides an interesting effect within a paragraph. Since it offers a very particular style, some sites may disable this, to ensure that content editors maintain the site styling, so if you don’t see this one, it may not be enabled on the site.

Text size default setting for this theme.

Text size setting extra small.

Text size setting medium.

Text size setting large.

Text size setting XL.

You can choose background and text colour for a paragraph too. Should be used with care, to ensure readability.

---

Headings are Important 

Heading are important for ease of reading online. Since people often scan online content, rather then paying attention to every word,  formatting 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.  

Heading blocks are given the appropriate HTML heading tag – <h2>, <h3>, etc and also the class wp-block-heading.

---

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 very useful to be able to add a button easily. The Buttons block can be found under Design.   

The buttons block allows you to add more than one button. Alignment, background and text colours can be chosen, as well as the click-through url, of course. The outer buttons block is a <div> with class wp-block-buttons, containing a separate <div> for each button, class wp-block-button, each containing an <a> tag with class wp-element-button.

(The button <a> tags also have class wp-block-button__link. This is retained for backwards compatibility, but wp-element-button is the preferred class to use for the button links, going forwards).

Single, Centred Button

A common use case is likely to be a single, centred button:-

1. Find and add the Buttons block
2. Type in your button text and add the link (using the link icon)
3. Then choose the “item justification” icon to change the button to be centred, rather than left-aligned

---

Other Blocks

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