What is Gutenberg?

Gutenberg is a new text editor that changes the entire editing experience for the user. It adds flexibility and better design for those who do not have a lot of experience writing code.

What are Blocks?

Different types of elements that can be dragged into the content of a page. This is the core function of what makes Gutenberg unique and easy to use. These blocks include everything from paragraph, images, buttons, embeds, video, audio, and anything you can expect to include to a blog post.

  • Common Blocks – Paragraph, heading, shortcode, pullquote, separator, custom html, faq, list, and button.
  • Formatting – Pullquote, code, preformatted, verse, classic, custom html, and table.
  • Layout Elements – Separator, button, columns, page break, more, and spacer.
  • Widgets – Shortcode, latest posts, archives, categories, and latest comments.
  • Embed – Easily paste links to posts from social media to display directly on your posts.
  • Yoast Structured Data Blocks (SEO Yoast plugin required) – FAQ and how to.
  • Reusable – Make a block that can be used in multiple locations and updated across all blocks when edited. 

Pro / Cons to Gutenberg

Pro

  • Adding complicated elements with no coding skill.
  • Create custom layouts with a user-friendly experience.
  • Mobile responsive to create and edit posts on the fly.
  • Reusable blocks allow of time saving development/data entry.
  • Stripped HTML should occur less often.

Cons

  • Lack of markdown support.
  • May require some custom CSS for more complicated elements for responsiveness such as columns.
  • Backward compatibility issues may occur.

New User Experiences

For Developers

Gutenberg was created for dynamic editing of posts for those who do not have much coding knowledge. This does not mean developers shouldn’t use it. Features such as the reusable block makes it easier for developers to insert dynamic code and be utilized in multiple locations of the site. Tasks like this are more likely to be completed by users with coding experience than without.

For Clients

A common issue for any digital marketing agency is when clients make updates to their own site and break the page due to lack of technical experience.  These incidents will occur less because access the raw HTML requires more steps and the number of blocks available to the user will make the need to edit the HTML of a post rare.

How To Install Gutenberg

Instructions how to install Gutenberg.

  1. Access WordPress Admin Dashboard

  2. Navigate to Add New Under the Plugin Menu

    Using the navigation menu on the left side of the screen hover the option “Plugins” and select “Add New”.

  3. Search Gutenberg and Install then Activate

    Using the search bar in the top right of the window type in “Gutenberg” and select “Install Now” on “Gutenberg by Gutenberg Team”. After installing, click the button “Activate” that replaced the install button.