Quote

Adding quotes to your posts or pages is a great way to highlight testimonials or inspiring phrases. Here’s a simple guide to using the Quote block on your website.

How to add a quote block

To add a Quote block.

  1. Click the block inserter ‘+’ to open the selection menu.
  2. Choose the Quote block. Alternatively, type /quote in a new paragraph and hit enter for a quick add.

Block toolbar

Each block in the editor comes with a unique toolbar for customization.
To access the toolbar, simply click on the Quote block. The toolbar appears with several options:

Transform to

The ‘Transform to’ button lets you change the block type while keeping your content like paragraphs or lists easily.

Drag & Move

Use the six-dot icon to drag your heading, or the up and down arrow buttons let you move a block one position higher or lower.

Text alignment

The ‘Text alignment’ tool lets you adjust how your text lines up in the Quote block. Just click the icon, and a menu will pop up with options. You can line up your text on the left, put it in the center, or move it to the right. This helps you make your text look just the way you want with ease.

Bold and Italics

The Bold and Italics options are used to customize the text in the Quote block. You can also use keyboard shortcuts to enable these text formatting:

  • Ctrl + B or Command + B to bold the text.
  • Ctrl + I or Command + I to italicize the text.

The Insert links tool lets you add a hyperlink to the selected text.

More rich text options

The drop-down menu to the left of the More options menu contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.

More Options

The More options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate, remove, or edit your block as HTML.

Block settings

Click the settings button next to the Publish/Update button to open the Quote block’s specific settings.

Styles

The ‘Styles’ option enables you to choose between ‘Default’ or ‘Plain’ styles to change the appearance of your quote. Hover over each style for a preview.

Colors

The ‘Color’ option enables you to customize your block by selecting unique colors for the text in your quote block.

Typography

The ‘Typography’ option allows you to adjust the font size within your quote block.

Dimension

The quote block provides dimension settings options to add padding and margin.

Advanced

Add HTML anchors or CSS classes for unique styles or navigation. The HTML anchor settings allow you to create a unique anchor text for the block, enabling you to link it to another web page.

Additional resources