Changing the WordPress Game: What Digital Agencies Should Know About Gutenberg

Introduced in the 5.0 core update, Gutenberg has replaced the classic WordPress editor. This block-based visual interface significantly changed WordPress development, transforming the way users create web pages, from designing a simple blog post to building complex websites. In today’s article, we will explore what Gutenberg has in store for digital agencies, including its impact on design workflows, current developments, and future potential.

What does the Gutenberg block editor do?

Unlike its predecessor, the rich-text-based TinyMCE, Gutenberg is built on the concept of using ‘blocks’ to create web content. While being optimal for writing, the classic WordPress editor falls short when it comes to designing and editing content-rich pages and posts with visual elements and embedded media. Users often have to resort to a mix of different approaches that are not always intuitive. For example, using the media library and HTML for images, multimedia, and approved files, pasting links for embeds, utilizing shortcodes for specialized assets from plugins, defining featured images for post or page headers, using excerpts for subheadings, and relying on widgets for content on the side of a page.

All of the above elements could be blocks that are easy to search, understand, and dynamically shift across the page. The primary goal of the Gutenberg project is to simplify the design, writing, and post-publishing user experience, turning WordPress into a powerful, flexible, and universally accessible content tool. Below, you will find a brief comparison of the Classic Editor vs. Gutenberg to understand what their features bring to your digital projects.

Gutenberg vs. Classic Editor

	Gutenberg	Classic Editor
Editing interface	Visual interface, intuitive with self-explanatory menu settings	Singular long text area with formatting options similar to Microsoft Word
Full site editing	Block editor	Custom CSS and page builder plugin
Content creation	Uses a modular system with blocks, which can be text, headings, images, widgets, etc. Blocks can be easily rearranged and customized.	Provides a blank canvas for content writing and editing. Elements can be arranged using shortcodes or HTML markup
Ease of use	Drag-and-drop interface, no need to understand coding	Similar to using any text editor but requires some knowledge of HTML/CSS
Features	Theme parts, default block patterns, built-in templates, and versatile layouts	Compatibility with a wide range of WP themes and plugins
Pros	Flexibility, ease of customization, user-friendly interface, true WYSIWYG experience, ample design capabilities, mobile editing convenience, improved performance, accessibility support and RTL	Familiarity and simplicity for long-time users, straightforward writing environment for text-focused content tasks, backward compatibility with older content, easier for beginners, extensive keyboard shortcuts
Cons	Compatibility issues with some themes and plugins, learning curve, limited compatibility with content created in the Classic Editor, potential stability and security issues with certain blocks	Limited design capability, poor media handling, a gap between how content looks on the page and inside the TinyMCE editor, lack of mobile optimization, fewer customization possibilities

The main improvement with this modular approach is creating a universal ecosystem within WordPress where all UI elements are compatible and interchangeable. On the one hand, this allows users to create rich layouts with minimal effort and no technical knowledge needed, being able to check the visual representation of their future page as they go. On the other hand, the work of different developers becomes stackable and recyclable, serving as the base for future improvements. 

Understanding key Gutenberg features that redefine WordPress

Blocks. In Gutenberg, all content types are blocks and can be added anywhere on the website. Every block has its own editing and formatting controls and can be individually configured. These blocks form the content of a page or post, which is stored in the WordPress database.

Dynamic content handling. Dynamic content is website content that can be pulled from a database and displayed on any page ‘dynamically.’ This can include user names pulled from their profiles, core WordPress data (e.g., post’s publication date), data from custom fields, images, links, and more. Dynamic content is great for creating personalized and engaging experiences for website users.

WYSIWYG. Gutenberg introduces the “What You See Is What You Get” experience to the WordPress core, providing a live preview of the content as users edit it. That reduces the need for content editors to switch between editor and preview modes, allowing them to see exactly how the future page will appear on the website.

