WordPress Guttenberg Review - What's new in the upcoming WordPress editor?
Tags: webdev, php, beginners
Published: 2018-02-14 08:47:21

---
title: WordPress Guttenberg Review - What's new in the upcoming WordPress editor?
published: true
description: WordPress is about to release the new editor that has got everyone talking. Here are all the features of Gutenberg that is about to be released with the WordPress 5.0
tags: #webdev #php #beginners
---
[Gutenberg WordPress editor](https://www.wpblog.com/wordpress-gutenberg/) is the new editor that allows beginners as well as advanced users to edit and produce content for your website. Currently it is in beta stage and not perfectly fit for release but available to use as plugin for testing purposes.


<a href="https://youtu.be/IKwGmqLM8l8" target="blank"><img src="https://thepracticaldev.s3.amazonaws.com/i/gslni5oqcnkt94g4267c.PNG" width="440" height="380" border="10" /></a>



<b>How to install the Gutenberg editor</b>

Installing the Gutenberg WordPress editor is simple and easy. 

Go to Plugins > Add new and then type Gutenberg. Also make sure that your WordPress site is upgraded to the latest 4.9 release before installing the Gutenberg WordPress editor. If it is already upgraded then you will see a checkmark at the bottom right corner. After that press the Install Now button at the top-right corner. 

<img src="https://thepracticaldev.s3.amazonaws.com/i/pjxgcsnbxl6ufubnri3v.png">

Finally now press the blue Activate button.


<img src="https://thepracticaldev.s3.amazonaws.com/i/0y919mqv6rdd0cgpb0ki.png">



<b>How To Use the new Gutenberg Editor</b>

After successfully installing the plugin you can access it in two ways:

1. Select Posts > All Posts, and click on the Gutenberg instead of the Edit link.  Also Note that the old Edit link is still available.

<img src="https://thepracticaldev.s3.amazonaws.com/i/svkwq2fxw7pr2o2p0ygh.png">

2. Select Gutenberg > New Post on your Dashboard.

<img src="https://thepracticaldev.s3.amazonaws.com/i/ezlnjys6bq9wkhcrlw70.png">

It looks like medium.com style of design. Also the Post metadata configuration is accessible in the right column as tab. You can hide/show by clicking on Post settings.

<img src="https://thepracticaldev.s3.amazonaws.com/i/4bvbtowz4ik6qq28retj.png">

You can add, format and also move text efficiently. You can begin writing the title and the main body. If you want to add another paragraph then just click on + > Text.

<img src="https://thepracticaldev.s3.amazonaws.com/i/dai4eoy0kyox7e5tvmrl.png">

This new Gutenberg Editor use blocks to organize text. After writing the paragraph, you can easily change its order in the text using the arrow keys located next to it. If you want to delete you can use the Trash Can icon on the right.

<img src="https://thepracticaldev.s3.amazonaws.com/i/khkljb22jcld7ajy8nyr.png">

If you want to add a heading between the two paragraphs then you need to do it via + button and then move it using the arrow icon.

One of the most important highlights of the Gutenberg WordPress Editor is it’s support for multimedia and rich content. Embedding process is really simple and easy. To embed just click on + > Embeds > Search meetup > Click on Meetup.com

<img src="https://thepracticaldev.s3.amazonaws.com/i/q45rtv7q9mcnhdkbwncp.PNG">

<img src="https://thepracticaldev.s3.amazonaws.com/i/yw6qmksk67cfu0b1kg2p.png">


The available embed services run from Twitter, Facebook, Instagram, DailyMotion, YouTube, Kickstarter and Spotify, TED, Slideshare, and Tumblr. You have to just select the source, enter the corresponding URL and then done!


Gutenberg editor provides more including layout blocks such as button and the separator.

<img src="https://thepracticaldev.s3.amazonaws.com/i/rlr2891wy40qgtdk0wtb.png">


<b>Pull Quotes</b>
Gutenberg also introduces form of quotes known as Pull Quotes.

<img src="https://thepracticaldev.s3.amazonaws.com/i/luwe9ny0k4928os0xybh.png">



<b>Table Block</b>
This is the most useful addition to this Gutenberg Editor. As for now only 2×2 tables are supported without any configuration of the table. You can simply add columns or rows. Well it’s a great option in this Gutenberg editor as currently you can’t use tables without using a third party plugin.

<img src="https://thepracticaldev.s3.amazonaws.com/i/2k8rlsn2jxux7ul2otb3.png">


<b>Custom HTML</b>
You can also add HTML blocks that you can easily preview. Now you can quickly change between text and visual mode. 

<img src="https://thepracticaldev.s3.amazonaws.com/i/0lpe86pngcbsb3pbxsod.png">