WordPress Block Editor – Quote Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks

***

Quote Block – Description

The Quote block lets you add visual emphasis to your content with quoted text.

How To Use The Quote Block

In this section, we’ll cover:

• How to add a Quote block to your content.
• How to edit and configure your Quote block and block settings.
• How to remove the Quote block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Quote Block

To add a Quote block to your content:

• Do the following:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Quote block (in Most Used or Text section),
  • Add the Quote block in the Content Area.
  • Search for pre-designed block groups containing the Quote block in the Patterns section.
• Type or paste in your quote.
• Add a citation (quote source).
• Use the tools in the Quote Block Editor or Block Settings section to edit and format your quote.

Let’s go through the above steps.

First, create a new post or page or open an existing post or page and either:

Click on the Add Block tool and select a Quote block…

Or, select a Quote block using the Inserter tool in the Content Area.

Either of the above methods will add a Quote block to your content.

After adding a Quote block to your content, enter your quote and the quote source (citation).

You can also find grouped blocks with pre-designed Quote blocks by searching in the Block Patterns directory.

Edit your predesigned block pattern to suit your needs.

After adding a quote to your content using the Quote block, you can:

• Edit and configure your block’s settings,
• Save, publish, or update your post or page.

How To Edit A Quote Block

To edit a Quote block:

• Click inside the Quote block to select it.
• Use the Block Editor tools to:
  • Change the alignment of the quoted text.
  • Format the text (e.g. bold, italics, etc.).
  • Add a hyperlink to the quote or citation text.
• Use the Block Settings to change the style of the quote.

Let’s go through some of the above editing operations:

In the Quote block editor, you can change the alignment of your quote:

And in the Quote block settings section, you can change the style of your quote.

 

How To Remove A Quote Block

To delete or remove a Quote block from your content:

• Click inside the Quote block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove block’.
• This will remove the Quote block from your content.

Additionally…

• You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (if you need help with this step, see our tutorial on How To Use Blocks).
• You can also convert a Quote block into a Reusable block.

Quote Block Tools, Options & Settings

The Quote block includes tools, options, and settings for:

• Quote Block Editor
• Quote Block Settings

Quote Block Editor

The Quote Block Editor includes tools that let you perform the following operations:

• Change Block Type (See ‘Quote Block – Additional Info’ section below.)
• Drag & Drop Tool
• Move Up and Down Tool
• Change Alignment Tool
  • Align quote text left
  • Align quote text center
  • Align quote text right
• Bold – Add bold formatting to your text.
• Italic – Add italicized formatting to your text.
• Link Tool – Link and unlink text in your quote.
  • Custom URL – Paste a URL or type a search term to bring up a list of posts, pages, or custom post types on your site containing your search term.
    • Clicking on the Link settings button brings up the following options:
      • Open the link in a new tab (on/off).
    • Apply button. Once the Apply button is clicked, your link displays the following additional options:
      • View the link.
      • Edit the link.
      • Delete the link.
• More Rich Text Controls – See How To Use Blocks to learn more about using rich text control settings.
• More Options – See How To Use Blocks to learn how to use this section.

Quote Block Settings

Quote block settings include:

• Block description area
• Styles – The styles displayed in this section depend on the theme and plugins installed on your site. For example, Default, Large, etc.
  • Default Style – Use the drop-down menu to select a default style for the block.
• Advanced Settings
  • HTML Anchor – Create a unique web address to send users directly to this block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Quote Block – Additional Info

The Quote block can be converted into the following block types:

• List block
• Columns block
• Group block
• Paragraph block
• Heading block
• Pullquote block
• Reusable block

Notes:

• Clicking on ‘Change block type or style’ also lets you change styles for your block.
• Change the Quote Block into a Pullquote Block if you want the quote to have more emphasis and a different font color or background color.

Additionally:

Installing plugins or themes on your site may also add new functionality, options, or settings to the Quote block.

Congratulations! Now you know how to use the WordPress content editor’s Quote block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Updated: July 5th, 2024