Gutenberg - More Than Just An Editor

By Priyanka K on January 23, 2020

What is Gutenberg?

Gutenberg is a take on a new editor for WordPress. It is named after Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago. The current visual editor requires a lot of us to utilize shortcodes and HTML to make things work. Their goal is to make this easier, especially for those just starting with WordPress. They are embracing “little blocks” and hope to add more advanced layout options.

Is Gutenberg a part of WordPress?
Gutenberg was officially released as part of WordPress 5.0 on December 6, 2018. If you’ve updated your site to WordPress 5.0, you should now see the new block editor by default.

Gutenberg- the next big thing
WordPress powers almost 28.5% of the internet. Open source development drove WordPress’ market growth. Launched in concert with the open-source GNU license, allowed developers to augment and expand the software framework at no cost. WordPress evolved to support design themes and plugins that extend the software’s functionality and fertilize a vibrant ecosystem of third-party developers that create and sell custom code. Today the platform, including themes and plugins, is used by consumers, small and medium businesses, e-commerce companies, and large publishers.

Why the name Gutenberg?
Gutenberg changed everything. The printing press revolutionized everything. The printing press ushered in social, political, and economic sea changes. WordPress is democratizing publishing — and democratizing work — for everyone, regardless of language, ability, or economic wherewithal.

How Gutenberg will change everything
Gutenberg came with the idea of WYSIWYG(what you see is what you get). Earlier you need to know HTML, CSS or load different plugin to make your content richer. Gutenberg came with a whole new experience. Here what you create in the backend you would experience the same in the frontend.
Plugin developers will be able to completely integrate into every part of WordPress, including posts, pages, custom post types, and sidebars without having to hack TinyMCE or squeeze their entire feature behind a toolbar button. Theme developers won’t need to bundle tons of plugins or create their own page builders. There’ll be a standard, portable way to create rich layouts for posts and guide people through setup right in the interface, no 20-step tutorials or long videos needed.
Theme developers won’t need to bundle tons of plugins or create their own page builders. There’ll be a standard, portable way to create rich layouts for posts and guide people through setup right in the interface, no 20-step tutorials or long videos needed.
Core developers will be able to work in modern technologies and not worry about 15 years of backward compatibility.
Web hosts will have better signup rates, as Gutenberg opens up WordPress to an entirely new set of people for whom WordPress was too complex and hard to set up before.
Users will finally be able to build the sites they see in their imaginations. They’ll be able to do things on mobile they’ve never been able to before. They’ll never have to see a shortcode again. Text pasted from Word will get cleaned up and converted to blocks automatically and instantly.

Guttenberg more analysis
Guttenberg UI focuses on content layout, it focusses mainly on minimizing backend UI
Everything is a block – Text, images, galleries, widgets, shortcodes, and even chunks of custom HTML, no matter if it’s added by plugins or otherwise. You should only have to learn to master a single interface: the block interface, and then you know how to do everything.
All blocks are created equal – They all live in the same inserter interface. We use recency, search, tabs, and grouping, to ensure the blocks you use the most are easily within reach.
Drag and drop are additive – Only when explicit actions (click or tab & space) exist, can we add drag and drop as an additive enhancement on top of it.
Placeholders are key – If your block can have a neutral placeholder state, it should. An image placeholder block shows a button to open the media library, a text placeholder block shows a writing prompt. By embracing placeholders we can predefine editable layouts, so all you have to do is fill in the blanks.
Direct manipulation – The block technology optimizes the user experience of manipulating content directly on the page. Plugin and theme authors will have the ability to compose together different tool cores will provide to create their own tailored and specific blocks that give users a WYSIWYG environment for creating on the web.
Customization – What previously required using complicated markup and shielding users from breaking it—through shortcodes, meta-fields, etc. becomes easier and more intuitive.

Is Gutenberg is a page builder then?
Not quite. At least not in its current form.
Gutenberg is going to make it a lot easier to style regular content like blog posts or standard pages, but it’s not a 1:1 substitute for page builders in its current form.
Just on a surface level, Gutenberg already lacks two essential things:
Flexible columns, though there is a basic column block and some third-party developers have created interesting blocks.
True drag and drop – the newer version of Gutenberg lets you rearrange blocks with drag and drop, but it’s still not free-form like most page builders.
With that being said, the Gutenberg block editor is poised to eliminate the need for page builders for most “standard” content, and it also creates a single unified method for creating more-complex post layouts in WordPress.
But when it comes to building more complex pages, like a landing page, you’re probably going to appreciate the greater flexibility offered by page builders (at least during Gutenberg’s initial release).

A quick tour of the WordPress block editor interface
Before you start adding some blocks, let’s go over a quick run-down of the elements of the main block editor interface:

  • (A) – lets you add new blocks.
  • (B) – undo/redo buttons
  • (C) – gives you access to document settings, covering things like categories & tags, featured images, etc. This is similar to the current sidebar in the WordPress editor
  • (D) – when you have an individual block selected, this gives you access to settings that are specific to that block
  • (E) – lets you access a live preview of your post or publish/update your post
  • (F) – once you add some blocks, this is where you’ll actually work with your post’s content

Adding new blocks
To add a new block, all you need to do is click the + plus icon and select the type of content you want to add. There are sections for Common Blocks, Formatting, Layout Elements, Widgets, and Embeds:

  • Inline Elements – only contains one block for an inline-image.
  • Common Blocks – contains basic building blocks like images, paragraphs (regular text), headings, quotes, etc.
  • Formatting – let you add more formatted content like pull quotes, tables, or the classic WordPress text editor
  • Layout Elements– let you split a text into two columns, include buttons, separators, or the “More” tag
  • Widgets – let you add shortcodes, latest posts, or categories. It’s even possible to display sidebar widgets right in Gutenberg.
  • Embeds – help you embed content from external sources like Twitter, YouTube, Facebook, Instagram, and more.
  • Reusable – once you get the hang of things, you can save groups of blocks as reusable templates and have them appear here. This area won’t appear until you save your first reusable template, which we’ll show you how to do later on in this post.

Quick-create a new block with typing
Above, I showed you how to create blocks using the insert button. But to save time, you can actually create blocks by simply typing this syntax:
An auto-suggest box will appear to help you find the relevant block.

Use Gutenberg keyboard shortcuts to save time
Beyond standard formatting shortcuts, the block editor has a number of dedicated keyboard shortcuts that can help you:

  • Insert new blocks above or below the selected block
  • Delete a block
  • Duplicate a block
  • Etc.

To open the full list of keyboard shortcuts, use the Shift + Alt + H shortcut.

One of the most popular questions about the Gutenberg project is how existing content will be handled with block editor. Backward compatibility (making sure nothing breaks) has always been a top priority for the WordPress core development team and they’ve assured everyone that upgrading to WordPress 5.0 will not negatively affect existing content on current sites.
Because of the emphasis on backward compatibility, any content you’ve created on your site before the arrival of the block editor will be safe. It will be automatically moved into a block called the “Classic Block.” The Classic Block is the equivalent of taking the classic editor and cramming it into a single block.


Leave a Reply

Contact us!