How to Include Quote Blocks on Your WordPress Website

Quotes allow you to draw attention to an inspirational quote, the key part of an analysis, or a profound statement you want to make sure visitors don’t miss. There also helpful as yet another way of breaking up blocks of text and making your page or post more scannable and more visually interesting.

Adding a Quote Block

There are three ways to add a quote block:

1. Click the blue “+” icon on the top left menu and select the quote option (in the ‘text’ section of the block dropdown).
2. Click on the black “+” icon underneath a block you’ve already added and select the quote option.
3. Placing your cursor where the block is to appear and typing /quote.

Typing Your Quote and Attribution into the Block

When you’re designing your page, the quote block functions similarly to a paragraph block. As always, the block-specific toolbar which will allow you to format the text (e.g., add bold, italics, strikethrough, hyperlinks) appears at the top of the block. The toolbar also allows you to decide if the quote is center, left, or right aligned to the post or page.

On the other hand, the quote block differs from a paragraph block in that it includes separate sections (and placeholders on your screen) for the quote itself and the person or group it’s attributed to. (You’ll see that the attribution goes in the block where it says, “Write citation…” in gray.) The text formatting default settings are different in each area to distinguish between the two pieces of text. If you’re simply highlighting a bit of text you’re highlighting elsewhere on the page, leave the area

Note that the block does not automatically add quotation marks to the quote. Adding them before and after is a matter of personal preference, as the nature of the block formatting conveys that it’s a quote attributed to the individual indicated. 

This is an example of a quote block. THIS TEXT appears in the attribution area!

Additional Quote Formatting Options 

There are two different styles with which to display the quote on your website, and these are selected on the right-hand settings sidebar, on the ‘Block’ tab. The first option, which is simply called “Default” (because, surprise, it is the WordPress default), places a black line to the left of the quote to note the transition from another block to the quote. The font size of the quote is roughly the same as paragraph text on the page, and the attribution font is just a bit smaller

The other option does not include the black, vertical line, but makes the quote stand out by instead making the font larger and more decorative than the paragraph text on the rest of the page. Between the two style options and the text formatting choices you have from the block toolbar, you can try different combinations until you find the one you think looks the best on your page.

Do you like to include quotes in your website content? Go play around with the quote block and see which style and formatting look great with your theme!