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

Gutenberg Blocks – Wide Alignment and Full-width

The Gutenberg editor introduces some new and interesting alignment options:- full-widthwide-alignment These options require that your theme explicitly supports them.  See Developer Aside for a deeper discussion on what is needed to support these alignment options. What Does Full-Width Mean with a Sidebar? Since the use of wide-aligned and full-width may not be entirely sensible […]

Gutenberg Blocks – Video, Audio and Embeds

Adding video or audio with the Gutenberg editor is fairly intuitive and perhaps a clearer and simpler process than with the classic WP editor. Audio The Audio block allows you to upload or select from the library an audio (mp3) file.  Alternatively, you can enter a URL for your audio file, allowing you to include […]

Gutenberg Blocks – Images

These are the standard blocks which deal with images:- imageinline imagegallerycover image Image Choosing an image block allows images to be added from your computer or from the media library (ie already uploaded to WordPress), just as in the classic WordPress editor. After uploading/choosing the image, image size and other settings can be chosen from […]

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:- paragraphheadinglistsubheadingbutton See these other articles for further 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 […]

Writing with Gutenberg

This is a first step into using the new Gutenberg editor.  I am typing this content directly into the WordPress page and I will do any formatting here and see how straightforward or confusing it turns out to be. Headings, Paragraphs and Other Blocks It turns out that headings, paragraphs, etc are all separate blocks. […]

X Theme is not for me – an independent review

Am I alone in hating the X theme?  There’s a lot of hype about it, it seems to be “the designer’s dream theme” of 2016. The sales pages are great and it looks like you can create wonders with it in just a couple of hours. And maybe you can…. if you have the energy to […]

Embedding Content

This is cute – just by including the link on a new line in the WordPress editor, I can embed a nice little extract of a post or page from my own site. How to Schedule Posts to Appear in the Future And I can embed a similar extract from any other WordPress site. What is […]