Gutenberg guide: first look at the new WordPress editor
WordPress’ long anticipated page builder, Gutenberg, will be rolled out soon and users need to prepare themselves for a brand new, innovative experience.
The plan is to merge Gutenberg with WordPress 5.0, which will be released sometime this year.
If you’re like me and you can’t wait that long to try out a new piece of kit, then you can download the beta plugin of the editor released at WordCamp Europe last June.
The editor is a huge departure from WordPress’ current system. This has understandably caused a lot of worry for those who are happy with what they have. In this post we’ll address some of these doubts, helping those who fear change to welcome the new editor with open arms.
For those of you who don’t know what Gutenberg is, or have heard about it but not had the chance to look into it yet, we’re here to reveal all and make sure your business is ready when the time comes.
What is Gutenberg?
Gutenberg is the new page and post editor for WordPress. It aims to give users more control over their website by further diminishing the need for code.
Its primary goal is to support WordPress’ goal of democratising website publishing. Gutenberg is named after Johannes Gutenberg, who invented the movable type printing press way back in the 1400s. The printing press was a revolution which forever changed communication, bringing books – and therefore literacy – to the masses.
The new WordPress editor is also set to bring massive change: putting the power to communicate via a website in the hands of the user.
Basically, the interface will become more accessible to those who don’t have a background in code. This is great for everyone, including small business owners who want more control over their website.
How does Gutenberg work?
It’s easy to say that Gutenberg makes editing on WordPress easier, but how does it do this?
Instead of using shortcodes and HTML to add content to your site, you’ll be able to add sections called ‘blocks’ instead. These blocks can be paragraphs, headings, quotes, images, galleries, lists, audio, video, widgets, embeds for websites like Twitter and Instagram, and more.
Blocks are incredibly easy to add to your site.
With Gutenberg installed, all you have to do is hit the (+) symbol and it gives you a list of the different types of blocks you can add:
If your page is already full of blocks and you want to add one to a specific place, all you need to do is click above the block you want to put your new block ahead of and then hit the (+)
Once you’ve chosen the type of block you want to add, it pops onto your page and you can move it above or below other blocks by clicking the ⌃ or ⌵ arrows to the left of it:
And it’s as simple as that. Add as many blocks as you like with no code required!
If you’re a code junkie and you want to see the code of the blocks you’ve added to your page, simply click the three vertical dots on the right of the page and change the view from ‘Visual Editor’ to ‘Code Editor’:
If you don’t want to see the entire page as code and just want to edit a single block, click the three vertical dots to the right of the block and select ‘Edit as HTML’.
Try Gutenberg yourself
So those are the basics of how to add content to your site using Gutenberg. The best way to get a feel for the editor is to install the plugin yourself and have a play around. Go to https://wordpress.org/plugins/gutenberg/ or search ‘Gutenberg’ in your WordPress dashboard.
Once you’ve installed the plugin all the posts you edit from then on should open in Gutenberg. If you’d prefer to use the old editor there is a ‘Classic Editor’ button you can click under the post:
There’s also a new menu in your sidebar which allows you to play around with a demo (if you’re uncomfortable playing around with it on your current pages), give feedback on the plugin or read the Gutenberg handbook.
If you’re thinking of getting a WordPress site but you haven’t got one yet, then you won’t be able to install the plugin. However, Tom Nowell has created a sample page where you can try the editor out. Just go to https://frontenberg.tomjn.com/ and see how easy it is to edit the blocks and add some of your own!
The new editor reminds me a lot of the editor on Medium. The first time I wrote a piece on there I had no problem adding everything I wanted. The software was so smooth it was like an extension of my own brain. The difference between the two is that Gutenberg can be used to structure entire websites – not just post articles and blog content.
Gutenberg is currently unfinished and is being worked on around the clock. As an open source project, the team working on Gutenberg have been asking for feedback since they released the plugin. You too can have your voice heard by posting any issues you have on https://github.com/WordPress/gutenberg.
What are the benefits of Gutenberg?
There are some really important benefits of Gutenberg in terms of improvements to the stability of WordPress sites and the longevity of WordPress. One example of this is that it’ll mean shortcodes (pseudo-code elements) will no longer be needed.
But, instead of going into all that, we’re going to focus on tangible benefits for you. These mainly come down to improvements to WordPress’ usability.
Gutenberg is still in its infancy so it’s likely to be some time before we see all its benefits, but if you installed Gutenberg today, here are some of the things you’ll notice:
1. A fresh approach
WordPress has had the same page editor for a long time and despite several major updates, this is arguably the biggest change the site has ever undergone. The existing editor has, frankly, become outdated. And although lots of people are attached to it, Gutenberg provides a new, fresh approach, fit for 2018 and beyond.
2. More user-friendly
As a small business owner you shouldn’t have to learn code to have control over your own website. Gutenberg gives you more power to structure content in an intuitive way. You still have the option to hire a professional to build your site, but there’ll be less need to bring in outside help for minor structural changes.
3. Code your own blocks
Not only can you use existing blocks to formulate your web page, you can get a developer to create custom blocks suited to your needs. It’s likely we’ll see block marketplaces popping up in future.
4. Reusable blocks
If you’ve made a layout you like and plan on using it again, you don’t have to go through the hassle of remembering exactly what you did. Instead, just save it as a reusable block. Once saved, all you have to do is go to Add Block → Saved and pick the one you want to use. Easy!
5. More screen space
When using the classic editor a bar takes up the first quarter of the page:
In the new Gutenberg editor, all your block creating options are hidden behind the (+) button so you can see more of your page in a single snapshot. This gives you a better idea of what your page will look like once it’s published without having to switch to preview mode every five minutes.
6. Looks great on mobile phones
Not only does the Gutenberg editor look great on a mobile phone, it makes it incredibly easy for you to edit articles on the go. Simply hit the magic (+) and you can add a block and edit it instantly.
Is everybody on board with Gutenberg?
As you might expect from a project that changes the editing process for the 19,500,000 websites that use WordPress, there has been some controversy surrounding its implementation. Let’s take a look at the three biggest controversies to date:
1. Disputed motivations
Much of the momentum behind Gutenberg has come from Matt Mullenweg, the co-creator of WordPress and founder of Automattic. Automattic is the company behind WordPress.com, which is the commercial, hosted version of WordPress. Some have suggested ulterior motives for pushing forward project Gutenberg. The theory is that Automattic is taking advantage of the open source WordPress community as a free way to create a page builder they can then use to keep up with their direct competitors, Squarespace and Wix. So Gutenberg could primarily be a money making move for Automattic and not solely in the interest of WordPress users.
Whether or not this is the case, the move to Gutenberg is still going to make WordPress easier to use. And it still fixes huge issues with the core code. Even if Gutenberg attracts more customers to Automattic, it doesn’t negate the fact that Gutenberg is good for WordPress as a whole.
2. Impact on web developers
Traditionally, web developers needed to know HTML, CSS and PHP to code a WordPress website. But Gutenberg blocks are created using a coding language called React. So some web developers are a bit miffed that they’ll have to learn to code their WordPress sites in a different way.
Other developers refuse to learn React.
And yet other developers are concerned that Gutenberg will make it so easy to create a WordPress website without the need to code, that it’ll cut out loads of their business.
But all these arguments stem from fear and a lack of innovation.
A project that aims to make WordPress more user friendly is bound to take some power from web developers. But things can’t stay the same forever. It’s time for forward thinking rather than trying to hold onto power over clients and make things more complicated than they need to be. We think good developers will embrace the changes Gutenberg will bring and look for new ways to innovate.
3. Too confusing for users?
This final controversy is based solely on whether Gutenberg will be more confusing for users than the previous editor.
The only way to confirm or refute this claim was to play around with both the old editor and Gutenberg myself to see which one I found easier to use.
Which editor is better for the average user?
Before I started this blog post I had never used Gutenberg before. I decided to try and recreate bits of famous web pages, first using the classic editor then using Gutenberg.
I made a brief attempt to emulate Amazon.co.uk’s recommended section on their home page using a WordPress gallery:
When I tried to do this in the classic editor I struggled to understand why my gallery would push my images onto the next line:
I had to edit the gallery to figure out what had gone wrong. Turns out I hadn’t selected the right amount of columns as the default was set to three:
An easy mistake to make and an awkward one to rectify from the main editing screen which has no suggestion of where I went wrong.
When I tried to create the gallery in Gutenberg the same thing happened, my pictures went on to the next line.
Without even needing to leave the main editing page my eye caught the slider to the right. This allowed me to increase my columns on the spot without having to go looking for it:
Not only that, I realised I’d forgotten to add one of the pictures to the gallery. Again, Gutenberg put the button in the most logical place and I added the image instantly before quickly changing the column size to 6.
I know these examples might seem semantical but Gutenberg just feels smoother to me. Like I said earlier, it feels like an extension of your own brain. It predicts common mistakes made by the average user and places the option to rectify them at your feet.
It’s important to remember that your website layout and site design will also be affected by your WordPress theme, but that’s a story for another day.
Giving you more control
I feel like Gutenberg is a step in the right direction for WordPress.
People can get comfortable with what they know and fail to understand why their beloved system needs innovating at all.
While Gutenberg forces current WordPress users to try something new, it reduces the hold that those who are versed in code had over WordPress, allowing new users to experience the medium.
Having said that, Gutenberg in many ways feels similar to the classic editor, so it doesn’t leave current users and developers in the lurch.
Gutenberg is an exciting opportunity for those of you looking to start a site on WordPress or wanting more control over your current site.
Have you tried out Gutenberg yet? We’d love to hear what you think. Feel free to comment below, or reach out to us on Twitter.