Pullquote Block

A brief, attention-catching quotation taken from the main text of an article and used as a subheading or graphic feature.

Overview

The pullquote block takes an existing piece of text from the main content of your article, and calls attention to it in a graphical way.

Example of a pullquote in Gutenberg

While a standard quote block usually quotes an external source, a pullquote is quoting your own article.

With a pullquote, you also have a little more flexibility over the alignment.

Pullquote Settings

The following settings are available when using a pullquote:

  • Alignment: Left, Center, Right
  • Bold
  • Italic
  • Strikethrough
  • Links
  • Additional CSS Class

Customize a Pullquote

The pullquote is another block that has very few settings. Almost all of its settings will appear in the editing toolbar directly above the block (except the additional CSS class, which is an advanced setting in the right sidebar).

Also, there is an important distinction to be made about a pullquote's alignment.

Pullquote Editing Tools

These are similar to the quote's editing tools, but instead of two different quote styles, you have three alignments.

And the way the alignment works is a bit different than a standard quote.

Pullquote Alignment

A standard quote's alignment just aligns the text to the left, center or right. However, a pullquote's alignment will float the entire pullquote to the left or right, and let the following content wrap around the side of it.

Gutenberg pullquote alignment example

Bold, Italics & Strikethrough

These basic styling options are the same as every other Gutenberg text block, and they are pretty self-explanatory.

Gutenberg editor - bold, italic & strikethrough options

Simply click the B for bold, the I for italics, and the ABC for strikethrough.

Links

You can link text within your pullquote the same way you linked up text in the classic editor.

  • Highlight the text you want to link
  • Click the link icon
  • Type or paste in your URL
  • Click Enter

Advanced Pullquote Settings

Additional CSS Class

The only advanced setting for pullquotes is the additional CSS class.

  • Multiple CSS classes are permitted
  • Separate each class name with a space

Switch a Pullquote to a Different Block

No can do! The pullquote is one of the few blocks that cannot be converted to a different block type.

Learn About Similar Gutenberg Blocks

Updated: February 27, 2018