top of page
Writer's pictureFahad H

Gutenberg 101: Learning to Navigate The New WordPress Editor

As a free, open source content management system, WordPress continues to excel in providing its users with innovative tools that can help provide success for their online web presence. WordPress is changing the game of website building with the new Gutenberg content editor that is set to launch in November as part of the WordPress 5.0 update.

Gutenberg is an addition to the WordPress platform that will transform the way websites and content is displayed through a series of customizable blocks. This will allow users the flexibility to control the way their content appears on the page and create an easier building experience for anyone looking to create a website.

With so many content management systems out there, why would you choose WordPress?

We believe in WordPress for a number of reasons, but most important is that WordPress is powerful. Over 30% of the internet uses WordPress to power their websites while the next largest CMS has only 3.2% in comparison. WordPress is an open source project— which means it is free and can be redistributed or modified by anyone and it was created with the goal to democratize the web. Updates like Gutenberg ensure that it will stay around forever and evolve with time.

Gutenberg makes the design and publishing process more visual for non-technical website builders which makes for an easier content creation process. The simple design has everything you need to create custom and engaging pages and posts.

 
My life’s work is improving WordPress. I firmly believe that Gutenberg is the direction that will provide the most benefit to the maximum number of people while being totally in line with core WordPress’s philosophies and commitment to user freedom. So keep giving us your feedback, and let’s push through the fear together. It’s worth a little discomfort to change the world. Matt Mullenweg
 

We’re moving from text boxes to blocks

The current editor is known as the text-based TinyMCE (WYSIWYG) editor and it currently runs on a PHP/HTML/CSS but does not allow for a visual editing experience. It is a heavily text-based editor and without coding experience can restrict customization for content creators without coding knowledge. It allows for HTML editing and the addition of media; however, it does not allow users to create custom features within a post.

Gutenberg requires new and different skills (Javascript and React) along with long-established WordPress development skills (PHP and HTML/CSS). This marks an entirely new frontier for many WordPress professionals.

Why is the change happening now?

The name “Gutenberg,” derives from Johannes Gutenberg, the inventor of the first movable printing press. This invention changed the way written content was distributed and the way content was published. The Gutenberg editor does the same for the online publishing experience. This is a welcome change for WordPress and allows for a more seamless website building experience for users who are not able to write code. It also makes for a simplified mobile editing experience. This means you will be able to edit your website or blog content even easier from your mobile device.

Gutenberg focuses on your content, which is your websites most valuable asset. The new editor also allows for developers to create guard rails so to speak that will guide content editors to their intended goals. Imagine that it is similar to the bumpers that are used to improve your performance when bowling. Developers and agencies will also have the opportunity to create interactive and custom templates that everyday users can easily update without the fear of breaking their website.

Building blocks and how to benefit from them

Remember the blocks you played with as a child? You’d build a castle or a highway and then tear it down and build something else? Well, Gutenberg blocks work in a similar way for your website. The new editor separates all the elements that could coexist on a page or post into individual units called blocks.

Blocks can contain items such as text, images, videos, links, widgets or quotes, and more. Users can select the appropriate box for the content they want to insert from a block menu that includes all possible block types. The content of each block can be edited separately, so Gutenberg makes it possible to completely customize its appearance. Images and video are automatically embedded in their appropriate blocks, and all blocks can be moved and sized independently of each other.

You can still navigate between CSS and HTML views without leaving the editor, and it’s just as easy to alternate between the text and visual editors familiar from the text editor. One huge bonus to the block editing capabilities of Gutenberg is the ability to see how a finished page can look while it’s being edited, which is a feature you do not have in the text-based editor. This allows users to adjust sizing, spacing, and more in real time, without switching to a preview mode after creating a page or post.

The ability to actually see and make changes to your blog on the go – or even post a blog with custom features from your phone is just one of the many updates Gutenberg will bring to WordPress. Text pasted from Word or Google Docs will get cleaned up and converted to blocks automatically and instantly. The blocks make perfect use of spacing between each of them so your galleries and blog posts look cleaner than ever before. What if you decide at the last minute you no longer want that image at the top of your post? No worries, just drag that block to where you want it on the page.

If you don’t have the ability to create custom blocks yourself or the resources to hire a developer or agency, you still have access to some default blocks that will still give you options you don’t currently have.

Here are a few examples of the default blocks:

Another cool feature is that every block you create can get its own layout and settings that you can save these as reusable blocks! Meaning, you can add custom color, fonts, and more—and save it as a block you can drag and drop in the future.

How To Prepare For Gutenberg

Before Gutenberg integrates into WordPress on November 27, there are some steps you should take before then.

Install and activate the Gutenberg plugin

By installing and activating the plugin today, you are able to see what your website will look like after the 5.0 update. This can help you decide whether or not you want to Install and use the Classic Editor, or if you need to look for plugins that are compatible with Gutenberg. If you activate the Gutenberg plugin, you should check your pages and plugins to ensure there is no loss of functionality and if not, you are good to go! Here’s how to install the plugin:

1.) Click on the Plugins bar to the left of your WordPress dashboard

2.) Choose ‘Add New.’

3.) Under the ‘Featured Plugins,’ click to install the Gutenberg plugin

4.) You will then need to Activate the plugin in order for it to work on your site

Create a copy of your site in a staging environment

If you have access to a staging environment—like all Bluehost customers—you can test your site before the update. This can help prevent decreased functionality if you have a plugin or theme that does not work well with Gutenberg. There are currently 56,285 plugins in the WordPress.org repository and not all of them are compatible, therefore they should be tested now.

 
Pro tip: Before installing any new plugins or changing your them, check the documentation to ensure they are compatible with Gutenberg.
 

We look forward to seeing everyone flourish with the new Gutenberg editor! We will continue to support our customers as we transition with WordPress into the future with this exciting new editor.

0 views0 comments

Recent Posts

See All

Comments


bottom of page