Contents
Is Gutenberg built with React?
Well, the Gutenberg editor is built using the ReactJS framework. The WordPress and Automattic teams have been using ReactJS for a while, so it’s not surprising they decided to also use it for the editor.
What version of WordPress is Gutenberg?
WordPress 5.0
Gutenberg is a brand new editor for the WordPress platform. It will radically change the way you create posts, pages, products, and just about everything else on your site. Gutenberg arrived as part of WordPress 5.0, which was released in November 27, 2018.
What is Gutenberg?
Gutenberg is the first step for a bright new future for WordPress. It’s something many people often gloss over, but Gutenberg is not just a new editor for WordPress. It’s the start of something much bigger. Gutenberg lays the groundwork for incredibly exciting developments.
What is block editor in WordPress?
With the block editor, you can simply add a table block, select your columns and rows, and start adding content. You can move content elements up and down, edit them as individual blocks, and easily create media-rich content. Most importantly, the WordPress block editor is easy to use and learn.
What is React createElement?
createElement() Create and return a new React element of the given type. The type argument can be either a tag name string (such as ‘div’ or ‘span’ ), a React component type (a class or a function), or a React fragment type. Code written with JSX will be converted to use React. createElement() .
Can we use JSX without React?
JSX gives us a great way to handle HTML-based templating in JavaScript. However, we can actually use JSX without React, and it’s not that difficult either. The way React works is by configuring your bundler to convert JSX into calls to a createElement function.
How to use React components in your Gutenberg Project?
The first solution would be to simply install react and react-dom from npm . This will easily solve everything, as React and ReactDOM would be fixed as dependencies in our project, but has the drawback of increasing our bundle size by about ~ 100kb as that’s the total filesize of React plus ReactDOM (minified).
Why do we use external components in Gutenberg?
The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer’s environment. The consumer’s environment in our case is the browser’s window object and Gutenberg makes sure to populate it with the React library.
Can you use the same react object in WordPress?
What we’d really really want would be to have a guaranteed version parity (i.e. use the same React version as WordPress). Thankfully, Gutenberg also exposes React as a library in the global scope (the browser’s window object) and we can use that same React object with just a tiny adjustment in our Webpack configuration.
How does react and Redux work in WordPress?
WordPress uses Redux behind the scenes for its data store. Redux is essentially a state management library. React and Redux work together quite well. When an action takes place in the Gutenberg editor, an event is triggered that goes through Redux and updates the global state for the editor.