Verse Block

The Verse Block lets you add poems, verses, song lyrics, etc. to your content with special spacing formats …

WordPress Gutenberg Blocks – Verse

WordPress Gutenberg - Verse Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Verse Block Description

The Verse Block lets you add poems, verses, song lyrics, etc. to your content with special spacing formats.

Add Verses to WordPress using the Verse Block

(Add Verses to WordPress using the Verse Block)

How To Use The Verse Block

To add a Verse Block:

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

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 ‘Verse’ block …

'Add Block' Tool - Add Verse Block

(‘Add Block’ Tool – Add Verse Block)

Or, select a Verse Block in the Content Area

Add a Verse Block from the Content Area

(Add a Verse Block from the Content Area)

After adding a Verse Block, you can type or paste in your verse …

Add a verse to your content

(Add a verse to your content)

After adding a verse to your content:

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

How To Edit A Verse Block

To edit a Verse Block:

  • Click inside the Verse Block to select it.
  • Use the Block Editor tools to:
    • Change the alignment of the verse text.
    • Format the text (bold, italics, strikethrough).
    • Add a hyperlink to the verse.
  • Use the Block Settings to change the style of the verse using CSS.

Edit a Verse Block

(Edit a Verse Block)

If the Verse block is too narrow, a horizontal scroll will display so you can continue reading the verse to the end of each line …

Scroll to read verse lines

(Scroll to read verse lines)

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

How To Remove A Verse Block

To delete or remove a verse block:

  • Click inside the Verse Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Verse Block

(Remove a Verse Block)

Additionally …

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

Verse Block Tools, Options & Settings

The Verse Block includes tools, options, and settings for:

  • Verse Block Editor
  • Verse Block Settings

Verse Block Editor

Verse Block Editor

(Verse Block Editor)

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

  • Change Block Type (See ‘Verse Block – Additional Info’ section below.)
  • Align Verse Text
    • Align text left
    • Align text center
    • Align text right
  • Format Verse Text
    • Bold
    • Italics
    • Strikethrough
  • Add Hyperlinks
    • Paste link URL
    • Type to search and link to existing content
    • Hit ‘Enter’ or click ‘Apply’ button to create link
    • Option to open link in new tab
  • More Options

Verse Block Editor

(Verse Block Editor)

Verse Block Settings

Verse Block Settings

(Verse Block Settings)

Verse Block settings include:

  • Block description area
  • Advanced Settings
    • Additional CSS Class

Verse Block – Additional Info

The Verse Block can be converted into the following block types:

Change Block Type - Verse Block

(Change Block Type – Verse Block)

Additionally:

Installing plugins or themes on your site may add new functionality, options, or settings to Verse Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Verse Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum

Quote Block

The Quote Block lets you add visual emphasis to your content with quoted text …

WordPress Gutenberg Blocks – Quote

WordPress Gutenberg - Quote Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Quote Block Description

The Quote Block lets you add visual emphasis to your content with quoted text …

Add Quotes to WordPress using the Quote Block

(Add Quotes to WordPress using the Quote Block)

How To Use The Quote Block

To add a Quote Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Quote’ block (in Most Used or Common Blocks section), or
    • Add the ‘Quote’ block in the Content Area.
  • 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 - Add Quote Block

(‘Add Block’ Tool – Add Quote Block)

Or, select a Quote Block in the Content Area

Add a Quote Block from the Content Area

(Add a Quote Block from the Content Area)

After adding a Quote Block, type or paste in your quote and a citation …

Add quote text and a citation

(Add quote text and a citation)

After adding quotes:

  • Edit and configure block 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 quote text.
    • Format the text (bold, italics, strikethrough).
    • Add a hyperlink to the quote or citation text.
  • Use the Block Settings to change the style of the quote.

Edit a Quote Block

(Edit a Quote Block)

How To Remove A Quote Block

To delete or remove a quote block:

  • Click inside the Quote Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Quote Block

(Remove a Quote Block)

Additionally …

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

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.)
  • Align Text
    • Align text left
    • Align text center
    • Align text right
  • Format Text
    • Bold
    • Italics
    • Strikethrough
  • Add Hyperlinks
    • Paste link URL
    • Type to search and link to existing content
    • Hit ‘Enter’ or click ‘Apply’ button to create link
    • Option to open link in new tab
  • More Options

Quote Block Editor

(Quote Block Editor)

Quote Block Settings

Quote Block Settings

(Quote Block Settings)

Quote Block settings include:

  • Block description area
  • Styles
    • Regular
    • Large
  • Advanced Settings
    • Additional CSS Class

Quote Block Settings

(Quote Block Settings)

Quote Block – Additional Info

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

Change Block Type - Quote Block

(Change Block Type – Quote Block)

Info

Notes:

  • Clicking on ‘Change Block Type’ also lets you change styles for your quote.
  • 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.

Change Quote Block into other block types

(Change a Quote Block into other block types)

Additionally:

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

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Quote Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org

Pullquote Block

The Pullquote Block lets you emphasize text quotes with colors and styles …

Get Thrive Leads for WordPress

WordPress Gutenberg Blocks – Pullquote

WordPress Gutenberg - Pullquote Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Pullquote Block Description

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

Add Pullquotes to WordPress using the Pullquote Block

(Add Pullquotes to WordPress using the Pullquote Block)

How To Use The Pullquote Block

To add a Pullquote Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Pullquote’ block (in Most Used or Formatting section), or
    • 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 …

'Add Block' Tool - Add Pullquote Block

(‘Add Block’ Tool – Add Pullquote Block)

Or, select a Pullquote Block in the Content Area

Add a Pullquote Block from the Content Area

(Add a Pullquote Block from the Content Area)

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

Add a pullquote and citation

(Add a pullquote and citation)

After adding pullquotes:

  • Edit and configure block 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 the pullquote (left, right).
    • Change the width of the pullquote box (wide, full).
    • Format the text and citation (bold, italics, strikethrough).
    • Add a hyperlink to the text or citation.
  • Use the Block Settings to:
    • Change the pullquote style.
    • Change the pullquote background color and text color.

Edit a Pullquote Block

(Edit a Pullquote Block)

Tip

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

Pullquote Block: Built-in color design tips

(Pullquote Block: Built-in color design tips)

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:

  • Click inside the Pullquote Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Pullquote Block

(Remove a Pullquote Block)

Additionally …

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

Pullquote Block Tools, Options & Settings

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

  • Pullquote Block Editor
  • Pullquote Block Settings

Pullquote Block Editor

Pullquote Block Editor

(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.)
  • Align Pullquote Box
    • Align left
    • Align right
  • Pullquote Width
    • Wide width
    • Full width
  • Format Text
    • Bold
    • Italics
    • Strikethrough
  • Add Hyperlinks
    • Paste link URL
    • Type to search and link to existing content
    • Hit ‘Enter’ or click ‘Apply’ button to create link
    • Option to open link in new tab
  • More Options

Pullquote Block Editor

(Pullquote Block Editor)

Pullquote Block Settings

Pullquote Block Settings

(Pullquote Block Settings)

Pullquote Block settings include:

  • Block description area
  • Pullquote Styles
    • Regular
    • Solid Color
  • Color Settings
    • Main Color
    • Text Color
  • Advanced Settings
    • Additional CSS Class

Pullquote Block Settings

(Pullquote Block Settings)

Pullquote Block – Additional Info

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

Change Block Type - Pullquote Block

(Change Block Type – Pullquote Block)

Info

Notes:

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

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Pullquote Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com