When the WordPress block editor, or Gutenberg, launched in December 2018, we didn’t know what to expect. Sure, we’d had plenty of time to play around with its beta version, but we couldn’t predict how smoothly the actual launch would go or how eager users and developers would embrace the new editor.
We’ve seen the Gutenberg editor undergo tremendous growth in the two-plus years since we first published this post. It’s moved from a minimum viable product (MVP) launch to a more mature project that’s getting closer to the goal of creating a unified Full Site Editing experience for WordPress.
To account for these changes, we’ve revisited the Gutenberg editor to take you through its new face, including where it will be going next soon.
What Is the Gutenberg Block Editor?
Gutenberg, alternatively known as the “WordPress block editor” or just the “WordPress editor,” is the WordPress content editor introduced in WordPress 5.0, released on December 6, 2018.
If you haven’t heard that term, it’s the default editor that all WordPress sites use unless you’ve specifically disabled it. It looks something like this:
The big difference between the Gutenberg WordPress editor and the previous WordPress editor (now called the “classic editor” or “TinyMCE editor”) is a new block-based approach to creating content.
With Gutenberg, every element in your content is a block, which allows for easy manipulation of content. Each paragraph is a block, each image is a block, each button is a block — you get it!
Third-party developers can also create custom blocks, which is helping end WordPress’s affair with shortcodes. Let’s say you want to embed a contact form. Instead of needing to add a shortcode (e.g. `[your-form-shortcode]`) as you did in the past, you can now just drop in your form plugin’s block.
Beyond that, you can also use blocks to create more complex layouts, like setting up a multi-column design or grouping blocks to create a cohesive section.
As we dig more into showing you how to use the block editor, you’ll get a better idea of how you can use blocks to improve how you create content.
Gutenberg Isn’t Just a Content Editor
One important thing to understand is that the Gutenberg project aims to be more than just a content editor.
In July 2021, Gutenberg is still just a content editor (for the most part). But the long-term goal for Gutenberg is to move it towards something called Full Site Editing.
The idea with Full Site Editing is that you’ll be able to design 100% of your website using the Gutenberg editor. For example, instead of being limited to the header options that come with your WordPress theme, you’ll be able to use Gutenberg to design custom headers using the block editor.
This type of functionality is not available yet, but it’s on the way, and we do have some “proof of concept” projects that we’ll give you a look at near the end of this post.
Pros and Cons of Gutenberg vs Popular Alternatives
Now that we’ve been able to use the WordPress block editor for over two years, we have a good idea of some of the pros and cons of Gutenberg vs other solutions.
There are two main alternatives you have for creating content on WordPress:
- WordPress TinyMCE editor: This is the classic editor that WordPress used before WordPress 5.0.
- Page builder plugins: These are third-party plugins that add visual, drag-and-drop design to WordPress.
In general, the classic TinyMCE editor offers a more stripped-down Word Processor-like experience, while page builders provide a much more flexible visual, drag-and-drop design experience.
If we were ordering all three editors based on their design flexibility, it would go something like this:
Classic TinyMCE editor (least flexible) < Gutenberg < Page builders (most flexible)
Now, let’s talk about some of the pros and cons of the Gutenberg block editor vs alternatives.
Gutenberg vs Classic Editor: Pros and Cons
Let’s first compare Gutenberg vs the classic TinyMCE editor.
Pros:
- Gutenberg offers a more visual design background
- You don’t need to use shortcodes to embed content — you get a unified block system
Cons:
- Some people find writing in Gutenberg to be a bit unwieldy because each paragraph is a separate block. For long posts, it can be tough to manipulate text. You might prefer writing in another editor and pasting the text into Gutenberg when you’re finished.
- While Gutenberg’s performance has improved significantly, it can still lag on massive posts, which is less likely to happen with the classic editor.
If you think the classic TinyMCE editor fits your needs better, you can disable the Gutenberg editor altogether.
Gutenberg vs Page Builders: Pros and Cons
Now, let’s take a look at how Gutenberg stacks up against third-party page builder plugins.
Pros:
- Gutenberg is a core feature, which means you don’t have to worry about compatibility issues.
- Because it’s a core feature, all developers can build Gutenberg support into their plugins, improving compatibility.
- Gutenberg outputs cleaner, more lightweight code. All things equal, a design built with Gutenberg will usually load faster than the same design made with a page builder.
Cons:
- Gutenberg doesn’t offer proper visual editing like a page builder. It’s more accessible than the classic editor, but still not 100% seamless like a page builder.
- Page builders still give you more flexible design and layout options.
- Most page builders offer much more fluid and flexible drag-and-drop movement.
Thoughts on the Comparison
For the majority of users, Gutenberg hits the sweet spot in terms of flexibility.
Most people don’t need the flexibility of a page builder for their content, especially for blog posts. But at the same time, it’s nice to quickly set up a multi-column design or insert a button, which the classic editor doesn’t make easy.
So with that in mind, let’s get into how you can start using Gutenberg.
How to Use the Gutenberg WordPress Block Editor
Now that you know a bit about the Gutenberg block editor, let’s dig into how you can use it to start creating content.
We’ll start with an introductory look at the interface and gradually develop more advanced ways to use the editor and improve your workflows.
The Gutenberg Block Editor Interface
When you open the editor, it will hide the WordPress dashboard sidebar and give you a full-screen experience:
There are three main parts to the editor:
- Content: Your content takes up most of the screen. You’ll see a visual preview of what it will look like on the front end of your site. It’s not 100% accurate, but you should have a pretty good idea of the final design.
- Top toolbar: The toolbar at the top helps you insert new blocks, undo/redo, and access other vital settings
- Sidebar: The sidebar contains two tabs. The Post tab lets you configure post-level settings like its categories, tags, featured image, etc. The Block tab shows the settings for the block that you’ve selected — more on this later.
To create a more immersive writing experience, you can hide the sidebar by clicking the “gear” icon in the top-right corner. To bring back the sidebar, all you need to do is click the “gear” icon again:
For example, here’s what the editor interface looks like if you’re using the new Twenty Twenty-One default theme:
Adding Blocks
To add regular paragraph text to your post, you can just click and type. Every time you hit enter, the editor will automatically create a new paragraph block.
For other types of content, you’ll need to insert a new block. You’ll use blocks for images, buttons, video embeds, etc.
To add a new block, you can click one of the “plus” icons in the interface. It’s the main block inserter icon in the top-left corner, but you’ll also see other icons inside the interface that opens a smaller block inserter interface:
To begin, position your mouse cursor where you want to insert the new block. For example, to add a new block underneath the button, you could click below the button and then click the + icon.
You should see a side panel that shows all the available blocks, divided into different categories. You can either search for a specific block or just choose an option from the list. When you hover over a block, you’ll see a description of what it does and a preview.
To insert the block, you just need to click on it. For example, to insert a regular image, you would just click the image block:
You can then follow the prompts to upload or choose an existing image from your Media Library.
Essential Formatting Options
To make basic formatting choices for your blocks, you’ll get a floating toolbar that appears when you click on any block.
If you’re formatting regular text, this is where you can:
- Add bold or italics
- Insert links
- Change alignments
- Add formatting, like inline code, strikethrough, and subscription
For instance, let’s say you want to insert a link into your content. You would first select the specific text you want to link — in our example, that’s “For other types of content.” Then, you can click the link icon on the toolbar to open the link insertion options:
Configuring Advanced Block Settings
All the blocks that you insert come with additional settings in the sidebar. Some blocks might give you a few settings, while others give you several options to control the design, layout, functionality, etc.
To open a block’s settings, click on the block in the editor to select it. Then, go to the Block tab in the sidebar to see its settings.
Below, you can see the settings for the button block, which is one of the more flexible blocks. You could change the color, make it wider, and lots more.
As you make changes to a block’s settings, you’ll instantly see those changes reflected in the editor.
Again, each block will have settings that are unique to that block. For example, if you open the settings for regular paragraph text, you just get some basic typography and color options. Below, you can see that we were able to apply a color background to highlight some text:
Rearranging Blocks
In addition to just using copy and paste (which you can do for text just like any other editor), Gutenberg gives you two main ways to rearrange blocks.
First, if you want to move a block up or down a few positions, you can use the up or down arrows on the floating toolbar.
For extensive moves, you can use drag-and-drop. To drag and drop a block, you need to click on the “six dots” icon to the arrows’ left.
Once you click and hold your mouse on that icon, you can drag the block anywhere on the page:
Embedding Content from Other Sources
Gutenberg comes with dedicated blocks to embed content from third-party sources such as YouTube, Vimeo, Soundcloud, etc. You can find all of these options in the Embeds section of the block inserter.
For example, to embed a YouTube video, all you need to do is:
- Add the dedicated YouTube block.
- Paste in the direct URL to the video.
- Click Embed.
You should then see a preview of the embedded video in the editor.
Creating Multi-Column or Grouped Layouts
As we mentioned earlier, one of the significant advantages of the block editor over the older TinyMCE editor is that you can create more complex layouts without needing to rely on custom code or shortcodes.
The block editor comes with two default blocks to help you do this:
- Columns: Create a multi-column layout.
- Groups: Group multiple blocks. For example, you could use this to set a background color for an entire section that displays behind numerous blocks.
Both of these blocks work on the principle of “nesting” blocks, which means that you’ll put one or more blocks inside of another block.
We’ll show you an example using the columns block, but the same basic principle applies to the group block.
Let’s say you want to create a two-column layout where the column on the left has some regular paragraph text, and the column on the right has a button.
To get started, you would use the block inserter to add the columns block. That will show a prompt where you can choose your preferred layout:
We’ll choose a two-column 50/50 layout for this example. With that, you’ll see two equal-sized boxes with + icons inside. To insert content, you can click that + icon to open the block inserter interface:
Once you’ve added the first block to a column, you can hit the + icon to insert additional blocks. Or, you can drag and drop a block from outside the column structure into the column.
10 Useful Gutenberg Tips to Work More Productively
Now that you have a basic understanding of how Gutenberg works, let’s go over some valuable tips and tricks that will help you use the block editor more effectively.
1. Use / (Forward Slash) to Quick Insert Blocks
If you need to insert many blocks, manually opening the block inserter can get a little tedious. Thankfully, once you start learning the names of the common blocks that you need to use, there’s a much quicker way to insert blocks using only your keyboard — / (forward slash).
If you hit “Enter” to start a new paragraph block, you can quick-insert a block by typing a forward slash, followed by the name of the block that you want to insert.
As you start typing, you’ll see a list of all the blocks that match your query. You can then use your keyboard arrows to navigate the blocks and hit “Enter” to select the block you want to insert.
Here’s an example of using quick-insert to add an image block:
2. Insert Images by Dragging Them From Your Desktop
If you’re inserting many images, the block editor includes another time-saving feature that lets you eliminate the need to add an image block before uploading an image.
Instead, you can just drag the image file directly from your desktop to the location where you want to add it to your post. When you drag the image file over your site’s content, you’ll see a blue line marking where the image shows up.
Once you release the file, WordPress will automatically upload it and insert an image block at the proper location:
3. Use Some Markdown Formatting
If you’re a fan of the Markdown syntax for creating content, you’ll be happy to know that the block editor does support some limited use of markdown — mainly to do with headings.
For example, if you want to insert a heading block with an H3 tag, you can type three hashtags (`###`) followed by hitting the spacebar. The editor will automatically convert that to an H3, and then you can continue typing the heading:
Suppose you want even more advanced Markdown support. In that case, you can install a free plugin like EditorsKit, which also lets you use Markdown for bold, italics, and strikethrough — we’ll talk more about Gutenberg plugins a little later in this post.
4. Pin the Formatting Toolbar to the Top of the Editor
If you don’t like how the formatting tool “floats” above a block, the block editor includes a feature that lets you pin it below the top toolbar:
5. Copy a Block and All Its Settings
The block editor lets you copy and paste text just like you would in any editor — “Ctrl + C” or right-clicking and choosing Copy.
However, you can’t use this method to copy and paste an entire block while preserving its settings. Instead, you’ll need to:
- Select the block.
- Click the three dots icon on the block’s toolbar.
- Select Copy.
Once you’ve copied the block in this way, you can paste it like you usually would — i.e. “Ctrl + V” or right-clicking and choosing to Paste.
6. Quickly Select the Right Block Using Block List View
For most blocks, you can just click on the editor to select the block. However, this can get tricky if you start using “nested” blocks, like inserting blocks inside the columns or group blocks.
The editor includes a List View option, which you can open from the top toolbar to account for this. The list view will show you every block, including indented nested blocks.
You can select a block by clicking on it in the list, and the editor will also highlight the block when you hover over it in the list.
In the example below, you can see:
- The primary parent columns block
- Nested blocks for each column
- A nested group block inside one column
- A nested heading block inside the Group block
To select the main parent block, you can just open up list view and select it from the list:
7. Open the Code Editor (for Individual Blocks or Complete Posts)
One of the advantages of the Gutenberg block editor is that it lets you configure many styles and layout options without resorting to code. However, you still might have some situations where you want to access the code directly for more advanced users.
To help you do that, the Gutenberg editor comes with a few different options.
First, you can edit the code of just an individual block, useful for minor tweaks like inserting a CSS class. To do this, open the dropdown menu from the block’s toolbar and select Edit as HTML:
Selecting this option will turn the visual preview into a code editor for just that block, without affecting the visual previews of other blocks:
Second, the editor includes a custom HTML block that you can use to embed full HTML snippets. All you do is add the block and paste in your code.
Finally, you can also open the full code editor for the entire document by using the dropdown in the top-right corner or a keyboard shortcut: Ctrl + Shift + Alt + M.
Keep in mind that, when you open the full code editor, you’ll also see the block formatting markup from Gutenberg, so it can be a little tricky to navigate:
8. Learn the Keyboard Shortcuts
The block editor includes a lot of keyboard shortcuts that let you perform common actions. It’s worth taking the time to learn them because they’ll make you more productive and save you from a lot of repetitive mouse clicks.
Here are some of the most common shortcuts — if you’re on a Mac, you’ll want to switch “Ctrl” with “Command (⌘)”:
- Open the block List View — Shift + Alt + O
- Save your changes — Ctrl + S
- Undo your last change(s) — Ctrl + Z
- Redo your last undo — Ctrl + Shift + Z
- Duplicate the selected block(s) — Ctrl + Shift + D
- Delete the selected block(s) — Shift + Alt + Z
- Insert a new block before the selected block(s) — Ctrl + Alt + T
- Insert a new block after the selected block(s) — Ctrl + Alt + Y
You can also open a full cheat sheet of all the keyboard shortcuts when you’re in the editor. To do this, you can either use a keyboard shortcut — Shift + Alt + H — or click the “three vertical dots” menu icon (⋮) in the top-right corner of the editor and choose Keyboard shortcuts from the dropdown.
9. Clean Up Your Interface by Hiding Blocks
The block editor adds many blocks by default, but you probably won’t use all of them. To help you clean up the interface, the editor includes a feature called Block Manager that lets you disable and hide blocks that you aren’t using:
10. Add Anchors for Jump Links
Finally, our last helpful tip is the block editor’s dedicated HTML anchor link feature, which lets you create jump links to specific sections of your content (e.g. for a table of contents).
In the classic editor, you had to add HTML anchors using code manually. But with Gutenberg, you can just enter the text for your jump link in the HTML anchor field in the Advanced area of any block’s settings:
Digging Into More Advanced Block Editor Concepts
At this point, we’ve covered quite a bit about how the editor works and some tips to work more efficiently. Now that you have that baseline knowledge, let’s go over two slightly more advanced tactics:
- Block patterns
- Reusable blocks
Block Patterns
A block pattern is essentially a template. It’s a collection of blocks arranged into a layout. It could be something minor, like an arrangement of buttons. It could even be a template for an entire section, or even a whole page.
WordPress comes with its own built-in block patterns, and third-party plugin developers also can add their own.
You can insert new patterns from the Patterns tab of the main block inserter:
Once you insert the block pattern, you can fully edit all of the blocks that make up that pattern, just as if you’d manually added the blocks.
Currently, the core Gutenberg editor does not let you create your block patterns (unless you know how to code). However, you can fix this with Justin Tadlock’s free Block Pattern Builder plugin. With the plugin activated, you can create your designs using Gutenberg and then save that design as a pattern.
To begin, go to Block Patterns > Add New to create a new pattern using the editor. Make sure to publish it when you’re finished:
Once you’ve done that, you’ll be able to insert your block pattern just like any other one — look for it in the Uncategorized section:
The WordPress core team also launched an official block pattern library at WordPress.org. You can insert them into the editor using copy and paste. Just click the Copy button on the block pattern library website and then paste it into the editor.
Reusable Blocks
Reusable blocks are a collection of one or more blocks that you can insert as a group. They’re similar to block patterns, but with one key difference:
Whereas a block pattern is a starting template that you’ll edit in each instance, a reusable block will be the same in every instance where you include it.
If you update the reusable block, those changes will automatically apply to all the existing instances.
For example, you could use a reusable block to create a call to action (CTA) that you want to be the same in all your content. Then, if you ever want to update the CTA, you just need to update the reusable block once to change it across the site.
To create a reusable block in the Gutenberg WordPress editor, click and drag to select one or more blocks. Then, click the Add to Reusable blocks option. (The plugin we mentioned above also lets you create a block pattern this way.)
Your blocks will then be grouped — you can give your reusable block a name in the reusable block’s settings in the sidebar.
Now, you’ll be able to insert that reusable block by searching for its name. You can use `/` to quick-insert the block:
If you change the reusable block, you’ll get an option to publish those changes when you update the post. And if you decide to publish the reusable block changes, those changes will automatically apply to every instance of the reusable block:
Extending the Block Editor With Plugins
Up until now, we’ve focused on the core block editor features, with a few exceptions.
One of the great things about the block editor, though, is that you can use plugins to extend it, just like you can with the rest of your WordPress site.
You can use plugins for a few different things:
- Add new content blocks: Plugins can add new blocks that you can use in your designs. It’s the most common use case for Gutenberg plugins at the moment.
- Add new templates/block patterns: Some plugins use the core block patterns system, while others have created their own template systems.
- Change the editor interface/features: You can use plugins to modify the editor itself. For example, you can add better Markdown support.
Beyond plugins specifically built for Gutenberg, many other WordPress plugins can also use the block editor.
For example, if you’re using a contact form plugin, the plugin might give you a dedicated block that you can use to embed your forms. The same holds for many other types of plugins.
Once you master the basics of the editor, it’s worth exploring these plugins to see if you find any that can improve your experience.
Here are some of the most popular options at the time that we’re writing this post:
You can see more in the WordPress.org block-enabled plugins section.
Gutenberg WordPress Editor and Full Site Editing
As we mentioned at the beginning of this post, the Gutenberg project aims to be a lot more than just a content editor.
The long-term plan is to have WordPress move into Full Site Editing. It means exactly what it says — the goal is that you’ll eventually be able to edit all parts of your site using the Gutenberg editor. And that includes your site’s header, footer, sidebars, etc.
Unlike the launch of the block editor in WordPress 5.0, Full Site Editing takes an iterative approach. It will be a gradual addition of features, where each new release builds on the previous ones.
For example, starting in WordPress 5.8, you’ll now use the block editor to manage your site’s widgets. You’ll also get access to some new theme-focused blocks such as Site Logo, Navigation, Query Loop (lets you create templates for list posts), and more.
But while official Full Site Editing is still a work in progress, some intrepid theme developers have already started releasing block-based themes, which give us some pretty good examples of how Full Site Editing might work.
Additionally, you can access some of the experimental Full Site Editing features in the plugin version of Gutenberg.
So, let’s look at two things:
- The existing core Full Site Editing features that we have now as of WordPress 5.8
- How “full” Full Site Editing might work based on experimental features
Using Blocks Instead of Widgets
As of WordPress 5.8, you’ll now use blocks to control your sidebars and footers instead of widgets (by default — you can disable this if you want to).
When you go to Appearance > Widgets, you’ll be able to manage the content of each widget area using the block editor.
You can see that each widget area gets a separate editor, which you can open by clicking the accordion toggles. You can also move blocks between different widget areas by clicking the hooked arrow icons near the top:
Using New Theme Blocks
WordPress 5.8 also adds new dedicated theme blocks that let you insert dynamic content in your site. These blocks will also play a pivotal role when you’re designing templates for your theme in future releases.
For example, let’s say you want to embed a list of your most recent content on a page. Now, you can just add the Query Loop block, and you’ll be able to dynamically insert content from a particular post type (e.g. blog posts), including filtering by categories, authors, keywords, and more:
Inside the Query Loop block, you can nest the other theme blocks to control the template for the content displayed there. For example, you can display each post’s date by adding the Post Date block to your template.
With the Query Loop block in WordPress 5.8, you can essentially design your own custom blog listing page. Proper Full Site Editing will expand that to your entire theme — so let’s look at that next.
Designing Content Templates
Template editing mode is another new feature in WordPress 5.8. It lets you use Gutenberg to design the templates for your posts and pages using blocks.
Currently, this feature is only available if your theme developer has specifically enabled it, so you might not see it if your theme’s developer hasn’t done that yet.
If you are using a theme that supports the template editing mode in WordPress 5.8, you’ll see a new Template section in the Post/Page tab of the sidebar when you’re editing a post or page. You can create a new template or choose one of your existing templates:
If you create a new template, you’ll be able to give it a name to help you remember it. Then, you can design the template using the special template editor mode, along with the new theme blocks that we detailed in the previous section:
Blockbase Full Site Editing Example
Blockbase is a theme from Automattic that functions as a kind of a “proof of concept” and playground for Full Site Editing. It’s still experimental, so it might change before these features are in the core WordPress software. But it provides an idea of Full Site Editing.
With the theme and the plugin version of Gutenberg installed, you get a new Site Editor area that lets you “build” your theme using the same editor you saw above.
The critical difference, though, is that you’re not just building a single post or page. Instead, you’re using the Gutenberg WordPress block editor to create the actual templates that all of your site’s content will use — for example, the template for your header.
To help you accomplish this, you’ll get a range of new design blocks, including some of the theme blocks that you saw above:
To navigate between different templates, you can click on the WordPress logo in the top-left corner to edit other templates and create new ones:
Again, the idea is that you’ll eventually be able to use the Gutenberg editor to control all of your theme’s templates/layouts. And when that happens, creating a WordPress site will look pretty different from what we view as “normal” in 2021.
Summary
Since 2018, the Gutenberg block editor has made a lot of progress. With the upcoming move towards Full Site Editing, the block editor will only become an even more significant part of WordPress.
In this post, we’ve covered everything from block editor basics to advanced tips and features. We’ve also looked at what Full Site Editing might look like in the future.
If you’re not ready to try it yet, you can permanently disable Gutenberg and use the classic editor. However, Gutenberg will continue growing, so it’s not something you’ll want to ignore forever.
Do you still have any questions or thoughts about the editor? If so, we’d love to hear your comments, both good and bad.
Embedding content from services like YouTube, using the built in oEmbeds, are already super-easy to use in the existing TinyMCE editor. You simply paste a url into the editor and that’s it. Also, I think it’s worth clarifying that Gutenberg hasn’t added any new embed options. All those existing embed options (YouTube, Speaker Deck, Flickr, Imgur etc.) have been available in WordPress for years. It is good that they’re now more visible though, as there’s lots of people who don’t know that WordPress can already handle this and so they install site specific plugins (YouTube embeds, being the most common ones I see).
Also, the image for the new Table block is a little misleading. There’s no way you could’ve added that table without switching to the Text view and editing the HTML as the Table block doesn’t currently provide functionality to add extra Rows or Columns. It simply inserts a 2×2, unformatted table, and that’s it. I know they’re working on fixing this, but since the article was about the current Gutenberg plugin, I think it’s important to show what it currently does, not what it’s expected to do.
Thanks for taking the time to comment, I have updated the article above addressing your concerns.
No probs, Brian. Thanks for the great post :-)
I recently tried to add an image to a table cell. Not possible! I had to resort to HTML code from the page the original table (with) pictures was in. And some additional CSS too. Not at all handy I would say
Extending a table (row/column) is now possible, but it does not seem to be possible to insert (cut/paste) images in table cells?
Sorry, but this looks and feels bad, and is a productivity drain. Hiding
UI elements until you click on things is terribly confusing for some
new people (the opposite of your goal.) You’ve just doubled the number
of clicks I need to accomplish the exact same thing. I would only favor
this in core, if it’s to replace the current distraction free editor.
If this replaces TinyMCE in core then I’ll replace WordPress for my
site. Not even remotely a fan of the direction the editor is going.
Thanks for the comment. Ya, its definitely not for everyone. I personally like it, but I also enjoy the Medium experience and don’t do much clicking while writing. It will be interesting to see what happens. I see three possible scenarios happening:
1. They merge into core and everyone will simply have to adopt to the new changes.
2. They merge into core and it is optional, like you said, possibly replacing the distraction-free writing mode.
3. They merge into core and still allow a TinyMCE integration back into it to help the thousands of integrations currently already coded for the editor.
Time will tell.
forget the “new”people, take into account most of us have clients that are 60 year old or more, this editor must be opt-in not “default” editor by any means
@Black Lodge Games : I agree with your comment. When Gutenberg will be released as core component , most of the themes and plugins will need to be updated. That will be a new level of pain for product owners. On other hand that will bring new opportunity for developer to earn more money.
Hi, I’m project leader on the TinyMCE team. And I’ve been on the Gutenberg team since inception. It has been a joint effort.
It is probably worth noting that TinyMCE core editing engine is the powering the “editable” component that in turn powers most of the blocks. The Table block for example. That is likely to continue for the foreseeable future.
Also, the Classic Text block is essentially the TinyMCE editor. How much prominence it gets is probably dependent on feedback from the community. There is actually a Pull Request being worked which essentially makes Gutenberg a wrapper for the ‘old’ editor so that existing TinyMCE plugins and buttons would work. Remains to be seen if that gets included.
Regardless, it is likely that the WP and TinyMCE Core teams will work together to ensure that a more word processing-style user experience lives on in WordPress. Even if it eventually becomes a plugin.
On a related note, one of the reasons we have been working on the Gutenberg project with the excellent Gutenberg team has been to bring these concepts to the wider TinyMCE community over the next 12 months. That will enable you to bring block-based editing concepts into your own custom application.
Hey Andrew, thanks a lot for taking the time to comment. This definitely clears up a few things and I have updated the post above with some of your comments, as well as a link to pull request #1394. Sounds like this might resolve some issues that a lot of developers are worried about going forward.
No MCE custom buttons and toolbars so shortcodes can use them to generate content, no meta boxes, no columns. With all the available page builders, Gutenberg is not needed. In fact if the custom MCE buttons and meta boxes are not added, this thing is useless. They are about to break thousands of themes and plugins, and for what? Didn’t the surveys show that almost nobody cared about distraction free writing? And yet, here we are, thanks to some real “geniuses” getting ready to break many things, without any real advantages, You want something more than the usual editor, there are dozens of good page builders to choose from. I hate Gutenberg with a passion, and my anger grows every day and every time when somebody says the word Gutenberg. Make it a bloody plugin, and that’s it! Simply said the pros do not outweigh the cons, not in a thousand years,
You can’t compare a page builder with a editor. Compare page builders with acf or whatever you want but your comment is just hilarious. Go and play with your drag and drop page builders.
Gutenberg is more than just an editor, it is a whole new way of editing posts and pages. It is trying mimic page builders, and is failing miserably. And for the record, I don’t use page builders, but if I did, I would choose one of the many good ones, over the retarded, disaster of an idea Gutenberg. What’s hilarious, is that you are not defending Gutenberg, just throwing insults. What’s so great with Gutenberg then? Let me help you, NOTHING, unless you are a sheep and follow and do whatever you are told, without thinking.
I agree. WordPress not ought to waste anymore time with this nonsense. This is going to mess with a lot of sites that already have a solution working for them. Time to dump this idea of reinventing the wheel guys.
Every time I’ve used a page builder, it broke my site. I currently have the visual editor disabled. I am sure when Gutenburg will be the default editor, it will break my site completely. Keep it as optional. Have mercy on the millions of existing users, also give your new users using the favorite Gutenburg – no problem! Don’t fucking break my site!!
Thanks, Brian! For the article and for sharing the Gutenberg Boilerplate! ?
No problem Ahmad! Glad to see you are thinking of developers :) I think that this the crowd that is most worried with these changes.
Just trying to help. ?
Yeah this tries to be too clever, our clients wont like it (since they are frustrated with wix and such seamless editors)
I’m pretty shocked this may be included as an automatic update to WP. I use WP for many things beyond blogging, most often as a middleware. Anything that breaks ACF will doom WordPress to history for thousands of commercial enterprises.
WordPress will not be an automatic update. The ACF team has been working for a while not on making it compatible with Gutenberg.
Start reading here: https://gutenbergtimes.com/eight-truths-about-gutenberg/#status4 (Brian, hope it’s ok to post links in the comments….)
Gutenberg looks great. I guess this will be the end for all these overblown page builder themes.
It looks to have a very long way to go before it replaces Visual Composer.
Mmmmm?
Strange when Gutenberg is a very poor version of one of those builders which you can choose to use or not use.
I am a customer of Elegant themes (for my personal website) but am also the webmaster for a church that is using a free theme that is five years old and has never been updated (as free themes usually are not). I’ve tried unsuccessfully to get the church staff to work with me on finding a new theme (not a free one). I have two questions.
1. Will the Guttenberg editor be pushed out to all wordpress websites and will it be compatible with older ones? My worry is that the church website could fail with that upgrade.
2. I don’t want to suggest disallowing WordPress upgrades for security reasons (that website is already vulnerable enough with a discontinued, not updated free theme anyway) so I don’t want to suggest not allowing WP updates. So I am thinking about issuing a warning about Guttenberg to the church staff in case it causes a disruption of their website.
Ideas, comments, suggestions welcome. Thank you!!!!
1. Gutenberg is a core feature so, eventually, all themes will be forced to use it. I don’t know what effects it’ll have on themes that haven’t been updated
2. Rather than give them a warning that will not happen for a while you can disable Gutenberg for the time being and give the church staff time to come up with a decision (but see answer 1 above) but they will have to come up with a decision because the ability to disable Gutenberg will not be feasible long term
Patricia, Themes, especially those from the WordPress Repository should display Gutenberg blocks just fine, as they are nothing different than content stored in the post_content field any Themes uses. Blocks provide their own default styling. You might not get all features like “align-full” or “align-wide” but the site should still function well.
You can create a copy of the site and test it out. Feel me to email to [email protected] and I’ll invite to our next Gutenberg Live Q & A for nonprofits.
So you’re “updating” your text editor? Ok, but why not go further and integrate the drag and drop page layout of something like Visual Composer. Heck, just buy Visual Composer and integrate it into WordPress, and make sure it works with posts.
Gutenberg is both exciting and potentially worrisome. An official page builder would be terrific, I’ve seen options like Visual Composer cause far more problems then solutions in the long term for mid to large sized enterprises and businesses. That said, what I’ve seen so far appears to be a drag and drop page builder for existing, simple elements: blockquotes, buttons, images, oEmbeds. This is useful for a WordPress.com user, but not so much for self-hosted CMS systems. I’m very curious to see how cumbersome it will be to isolate advanced editing UI’s within a custom block. Automattic has a wonderful team, but I do feel that they’re disconnected from the vast majority working with self-hosted WP installs. Their track record with Jetpack provides some past evidence of this. While Gutenberg will help Automattic compete with Wix and Squarespace through WordPress.com, I’m not yet optimistic on how it will affect advanced self-hosted sites.
Very concerned with the effect this is going to have with all the non-technical clients that me and others have built out in the past, that may have issues after the release. Yes, as many have said, there is going to be a lot of money to be made, but there are also going to be a lot of pissed off clients who may just move on to something else, and probably blame us developers for it.
… and if the project is starting now, and the WordPress Gutenberg fiasco hasn’t been fully explained to the client, then what? Do we get sued if their site breaks when they upgrade? How do we explain this issue to clients without having them say, “I don’t want that”? I’ve had people threaten to sue me over WordPress being “A hacker target”, so I’m not just blowing smoke here. People expect their website to work and to continue working, which I think is reasonable. I’m currently not starting any new WordPress websites until 5 is released, and unfortunately been looking for alternatives to WordPress. Anyone tried Silverstripe?
My initial reaction is that this doesn’t look a good prospect.
Agreed with what Nodws said. trying to be too clever which could end up disappointing WP users (and of course clients too).
Shouldn’t Gutenberg have specific post/page level JavaScript and custom CSS inserting facility?
Gutenberg has been on my mind a lot recently, about the motivations behind the project and how it is being implemented. It’s a powerful piece of software for sure, but is it right for WordPress? I’m not convinced, and wrote my thoughts up here – https://deliciousbrains.com/wordpress-gutenberg/
Hey Iain, I actually added a link to your post above last week :) Above under “Developers have started voicing their concerns with Gutenberg.” Thanks for sharing, it’s a great piece!
Ha, need more coffee! Cheers Brian ?
Even the page builders that are out there now (Visual Composer, Fusion Builder, etc.) give you the option to switch to the WP editor. This doesn’t? Really.
My main concern is no meta boxes. How the heck are you supposed to add features and functionality to custom post types? Or are custom post types going away, too?
As someone who absolutely abhors page builders in general due to their confusing natures (feature overload for most people), this is a very bad idea and should be scrapped. I, for one, will be disabling this thing on every I do. And if it’s forced on my, I’ll either go back to straight HTML coding or find some other less confusion and more functional platform.
Hey Jason, Gutenberg does support meta boxes and custom post types. I think everyone shares your concerns though regarding how it works and getting rid of the normal editor we have all been used to over the years. Thankfully this is still in beta and they are making good progress. But time will definitely tell how it turns out.
Text column support has been added – might want to adjust that but it’s not a full column system as yet.
Gutenberg is ambitious but in my opinion, it needs to be more ambitious. Just make a page builder as part of core already and make that a way of editing. BOOM – I said it.
I would love to see a backend layout tool and editor for WP that is truly a native setup. All the other page builders have already shown the way to, its just a switch to turn them on.
Thanks Matt! I’ve updated the post with text columns. Great to see this added. Getting closer :)
Brian: You’ve updated the post with text columns, but you haven’t removed the lack of columns from the cons at bottom of article ;)
Appreciate the heads up. This is now done!
This new editor Gutenberg has great potentials, still some of the beta users are afraid of it. However I personally tried it on my blog using plugin and loved it.
Hi guys,
nice tutorial! Reading the comments I think this is the right place to share a good plugin about Gutenberg.
I would like to present you a free plugin that allows you to manage the Gutenberg editor.
It’s called Gutenberg Manager and allows you to enable / disable the editor in the various post types (pages and posts included). It has more features but I leave them to you.
We have read tons of posts of people complaining about the future implementation of Gutenberg within the core in WP 5.0 and this has led us to find a simple solution.
Gutenberg Manager solves this problem and allows for example to continue using Elementor, Visual Composer, Siteorigin Builder or Cornerstone without any problem even after WP 5.0.
From the first user feedback on WP.org the plugin seems to be apreciated :)
For this reason I would like to introduce you to Gutenberg Manager -> https://it.wordpress.org/plugins/manager-for-gutenberg/
The plugin can be used by developers in their own themes and plugins thanks to some useful hooks. There is an hook to HIDE the plugin option panel so the final user will not see it in WP backend (great feature for the devs that want to include Gutenberg Manager in their projects).
We are also making arrangements with the teams of most famous Builders to activate partnerships and collaborations. In this way we hope to make the transition to Gutenberg a little less traumatic!
Thank you all for your attention,
Good job.
Very interesting Alessio. Do you see this being a long-term solution though? I would think at some point we should embrace the changes and make everything compatible. Or perhaps this is being developed as a temporary plugin?
I am convinced that Gutenberg will change the WordPress environment positively. All it needs is some time.
I think the people behind Gutenberg aren’t in a rush and they are trying to deliver the best possible outcomes. We just need to be more patient while the editor goes through the development phase.
Here is an article showing the possibilities of Gutenberg-
https://www.coderex.co/wordpress-gutenberg-nightmare-or-dream-come-true/
I really like them latest update. It is quicker than my usual workflow and I really like the placeholder and to use / as shortcut key to instantly search for blocks.
Would be good if they made it less “wordpress dashboardy” and had an option to have it as a front end page or popup instead on your site. This simple feature would make it look and feel more like a user generated community site like medium etc…
The one criticism I would have with Gutenberg is the general philosophy behind it and the team and the way they want to implement it as core and default with no regard to the needs of users who depend of how the current editor works.
Don’t get me wrong, Gutenberg has potential and I am open to persuasion but it seems they want to see the complete obliteration of what they call the Classic Editor, and widgets for the matter. On widgets, it’s kind of odd, seeing as WP 4.9 introduced many new widgets. The image and gallery widgets and an update to the text widget incorporating a version of TinyMCE.
There is no consideration to how the Classic Editor affords a flexible user experience to fit many types of workflows. The main aspect of this being the ability to move, hide or collapse meta boxes into whatever arrangement you want.
I have been monitoring the feedback on the Gutenberg Plugin page and it is noticeable that there is a certain amount of censorship to comments on there. Yes, some of the feedback is at times shrill but I have seem more moderate and constructive feedback (including my own) redacted or removed. A very disspointing experience in what is supposed to be an open community.
Yes, I have noticed censorship also.
So Gutenberg wants to make WordPress work like Medium? I Have a better idea, shut down WordPress and force everyone to switch to medium.
Oh and one more thing, WordPress is trying to reinvent the plane while it is flying at 500 miles per hour.
As a relative novice to many things WordPress, I’m afraid, very afraid.
I’ve been evaluating Gutenberg for a blog post and I’m stunned by the LACK of features.
Notably, the lack of color options for Heading blocks. The “old” editor allows us to make color changes with a click or two. Now we won’t be able to have color in headings at all.
Why go backwards?
When I heard about Gut. I expected page builders like Elementor, Beaver, etc to become obsolete. Now they’ll become mandatory!
I’ll be putting off WP update past 4.9 as long as possible.
Nice, I Like. BUT and this is a BIG BUT!
I hate serif-ed fonts. Gutenberg’s editor uses the dreaded Time New Roman, the world’s worst font in my humble opinion.
No option to use a font of our choice?
Could be worse, they could force you to use Comic Sans…
One real hassle I had with WordPress was the stripping away custom DIV tags, “br” tags, and “p” tags unless it had inline styling.
Is this Gutenberg framework going to address that issue or make it worst?
Hey Mark, that should hopefully no longer be an issue, but time will tell. Currently, Gutenberg is slated to come out with WordPress 5.0.
Thanks for all of this helpful info – it may not be as scary as I first thought :-)
The reason why wordpress became wordpress because of the Tiny MCE editor.
The tiny MCE editor is very nice to use it has given and gave wordpress users the edge for decades.
Who are these guys that are spearheading to change the wordpress core?
Can you name these people?
Why would they force there ideals of changing the Tiny MCE?
Why would they force it into the Core. It should be optional, not all themes and plugins will work with millions of wordpress designers using the unwanted Gutenberg.
What happens to their contents then?
I will Activate The tiny MCE plugin first
Train myself with gutenberg for a month before i will role the 5.0.
This is giving me extra work.
I’m feeling reluctant to start any new WordPress projects for customers. WP5 rolls out and then what? I get sued for making them something that is broken? Broken is exactly my experience when playing with the Gutenberg plugin.
So WP, if you were looking to be fresh and fancy, and you were hoping that it would attract more people, I hope you realize how many people are going to abandon you.
Is there truly any lack of usage? Seriously, how much more of a percentage of the web would make you happy? I just don’t get it.
BELOW is a list of bullet-points. Each bullet-point represents a complaint and/or issue with the Gutenberg plugin.
――――――――――――――――――――――――――
● #1: The “Settings” panel on the right-hand side is very slow and buggy. For example, every time I edit a post, ALL of the tabs are ALWAYS collapsed, so I have to expand the tabs every time I edit a post. It is unnecessary and time-consuming!
● #2: There is no option to drag the post-type $support tabs (i.e “Revisions”, “Categories”, “Tags”, “Excerpt”, “Comments”, etc.) across the post editor screen. For instance, I like to keep “Discussion” & “Comments” BELOW the content-edit area the_content(), but with Gutenberg that customization has now vanished!
● #3: Speaking of the “Comments” tab, that is missing. Where are the comments?! With Gutenberg, I do have the option to enable & disable comments under the “Discussion” tab, but the “Comments” tab (showing the 20 most recent comments) has disappeared!
● #4: I have two custom Taxonomies for customization purposes, and neither one of those two Taxonomies are showing up anywhere on the post editor screen. Where are my two custom Taxonomies?!
● #5: Every time the “Tags” tab is expanded, it takes a second or two for all the chosen tags to display. Sometimes, the tags won’t display until I click on the content box that stores the tags. This is very annoying! I guess I should be fortunate the tags are at least showing up, unlike my missing custom taxonomies!
● #6: The “Content” edit area the_content() it terrible. For instance, It’s only about 600px in width, and there is no option to expand the width of the “Content” edit area ―― it should behave like a textarea HTML element, but it doesn’t.
● #7: In order to switch between “Visual Editor” & “Code Editor”, I have to click the 3-dotted button in the upper right-hand corner, then choose “Visual Editor” or “Code Editor”. This is yet again unnecessary and time-consuming.
● #8: I have another plugin which allows me to switch “Post Types” (not Post Formats) within the post editor screen, but that option has completely disappeared!
● #9: Under the “Status & Visibility” tab, it provides me with the option to choose between 3 different Post Formats, but I don’t have Post Formats supported for any of my themes (via functions.php file) ―― I create my own themes.
**literally shaking my head at this point**
● #10: When I switch from the “Visual Editor” to “Code Editor,” I get the following coding in a lot of the HTML DIV elements. The coding I get is related to CSS Bootstrap. However, I despise Bootstrap, and I purposely avoid plugins that have Bootstrap, because it interferes with my CSS coding. I have my own, personal-made CSS library for columns & grids, and I make my own accordians, tabs, etc with my own HTML, CSS & JavaScript, so Bootstrap is essentially useless for me and it conflicts with my coding.
Example of coding that Gutenberg adds:
div class=”col-md-9 col-sm-10 col-xs-8″
● #11: The “Custom Fields” tab is gone! What is the purpose of this? Custom Fields are crucial for many of my Post Types & Metadata.
● #12: The “Permalink” isn’t displaying. I tried right-clicking & clicking on different options, but I can’t find a way to edit the permalink. Is this intentional?
● #13: The “Slug” isn’t displaying. This is the same issue as #14 above. How come the slug isn’t available to edit?
● #14: The “Add Media” Quicktag is all the way at the bottom of the content-area the_content(), and Gutenberg doesn’t provide the option to adjust the content-area’s HEIGHT. Thus, if there is a long post, the person adding media content to the post has to scroll all the way to the bottom of the content-area. Yet again, this is not time-efficient. It’s another inconvenience!
● #15: When in “Visual Editor” mode, there aren’t as many Quicktags options to choose from. This is another example of Gutenberg eliminating and omitting options that are present in the current WordPress post editor.
――――――――――――――――――――――――――
That fact that Gutenberg is in the plans of becoming part of the WordPress core makes me absolutely irate ―― particularly because I have spent a long time customizing my post editor screen with API/Actions & API/Filters — i.e. functions remove_post_type_support() , add_post_type_support() , wp_editor() , and so on.
I am aware that there is the Classic Editor plugin, but that’s not fair to us users & coders. Gutenberg should remain an optional plugin. My gut is telling me that if Gutenberg becomes part of the WordPress core, and people like myself have to use the Classic Editor plugin, then there are going to be compatibility/coding-conflict issues. As far as functionality and appearance, does anyone know if the Classic Editor plugin is EXACTLY the same as the current WordPress post editor? Will API/Actions & API/Filters work with the Classic Editor plugin the same way these APIs work with the current WordPress post editor?
Wow, Phillip! That is one impressive comment. You’ve brought up a lot of good points with Gutenberg. It will be interesting to see how this impacts the classic editor in terms of support and future updates/compatibility. Only time will tell.
I’m still working through my own issues with Gutenberg, but I can answer a few of your points:
#4 Custom Taxonomies must have `show_in_rest` set to true for them to appear in the Gutenberg editing sidebar.
#7 For good or bad, the HTML editor is becoming less useful in a Gutenberg block context. The HTML content itself is a representation of the data which is basically disposable as it will be regenerated by the next visual edit. I expect we’ll see some more developer-targeted custom blocks in the near future which are intended for raw HTML input.
#9 All our themes are custom as well and I’m haven’t ever been offered any Post Formats. Check your plugins?
#10 Personal opinions about Bootstrap aside, I’m not seeing this either. Again, this feels like a plugin has wedged a filter somewhere. Gutenberg does add a variety of classes, but they’re mostly namespaced with `wp-` and fairly minimal. If you haven’t looked into custom blocks yet, you should. The API is well thought out and gives developers a great deal of freedom about how we want our code generated.
#11 Custom fields (ACF?) should appear below the main content area or under Extended Settings in the sidebar. ACF Pro has been a staple of our WP development, but after a few days with Gutenberg API I can see the potential for replacing nearly all of it with custom blocks. Time will tell, but the potential of metadata blocks and custom HTML is really huge.
#12 & #13 Edit the Permalink/Slug by clicking in the title. They’re derived from the title, so this makes sense, but it took me a while to find it too.
I’ve been working with WordPress for a very long time but have never been a fan of the code. Development can be extremely frustrating. My first impression of Gutenberg was not good, but after giving it some time, I’m very, very impressed with the thinking and execution so far.
Hi
I can’t see how you edit the permalink or slug and I have clicked on the title and it does say ‘Change Permalink’ but that takes me to the Permalinks setting page under Settings.
Hey Colin,
Are you sure you have the latest version of Gutenberg installed? The edit option should let you change the permalink on the same page. You might also try disabling all your other plugins temporarily, perhaps there is a conflict somewhere.
Hi, about the permalink editing issue. It does show as an edit but after you save the draft. When editing as a new post, the edit button in the permalink text field is not visible.
Ah, thanks for the clarification Damian! That was probably the issue.
I’m curious if anyone has had any success setting up custom blocks using vuejs? I was under the impression that the core developers were building Gutenberg in a way that would make it simple to swap out the underlying javascript framework.
I’ve looked online, but 90% of gutenberg tutorials don’t work to begin with anymore, let alone the few that demonstate vuejs.
Would it be easier to find a library that ports vuejs -> React, rather than attempt to integrate vuejs directly?
Hi Marcus, fancy meeting you here:-) I thought of you when I came across Kevin Ball’s article: https://zendev.com/2018/07/31/wordpress-gutenberg-blocks-vue.html
I have big compaints, too:
I have some complaints, too:
– I use the galleries (WP core feature) a lot. With Gutenberg it is noct possible to change the image size of the gallery items (with the classic editor you can change it). The full image is displayed which is very annoying. And I could not find how to change this
– I really miss the custom fields. I know that there are plugins to show them but I don’t like to install many plugins just to rebuild the old WordPress backend
Hi
If you click the image in visual mode it will become highlighted and at the top a menu pops up just above that image. Simply click the edit button that looks like a pencil.
Another window will open and you can change all the details there.
I’ve been using WordPress since the beginning, and I’m hoping that somebody comes to their senses and decides to abandon the idea that Gutenberg should be forced on everyone. There should at least ALWAYS be the option of using the classic editor (and without needing a plugin to do so).
Totally agree, responsive columns need to become a standard feature of Gutenberg – maybe with Settings page to configure breakpoints too..
While its definitely the future, I predict millions will prefer the classic editor when 5.0 is released.
Just installed Gutenberg on my WP site and when I go to create a post or page, I see nothing but a blank screen. I don’t know if it’s a compatibility issue with my Genesis theme or the fact that I use Visual Composer. Either way, it’s not working — and since I use VC (and love it), I’m not sure I really need whatever it is that Gutenberg provides. Am I being naive?
Please make it stop! The main reason I use WP is that it does NOT feel like a cheap Wix or Weebly site drag and drop.
If this becomes the main way to edit websites I’m out and will learn a new platform.
I too agree with the vast number of comments that this is NONSENSE. Not only will it create problems with existing sites, added billing for needed updates (clients are going to love that – oh yeah!), but also there’s going to be a learning curve for me as their developer also. And I already have a learning curve dealing with keeping all these sites running now. Which they do and THEY DO JUST FINE with wordpress the way it is.
Make this ridiculous contraption an option – not a default. And make the install voluntary too.
Solid article,
Few questions:
1. You mentioned using anchors so you can create jump-to sections in the SERPs, can you show me a single example of a ranking page for a keyword which has jump-to anchors in search engine?
I don’t think they will index them. You would need to so something with HTML5 pushstate to accomplish this (if sections were on the same page), and likely include in your sitemap.
2. Don’t you think the fall-back to the default should be a bit more graceful? Why should they make 20% (or 30%) of the internet install something to keep things the same…? That is weird if you ask me.
Part of the reason (in my opinion) that wordpress has been so successful is because of the lack of new changes, people understand the moving parts and therefore can launch many sites quickly without seeing and learning new interfaces every so often. Then using plugins they can try new things.
From what I see this article brings many new concepts to WP, some that seem to over complicate things. I am very interested to see how the broad community (those who have not even heard the word “gutenburg” yet), will react.
Thanks for your post man!
Hey Greg!
Great questions… So I have personally seen many time anchor lists in SERPs. I wrote up a little more here: https://woorkup.com/jump-to-menus/
It does appear to be something Google is testing on and off. As some months I’ve seen them, other months I haven’t.
I agree the default fallback should probably be a little more graceful, but I think they are simply trying to push everyone to Gutenberg as fast as possible without too much fragmentation. I think we’ll end up being this way anyways though since many will just install the classic editor plugin.
I think we all are interested to see how the WordPress community will react and how things progress :)
Thanks for the explanation. I am looking forward to the hours of fun trying to get used to it. I mean, it’s not as if I need a reason to be grumpy.
One point, and a big one: Gutenberg invented the modern world. The bloke was a Newton without the baggage. He brought information to the masses and started the fight against religions keeping ‘us’ in the dark. I was an apprentice printer and ironically we viewed him as godlike. I somehow doubt a WordPress plugin is going to change WordPress all that much, let alone the world.
Thanks again. I feel ready for it. Some excellent comments as well.
Great article.
Thanks for your reply, Brian.
I see the “jump-to” section in the image in your post, but I would not bet on any jump to section actually appearing in the search engine.
The best way I have seen to get same page sections to index, is re-writing the URL with replacestate (or pushstate). As well as title tag, bonus points if the new URLs are in your sitemap.
An absolutely epic implementation of this can be found here: CRV.com
Apologies if that was a bit off topic, but I really love that site so I thought I would share.
Thanks again!
Hey Greg!
You are correct, there is no way to guarantee that you will get a jump menu in SERPs. However, we have now seen this happen hundreds of times and have compared it directly to URLs that we’ve added anchor links :) We just wrote up a more in-depth post about it that you might find interesting: https://kinsta.com/blog/anchor-links/
But sadly, it is up to Google to decide whether or not they will show up.
…I don’t like Gutenberg. Looks neat on the surface, but it unnecessarily complicates things under the guise of simplicity. The classic editor is already simple enough for clients with basic knowledge. I would have preferred an update instead of a replacement, and the time spent on developing this could have been better served towards others areas such as media management or modernizing other aspects of the core where WordPress is painfully getting behind.
I’ve actually stopped making new projects on WordPress while I look for alternatives, and developing a custom CMS built on top of Laravel.
It looks kinda really confusing and not straight forward, last i checked simplicity is key this shouldn’t be made as a wordpress default but an option to choose from to me its a turn down i prefer the native wordpress editor UI
Like it or not (a bit of both for me) it will be included and used from a large part of the WordPress community and asked by clients. Get used to it :)
I’ve build a website from scratch with a basic blank theme and Advanced Gutenberg plugin (Joomunited, to control the blocks activated) and well that’s not perfect but no doubt that in 6 month I won’t regret having using it.
So like it or not, it’s here to stay, because a shitty idea is good if you force it on people?
Hi, and thanks for this good description of Gutenberg editor. I have tested it on one of my websites, and it seems to work fine with my theme (WP TwentyFourteen). I see you mention anchor in your article. Could you explain how that work just by using the HTML-anchor option in Gutenberg?
Hey Kari!
We just published an in-depth post on how to create anchor links in WordPress, including Gutenberg. Check it out: https://kinsta.com/blog/anchor-links/
Can’t color single words in a paragraph which is no problem with classic editor.
Can’t color single items in a list which is no problem with classic editor.
Very basic functions are missing.
Gutenberg is an early beta version, should have never been released via callout to any “normal blogger”…
How do I completely remove Guttenberg from my computer, i’m using a Mac 10.)! Makes inputting data nearly impossible.
Thank you.
Hi Jim, we have a detailed step by step on how you can disable the new Gutenberg editor. Please take a look at it here https://kinsta.com/blog/disable-gutenberg-wordpress-editor/
At last I have read the long article. I am impressed with the WP Gutenberg team. Good going and eagerly waiting for the WP 5.0
I have a concern, is it going to replace the visual composer plugins someday?
Not a bad concept, but I can’t add the “READ MORE” bar. It’s gone!
That is, I can add it, but I have to go to HTML and enter manually. That’s a huge backward step. I could imagine that there are some other issues too, that’s the main one I use in each one of my articles, so on the front page you get a “Click to read me” type of message instead of the full articles (otherwise I’d get a front page of 20,000+ words, which would be way too large.)
A great writeup! I especially appreciate the honest comments I’ve skimmed through above. As a website designer for *very* small-scale clients – mostly artists, photographers, quilters, crafters, many with *very limited budgets* and often with limited technical skills – I’m worried. I really, really hope that WP offers the Classic Editor as an option for a very long time.
I now dread receiving countless messages once this rolls out with perhaps no option to continue using the Classic Editor that the interface looks SO vastly different from what they’re used to, and looks nothing like the reference guides with screenshots I painstakingly provided them prior to going live. As it is, whenever there’s a minor WP or plugin update and something doesn’t match my reference guide 100%, they often freeze, even if the upgrade isn’t vastly different from what they’re used to. Most of them don’t have the budget to just call/hire me for routine updates, hence the reason for using WP in the first place – it gives them the ability to be autonomous within reason, to add new images to their galleries, update their bios, etc., and only call me when they are truly stuck or need help implementing something new. They shouldn’t need to pay anyone to teach them how to find the bulleted list option that used to be *right there* on the toolbar!
I just experimented with Gutenberg. My first reaction was, “Where is it?”
As someone noted above, it’s really bad UI practice to hide commonly used functionality, or scatter it around the screen. I tell my hesitant new customers that if they can use a word processor and follow some basic instructions provided by me, they’ll be able to use WP to update their sites. To me, Gutenberg looks nothing like a word processor that they’re used to, and many features are no longer available. I mean, look at the progression of Photoshop’s toolbar over the years. Very minor tweaks, the same basic icons only slightly enhanced are still there, yet they’ve exponentially added functionality in other ways.
Love the idea of Gutenberg adding “blocks” of content tho honestly I’m not seeing what’s in place now as being that robust compared to, say Beaver Builder.
Was disappointed to see that the font used in edit mode doesn’t match the font used in the stylesheet. That is, if you’ve got paragraphs set to use Arial, why not display Arial in edit mode? That has caused my customers much confusion over the years. Some will spend enormous amounts of time highlighting text, changing the font, forgetting to refresh the browser, and think they’re still stuck with the font they see in edit mode. I’d hoped that’d be one upgrade, minor as it is.
I noticed that the width of the text on the page in edit mode doesn’t match the width of the text on the actual live page. Many of my customers like to try to align things perfectly so the wider margins/narrower content area in edit mode are going to frustrate them if the actual published page widths differ. Lots of refreshing and back and forth.
I always install TinyMCE Advanced to give them more editing options and I see on my test site that that isn’t available in Gutenberg mode.
Maybe I’m missing something, after having read countless sites describing the new features and performing my own experiments, and I try to approach these things with an open mind, but unfortunately *my* mind has to be merged with a few hundred customer’s minds because it isn’t just me who has to learn this, eventually, but my customer base. If they can’t figure it out easily or get frustrated, how can I push WP as a platform that I feel is ideal for their basic needs?
AND, if you’re still reading along , as someone noted above, if the classic editor isn’t offered in the future, how on earth do we build a site for someone prior to the removal of it and then spring it on them that things may function rather differently in a few months after going live?
Whilst there are pros and cons with regard to the new WordPress Editor in the form of Gutenberg, I am surprised that no one has mentioned an offline mode for it perhaps in the form of a software similar to the old Windows Live Writer. For people who travel a lot and need to blog offline where there is no Internet, I am hoping that there will be the ability to save posts as drafts on your computer via the Editing Software and then when there is Internet, the draft posts can be published. I hope to God they come out with something like this cos there are not many if any offline editors around for those who prefer this way of working.I am even willing to pay for it cos it has now become a vital necessity.
Really Well summed-up post.
I’ve been using Gutenberg for a while now.
So far so good, it has worked really well for me. What I feel is it has made me more productive with the distraction-free editor (yes! – I prefer Medium style editing)
Just a quick question –
“Did Gutenberg remove the Table of Content option from Document section?”
If so, how can I add a table of content (Is it using anchors?)
Regards,
Such a clear article. Thank you.
I installed the Gutenberg plugin and fell in love with it because embedding Instagram posts is so easy.
Developer dictation ended decades ago. Provide options so users can make the choice they know is good for them. Gutenberg may be great some day but it has a lot of work ahead. Compare Elementor to Gutenberg, the biggest disappointment for me is Gutenbergs editor page looks nothing like the live page on the web. Columns can’t be adjusted in size like Elementor. Gutenberg should not be released 10 steps behind something like Elementor. Who releases a product that is inferior to it’s compitition?
Just curious but considering the evolution of Gutenberg, wouldn’t it be better to reverse the date order of the posts? Current at the top.
WordPress: The new WIX copycat, out with the old and in with a clone attempt without a USP. A great example of how crowds inspire people to create things that lack innovation.
I like to schedule posts in advanced and sometimes select to post on twitter, linkedin or google+. I don’t like the fact that the “sharing” option is now missing for individual posts when using Gutenberg. Unless it’s a feature that’s hidden someplace else I’m sticking with classic.