Since early 2017, the phrase “WordPress Gutenberg” has been floating around the WordPress community. Currently scheduled for release in 2018 with WordPress 5.0, the Gutenberg project will change the way you write and design posts.
We recently spun up a test server in order to explore Gutenberg in all its glory and see why it’s been making waves in the WordPress community. This is our guide to WordPress Gutenberg and how you can get started with it yourself.
What is WordPress Gutenberg?
Gutenberg is a WordPress plugin designed to expand on and improve the functionality of the WordPress editor. The name Gutenberg comes from Johannes Gutenberg, the man responsible for the original creation of the printing press hundreds of years ago. Much like Johannes Gutenberg changed the face of print publishing, the Gutenberg plugin aims to change the face of digital publishing with WordPress.
One of the biggest changes Gutenberg will bring to WordPress is advanced layout options. Many WordPress users have become frustrated with WordPress WYSIWYG’s (What You See Is What You Get) constraints regarding formatting. Gutenberg aims to address this issue with what the development team is calling blocks. Keep reading to find out what blocks are and how they work.
“Gutenberg is that rare thing that truly revolutionizes and makes simpler how we interact with the digital world, all while giving us a greater ability.”
Gutenberg is currently not ready to be used in order to create production sites, but the plugin can be downloaded and tested (at the time of writing it is currently in version 2.8.0).
Here’s our walkthrough on how to install, activate, and get started with WordPress Gutenberg in preparation for its full release later this year.
Before continuing, we recommend that you spin up a dev site so your production environment isn’t affected by the new plugin. Gutenberg still isn’t ready for use with production environments.
A Note for Developers
If you’re a developer (or have something you want Gutenberg’s creators to see), you can contribute to the discussion by heading to Gutenberg Github. You can also contribute through the WordPress Gutenberg Support Forum, or the WordPress Slack channel.
How to Install and Activate Gutenberg
Installing Gutenberg is simple as it’s a plugin. Once you’ve loaded up a WordPress test environment, head to Plugins -> Add New and then search for “Gutenberg”. After you’ve done this, click Install Now. Let several moments pass and the plugin will be installed on your WordPress account.
You then need to activate the plugin. You can do this by heading to Plugins -> Installed Plugins, finding Gutenberg, and clicking Activate. Once you’ve done this, you’re ready to get started with exploring WordPress Gutenberg itself.
Because Gutenberg is a plugin, it can also easily be deactivated at that same location, allowing for you to go back to the classic editor. In the posts page, there is also an option under each of your articles to use the Classic Editor.
An Overview of WordPress Gutenberg
Once you’ve managed to install and activate Gutenberg, it’s time to see what the new editor actually looks like. There have been several changes to what you may be used to. So far, we’ve found them to all be intuitive and easy to use. You can see a completed WordPress demo of Gutenberg under the Gutenberg heading on the left sidebar. Alternatively, you can create a new page and start inputting your own content.
Once you’ve opted for one of these options, you’re greeted with the new editor. The sidebar on the right now offers two tabs, instead of one. These link to your document settings (categories, tags, featured image, excerpt, and more) and block settings, respectively. What you see in block settings will change depending on the type of block you have selected. We’ll look into this more later.
In a side-by-side comparison with the WordPress WYSIWYG editor, one of the biggest differences you’ll notice is the amount of space Gutenberg offers for actual writing. This can further be expanded by hiding the sidebar.
This focus on writing hasn’t stripped away functionality though. As we’ll explore in more depth later, the new WordPress Gutenberg editor actually includes several cool features that are not present in the current editor. One that is immediately apparent is the Table of Contents section you’ll find in the Document sidebar. This is a simple navigation tool designed to help you navigate your content. It’s also great for knowing how inserting a table of contents is going to look. With long-form content now being ones of the best ways to optimize for SEO, this is quickly becoming best practice for blog writers.
Inserting, Moving, and Deleting Blocks
To insert a block, move your mouse cursor to the left hand side of the editor and click the + button. From here, you’ll be greeted with a series of options for what to insert. Under Blocks, you’ll find the headings of Common Blocks, Formatting, Layout Elements, and Widgets. You’ll also find several easy to use embed options under the Embeds tab. Click on your chosen blog to add it to the post.
If you want to add a block between two existing blocks, click on the block before the location you want and hit return. Then follow the steps above.
Once you’ve inserted a block into your post, you can easily move it by either drag and drop, or clicking on it and then using the arrows located on the left. If you inserted a block by mistake or want to delete it, you can do this by hitting the delete key on your keyboard.
Editing Blocks
Once you’ve added a block to the editor, you can make alterations to its properties on the right hand side. This is especially useful for when you want to include different sized text in the body of your post.
You can also change text color, background color, and alignment. You were able to do this with WordPress before, but it would involve dipping into the HTML section to make edits to your post’s code. Moreover, much of the time, it wouldn’t be as seamless as the integration is here.
It’s also possible to make changes to text by clicking on the clock itself and looking at the options along the top left of the block. This can be particularly helpful for simple edits including the addition of hyperlinks, adding bold or italic text, or playing around with different styles. When looked at in conjunction with quotes, you can also select different quote styles, instead of having to stick with what your theme decides.
Using Columns and Tables
One of Gutenberg’s most useful new formatting features is its inclusion of tables and columns in the visual editor. These are, again, easily added through the inserter tool.
Once you’ve inserted a column, Gutenberg automatically separates the row into two blocks. These block types can be individually edited using their own + symbols to change their type. This makes embed alignment a lot easier to manage.
With tables, the block is automatically converted into a table that dynamic changes in line with the content you insert. This way, you’re not limited by predefined ratios and awkward placement. Rows can columns can easily be added and deleted through the formatting bar for the table block.
Adding Embeds
Adding embeds is now easier than ever with Gutenberg. This is great if you’re a video or audio heavy blogger.
You can add an embed by clicking the + button for adding a new block and then selecting the embed tab. Here you’ll find a huge number of different services you can embed from. Scroll down to see all of them. If your service isn’t covered in the list, you can always select the Embed option and input custom code.
Again, you’ve got the standard alignment and formatting options, as well as the option to link out to a unique URL. You can still add additional CSS classes to the embed, which is easily done from the sidebar.
Using the Gutenberg Code Editor
While blocks are an awesome addition to WordPress (we think), they don’t just aid in the visual layout of WordPress articles. By clicking the three dots in the top right of the editor (or pressing Ctrl+Shift+Alt+M) you’re able to open up the code editor.
A side-by-side comparison almost makes it seem as though we’re looking at two interfaces designed in complete isolation from one another. The current editor has bunched the code together, making it hard to navigate if you’re not a seasoned HTML editor. With Gutenberg though, the blocks have been marked by their own tags, and clear spacing is automatically added between each.
Each of the block tags makes use of a similar piece of code to differentiate the different types. So far, we’ve come across several different types in the editor. Some of the block types we’ve explored so far include:
- paragraph
- image
- subhead
- columns
- audio
- video
- gallery
- list
- quote
You can insert your own block through the code editor by typing the code below and replacing [type] with one of those outlined above.
<!– wp:core/type –> <!– /wp:core/type –>
Other Admin Functions
In the WordPress Gutenberg interface, you’re still given the standard admin options along the top of the post. These include undoing and redoing changes, checking word count and other stats, saving the post as a draft, previewing, and publishing.
Remember other options you’re probably used to having are located under the Document tab on the sidebar.
What We Like
The editor makes creating good-looking content really easy
It’s true, the Gutenberg editor makes putting together beautiful, modern content incredibly easy. We’re really happy with the way the editor has made use of blocks, and the embed options mean we’re not stuck with broken code. It will be interesting to see what blocks the community create themselves once WordPress 5.0 is released.
It’s responsive and works on mobiles
This has become more important in recent years – especially for those who travel blog. Being able to update and edit content quickly between destinations is really nice and a feature we like a lot.
We’re big fans of the overhaul to the editor UI and the increase to white space – especially when it comes to the code editor. We’re also big fans of the automatic spacing between different blocks for the code interface.
What We Don’t Like
Gutenberg currently does not have Markdown Support
While all of Markdown’s formatting features can be accessed through Gutenberg’s visual interface, we’re still a bit sad to see it go. Hopefully the Gutenberg team will implement it by the time Gutenberg goes to production.
SEO may have some issues
We’re currently seeing some support for SEO settings and the obvious WordPress advantages are still there. However, Gutenberg seems to lack some of the SEO features you can see with the current editor. It is now possible to add meta boxes to your posts, but we still wonder how the block design may affect how search engines perceive your posts.
Some things don’t work
This was always going to be a problem with changing the way WordPress works. With over 55,000 plugins and themes currently available, it may be a larger problem than originally anticipated. Some developers have even gone so far as to state that it doesn’t belong on WordPress.
Columns, why are you still not responsive?
Why has this still not been included, despite there being a clear option for columns in the block inserter? The year is 2018, responsive design shouldn’t be something people are having to push. We’re hoping that when WordPress 5.0 is released, we’ll have proper columns for Gutenberg.
Final Thoughts on Gutenberg
WordPress Gutenberg is great. It truly is. We’re looking forward to its full release with WordPress 5.0, and seeing how much they can perfect an already polished UI. The use of blocks is innovative and helps to make post design really easy.
That being said, there are going to be some adjustment pains in the WordPress community. Plugin and theme updates will be needed for some and veteran users may find themselves unhappy with the radical change to procedure.
We’ll have to see how it goes, but we’re looking forward to seeing Gutenberg start to take over WordPress production environments around the world.
Source
https://blog.nexcess.net/2018/05/22/a-guide-to-getting-started-with-wordpress-gutenberg/
