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
- quote
- pullquote
- preformatted
- verse
- button
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 options for each block, which offer some styling choices which can be applied directly. Options can be found in the Block Options box on the right on a typical sized screen.
Paragraph Block Options
Block options include text sizes, drop-cap, background and text colours and left, centre and right alignment.
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!
Heading – H2
Heading – H3
Heading – H4
List block
Unordered List
- List item 1
- List item 2
- List item 3
Ordered List
- List item 1
- List item 2
- List item 3
List with Indented Sub-list
- List item 1
- Sub-item 1
- Sub-item 2
- List item 2
- List item 3
Quote
Quote option 1
This is a quote – option 1 style.
Interestingly, hitting Enter within the quote block actually keeps you within the quote. This becomes an HTML <blockquote>, with class wp-block-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
There are no options for Pullquote, other than left, right or centre alignment. By default a Pullquote will be centre-aligned. Choosing left or right alignment causes the block to behave like an image, with text wrapping to the left or right of the quote.
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.
A Pullquote becomes an HTML <blockquote>, with class wp-block-pullquote.
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 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
.... lyrics by A A Milne, put to music by Melanie Safka
Button
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.
