Gutenberg-The Guide

Gutenberg-The Guide

WordPress is about to change in a very big way. After many months of development and testing, the platform is ready to make one of its biggest shift in history. A shift that may frustrate many users but will make building a website much easier and it’s called Gutenberg.

What is Gutenberg?

The next major update of WordPress is the Gutenberg. It is a block editor that is the default editor from WordPress 5.0. In Gutenberg, pages are broken into a content block that can be easily dragged and dropped, edit its style and functionality and the most striking feature is that you can watch your web page form live before your eyes with little to no coding experience.

Gutenberg works on the functionality of blocks. Wait but what is block?

Block represents a type of content like image, paragraph, video etc. You can have multiple blocks in your post and customize it just the way you like it. Aside from this, Gutenberg also provides a lot of striking and easy features to implement which will help to beautify the post even more. So let’s dive into it.

Exploring Gutenberg:

If you are a user of WordPress 5.0 or newer, Gutenberg will be your default editor rather than classic editor but if not, let’s not worry you can also download the plugin from “Installed Plugin”.By navigating to the “Plugins” menu, select “Upload Plugin”  and type “Gutenberg” in the search bar.

Once Gutenberg editor is installed in the WordPress, you are ready to explore the different features of Gutenberg and, create your post and customize it as your liking.  

Creating First Post With Gutenberg:

In order to start a new post in Gutenberg editor ‘’click on Posts”. You will see the following screen:

On the top right corner, navigate to “Add New” and select “Gutenberg”

This is the first look of the Gutenberg editor. In Gutenberg editor, there is a “Add title” option for the post title followed by a block, setting menu(On the top-right corner denoted by three dots), post settings(On the top-right corner with setting image), document and block options(just below the settings) as well.

On selecting the “Post Settings” located at the top-right corner, you will have access to the full screen and the sidebar will be hidden giving you more open space to edit your post freely.

Adding Block:

In order to add a new block in the post, navigate to the top-left corner and press the “New Block” otherwise below the title, there is also an option of “New Block” on the left side.

Exploring the Settings menu:

Settings menu have further three sub-menus

1- Views

  • Top Toolbar: Access all documents and block tools in a single place.
  • Spotlight Mode: Focus on one block at a time.
  • Full-Screen Mode: Work without distraction.

2- Editor

  • Visual Editor: You can edit or develop your post with blocks.
  • Code Editor: You can edit your post or develop it with coding as well.

3- Tools

  • Manage all reusable blocks
  • Keyboard Shortcuts
  • Copy all Contents
  • Options

One of the essential element of a post is to be able to keep an eye on the word count, paragraphs, headings, and blocks. In Gutenberg, Word count and other information can also be tracked from the top-right corner.

Exploring Blocks:

We have already discussed what a block is but now let’s explore it in detail.

In a block, there are alot of different pieces of content we can add to populate the post. A block comprises of a number of different options.

Most Used:

It contains all the blocks that you will use frequently.

Common Blocks:

It contains basic content of the post which are as follows

  • Paragraphs
  • Image
  • Gallery
  • Headings
  • List
  • Quote
  • Audio
  • Cover
  • File
  • Video

Formatting:

It contains advanced elements which are as follows

  • Code
  • Classic
  • Custom HTML
  • Preformatted
  • Pullquote
  • Table
  • Verse

Layout Elements:

It contains the following

  • Button
  • Columns
  • Media and Text
  • More
  • Page break
  • Separator
  • Spacer

Widgets:

It contains the following

  • Shortcode
  • Archives
  • Categories
  • Latest comments
  • Latest posts

Embeds:

It contains options through which you can link different websites and social media pages in the post which are as follows

  • Twitter
  • Facebook
  • Youtube
  • Instagram
  • WordPress
  • Soundcloud
  • Spotify
  • Flickr
  • Vimeo
  • And many more

For adding an image in the post, navigate to the “Common Blocks” and select image. Image block can upload the image from the computer, media library of wordpress or from a website’s URL. 

Captions can also be added with images to provide better understanding.

For all the programmers and developers out there, Gutenberg also provides the functionality of writing javascript directly into the post.

In Gutenberg editor, buttons can also be used and are customizable.

Writing short codes in the post is also a feature of Gutenberg.

Embedding options is another important feature of the Gutenberg editor as linking different social media profiles and pages to the post like facebook, twitter, LinkedIn and many more are essential these days.

Rather than edit the Permalink from the “Settings” menu and then navigating to the “Permalink Settings”. Gutenberg has reduced the headache and now you can easily access the Permalink directly in Gutenberg which is located on the top of the Post title.

In Gutenberg, you can customize each block according to your own taste by navigating to the top-right corner, and selecting the “Block”. With each block, you can change its style, color, position and many more.

Furthermore, the post can be saved, previewed and published easily and the changes can be seen simultaneously. Undo and redo options are also available for better user experience. For users with little to no coding experience, WordPress has made creating and editing the post even much easier than before with Gutenberg.

Summary:

Gutenberg has definitely mesmerized us with its easy to use interface and all the user-friendly updates. WordPress has made an amazing update in the form of Gutenberg. Have you tried Gutenberg? If not then go install WordPress now to start writing your post with Gutenberg.





1 thought on “Gutenberg-The Guide”

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.