Table Block

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

Get Thrive Leads for WordPress

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

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

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

Get Thrive Leads for WordPress

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

Separator Block

The Separator Block lets you break your content sections with a horizontal separator …

WordPress Gutenberg Blocks – Separator

WordPress Gutenberg - Separator Block

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

***

Separator Block Description

The Separator Block lets you break your content sections with a horizontal separator.

Add a horizontal separator using the Separator Block

(Add a horizontal separator using the Separator Block)

How To Use The Separator Block

To add a Separator Block:

  • Select a place in your content to add a horizontal separator (i.e. before or after), then either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Separator’ block (in Most Used or Layout Elements section), or
    • Add the ‘Separator’ block in the Content Area.
  • Add, paste in, or upload your content.
  • Use the tools in the Separator Block Editor or Block Settings section to resize, edit, format, or customize your separator element.

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

'Add Block' Tool - Add Separator Block

(‘Add Block’ Tool – Add Separator Block)

Or, select a Separator Block in the Content Area

Add a Separator Block from the Content Area

(Add a Separator Block from the Content Area)

After adding a Separator Block, you can add a horizontal separator:

Add a horizontal separator

(Add a horizontal separator)

After adding a horizontal separator:

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

How To Edit A Separator Block

To edit a Separator Block:

  • Click inside the Separator Block to select it, then:
    • Use the Block Editor tools to change the style of the horizontal separator, or
    • Use the Block Settings to change the style of the horizontal separator.

Edit a Separator Block

(Edit a Separator Block)

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

How To Remove A Separator Block

To delete or remove a separator block:

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

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

Separator Block Tools, Options & Settings

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

  • Separator Block Editor
  • Separator Block Settings

Separator Block Editor

Separator Block Editor

(Separator Block Editor)

The Separator Block Editor displays:

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

Separator Block Settings

Separator Block Settings

(Separator Block Settings)

Separator Block settings include:

  • Block description area
  • Styles
    • Short Line
    • Wide Line
    • Dots
  • Advanced Settings
    • Additional CSS Class

Separator Block – Additional Info

  • The Separator Block cannot be converted into other block types.
  • Selecting ‘Change block type’ brings up the ‘Block Styles’ menu.
  • Installing plugins or themes on your site may add new functionality, options, or settings to Separator Blocks.

Change Block Type - Separator Block

(Change Block Type – Separator Block)

***

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

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com