3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website
Print Friendly, PDF & Email

A quote block is a simple text only block for highlighting a quote with citation.  

Here’s what it looks like when it’s added to the Block Editor.

Quote block

And here’s an example of a quote.

Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world.

Albert Einstien

To add a Quote block to a page you click on the + icon at the left of any empty block or at the top left of the editor then search for Quote, or locate it in the Common Blocks section, and click on the Quote icon.

Add Quote block

More detailed instructions for adding blocks can be found here.

Add Quote

Once you have added the Quote block you add text by typing in the text box and then type the original author in the citation field if your text came from another source.

Add your text to the quote

Pullquote vs Quote

Traditionally quotes were used for quoting text from an external source whereas pullquotes were used for quoting text from your own article. However, the pullquote block includes an option to add the citation for the original author because the pullquote block has more customization options than the quote block.

The theme you are using determines how the quote and citation appear when a pullquote block or quote block is used.

Block Toolbar

You reveal the Quote block’s toolbar by selecting the Quote block.

The Quote block toolbar has options to change block type or style, alignment, bold, italics, hyperlink, inline code, inline image and strikethrough.

You change the size of the quote by clicking on the Change block type or style and selecting large.

Change block style

The theme you are using determines how the quote and citation appear when a quote block is used.

The change block type can be used to transform to a paragraph, pullquote, list, heading or group block.

The alignment of the quote text is changed by clicking on the change text alignment icon and selecting the preferred alignment.

Change text alignment

Block Settings

Additional options for the Quote block are located in the editor sidebar of the block editor.  Click on the Settings icon next to the Publish/Update button if you don’t see the editor sidebar.

You reveal the quote block’s settings by selecting the quote block.

Quote settings

The styles settings allow you to change between the default style and the large style.

Quote styles

The advanced tab lets you add a CSS class to your block allowing you to write custom CSS and style the block.