Block Editor – Further Formatting

previously published as “Gutenberg Blocks – Further Formatting”

Here are some other useful text formatting blocks, beyond the more typically used formatting blocks

  • quote
  • pullquote
  • preformatted
  • verse
  • table
  • code

These blocks can be found in the Text section of blocks.


Quote

“I wish it need not have happened in my time.”

“And so do all who live to see such times. But that is not for them to decide. All we have to decide is what to do with the time that is given us.”

J.R.R. Tolkien

Interestingly, hitting Enter within the quote block actually keeps you within the quote, so quotes can be more than a single paragraph. Headings or other blocks, such as lists, can also be added inside the quote block, if desired.

The quote block has a place for a citation (which becomes an HTML <cite> block and is styled differently by default). The citation can be left blank if not needed; no unwanted blank lines appear on the front end.

The quote block becomes an HTML <blockquote>, with class wp-block-quote

Quote Block – Plain Style

The quote block offers two style options – Default (shown above) and a second option, called Plain (although the styling of these depends on the theme and may not be as plain as claimed).

“I wish it need not have happened in my time.”

“And so do all who live to see such times. But that is not for them to decide. All we have to decide is what to do with the time that is given us.”

J.R.R. Tolkien

This second quote style option has additional class is-style-plain, to allow for additional styling.


PullQuote

A pullquote is a brief, attention-catching quotation usually taken from the main text of an article and used as a subheading or graphic feature

with a citation if you like

A Pullquote is treated rather like an image, with all of the image alignment options available, as well as the usual text editing options, such as bold or italic. By default a Pullquote will be centre-aligned.  Choosing left or right alignment causes the block to float to left or right, with the following text flowing around it.

If enabled, the wide-alignment and full-width options can also be chosen for a Pullquote.

A Pullquote becomes an HTML <blockquote>, with class wp-block-pullquote.

Example of Left-aligned Pullquote with Text on the Right

With all block items, there is the opportunity to add an additional class, which may be useful for styling, if you are comfortable with CSS stylesheets.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget leo tempus, commodo est in, tempor turpis. Aenean a mi nisl. Vivamus non ipsum sagittis, tempor lectus eu, gravida erat. Mauris vitae purus condimentum, porta felis id, ultrices turpis. Nulla mattis, purus a efficitur blandit, elit justo gravida dui, sed faucibus elit libero id velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus finibus porttitor tempor. Pellentesque iaculis finibus lobortis. Nulla vitae pretium nisi. Ut nec urna nisl. Nulla sed turpis at nulla volutpat pretium. Cras enim nisl, consequat eu interdum a, hendrerit at arcu.


Preformatted

In a Preformatted block, all line breaks and spaces are honoured. It is wrapped in an HTML <pre> tag, with class wp-block-preformatted. Preformatted blocks generally have a monospace font.

I asked my love to take a walk
To take a walk, just a little walk
Down beside where the waters flow
Down by the banks of the Ohio

And only say that you'll be mine
In no others' arms entwine
Down beside where the waters flow
Down by the banks of the Ohio

Verse

A Verse block is very similar to a Preformatted block. It is wrapped in an HTML <pre> tag, with class wp-block-verse. The different class allows CSS stylesheets to make it appear differently. The Block Editor does not have any specific styling for wp-block-verse; the style shown here is defined by the theme.

I had a little beetle so that beetle was his name
And I called him Alexander and he answered just the same
And I put him in a matchbox and I kept him all the day
But Nanny let my beetle out she went and let my beetle out
And the beetle ran away

She said she didn’t mean it and I never said she did
She said she wanted matches and she just took off the lid
She said I mustn’t worry and I really mustn’t mind
That there’s lots and lots of beetles
That she’s certain we could find

She said I mustn’t worry but it’s difficult to catch
An excited Alexander you’ve mistaken for a match
If we looked in all the places that a beetle might be near
And we made the kind of noises that a beetle likes to hear

[funny noises......]

And I heard a kind of something and I gave a sort of shout
It was a beetle house and Alexander Beetle coming out
It was Alexander beetle I’m as certain as can be
And he had the kind of look as though he thought it might be me

And he had a kind of look as though he really ought to say
I’m really very sorry that I tried to run away
And Nanny’s very sorry too cos you know what she did
She’s writing Alexander very blackly on the lid
So Nan and me are friends because it’s difficult to catch
An excited Alexander you’ve mistaken for a match

.... words by A A Milne, put to music by Melanie Safka 

Table

The Table Block finally supports easy manipulation of tables directly within the WordPress editor. The table has class wp-block-table, allowing the theme to provide clear and attractive styling for the table.

The table block is one of the block types which can be set to wide-aligned or full-width.

Example of a Wide-aligned Table

Day 1Day 2Day 3Day 4
Swiss Muesli with Yoghurt
Bacon and Eggs
French croissant with strawberry jam
Eggs Benedict with Smoked Salmon

Code

The Code block is aimed at displaying code in a clear format, usually with a monospaced font.

The Code block is wrapped in an HTML <pre> tag, with class wp-block-code.

var post = {
  id: 2,
  title: 'Hello JavaScript'
};

console.log( post );
console.log( post.title );

More Information

For our introduction to the block editor, see Beginning with the Block Editor and Block Editor – Text and Formatting.