Update Your Nonprofit Website with Gutenberg

Gutenberg is here. WordPress released this new content builder in December 2018 with WordPress 5.0, and Gutenberg has only grown in what it is capable of and how it can help you build a better website.

So what is this? Why would you want to update your website with Gutenberg?

Here’s all the information you need to update your nonprofit WordPress website and to get the most out of Gutenberg.

What is Gutenberg? 

Much like the advent of the Gutenberg printing press, the WordPress Gutenberg release caused some unrest across the global WordPress community because of initial bugs with the plugin and the impact that it has on existing sites.

Gutenberg use has since been further tested and improved and has become the standard for visual builders in the WordPress community.

Gutenberg is a name for the new “block editor” in WordPress. The new editor allows content editors much more control over their layouts and creative decisions.

In the previous versions of WordPress, you were simply given a large visual editor to put whatever content in that you wanted. Formatting options were limited and getting an image to align with text was near impossible.

A screenshot of the Classic WordPress editor shows an image being added to content with words next to it, reading "Does this look familiar?"

Now, with Gutenberg, you can easily create robust layouts. You can easily align images:

A screenshot of the new Gutenberg block editor in WordPress shows how the new interface makes editing even more flexible.

But that’s just the beginning.

What is a Gutenberg Block? 

Every page on your site will be made up of blocks. A Gutenberg block is a single piece of content, whether that be a paragraph of text, an image, a button, or a pull quote. There are dozens of default blocks built in to WordPress:

A screenshot of the block options in the Gutenberg editor shows icons and labels for Page Break, Image, Paragraph, Heading, and other types of blocks, including Audio, Cover, and Quote blocks.

What used to be a difficult and time consuming task to add images, lists, video files, or pull quotes, is now as simple as selecting the right block and adding your content.

Even adding content in columns is simple:

A screenshot of the Gutenberg block editor shows how content blocks can be added with different options for Column layouts, including two or three columns of content and options for how the columns are proportioned.

WordPress also allows for saving reusable blocks, which allows you to insert content – perhaps an email sign-up form – once, after which future changes will be made to all other locations where the same block is used in your content.

Similarly, you can also save block patterns that are reusable templates for part of or for an entire page.

The features of Gutenberg represent a quantum leap forward for the WordPress editing experience. But, as with all big changes, it also poses a number of challenges for many existing WordPress websites.

How is Gutenberg different from my current website editor?

As web design has evolved, content layouts have grown more sophisticated. Content often includes not just words and images but multi-column text, images with text, buttons, and much, much more.

The Gutenberg block editor aims to streamline and support more complex layouts, bringing powerful editing tools right into WordPress itself.

Instead of offering one main editor area, Gutenberg organizes content into separate “blocks.” Each block has its own unique options and properties. Blocks come in a variety of types, such as text, pullquote, multicolumn text, gallery, and so forth.

Some blocks, like the text block, are pretty simple and straightforward. Others offer extensive layout controls for adjusting how the content is structured and organized. Watch this demo of Gutenberg to better understand how blocks work, or just try it yourself.

Most users will find that the block editor is much smoother and easier to use. However, this new flexibility can also result in some technical headaches. We’ll all need to learn how the editing options will impact our own unique website layouts.

Should I update my website with Gutenberg?

No matter what kind of site you have, the answer is yes. You should definitely have a plan for updating your nonprofit website to use the new block editor.

Why?

WordPress will be removing support for the Classic editor, the editor previously included with WordPress, at the end of 2021. After that time, Gutenberg will be the only supported builder from WordPress.

But also, you should plan to use Gutenberg, because that’s the direction that WordPress and the internet in general is moving in! Even Drupal is implementing its own version of Gutenberg.

You can easily try out the new block editor using WordPress’ impressive demo site at https://wordpress.org/gutenberg/. Once you gain a better understanding of how the new editor works, you’ll then want to consider how these abundant and flexible formatting options could impact your own content editing.

What if I don’t want to upgrade?

If you choose to not update your website with Gutenberg, your site will continue to work, but it will get more outdated as time goes on, risking the possibility of functionality on your site breaking.

The Classic Editor will continue to exist as a separate plugin, and it is possible an individual or a firm will take on the necessary ongoing updates and support for the plugin.

Can I update my website on my own?  

As long as your website is using one of the more recent versions of WordPress (anything with WordPress version 5.0 or above), your site likely already has Gutenberg.

If you are not seeing Gutenberg block editing options in your content, you likely have installed a Classic Editor plugin that is overriding Gutenberg. By disabling that plugin, you will be able to access Gutenberg on your website.

Most basic sites that don’t have a lot of customizations or plugins can upgrade to Gutenberg with no problems.

If you are planning to upgrade your website on your own, we recommend you keep the following in mind:

  • Work on a development server. Since it’s not clear what impact Gutenberg will have on your site, it’s always best to try it out on a development server so it doesn’t impact your live site.
  • Review all custom content types on your site. See if you can anticipate what types of content might be more problematic with Gutenberg.
  • Review your plugins and editing systems. Do you use any particular features that might impact your post editing experience? For example, if your site’s toolbar provides a lot of shortcode options, the Gutenberg editing experience is not great for these shortcodes. If you already have shortcodes in your content, they’ll still display correctly. You just won’t be able to edit your content in the same way!

Also keep in mind that though Gutenberg’s block editor allows you to put two images side-by-side more easily than you could before, that doesn’t mean it will look nice. You’ll want to double-check the resulting display both on your desktop as well as through mobile devices to make sure that the layout looks good within your site and mobile displays.

What if I am using a Visual Builder? 

Visual builders, like WP Bakery, Elementor, Divi, Cornerstone, or Page Builder, have become popular in recent years. These builders are often included in premium themes that can be purchased on Envato. For example, we often use the Jupiter theme, as well as Icelander and the Gem, for some of the smaller sites that we build, and each of these themes come with a visual builder for creating content.

Before Gutenberg, these builders were the only way to create robust layouts without knowing code. Many of these builders also allow you to save templates or preload layouts to help save time in development.

If you prefer using your current builder over Gutenberg, then there might not be any reason to upgrade.

Be careful to confirm that all of your content is edited through your builder, since some themes only use a builder for Pages, but then may rely on the standard WordPress editor for Posts and other content types. It’s possible you still might need to upgrade to Gutenberg for those additional content types, or you may need to even switch to using your builder for those types of content.

To summarize, the Gutenberg block editor makes it easy to do a lot of things that previously would have required coding skills and writing markup, which is really cool. But depending on the structure of your site, you may or may not consider this to be a good thing!

Though the new block editor brings some new technical challenges, we hope that over time everyone can update their sites to use Gutenberg. Gutenberg opens up a whole new editing experience that promises to provide even more power and customization options as the web continues to grow and evolve.

Need some help with testing or updating your website? Let us know!

By

Ben is our very own designer/developer unicorn. He’s been designing on the web professionally for over 17 years, but he’s also been a developer for almost as long, building up extensive experience with languages such as HTML, CSS, JavaScript, and PHP, and putting them to good use implementing his designs on several CMS platforms, including WordPress and Drupal. In addition to his own work, Ben oversees the design and development the rest of our team does, ensuring it’s up to our high standards. He enjoys sharing his knowledge, and has presented to groups of varying sizes on topics like the difference between print and web design, web typography, WordPress widgets, and front-end performance.