6 Essential Blocks You'll Be Using on the WordPress Gutenberg Editor

With the upcoming release of WordPress 5.0, we’re patiently awaiting the new Gutenberg Editor. Until then, you can play around with the Gutenberg Editor plugin to prepare yourself. Please note that this plugin is in beta, and we do not recommend using it for live sites. We suggest using the beta version on a test site or a staging environment. The WordPress team encourages users to test out the new editing system and give any feedback. They hope to get 100,000 active installs before officially merging the new editor into WordPress core. This will ensure that any kinks are worked out before the official version goes live. Now, the plugin has over 10,000 active installations.

 

How to Install Gutenberg Editor

You can download the beta version of the Gutenberg Editor to get an idea of what’s to come.

  • In your WordPress dashboard, go to Plugins in the left-hand menu and click Add New.
  • Search for “Gutenberg.”
  • Once you find the correct plugin, click Install Now.
  • When prompted, click Activate.
  • Your Posts will automatically utilize the Gutenberg editor.

 

Block Party!

The main difference between the classic editor and the Gutenberg editor is the use of block-based editing. This means content creators can build posts and pages by manipulating drag-and-drop blocks, as opposed to putting all of your content in designated fields. This especially helps with multimedia elements like images, videos, and galleries.

Here’s a rundown of the basic blocks you’ll be using in phase one of the Gutenberg Editor:

 

1. Table Block

Instead of using a separate plugin or implementing HTML, Gutenberg now includes a table block, although it’s only 2×2. Simply resize the cells by dragging the borders to your liking. This is a great way to organize numerical values, and you won’t have to use a plugin or a third-party program to create a table.

Screenshot of 2 by 2 table from Gutenberg demo.

 

2. Text Column Block

Instead of a single block of text, display your content in 2, 3, or 4 columns. This gives your posts more of an editorial feel and helps with readability.

Screenshot of 3 text columns from Gutenberg demo.

 

3. Live HTML Block

Gutenberg is also developer-friendly. The live HTML block allows you to insert code and immediately preview your changes within the block.

Screenshot of HTML block with code for a form.

Screenshot of form preview.

 

4. Images

Simply drag and drop images directly into a block on your post. Add alternate text and additional CSS classes directly through the post as opposed to going back and forth to the media library. You can easily transform a single image into a gallery or simply add a new gallery block if you have more than one image you’d like to display in a post.

Screenshot of image block from Gutenberg demo.

 

5. Videos

Add a video via URL or the media library. The great thing about this block is you can easily align, wrap text, and resize the width of your videos.

Screenshot of video block on Gutenberg demo.

 

6. Quote

This element allows you to highlight a phrase or quote directly in your post. This also gives your post a more editorial style and breaks up large blocks of text. In addition, quotes catch and retain readers attention as they scroll through a long interview or review.

Screenshot of quote block from Gutenberg demo.

 

If you’re hesitant to download the plugin, check out the live demo. The demo allows you to play around with the basics, but images and videos have difficulty displaying. Use the beta plugin to get a better idea of the functionality.

We’re really looking forward to the new changes. With the new editor, we’ll be able to experiment with creative styles and formats. With the future of Gutenberg, we hope to be able to create entire web pages with the block-based editing. This will be a lot more efficient for WordPress projects and clients will have an easier time editing content. Let us know what you think of the new editor!

 

Free consultation to discover your best-fit solution.

Get Started Now
  • This field is for validation purposes and should be left unchanged.