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

***

"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)

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

***

"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

Pullquote Block

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

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

***

"These tutorials have so much information and are easy to understand. If you use WordPress or plan to in the future these will help you with everything you need to know." - Valisa (Mesa, Arizona)