Anchor support. Anchor links are handy in instantly taking a user to a specific part of the page and the content they want to access, for example, to create a custom table of contents. In Gutenberg, adding anchors to header blocks is easy via block settings. Note that this doesn’t work with dynamic blocks yet.

Full-width content alignment. The blocks can be set to wide-width and full-width alignment out of the box so that content spans a greater width of the screen. It works for both posts and pages. The full or wide-aligned blocks can be used for headers, promo sections, and other content areas you want to highlight and for creating a visual hierarchy between sections.

Tables. Gutenberg allows users to add dynamic tables by using the default table block instead of coding or installing any additional plugins. The block editor has plenty of customization options to adjust the table’s visual appearance and accessibility. Furthermore, Gutenberg tables are responsive and mobile-friendly.

Buttons prompt website visitors to take action with button-like links. They are easily customizable via the block settings, allowing developers to build appealing, responsive, and interactive page elements in just a few clicks.

Document outline. This feature helps organize and navigate your content by displaying the page heading hierarchy based on the title and headers used in the post. It’s useful for identifying errors in heading order and general content optimization. 

Intuitive direct manipulation. Gutenberg’s interface allows users to arrange and rearrange content on the page directly. It opens endless possibilities for theme and plugin developers who can create custom blocks to further enhance this experience.

How does Gutenberg impact WordPress design?

Enhanced design flexibility

Gutenberg provides a large flexibility margin when creating web page layouts. It allows digital agencies to create complex designs that were previously possible only with advanced custom coding or expensive page builders, with less cost and effort. Blocks can be easily arranged into advanced and dynamic layouts that cater to the present-day needs of web design, which is a useful feature in any white-label WordPress development.

Improved user experience

With Gutenberg, users can enjoy greater creative freedom and make faster adjustments with minimal coding effort. This powerful editor offers a simplified and visually intuitive editing experience to content creators and clients. Its real-time preview and on-the-fly content adjustment features significantly bridge the gap between idea and execution, helping users create and edit their web projects more efficiently and effectively.

Accessibility and responsiveness

With the shift towards mobile-first web access, it has become essential to design and adjust content that works optimally on all devices. While not every aspect of Gutenberg is accessible at the moment, its launch has made a significant impact on accessibility and mobile responsiveness.  Additionally, adherence to web accessibility standards ensures that all users can access your websites, regardless of their browsing context. 

Custom theme development

Since the launch of Gutenberg, there has been an increasingly growing trend towards block theme development, bringing the idea of Full Site Editing (FSE). With FSE, developers build and edit all parts of the website in WordPress. Block-based themes enable them to create layouts by using default and custom blocks without piling an array of plugins. With this feature, website owners get an unparalleled level of control over various components such as global styles, menus, headers, footers, and block patterns, which eliminates the risk of breaking elements, as well as easier use and editing.

Improving WordPress efficiency through Gutenberg

Gutenberg has revolutionized the technical side of WordPress development, optimizing workflows for teams and digital agencies. This results in a more constructive work environment, where agencies can move from the conceptual stage to a finished project much faster and with fewer hurdles. By reducing the time spent on building pages and sites, Gutenberg allows development teams to focus more on design and user experience, thus enhancing overall productivity. Here are some of the examples of efficiency improvements introduced by Gutenberg. 

No-code editing and content updates 

Block editing benefits digital agencies by streamlining the development process and reducing the need for manual coding. Custom blocks allow clients to quickly and easily customize layouts without developer intervention, which saves time and reduces the risk of errors. Additionally, Gutenberg’s intuitive interface makes it easier for end users to make changes themselves without requiring technical expertise and full dependency on coders.

Future-proof web design

By utilizing Gutenberg’s features, you can tailor websites to meet specific client needs with greater precision and flexibility, providing value through customization. It’s a golden opportunity for agencies and WordPress developers to deliver cutting-edge technology seamlessly integrated into their clients’ WordPress websites. This ensures that the sites you create are not just functional for today’s web standards but also future-proofed, ready to adapt and evolve alongside emerging digital trends.

