Verse Block

by

The tagline Code is poetry, coined by Matt Mullenweg, expresses that good crafted code not only does what it is expected to do, but can also incorporate beauty.

So, don’t be surprised that the Gutenberg editor offers a Verse Block.

If—

If you can keep your head when all about you   
    Are losing theirs and blaming it on you,   
If you can trust yourself when all men doubt you,
    But make allowance for their doubting too;   
If you can wait and not be tired by waiting,
    Or being lied about, don’t deal in lies,
Or being hated, don’t give way to hating,
    And yet don’t look too good, nor talk too wise:

If you can dream—and not make dreams your master;   
    If you can think—and not make thoughts your aim;   
If you can meet with Triumph and Disaster
    And treat those two impostors just the same;   
If you can bear to hear the truth you’ve spoken
    Twisted by knaves to make a trap for fools,
Or watch the things you gave your life to, broken,
    And stoop and build ’em up with worn-out tools:

If you can make one heap of all your winnings
    And risk it on one turn of pitch-and-toss,
And lose, and start again at your beginnings
    And never breathe a word about your loss;
If you can force your heart and nerve and sinew
    To serve your turn long after they are gone,   
And so hold on when there is nothing in you
    Except the Will which says to them: ‘Hold on!’

If you can talk with crowds and keep your virtue,   
    Or walk with Kings—nor lose the common touch,
If neither foes nor loving friends can hurt you,
    If all men count with you, but none too much;
If you can fill the unforgiving minute
    With sixty seconds’ worth of distance run,   
Yours is the Earth and everything that’s in it,   
    And—which is more—you’ll be a Man, my son!

Source: The story ‘Brother Square-Toes’,
as published Rewards and Fairies by Rudyard Kipling

Four Ways to start a Verse Block

The first way to start a heading is with the Block Inserter Icon in the upper left corner. Click that icon, and select the Heading Block.

When you do not immediately see the Quote Block, you can either browse the Block Explorer, or search for the block with the search form at the top of the explorer.

Hitting the Block Inserter at the right side of a new paragraph shows you the most recent used WordPress Editor Blocks.

Another option is typing /verse, at the beginning of a new paragraph.

And the last, but not the least, option is transforming a paragraph into a verse. Hover over the paragraph, click the paragraph icon, the first icon at the left, and select heading.

Settings Panel

The most common options of the block are handled through the Block Tool Bar.

Additional features, however, are available in the right sidebar. To get there, click the sidebar icon , directly left from the Publish/Save-button.

Here you have additional options for text and background colours, and typography.

Advanced Settings

Blocks also offer fields where you can enter an HTML anchor and one or more CSS classes. Read about these features in Advanced Sidebar Settings of a Block.

The HTML of the Verse Block

Examining the beginning and the end of the HTML of Kipling’s verse above, we see:

<pre class="wp-block-verse">If—<br><br>If you can keep your head when all about you   <br>    Are losing theirs and blaming it on you,   <br>If you can trust yourself when all men doubt you,<br>    But make allowance for their doubting too;   <br>If you can wait and not be tired by waiting,<br>    Or being lied about, don’t deal in lies,<br>Or being hated, don’t give way to hating,<br>    And yet don’t look too good, nor talk too wise:

Source: The story <em>‘Brother Square-Toes’</em>,<br>as published Rewards and Fairies by Rudyard Kipling</pre>

The Verse Block is another example of a Preformatted Block. That makes sense of course. If there is rhyme, the layout supports the diction, the rhythm, of the verse.

The Verse Block and the Code Block are both examples of a preformatted block. However, the addition of the class wp-block-verse allows us to style these differently.

How a text with the Verse Block is styled, depends on the theme. In my case, the design of the verse was exactly the same as that of an ordinary Preformatted Block.

That doesn’t do justice to the verse, so I added this CSS:

pre.wp-block-verse {
	font-family: inherit;
	font-style: italics;
	text-align: center;
}

Now the verse is presented in the default text font, but in italics, and centred.

Leave a comment