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
- 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.
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.
This is a new option that only works with quote blocks. You can choose between two different styles.
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.
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.
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.
Simply click the B for bold, the I for italics, and the ABC for strikethrough.
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:
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.