Blog

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

Get Thrive Leads for WordPress

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

Table Block

The Table Block lets you add a table to WordPress with columns and rows to display data in tabular form …

WordPress Gutenberg Blocks – Table

WordPress Gutenberg - Table Block

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

***

Table Block Description

The Table Block lets you add a table to WordPress with columns and rows to display data in tabular form.

Add Tables to WordPress using the Table Block

(Add Tables to WordPress using the Table Block)

How To Use The Table Block

To add a Table Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Table’ block (in Most Used or Formatting section), or
    • Add the ‘Table’ block in the Content Area.
  • Set a number of columns and rows for your table.
  • Create your table.
  • Add your table content.
  • Use the tools in the Table Block Editor or Block Settings section to edit and format your Table.

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

'Add Block' Tool - Add Table Block

(‘Add Block’ Tool – Add Table Block)

Or, select a Table Block in the Content Area

Add a Table Block from the Content Area

(Add a Table Block from the Content Area)

After adding a Table Block and creating a table, type or paste your content into the columns and rows …

Edit a Table Block

(Add content to your table)

After adding content to your table:

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

How To Edit A Table Block

To edit a Table Block:

  • Click inside the Table Block to select it.
  • Use the Block Editor tools to:
    • Change table alignment (float tabe left, center, or right).
    • Add/Remove columns and rows.
    • Format table text (bold, italics, strikethrough).
    • Add a hyperlink to table content.
  • Use the Block Settings to:
    • Change the style of the table.
    • Fix table cell width.

Use the ‘Alignment’ and ‘Width’ tools to float the table in your content and set a width option (wide or full) …

(Edit a Table Block)

Use the ‘Edit Table’ tool to add or delete table columns and rows …

Add and delete columns and rows in your table

(Add and delete columns and rows in your table)

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

How To Remove A Table Block

To delete or remove a table block:

  • Click inside the Table 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 Table Block

(Remove a Table 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 Table Blocks into Reusable Blocks.

Table Block Tools, Options & Settings

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

  • Table Block Editor
  • Table Block Settings

Table Block Editor

Table Block Editor

(Table Block Editor)

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

  • Change Block Type (See ‘Table Block – Additional Info’ section below.)
  • Align Table
    • Align left
    • Align center
    • Align right
  • Table Width
    • Wide width
    • Full width
  • Edit Table
    • Add Row Before
    • Add Row After
    • Delete Row
    • Add Column Before
    • Add Column After
    • Delete Column
  • Format Table 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

Table Block Editor

(Table Block Editor)

Table Block Settings

Table Block Settings

(Table Block Settings)

Table Block settings include:

  • Block description area
  • Styles
    • Regular – Plain table with light-colored rows
    • Stripe – Alternating dark & light-colored rows
  • Table Settings
    • Fixed Width Table Cells (On/Off)
  • Advanced Settings
    • Additional CSS Class

Table Block Settings

(Table Block Settings)

Table Block – Additional Info

The Table Block cannot be converted into other block types …

Change Block Type - Table Block

(Change Block Type – Table Block)

Info

Notes:

  • Selecting ‘Change Block Type’ only brings up the ‘Block Styles’ menu allowing you to change the style of your table.

Table Block - Change Block Type

(Table Block – Change Block Type)

Additionally:

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

***

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

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

Spacer Block

The Spacer Block lets you add white space between blocks and customize its height …

WordPress Gutenberg Blocks – Spacer

WordPress Gutenberg - Spacer Block

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

***

Spacer Block Description

The Spacer Block lets you add white space between blocks and customize its height.

***

Add spaces to WordPress using the Spacer Block

(Add spaces to WordPress using the Spacer Block)

How To Use The Spacer Block

To add a Spacer Block:

  • Select a place in your content to add a spacer block (i.e. before or after), then either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Spacer’ block (in Most Used or Layout Elements section), or
    • Add the ‘Spacer’ block in the Content Area.
  • Use the tools in the Spacer Block Editor or Block Settings section to adjust your space.

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

'Add Block' Tool - Add Spacer Block

(‘Add Block’ Tool – Add Spacer Block)

Or, select a Spacer Block in the Content Area

Add a Spacer Block from the Content Area

(Add a Spacer Block from the Content Area)

After adding a Spacer Block, you can:

  • Edit the block to adjust the space.
  • Save, publish, or update your post or page.

How To Edit A Spacer Block

To edit a Spacer Block:

  • Click inside the Spacer Block to select it.
  • Use the Block Editor tools to adjust the spacing using the resizing handle.
  • Use the Block Settings to adjust the spacing by entering a height in pixels in the ‘Spacer Settings’ section.

Edit a Spacer Block

(Edit a Spacer Block)

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

How To Remove A Spacer Block

To delete or remove a spacer block:

  • Click inside the Spacer 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 Spacer Block

(Remove a Spacer 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 Spacer Blocks into Reusable Blocks.

Spacer Block Tools, Options & Settings

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

  • Spacer Block Editor
  • Spacer Block Settings

Spacer Block Editor

Spacer Block Editor

(Spacer Block Editor)

The Spacer Block Editor displays:

  • Block Type (See ‘Spacer Block – Additional Info’ section below.)
  • More Options

Spacer Block Settings

Spacer Block Settings

(Spacer Block Settings)

Spacer Block settings include:

  • Block description area
  • Spacer Settings
    • Adjust spacing height in pixels.
  • Advanced Settings
    • Additional CSS Class

Spacer Block – Additional Info

  • The Spacer Block cannot be converted into other block types.
  • Installing plugins or themes on your site may add new functionality, options, or settings to Spacer Blocks.

***

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

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie