Nov 022018
 

Adding Blocks In WordPress Gutenberg post talks about the different tools you can use when adding blocks, titles, images, galleries and other blocks.

The following tutorial shows you the different tools you can use and different settings you can configure when adding blocks, images, galleries and other blocks.

The following shows you a small list of tools and settings you will learn about.

Tools , Settings For Blocks

  • H2
  • H3
  • Bold
  • Italic
  • Align left
  • Align center
  • Align right
  • and more

WordPress Gutenberg Editor Tutorials:

Adding Blocks In WordPress Gutenberg

Step 1 ) The following image shows you the title and content block when adding a new post.

Gutenberg New Post Editor

  • Add title field
  • Text block

add-new-post-wordpress-gutenberg-editor

Change Permalinks

Step 2 ) The following image shows you the Change Permalink button after you type in the post title.

change-post-permalink-wordpress-gutenberg-editor

Add Heading Tools

Step 3 ) The following image shows you the different tools you see when adding a heading to the content of a post.

Add Heading Tools

  • H2
  • H3
  • H4
  • Bold
  • Italic
  • Link
  • Strikethrough
  • More options

add-post-heading-wordpress-gutenberg-editor

Step 3-a ) The following image shows you the block settings in the top right editor options.

Heading Settings

  • H2
  • H3
  • H4
  • H5
  • H6

Text Alignment

  • Align left
  • Align center
  • Align right

Advanced

  • HTML Anchor
  • Additional CSS Class

add-post-heading-settings-wordpress-gutenberg-editor

Add Image Tools

Step 4 ) The following image shows you different tools you can use when adding an image to the content of a post.

Note: When adding a gallery the procedure is the same as adding an image.

Add Image Tools

  • Align left
  • Align center
  • Align right
  • Wide width
  • Full width
  • More options
  • Upload
  • Media Library
  • Insert from URL

add-image-to-post-wordpress-gutenberg-editor

Step 4-a ) The following image shows you the block settings in the top right editor options.

Advanced

  • Additional CSS Class

add-image-to-post-settings-wordpress-gutenberg-editor

Content Editor More Options

Step 5 ) The following image More Options allows you to manage and set up the following options when adding an image, gallery and other blocks to the content in a post.

Content Editor More Options

  • Hide Block Settings
  • Duplicate
  • Insert Before
  • Insert After
  • Edit as HTML
  • Add to Reusable Blocks
  • Remove Block

more-options-in-cotent-wordpress-gutenberg-editor

==============================

That is how simple it is to add blocks to the content in a post and page.

If you have any questions please let me know. I will be updating this tutorial from time to time.

Enjoy.

Manuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.