WordPress Block Editor - Quote Block

WordPress Block Editor – Quote Block

WordPress Block Editor - Quote Block

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

***

Quote Block – Description

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

Sample post with Quote block.
Add quotes to your content using the Quote block.

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…

Add Block tool - Quote block.
Add a Quote block to your content using the Add Block tool.

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

Inserter tool - Add a Quote block.
Use the Inserter tool to insert a Quote block into your posts or pages.

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

Quote block - No added quote.
Quote block (no added quote).

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

Quote block with quote and citation added.
A Quote block with an added quote and citation.

tip

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

Add Block tool: Patterns tab - Quote
Search for grouped blocks that include pre-designed Quote blocks in the Block Patterns directory.

Edit your predesigned block pattern to suit your needs.

Quote block added from the Block Patterns directory.
A Quote block added from the Block Patterns directory.

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:

Quote block editor - Change quote alignment.
Change the alignment of your quote text.

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

 

Quote block settings - Styles.
Change the style of your quote in the Quote block settings section.

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.
Quote block: More Options - Remove block.
Use the More Options menu to remove a 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

Quote block editor.
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.
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:

Quote block - Change block type or style.
Change the Quote block into other block types.

info

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.
Transform a Quote block into a Pullquote block to add a background color.
Transform a Quote block into a Pullquote block to add a background color.

Additionally:

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

Sample post with Quote block.
Add quotes to your posts and pages using 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

Terms Of Use | Privacy Policy

Scroll to Top