Quote Block

Quote someone else’s work and include a citation. Choose between two different styles for displaying quotes on your site.

Overview

The quote block is a simple text only block for highlighting a quote, and including a citation (where the quote originated from).

You can switch between two different layouts. One layout was designed to appear larger than the other, but the theme you're using can determine how each quote & citation will appear.

Quote Block Settings

The following settings are available when using a quote block:

  • Quote Display: Normal or Larger
  • Text Alignment: Left, Center, Right
  • Bold
  • Italic
  • Strikethrough
  • Links
  • Additional CSS Class

Now let's take a look at how to customize a quote block's style.

Customize a Quote Block

All of the following settings are customizable for each and every quote found on your site. You can include as many quotes as you'd like.

  • Quote editing tools: There are a few tools that help you modify the content within the quote block. These appear directly above the block, once you click inside of it.

Quote block editor settings

There is only one advanced quote setting located in the Block Settings panel (also called "Advanced Settings") on the right side of the editing screen.

  • Additional CSS Class

Quote Editing Tools

You can use the following editing tools within your quote blocks. These are very similar to the tools available in the WordPress classic editor (aka: TinyMCE), but also introduced two new options specific to quotes.

Quote Style

This is a new option that only works with quote blocks. You can choose between two different styles.

Switch quote styles in Gutenberg editor

One is meant to keep the quote text about the same size as the main content of the page, but highlight the quote in a different way.

The second style is designed to display your quote in a larger way. This might mean a larger font size, but could also mean an increased line height or more whitespace.  It's up to your theme to decide how to display each style.

Try them out in the new editor, and you'll see an instant preview of what they'll look like.

Text Alignment

You can align your quote to the left, right or center of the page. This is entirely up to you, but keep in mind that a left-aligned quote will be the easiest to read. Center & right-aligned quotes are more difficult for the eyes to follow.

Quote block text alignment

Bold, Italics & Strikethrough

These options were also available in the classic WordPress editor, and they can be used the same way in the new editor to style your quote's text.

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 quote the same way you did in the classic editor.

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

Advanced Quote Settings Panel

Additional CSS Class

The only advanced setting for quotes is the additional CSS class. If you're proficient with CSS, you can add a class and create your own styles.

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

Switch a Quote to a Different Block

One feature unique to the new WordPress editor is the ability to switch the block type.

The quote block can be converted to the following:

  • List
  • Paragraph
  • Heading

Converting a quote to a paragraph will essentially create two paragraph blocks—one for the quote and one for the citation.

Converting a quote to a list will turn the quote & the citation into list items.

Converting a quote to a heading will turn the quote into the heading block, and move the citation into a new quote block beneath the heading.

Learn About Similar Gutenberg Blocks

Updated: February 27, 2018