Gutenberg is WordPress.

The new WordPress block editor that arrived in WordPress 5.0 is a JavaScript-driven interface. Specifically, it is built using Facebook's open source UI library called "React".

What is React?

In front-end development, maintaining consistency throughout browsers is a very difficult thing to achieve. React provides a better system for this, by implementing a reactive programming model and a virtual DOM abstraction. Instead of interacting with the DOM directly, for example using jQuery.html() or jQuery.val(), React creates a virtual representation of the DOM. We call this a virtual DOM or VDOM. The VDOM is a JavaScript object that represents the structure of the DOM. Whenever your React code communicates to React a change in any of the data, the VDOM is recalculated. After that React, calculates the difference between the DOM as it existed before the change and after the change. Then React (really ReactDOM or React Native) updates only the parts of the DOM that need to be changed.

Gutenberg is a React application.

Gutenberg JS is a React application and has a thin abstraction layer on top of React. Why an abstraction layer? This layer helps prevent version incompatibilities by ensuring that each plugin works on a single, centralized version of code. Everything you see in the editor is rendered using a React Component. The data or application states in this React application is stored in centralized JavaScript objects, or "stores" and these stores are managed by WordPress data module.

These stores do not only store data about the current post, like the post content (the blocks), the post title, and the selected categories (everything is a block), but also store global information about a WordPress website. One of the jobs of the "WordPress data module" is to retrieve data from these stores and also change data in the stores. Since these stores are global and can be used by multiple React components, changing data in any store will be reflected in any Gutenberg UI part (including blocks) that uses this piece of data.

Once a post is saved, the WordPress REST API will be used to update the post using the data stored in these global stores. So the post title, the content, categories etc., that are stored in these global stores will be sent through the WP REST API endpoint that updates the post. In this way we can manipulate the data in these stores, once the user clicks save, the API will store the data that we manipulate in the database without us having to do anything. It saves static HTML in post content and then the browser displays it like any other content. If you want to enhance it with additional CSS or JavaScript, you can.

One of the things that these global stores in Gutenberg do not manage is the metadata. If you have some metafields that you used to manage using a metabox in the pre-Gutenberg "classic" editor, those will not be stored and manipulated using Gutenberg stores by default. Although those old PHP metaboxes will still appear in Gutenberg, WordPress recommends porting these PHP metaboxes to another approach that uses the global stores and React components. And this will ensure a more unified and consistent experience.

Gutenberg Source Code : https://github.com/WordPress/gutenberg/tree/master/packages/element

Sources:

• https://developer.wordpress.org/block-editor/packages/packages-data/
• https://developer.wordpress.org/block-editor/packages/packages-element/
• https://css-tricks.com/managing-wordpress-metadata-in-gutenberg-using-a-sidebar-plugin/
• https://yoast.com/what-is-gutenberg/
• https://torquemag.io/2018/10/do-you-need-to-know-react-as-a-wordpress-developer/
• https://torquemag.io/2018/10/using-react-for-wordpress-gutenberg-development/