WordPress Block Editor – Pullquote 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

***

Pullquote Block – Description

The Pullquote block lets you emphasize text quotes visually with colors and styles.

How To Use The Pullquote Block

In this section, we’ll cover:

• How to add a Pullquote block to your content.
• How to edit and configure your Pullquote block and block settings.
• How to remove the Pullquote 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 Pullquote Block

To add a Pullquote block to your content:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Pullquote block (in Most Used or Text section),
  • Add the Pullquote block in the Content Area.
• Type or paste in your pullquote and add a citation.
• Use the tools in the Pullquote Block Editor or Block Settings section to edit your pullquote.

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 Pullquote block…

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

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

After adding a Pullquote block to your content, you can type or paste in your pullquote and add a citation.

After adding a pullquote to your content, you can:

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

How To Edit A Pullquote Block

To edit a Pullquote block:

• Click inside the Pullquote block to select it.
• Use the Block Editor tools to:
  • Change the alignment of your pullquote (left, right).
  • Change the width of the pullquote relative to your page content (wide width, full width).
  • Format the text and citation (bold, italics, etc.).
  • Add a hyperlink to the text or citation.
• Use the Block Settings to:
  • Change the style of your block.
  • Change the background color and text color of your block.

The Pullquote block lets you know if you choose a text and background color combination that may be hard for users to read.

Remember to update and publish your post or page to save your settings.

How To Remove A Pullquote Block

To delete or remove a Pullquote block from your content:

• Click inside the Pullquote block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove block’.
• This will remove the Pullquote 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 Pullquote block into a Reusable block.

Pullquote Block Tools, Options & Settings

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

• Pullquote Block Editor
• Pullquote Block Settings

Pullquote Block Editor

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

• Change Block Type (See ‘Pullquote Block – Additional Info’ section below.)
• Drag & Drop Tool
• Move Up and Down Tool
• Align Pullquote Box
  • Align left
  • Align right
  • Wide width – A wide-aligned block sticks out on either side of normal content.
  • Full width – This stretches the block area to cover the entire width of the browser window (normal content remains within margins on either side).
• Bold – Add bold text formatting to your link text.
• Italic – Add italicized text formatting to your link text.
• Link Tool – Link and unlink text in your pullquote.
  • 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.

Pullquote Block Settings

Pullquote block settings include:

• Block description area
• Pullquote Styles – The styles displayed in this section depend on the theme and plugins installed on your site. For example, Default, Solid Color, etc.
  • Default Style – Use the drop-down menu to select a default style for the block.
• Color Settings – Select from the preset color palette or add a custom color using hexadecimal or RGB values. Click the Clear button to restore the default color.
  • Main Color
  • Text Color
• 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).

Pullquote Block – Additional Info

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

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

Notes:

• Clicking on ‘Change Block Type’ also lets you change styles for your pullquote.
• Installing plugins or themes on your site may also add new functionality, options, or settings to a Pullquote block.

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

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

***

Updated: July 5th, 2024