Introduction
The WordPress Gutenberg editor replacement is about to fundamentally change your content editing experience. As a default component of WordPress 5.0, the standard WYSIWYG (What You See Is What You Get) TinyMCE editor that you're familiar with will be replaced by the Gutenberg "content builder" editor – essentially providing an editing experienced based upon blocks of content.
A block of content might be a paragraph, list, quote, heading, code, gallery, shortcode, columns, a widget, or any other kind of content traditionally available from within the WordPress editor, the oEmbed source list, or platform shortcodes. Each block is edited visually and independently of other content blocks, with each block presenting a range of attributes that alter the block object appearance.
The block content creation feature is nothing new. Medium, LinkedIn, and a number of other platforms have used the block concept for some time. In fact, a similar feature has already been available within WordPress via a number of commercially available and free "page builder"plugins. However, these third-party plugins only make features available that are provided within that plugin. Not all of the default features of WordPress are available, and if another developer comes along and builds specific functionality it'll normally be available via a shortcode (often via the existing WP editor) and will rarely integrate with the third-party builder product. The Gutenberg editor mitigates this awkward and fractionalised user experience by rationalising developer expectations by steering them away from traditional shortcode development and instead encourages use an API that permits them to build blocks that integrate with the Gutenberg's editor.
One of our long-held criticisms of the third-party page builder ecosystem is that they often take the open source experience and turn WordPress into a commercial product. Often shipped with paid themes, unlicensed third-party builders (they're rarely shipped licenced) quickly become obsolete or incomplete and often requires a paid subscription to provide critical security fixes (a means of hijacking the open experience via ongoing licencing). It's not uncommon for the bloated plugins to fundamentally alter the WordPress back-end experience, and one can't escape the altered editor completely because a website becomes reliant upon the features and shortcodes the editor plugin provides. It's a less than ideal situation.
Some might even argue that any web developer that forces the third-party page builder experience on a client is a little reckless in their assumption that a builder will enhance that client's content creation. Our experience is that the opposite applies.
Once a website is built, it’s the opinion of many that page builders hinder the writing experience rather than enhance it; the standard linear writing flow is interrupted with unnecessary complexity and a cluttered page filled with clunky irrelevant features. Even writing a new paragraph with Gutenberg (and other builders) requires the creation of a new block rather the intuitive double-tap of the ‘Enter’ key. Many argue that we should be able to write at the speed of thought without blocky web features impacting upon that experience… and it’s a widely touted opinion that Gutenberg (and most other content builders) is contrary to this ethos.
The problem at this early stage is that Gutenberg is a forced editing experience upon a user-base that has developed familiarly with the Classic Editor over a number of years. However, Gutenberg is just the first part of a much larger and ambitious plan to completely transform the overall WordPress experience. First comes the Editor (Gutenberg), then comes page templates, and then the platform will introduce a full customizer. While there’s a 'Classic Editor' plugin to disable the Gutenberg features, long-term resistance to the modernisation program is somewhat futile.
A long time in the making, the enhanced editor and 'builder' interface was considered as early as 2010, it was first introduced as an idea in 2013, and debated numerous times within the WordPress community dating back well over 10 years. However, with 32% of the Internet powered by WordPress it's a serious challenge to introduce change when the number of those that resist the product still amounts to hundreds of millions of people.
WordPress has become complicated, and content creation is sometimes more difficult than it needs to be. Theme and plugin developers are partly responsible for polluting the otherwise intuitive experience and Gutenberg is a small step at restoring simplicity into what should be the easy process of simply writing an article.
Gutenberg is named as a tribute to Johannes Gutenberg 
, the German blacksmith, goldsmith, inventor, printer, and publisher who introduced printing to Europe with the printing press. His introduction of mechanical movable type printing to Europe started the Printing Revolution and is regarded as a milestone of the second millennium, ushering in the modern period of human history.
There's more left out in this document than included; it's a basic introduction only.
Why Change WordPress?
The WordPress editor experience hasn't changed in over 10 years. In the time we've used the existing TinyMCE Editor WordPress editor we’ve seen the introduction of dozens of commercial builders, externally hosted services such as WIX (based on WordPress) have established a significant commercial presence, other hosted services (particularly in the landing page space) have emerged, and other less popular CMS projects have introduced features that potentially make them a more advanced platform. It might be said that WordPress has maintained its dominance simply because designers and developers hadn't properly explored their options.
The drag and drop content creation experience with front-end GUI CSS editing is now the norm rather than the exception... except when using WordPress. To maintain relevance, WordPress must move away from its antiquated roots and adapt to new technology in order to evolve and remain competitive. In WordPress’ words, they "believe that it is critical for WordPress to continue to innovate and keep working to make the core experience intuitive and enjoyable for all users."
"The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has 'blocks' to make it easy what today might take shortcodes, custom HTML, or 'mystery meat' embed discovery". - Matt Mullenweg.
When we're asked why Gutenberg is necessary, our response is that WordPress has to change because it's necessary – not because it's something that'll keep us comfortable. We have to invest a little faith in what has been decided upon as best practice, unshackle ourselves from our biases, and accept the inevitable.
Since the content and page builders are so common in premium themes, and since they do such a poor job at supporting cross-theme pollination or the Open Source experience, we can't help but support WordPress' plans simply so we see some commonality in how content is created, and so site owners aren't tied down to costly premium licencing and support for page builders that take ownership of WordPress’ core purpose – content creation.
While each theme is technically compatible, Gutenberg may break some of them. The change may break CSS and styling, and it may crash other websites completely.
Using Gutenberg
The Editing Area
Using blocks is rather intuitive. You're literally building blocks of content where each block represents a new object type (text, video, quote etc.). The entry screen for a sample article created by Gutenberg is as follows:
The right-hand navigation area now includes the standard features in one tab on the left and features associated with the current block in another tab on the right.
Full Screen Editing
The document bar (to the right of the page) can be completely removed from the screen with the little 'x' in the top right corner. If you also collapse the primary left-hand menu you return a true full screen editing experience that feels very much like you're writing in Microsoft Word.
An even easier option to return a full screen editing canvas is via the primary menu indicated by three vertical dots (indicated by ⋮ in the fixed header menu) that presents a 'Fullscreen Mode'.
The Post Title
The post title (not a block) looks like this:
You'll find most elements on the page present differently. The post title is just one example.
Adding & Removing Blocks
To add a block to the page you have two primary options: hover over the existing block and click the + icon, or click the + icon in the top left of the page in the fixed header menu.
Other than the option to add a new block, the fixed menu at the top of the editing page also provides options to undo content, redo content, return the document outline, and return the page block structure (discussed shortly).
When adding a block you'll immediately be presented with a list of block options (the default blocks are those that are most used (shown above).
Scrolling down returns other block type 'categories'. When expanded you'll be shows a number of object types that may be included in your page.
The following example shows the YouTube option under the 'Embeds' blind.
The embeds menu typically displays all those options that were previously made available via the rarely-functional oEmbed feature.
The Image Block
Using the example provided by the Gutenberg plugin, hovering over the image returns the following:
The very first icon indicates the block type. The remaining icons adjust alignment of the image and overlay text. The pencil icon edits the media, and the last icon returns a set of additional options (indicated by ⋮) that you'll find on every block.
Each block returns a number of attributes that are specific to that block type. Additionally, the right hand document menu includes a number of additional formatting attributes.
Inserting a Gallery
Inserting an image gallery was one area that is typically problematic with the existing gallery options. It's difficult to scale images, and challenging to define the number of columns without a good understanding of gallery shortcode attributes. With Gutenberg, the process is exceedingly simple.
Inserting a gallery block. Note how the gallery scales the third image to fill the post column width
The gallery block isn't ideal by any means but it does illustrate the ease of which a user might quickly and easily add images to a page.
Inserting a Table
An example of a block that illustrates how it'll make user life easier is the table block. Selecting 'Table' from the 'Formatting' menu returns the initial block options asking for the column rows and columns.
You'll be asked for the number of columns and rows.
Selecting 'Create' returns the table ready for content.
While the table is far from perfect it is infinitely more powerful than any existing default WordPress option. Until now, the process or creating a simple table is one of those features that has required knowledge of HTML or use of a plugin. As pictured below, the right hand column's advanced block options provides for fixed table cells, various styles, and an optional CSS class.
Adding an external class permits you to immediately create fancy formatted tables with ordering via a large number of available JavaScript libraries.
The Classic Editor
The 'Classic Editor' continues to be used at various times -including from within blocks. The editor (without the source code option) can be used as a standalone block via the 'Formatting' menu.
Inserting Shortcodes & Widgets
WordPress will continue to support shortcodes. While the shortcodes can be inserted in a number of ways, the method you'll likely use most often is via a block option. Via the 'Widgets' menu you can insert an existing Widget or use a shortcode.
Of course, part of the advantage that comes from using blocks is that shortcodes will eventually be rewritten into a block so that you won’t have to remember all the available shortcode attributes. Rather, the block will present shortcodes in an intuitive GUI interface.
Reusing Blocks
A useful feature introduced with Gutenberg is the reusable block. Until now, to repeatedly use the same block of text (say, disclaimer text or similar) would be accomplished by simply copying the same text into each post or sensibly using a shortcode. Now you have the option of using a reusable block.
The reusable block then becomes available via the 'Reusable' block menu.
Not unlike shortcodes, altering the single block will apply changes wherever the block is used.
Nested Blocks
As evidenced by the 'Media & Text' block in the 'Layout Elements' menu, it appears we can nest blocks inside of other blocks. While we found the output for this particular block lacking essential elements (such as aligning text to the top of the block) it is still a useful feature for those that would otherwise struggle with implementing the same design.
Content Structure
The content structure icon at the top-left position of the fixed header menu provides a brief summary of your document outline.
The content structure is particularly useful in returning a count of words since this otherwise visual aspect is hidden by way of block usage.
Block Navigation
The block navigation icon (in the fixed header menu) returns a list of all blocks. Selecting any of the blocks immediately scrolls you to that position in your document.
Spotlight Mode
Editing blocks in isolation of the block above or below it can be problematic because they mesh together in a way that doesn't provide suitable demarcation. The solution is to use the 'Spotlight Mode' from the primary menu (via the ⋮ icon).
Code Editor
The code editor is a (silly) alternative to the visual editor. It returns each block type in its naked format (block type and attributes as a decoded JSON string). In some cases it may be necessary to venture into the codey realm to identify errors.
Reordering Blocks
All blocks can easily be reordered by simply dragging and dropping them into a new position or by selecting the arrows on the left hand side of each block.
This feature is particularly useful if you're a serial cut-and-paster.
Installing & Disabling Gutenberg
Trying Gutenberg
As of WordPress 4.9.8 WordPress presented administrators with an option to try Gutenberg on their dashboard home screen. However, you may install and try Gutenberg at any time by downloading and installing it from the WordPress plugin repository 
like any other.
Using the Classic Editor
Disabling Gutenberg and reverting back to your standard editor can be accomplished by downloading and installing the 'Classic Editor ' plugin.
The Release Date
The development and release of WordPress 5.0 has been somewhat tumultuous in nature. We expected a final release yesterday (27th of November) but – as expected - it has once again been postponed indefinitely.
The Response to Gutenberg
The response to Gutenberg is not good. At the time of writing the plugin repository is showing an average Gutenberg rating of 2.3 stars from 1605 reviews (compared to an average rating of 4.9 for the Classic Editor alternative). However, anecdotally, those that post to and rate on WordPress often have an inherent bias as they’re usually not the 'end user', but rather connected in some way to coding or creation via existing methodology.
Already Using a Page Builder?
Migrating to Gutenberg
If you’re already using a page builder it may be time to eliminate it. These page builders essentially build shortcodes into post or page, so to eliminate them means copying the relevant shortcodes and CSS into custom functions (and CSS) plugin. The builder plugin may then be deleted without interruption. We’ll be performing this task for all of our clients if required.
Our assumption is that Gutenberg for WordPress is or will evolve into a complete replacement for the trove of commercial builders… and we believe that developers should expect to build blocks for the new default editor rather than curating an entirely new editing experience.
Will Third-Party Builders Survive?
Gutenberg will be a default WordPress experience, the developer world will support its use, and theme developers will all start to build an integrated Gutenberg experience. Third-party builders might like to think they have a chance... but they don’t.
Gutenberg References
If you're interested in learning more about Gutenberg, or want to explore the technical nitty-gritty, check out the Gutenberg Handbook , the Block API , or visit WordPress to try the new editor without installing it on your own website.
The Landing Page Experience
We’ve long help the opinion that third-party landing site builders are an utter waste of time when one already owns and operates their own website. We see these third-party websites used routinely in the finance field, and their use is promulgated by marketing practitioners that are somewhat clueless.
The integrated builder brings us one step close to web users building their own landing pages and taking ownership of their own content.
Conclusion
While it wasn't likely WordPress' intent when they built Gutenberg, the framework (if it survives scrutiny) will possibly put an end to or slow down the third-party page-builders ecosystem that compromises the writing experience and the freedoms associated with an open source publishing platform. As soon as you're using a page builder you're committed to using that builder or the theme (long-term) because it's intrinsically connected to the content you've created. We believe that the underlying commercialisation of content creation has to come to an end... and Gutenberg may provide this relief.
Remember New Coke? We'd say it didn't work out well for Coke except that the brand exposure increased sales of (Classic) Coke enormously. However, the reintroduction of the old formula just a few months after New Coke, and the widespread condemnation of the reinvention was a cautionary tale.
Mark Twain once said the following of Gutenberg:
"What the world is today, good and bad, it owes to Gutenberg. Everything can be traced to this source, but we are bound to bring him homage, … for the bad that his colossal invention has brought about is overshadowed a thousand times by the good with which mankind has been favored."
The same quote may apply to WordPress' Gutenberg editor.
Will we use the editor? Not yet. We’ve encountered nothing but problems with saving and creating content. However, we appreciate that our natural resistance to the change is obfuscated by prejudice and bias – we need to give it a chance.
All the shortcodes we've provided on our website (and there are hundreds of them) will be rewritten to support blocks.
The new few months in the WordPress world will be interesting.
