How does the latest WordPress editor works? Explaining Gutenberg

Acclaim/Blog/Articles/How does the latest WordPress editor works? Explaining Gutenberg
  • Comments icon
    0 comments
  • 6 minutes of reading
  • 1201 views
Share

Get a better understanding of what is WordPress Gutenberg Editor, how it works, and how you can use it for WordPress custom development, which makes it’s much better than old classic editor

gutenberg and wordpress

The classic WordPress editor was the default option for around a decade, and it wasn’t without merit: 

  • it allowed the creation of websites with minimal technical knowledge,
  • enabled customization and plugin creation,
  • and was the catalyst for the creation of millions of websites on the internet. 

But, it wasn’t without its limitations: 

  • it wasn’t flexible enough to contend with all the different types of devices and screen sizes of the modern internet, 
  • it still required some understanding of coding, especially during the fine-tuning phase, 
  • and lastly, it was causing a significant bottleneck in many projects making it harder for people to manage professional websites on their own. 

History behind the Gutenberg Editor

These reasons made it evident that the classic editor was showing its age and becoming outdated, and that’s why the WordPress team started designing a new editor in earnest as early as 2015, and this would later end up being Gutenberg block editor. 

Johannes Gutenberg - everyone knows him
Johannes Gutenberg – everyone knows him

The driving philosophy behind Gutenberg is best explained by mentioning its namesake, Johannes Gutenberg. By popularizing the printing press and making it accessible to a large number of people, Gutenberg stopped the monopoly of the church and the governments on the information. He’s widely credited with being one of the principal instigators of the enlightenment and the scientific revolution. Taking inspiration from him, the WordPress team aimed to create an editor that would make it as accessible and as easy as possible for editors, writers, bloggers, content creators, etc. to reach a wide audience and make their voices heard. The “democratization of the internet” is how they like to call it. 

So, what is Gutenberg WordPress block editor? How does it work? Why is it called the Gutenberg block editor? What are its benefits? What should you do if you liked the old editor more? In this article, we’ll answer all these questions and much more, so read on! 

The WordPress Gutenberg Editor – the basics

The foundation of the Gutenberg editor is blocks, which is why it is sometimes called the WordPress block editor. Blocks are self-contained elements on the page that can range from simple to complex, and by containing and placing the blocks, you can create a fully functional webpage. 

Placing blocks to create a functional webpage
Placing blocks to create a functional webpage

The ability of adding, moving around, and editing self-contained blocks makes it easy to render pages on different screen sizes, edit long-form content, and fully utilize complex multimedia elements, all of which was more of a hassle on the old default editor. 

Gutenberg hasn’t been with us since yesterday but some themes still don’t support it, which can be a nuisance. Still, a large number of themes also use other solutions such as Elementor.

When it comes to dedicated solutions, Gutenberg block editor can show its best side. Thanks to its modular design, you can build sites from ready-made components almost like building a LEGO house. No longer do we have to use oversized and suboptimal page builders to get more control over the look and structure of the site. We don’t have to ask programmers for every little thing. By getting customized blocks we can build websites step by step in our own way and only real extension of website functionality or support works can be entrusted to programmers. This completely changes the way you work with WordPress. For some people it may be problematic, because at first glance it is a bit more complex process than just writing text – in fact, it is. However, it is a powerful tool and one that gives you a whole new field to work with. You don’t have to limit yourself to typing in bare content – you build a page at your own discretion from the parts that the programmers will prepare for you. Previously, only complicated, heavy page builders gave such a huge range of possibilities. Gutenberg is a great solution that gives you enough possibilities to configure your website and at the same time it is faster than popular competing solutions used so far.

Technologies that make the Gutenberg Editor possible 

WordPress Gutenberg Editor was built from the grounds up using one of the most popular and most powerful front-end libraries out there: ReactJS. React is popular for its excellent separation of concerns, modularity, and performance, and all these benefits have carried over to the Gutenberg Editor. 

It doesn’t only mean improved performance though, it also means interoperability with React libraries and extendability using React code. Both of these features are quite powerful and can help the developers create amazing-looking, quick, and responsive web pages.

The content flow of a WordPress Page with Gutenberg 

Now that the editor has changed, the way information flows between the editor and the server-side of WordPress has seen some changes as well, and this impacts how pages are rendered. Below, we’ll explain how the content flows between the database and the editor. 

  • The first step is selecting a block from the library of available blocks in the WordPress admin panel and populating it with data. 
  • Save the changes . WordPress backs up your changes regularly too, so this is an extra safeguard you have from losing your work. 
  • The serialized block data is stored in the database and ready to be read.
  • A special, new WordPress parser serves the content to the frontend whenever a request is made. 

More about the building blocks of Gutenberg 

As the blocks form the bases for all Gutenberg pages, it is important to learn as much about them as possible to get a robust idea of what you’re getting yourself into. 

Code that creates various Gutenberg blocks
Code that creates various Gutenberg blocks

In most cases, the default blocks available in WordPress are not sufficient. They work well when we use default themes or those that have been adapted to them. In the vast majority of cases, we need something completely different than the default ones provided with WordPress. ReactJS and PHP come to our rescue and help us build our own dedicated blocks. Plugins like ACF Pro even have dedicated mechanisms to make this process even more efficient. This allows us to tailor the blocks to our needs. WordPress also allows us to disable default blocks by using allowed_block_types_all filter to avoid clutter and allow user to use only blocks dedicated to your site.

WordPress custom development at Acclaim 

If you want high-quality WordPress custom development, you need a service that fully utilizes Gutenberg and makes use of its powerful features. This is exactly what we do here at Acclaim. 

We have an experienced team that is deeply familiar with both WordPress, and we don’t only use the default blocks, but we also create highly customizable and stylish blocks using custom Advanced Custom Fields. 

We’ve even created our own WordPress development framework that allows us to streamline most of the development processes and deliver consistent quality. Our framework, Crunch, allows us to rapidly develop, test, and publish WordPress sites, and you’ll be amazed if you see the results. 

Concluding words 

The Gutenberg block editor is perhaps the biggest development in the WordPress ecosystem in the last ten years, and anyone interested in WordPress should be familiar with it, and we hope this article did a good job of that. 

The technology is far from being flawless, but it is gaining popularity rapidly, and in our opinion, its benefits far outweigh its drawbacks. 

Related articles

Comments

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Blog