Consistent branding maintenance

Another benefit of customizable blocks and FSE in Gutenberg is the possibility of ensuring consistent brand identity across multiple website pages, which follow the same design style in both desktop and mobile versions. Your teams can build predefined layouts and block templates in accordance with your company’s or clients’ visual guidelines, including typography, color palette, illustrations, and content standards.

Performance and search engine optimization

A recent performance test comparison between Gutenberg, Elementor, and Divi—the most popular WordPress page builders—revealed that it performs better in terms of page size and load time. The overall performance boost will be around 45-50% on mobile and 10-20% on desktop, according to Google PageSpeed Insights. In our experience, Gutenberg’s lean front-end code is a huge plus for SEO optimization. It’s built into WordPress and compatible with specialized plugins like Yoast. The Yoast SEO plugin makes real-time suggestions for your content within the Gutenberg editor, facilitating SEO optimization on the fly. 

What to expect in the future of Gutenberg’s development

The WordPress team outlined four phases in the Gutenberg project, with version 6.6 planned for release in July 2024. They are:

• Easier editing. Already a part of WordPress, with ongoing improvements.
• Customization. Includes site editing, block patterns, themes, and block directory.
• Collaboration. Should establish a more intuitive and streamlined content management experience.
• Multilingual. Core implementation for multilingual site support.

The co-founder of WordPress, Matt Mullenweg, sees Gutenberg as the future of WordPress. As it becomes more capable, non-Gutenberg site builders will likely need to raise their pricing to maintain the revenue churn in the face of fewer users and higher churn—a trend he doesn’t see happening for Gutenberg users. Should this statement remain the case, all future WordPress development will revolve around Gutenberg. Furthermore, the WordPress development environment is also impacted by the emergence of new technologies, such as the proliferation of AI. 

Сollaborative features

Phase 3 of Gutenberg’s development will revolve around collaboration. It will focus on streamlining the content management flows to improve the way development teams and creators work together within WordPress. Most content teams do not use WordPress to write their drafts directly, preferring platforms such as Google Drive, where they can comment and collaborate in real time. 

The very early version of collaborative editing was released in version 17.0 in November 2023 as part of the experimental settings. Eventually, collaborative editing will become a major feature for WordPress publishers, sparing their time working on content outside WordPress and allowing more authors to edit a post or page simultaneously.

More robust block functionality

One of the standout features of Gutenberg 6.4 is the introduction of block variations for more flexible styling and block customization. Block controls have also been refined for improved usability and accessibility. The Gutenberg update should also include enhanced block navigation tools to facilitate more efficient block management. Overall, the block editing process should become more streamlined for greater ease of use. Gutenberg also expands block compatibility with third-party plugins and themes.

The growing role of AI in content creation

As AI technology evolves, more GPT-based tools and plugins will impact WordPress development. A cutting-edge example is Kadence AI, a Gutenberg-based AI system that uses the details about a company’s products, services, and customers to generate custom content for a user’s website. Kadence Blocks provides features like AI-powered text generation, a design library with templates for various page elements, smart keyword optimization, and more. This AI integration also comes with an inline editor within Kadence blocks, enabling users to edit content at any time and fine-tune AI to their needs and preferences.

The landscape of web development is constantly changing, which may feel overwhelming sometimes. However, with the right tools and a dedicated team to support you, turning your digital ideas into reality becomes not only achievable but an enjoyable experience. Gutenberg’s beauty lies in its simplicity and power—it makes design accessible, allowing users to create complex layouts and rich media experiences with less effort and cost. It’s an important part of our work at Beetroot, as it gives us a greater level of freedom and control over the website development process. By utilizing Gutenberg, we are able to craft unique digital experiences that perfectly align with the visions of our clients. We welcome you to join us in embracing this powerful editor for your next web project as we continue to explore all of its capabilities.