Quote

A large, featured quote with headshot and citation.

View demo

Usage

Quote displays a featured testimonial or pull quote with optional decorative quote mark, citation name, job title, and circular headshot. Quote body copy uses paragraph and list inner blocks β€” edit inline in the editor.

The block is styled for prominence on the page: optional quote icon above the text (instead of flanking quote marks), and a colored left border when Style is Border.

New quotes default to Style None, center alignment, Wide width, SM padding, Show Quote Mark on, and 2XL text size. Existing quotes on the site keep their prior border, left alignment, and sizing after Update blocks runs the v5 migration.

Content

  • Quote body β€” paragraph and list blocks (default template includes one paragraph)
  • Name β€” citation name, edited inline or in the sidebar (renders as h4 by default; Name Style changes visual preset)
  • Job Title β€” supporting line below the name (renders as <small>)
  • Headshot β€” optional circular photo with focal point and size control

Without a headshot, name and title center beneath the quote on the front end.

Appearance

  • Style β€” None (default) for a clean layout, or Border for a colored vertical accent bar
  • Text Align β€” Center (default), Left, or Right
  • Text Size β€” 2XL (default) through 4XL, or Normal through XL (text-xs-em … text-4xl-em); responsive sizing is handled automatically
  • Padding β€” SM (default), None, MD, or LG
  • Border Color β€” palette color for the left accent bar when Style is Border
  • Show Quote Mark β€” decorative quote icon above the text
    • Icon Size β€” 1–40px
    • Icon Color β€” palette color for the quote mark (default matches body text)
    • Quote Style β€” Rounded, Blocky, Message, or Comment icon shapes
  • Name Style β€” Customizer typography preset for the citation name (visual; default renders as h4)

Headshot

Click the headshot placeholder in the editor or use Choose Headshot in the sidebar. Set Image Focal Point and Headshot Size (in em) when a photo is selected.

Block width

Quote defaults to Wide alignment; Full is also available from the block toolbar.

Tips

  • Quotes break up long content well β€” pair with a Section block using a background image or gradient and large text size.
  • Set Section padding to None when nesting a quote inside a full-bleed background band.
  • Show Quote Mark is on by default; disable for minimal pull quotes.
  • Use Text Size XL or larger when the quote is the focal element on the page.
  • Opening a post or running Update blocks converts leftover Large Quote and Small Quote blocks to this block.

Screenshots

Front-end

  • Centered testimonial on a dark Section background β€” white quote text with name and title below.
  • Border style with left accent bar and headshot β€” placed beside article copy in a wide layout.

Editor

  • Quote sidebar β€” Style, Text Align, Text Size, Padding, Border Color, and Name Style controls.
  • Quote nested in a full-bleed Section β€” pair large text size with a background image or gradient.

Settings

Quote

Style setting in the block editor sidebar
Style

New quotes default to None. Border adds a colored vertical accent bar on the left.

  • Border
  • Nonedefault
Text Align setting in the block editor sidebar
Text Align

Alignment of quote text, quote mark, and citation row. New quotes default to center.

  • Left
  • Centerdefault
  • Right
Text Size setting in the block editor sidebar
Text Size

Quote body size from Normal through 4XL. Sizes scale responsively on mobile.

  • Normal
  • XS
  • SM
  • MD
  • LG
  • XL
  • 2XLdefault
  • 3XL
  • 4XL
Padding setting in the block editor sidebar
Padding

Vertical padding inside the quote block β€” None, SM, MD, or LG.

  • None
  • SMdefault
  • MD
  • LG
Border Color setting in the block editor sidebar
Border Color

Color of the left accent bar when Style is set to Border.

Name Style setting in the block editor sidebar
Name Style

Customizer typography preset for the citation name. Default appearance matches h4.

  • <h1>
  • <h2>
  • <h3>
  • <h4>default
  • <h5>
  • <h6>
  • <p>
  • <strong>
Show Quote Mark setting in the block editor sidebar
Show Quote Mark

Shows a decorative quote mark icon above the quote text.

Icon Size setting in the block editor sidebar
Icon Size

Size of the quote mark icon in pixels (1–40).

Icon Color setting in the block editor sidebar
Icon Color

Palette color for the decorative quote mark. Default matches body text.

Quote Style setting in the block editor sidebar
Quote Style

Shape of the quote mark β€” Rounded, Blocky, Message, or Comment.

  • Roundeddefault
  • Blocky
  • Message
  • Comment
Name setting in the block editor sidebar
Name

Citation name displayed below the quote, edited inline or in the sidebar.

Job Title setting in the block editor sidebar
Job Title

Job title or supporting line below the name, rendered as small text.

Image Focal Point setting in the block editor sidebar
Image Focal Point

Focal point for the headshot crop.

Headshot Size setting in the block editor sidebar
Headshot Size

Diameter of the circular headshot in em units (0–10).