How does the latest WordPress editor works? Explaining Gutenberg

  • Comments icon
    0 comments
  • 5 minutes of reading
  • 356 views
Share

Get a better understanding of what is WordPress Gutenberg Editor, how it works, and why it’s 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. 

Hisotry 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. 

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. 

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. 

Of course, the Gutenberg editor is not without its drawbacks. A considerable number of themes and plugins relied on and implicitly assumed that everyone uses the classic editor previously, and once you change to the Gutenberg editor, they stop functioning. More and more plugins and themes have been updated to support it, but a considerable number still remains that lack official support for it. 

Technologies that make the Gutenberg Editor possible 

Gutenberg 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 that can compete with the best, Fortune 500 websites out there.

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 or algorithms to fetch the data for you in real-time from the server-side. 
  • Save the changes and push the files to the server. Gutenberg backs up your changes regularly too, so this is an extra safeguard you have from losing your work. 
  • The raw block code is compiled to an easily servable markdown and is prepared and stored in a special database in preparation for runtime. 
  • 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. 

Initially, when you fire up WordPress and create a new post, and are met with the Gutenberg editor, you’ll immediately see a range of ready-made, drag-and-droppable blocks on the page. These are the most common blocks people usually need to use, and they range from simple text blocks to more complex slideshows and video content. They provide a comprehensive, reliable set of blocks that fulfills the needs of 80% of WordPress users. 

But, what if the default blocks aren’t enough for you? There are two paths forward for you then:

  • Download Gutenberg blocks plugins: since its release in 2019 as the default editor, Gutenberg has successfully managed to attract many talented developers to it, and they’ve created thousands upon thousands of highly intricate, highly performant custom Gutenberg blocks, and the only thing you’d need to use them is installing the plugins/extensions. The WordPress community being able to expand and extend WordPress’s core functionality has always been at the heart of their development philosophy, and they continue that with Gutenberg as well. 
  • Create custom blocks using React or PHP: if you can’t find blocks that satisfy your requirements both in the default options and in the extension marketplace, your only other choice is creating custom blocks yourself. Although it requires considerable technical skill and expertise to get started, you can accomplish amazing things if you manage to do it. 

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. Required fields are marked *

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