What I learned at WordCamp about the new WordPress Gutenberg editor

What I learned at WordCamp about the new WordPress Gutenberg editor

WordPress's new content editor takes a radically different approach to designing web pages.

web development and design, desktop and browser
Image credits : 
x

Get the newsletter

Join the 85,000 open source advocates who receive our giveaway alerts and article roundups.

I am one of the 75 million (or so) WordPress users. Are you?

There's a good chance you are (or will be), as it has been one of the most popular content management systems (CMSs) for many years—32.6% of all websites are powered by WordPress, according to W3Techs. The latest version, WordPress 5.0, released on December 6, 2018, includes the new Gutenberg editor, which takes a new approach to content creation in the software.

I recently attended WordCamp Toronto, where many of the speakers focused on Gutenberg. WordCamps are a series of one-day, community-driven, and informal WordPress conferences held around the world. Here's some basic information you need to know.

To "snowfall"

The first thing I learned about Gutenberg was how to embrace it for storytelling to improve a website's visual appeal and content. Montréal-based Andrea Zoellner, the chief content creator at SiteGround Web Hosting, conducted two sessions on content creation using Gutenberg.

The Gutenberg editor differs from previous WordPress editors in that is block-based, making it much more efficient for content creators to move content around in a more intuitive fashion. Zoellner spoke about The New York Times' 2012 web-based story "Snow Fall: The Avalanche at Tunnel Creek." Its style was groundbreaking in its time for engagement and visual appeal and for its difficulty to create. Gutenberg will make it easier "to snowfall," as Zoellner calls it, and create rich, inviting web stories that will drive engagement.

Zoellner explains: "Anyone who loves newspapers and magazines knows layout can significantly impact the way we consume content. A beautiful, well-organized page is engaging, inspires trust, and can even prompt action. Before Gutenberg, the default WordPress editor didn't have many options for the average user, and you needed a page builder, multiple plugins, or coding skills to have any sort of control over the final page design. Now, many impressive media and design tools are built right into the editor. With the block-based design, it's also easier to wireframe on paper and bring your vision to life.

"Right out of the box, Gutenberg has sophisticated tools to add images, video, and audio in posts and pages. Editors are no longer limited by their technical abilities and can think big when drafting content.

"The WordPress ecosystem already had an impressive selection of themes and, now in the era of Gutenberg, there's an exciting explosion of block designers creating custom blocks to expand the storyteller's toolkit. Not to mention the huge community of users continually publishing tutorials and guides make WordPress a great choice for content creators."

To try it out, I made sure my sites were backed up and updated several of them to 5.0.2. When I started working with Gutenberg, the first thing I noticed was the drop-cap function. As a long-time magazine designer, I use drop caps as a critical design element. I've used drop-cap plugins and tried hard-coding drop caps in WordPress, but because Gutenberg builds this right into the editor, I can design my posts much like I design print pages.

Become a zero hero

Toronto-based Ryan Meghdies of Tastic Marketing explained how Gutenberg can help improve websites' search engine optimization (SEO). The holy grail of Google ranking is to rank in "position zero"—the position above the list of search results that can include additional links, information, images, etc.

How do you prepare your site to rank in position zero? "Create high-quality content that answers people's questions," Ryan says in his presentation. Improving the organization of your content to make it more engaging will help propel you to position zero. Gutenberg's ease-of-use and intuitive editing functions can help you achieve this.

"Google places significant importance on engagement," Ryan adds. That requires constantly improving your content to maintain a high rank. It's important to create your content so that it answers questions when people search by voice. Ryan says, "better design facilitates better SEO which leads to results in voice searches."

New kids on the block

WordPress plugins are a great way to improve the Gutenberg editor. For example, Gutenberg Blocks—Ultimate Addons for Gutenberg, created by Brainstorm Force, is available under the GNU General Public License v3.0. The Ultimate Addons are Gutenberg-enabled blocks that can improve a page's look and functionality. Using them in conjunction with Gutenberg will make it even easier "to snowfall," as Zoellner would say.

I installed the Ultimate Addons through the dashboard and saw various blocks I could choose. I started with the Google Map block and added it to my page. It embedded immediately, and it was easy to change my address and adjust some of the other attributes.

Embrace the editor

As a radically new tool, Gutenberg may strike fear in the hearts of web developers around the world. BoldGrid's Mike "Demo" Demopoulos spoke on overcoming your fears, embracing the new editor, and using its powers for good.

My key takeaways from WordCamp are that Gutenberg can improve a website's content, visual appeal, and search optimization. All of these combine to increase traffic, drive views, and of course, convert leads for organizations selling products on their sites.

Topics

About the author

Jeff Macharyas - Jeff Macharyas is the Director of Communications, Marketing and Media at Rappahannock Community College in Gloucester County, Virginia. He is a writer, graphic designer and communications director who has worked in publishing, higher education and project management for many years. He has been the art director for Quick Printing, The American Spectator, the USO’s OnPatrol, Today’s Campus, and other publications as well as a telephone pole design engineer contractor. Jeff is certified in Google...