Gutenberg Blocks – Further Formatting

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

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

These blocks can be found in the Formatting section of the editor, except for Quote, which is stored under Common Blocks


Quote

Quote option 1

This is a quote – option 1 style. This becomes an HTML <blockquote>, with class wp-block-quote

Interestingly, hitting Enter within the quote block actually keeps you within the quote. 

And this is the citation

Quote option 2

Quote – option style 2 becomes an HTML <blockquote> with class wp-block-quote and an additional class is-large.

And this is the citation

PullQuote

A pullquote is a brief, attention-catching quotation 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.

Cat ipsum dolor sit amet, scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food, scratch the box hack up furballs. Curl up and sleep on the freshly laundered towels eat from dog’s food or yowling nonstop the whole night eat the rubberband but i could pee on this if i had the energy and wake up wander around the house making large amounts of noise jump on top of your human’s bed and fall asleep again. Run around the house at 4 in the morning scamper but touch water with paw then recoil in horror so i could eat this if i had the energy or purrr purr littel cat, little cat purr.


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.

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. As you’ll see here, this site does not yet have any specific styling for wp-block-verse, nor does Gutenberg yet (as opposed to the Drop-cap option in a paragraph, for which Gutenberg does provide default styling).

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.

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 );