Quote block

Go back to the list of Blocks

Adding quotes can help you highlight great reviews from your audience or phrases that inspire you.  

To add a Quote block to your page, click on the Block Inserter icon.

Alternatively, you can use the slash command, /quote in a new paragraph block then press enter to add one quickly.

Shortcut to add Quote block

Detailed instructions on adding blocks

Block toolbar

Every block comes with unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.

The Quote block shows the following buttons:

  • Transform to
  • Drag icon
  • Move handles
  • Change text alignment
  • Bold
  • Italic
  • Link
  • More text editing options
  • More options
Block toolbar in the Quote block

Transform to

Transform option in the Quote block

When you click on the Transform button you can convert the Quote block into another block type, by using the existing content.

You can transform the Quote block into an Unwrap, Columns, Group, or PullQuote block. You can also change the style of the Quote block from Default to Plain.

Drag icon

Drag icon in the Quote block.

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move handles

Move handles in the Quote block.

The up and down arrow icons can be used to move a block up and down on the page.

Get more information about moving a block within the editor.

Change text alignment

Change alignment in the Quote block.
.

Using the alignment drop-down from the toolbar, you are able to align the Quote block to the left, make it center-aligned, or align it to the right.

Bold

You can select any text inside the Quote block and use the Bold option or Ctrl+B / Cmd+B on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic

You can select any text inside the Quote block and use the Italic option or Ctrl+I / Cmd+I on your keyboard to italicize it, which usually appears slanted to the right.

Link

Use the link icon to insert a hyperlink to the highlighted text inside the Quote block. You can also use the CTRL + k (or Command+k keyboard shortcut.

Clicking on the link icon will open a dialog box.

Add link in the Quote block.

You can type in the URL of the page you want to link to.

You can also use the Search text box to search for pages on your own website. If you start typing a keyword into the Search text box, WordPress will list Posts and Pages on your website that match the keyword. This is helpful for on-site link building.

The Open in new tab toggle switch allows you to control where the new page should open. By default, the switch is set to off.

  • off opens in the same browser tab
  • on opens in a new browser tab

Tip: If you already have the URL of the website you want to link to in the clipboard, highlight the text, you want to make into a link, and use CTRL + V to add the hyperlink to the text.

Top ↑

More text editing options

More text editing options in the Quote block.

Highlight

Use the Highlight option to change the color of the selected text and its background.

Inline code

Use the Inline code feature to format code snippets within your text differently. Not only that, but Inline code formatting also prevents the code to be executed instead of displayed.

Inline image

The Inline image feature allows you to add an image to your paragraph. It has one option: enter the desired pixel width for your image.

Keyboard input

The Keyboard Input option allows you to add the <kbd> tag to selected text.

Strikethrough

Use the Strikethrough option to place a horizontal line through the middle of the selected text.

Example: Quote Block

Subscript

Use the Subscript option to set the selected text slightly below the normal line of type.

Example: Quote Block

Superscript

Use the Superscript option to set the selected text slightly above the normal line of type.

Example: Quote Block

Top ↑

More options

These controls give you the option to copy, duplicate, and edit your block as HTML.

Read about these and other settings.

Top ↑

Block settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the ‘cog’ icon.

Cog icon to display the Block sidebar
Block sidebar in the Quote block.

Top ↑

Styles

You can modify the Quote block styles by choosing the ‘Default’ or ‘Plain’ buttons in the Styles settings panel. Hover over the ‘Default’ or ‘Plain’ buttons to get a preview of the styles.

The style options may vary based on your theme.

Styles setting in the Quote block.

Based on which style you choose for the Quote block, WordPress automatically adds a CSS class to the Quote block. You can find the class in the Advanced settings panel under Additional CSS class(es).

Additional classes added for the selected styles
Additional classes added for the selected styles

Top ↑

Color

Text and background colors can be set on a per-block basis, allowing you to call attention to important content. Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code.

See this guide for more information about changing colors.

Top ↑

Typography

The Quote block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.

Get more details about changing typography settings.

Advanced

The Advanced tab lets you add HTML anchor and CSS class(es) to your block.

The “Advanced” tab lets you add HTML anchor and CSS class(es) to your block.
The “Advanced” tab lets you add HTML anchor and CSS class(es) to your block.

“HTML anchor” allows you to make a unique web address for a particular “Video” block. Then, you’ll be able to link directly to a “Quote” block on your page.

The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.

Top ↑

Changelog

  • Updated 2022-10-18
    • Updated images, video for 6.1
  • Updated 2022-06-24
    • Updated content, images, videos for 6.0
    • Added ALT tags for images
  • Updated 2020-09-21
    • Updated 5.5 video
  • Updated 2020-09-14
    • Updated 5.5 screenshots
    • Updated block toolbar new features
    • Updated block settings new features
  • Updated 2020-06-18
    • Added ‘Link back to blocks’ to the top of the page
    • Converted the ‘Advanced’ reusable block to a regular block
    • Add the ‘Changelog’
  • Created 2019-03-07

Was this article helpful? How could it be improved?