How Did Gutenberg Change Content Creation With React Native?

Introduction

WordPress is one of the simplest options to create your own website or blog. That open-source software allows you to manage and edit the content using an easy-to-use interface. Owing to the powerful features and limitless possibilities, currently (according to the WordPress.com ):

37% of the web is built on WordPress. More bloggers, small businesses, and Fortune 500 companies use WordPress than all other options combined.

You have undoubtedly been able to use the WordPress websites many times. Big brands such as BBC America, TED, or PlayStation.blog have already trusted them.

What makes WordPress so special? Is it thanks to an editor called Gutenberg?

What is Gutenberg?

Gutenberg is a new block editor created as a result of rebuilding the entire editing experience. The new power is concentrated in flexible blocks that form the skeleton of the page. These blocks give you the ability to insert, rearrange, and style content more effectively and intuitively, without much technical expertise.

Currently, Gutenberg is a default editor that replaced the classic editor in WordPress 5.0. Although the classic editor is still available as a plugin, future development is focused mainly on Gutenberg.

How did the Gutenberg project come about?

Gutenberg has become a replacement for a classic text editor, due to its rather limited and outdated interface, enabling the creation of simple posts using raw HTML. The purpose of the new editor was primarily to facilitate the process of adding content and transform it into more complex compositions. The key feature element is called "Block" on which the new functionality is based.

The power of Gutenberg's Block

"Block" is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. The idea combines concepts of what we can achieve in WordPress today with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.

In other words, the block is your content brick, it’s a unit used to manage and organize the composition of post or web. Every block has its own attributes or settings which define its functionality and provide a system to map values from the saved markup to a JavaScript representation of a block.

Looking at the example of the cover block, we can notice that it has currently set three attributes such as: <rte-code>url<rte-code> (defining the cover image source), <rte-code>customOverlayColor<rte-code> and <rte-code>minHeight<rte-code>.

In summary, the block grammar is an HTML comment, either a self-closing tag or with a beginning tag and ending tag. In the main tag, depending on the block type and user customizations, there can be a JSON object containing attributes. This raw form of the block is referred to as serialized.

Gutenberg meets mobile apps

The idea of the new editor created the need to support Gutenberg also on WordPress mobile applications. From the beginning of the project, the overall objective is to deliver the full experience available on the web platform. The plan was clear and assumed:

Adapt Gutenberg to make its primitives run both on web and native platforms, then have some platform-specific components, like Aztec for RichText, or our own Media pickers.

Starting from the initial wordpress experiment and ending with a working block editor in the production application, Gutenberg was developed with React Native technology. Two years ago, it was still uncertain whether React Native would be able to meet Gutenberg's requirements. Today we can openly admit that it was a good decision, looking at the development of the mobile version.

How does it work?

What is the current structure of the application and what role does React Native play in this structure?

WordPress app on both platforms is a brownfield solution. It is mainly a native application that contains a React Native module - the Gutenberg editor. All the blocks and their functionality is created within that technology. For full editor support and accomplishing rich editing experience, of course, <rte-code>RichText<rte-code> was needed. Actually, WordPress has its own native rich editor, so there was a need to create a wrapper for it.

All of this, packed together in one bundle is run with react-native-gutenberg-bridge, which also has another job of exposing methods to handle uploading media, such as images or videos.

React Native role

React Native fits perfectly in the principle of enabling cross-platform development of blocks as much as possible and simplifying the work by writing the sharable code. The main approach is to develop the architecture in the way to write common code and run it both on web and mobile platforms. Currently, the work is focused on adapting web blocks to have their mobile equivalents with the most similar functionality. Both of them have to fully share the API to allow the block registration process and should be able to reuse the data store and manage the application state using @wordpress/data module.

Now the challenging part is to create a compatibility layer which gives us the possibility of using UI components on both platforms. However, some of the blocks are fully shared at the moment, e.g. <rte-code>Spacer<rte-code> block. It’s possible thanks to the common wrapper called ResizableBox which is using primitive components dedicated for a platform -  and under the hood.

What about the styling components?

React Native styles syntax looks as if it was inspired by the web where names usually match the CSS equivalents and all the layout in React Native is based on the flexbox thanks to a system called Yoga. Hence, using the babel plugin called react-native-sass-transformer Sass files can be transformed/transpiled to React Native styles objects. It gives the opportunity to reuse already written styles for the web with a mobile platform. However, with some limitations such as no CSS selectors processing or descendant support.

General benefits of using React Native

Social benefits

A bigger pool of JS developers

React Native community is expanding rapidly every day because JavaScript technology is still on the top. That situation correlates directly to a large number of very qualified developers, who are able to quickly adjust to the framework, learn React Native basics, and constantly push it forward.

Easier to contribute and enter to Gutenberg project

As we know, React Native is a framework written in JavaScript and rendered with native code. Due to the JavaScript factor, which is currently the most popular technology, it’s easier to get experienced external contributors willing to help with the product, which is confirmed by the number of current Gutenberg contributors - almost 1.2k.

For the same reason, the entry-level for the new employees is lower and the onboarding process can be shorter. Based on the knowledge of the fundamentals of React and JavaScript, they don't have to worry about adapting to writing the application in React Native technology and understanding the code.

Technical benefits

Faster and more efficient development

Unique React Native architecture, which is a result of a combination of the main advantages of React and most of all JavaScript, leads to faster and more efficient work. You can see it during the development process where Gutenberg mobile engineers don’t have to rebuild the whole native app after each update. The code-changes are noticeable immediately, thanks to the fast refreshing feature, which is providing instant feedback for changes in React components within a second or two.

Sharable code

The ability to share the code is one of the greatest assets of React Native technology. Mobile apps market mainly consists of Android and iOS, with most of their functionality being common on both platforms, so it is worth taking advantage of this fact. Reducing codebase allows you to save time and money. It’s the right approach especially if you are thinking of implementing and introducing new features, with the same logic and similar interface.

Moreover, you can also share significant functionality that you have written for your web with mobile platforms. Certainly, it’s easier to share the logical layer, but there are several different techniques that let you share the components and styling codebase as well!

The quality of the app

React Native applications are truly native apps without compromising on users' experience, providing high quality, superior performance, and good sensitivity to the interface. The properly written app behaves the same way as the native one, with flexibility and quick development benefits. The faster development process does not mean loss of quality. What’s more, probably no one will notice the difference between a native app written in a native language and a one written using React Native.

Find out more about building high-quality React Native apps by reading our React Native Optimization Guide.

Business benefits

Maintenance cost reduction

With React Native, the majority of produced code is cross-platform. One codebase for all platforms means much less code to maintain and easier project management. What’s more, in case of any bugs and issues, there is only one place to fix. Otherwise, there is also the possibility of different bugs per different codebase and this is not a case with cross-platform RN apps. Undoubtedly, some kind of platform-specific customization can be required to match the standards.

However, if we look at the overall cost of maintaining the monorepository product with one dedicated team instead of two, we’ll see the difference and saved money can be allocated for the new features.

A quick tutorial on how to use Gutenberg

Gutenberg is an editor used to create and compose the content of your site or blog post. It’s automatically enabled on mobile apps. However, if you still have a classic editor and would like to change it, go to the main settings and turn on the toggle switch to use it.

After opening the new draft the main important button is an inserter which opens a bottom sheet with blocks available for selection. Some blocks, such as <rte-code>Button<rte-code> or <rte-code>Cover<rte-code> have additional settings that allow you to customize them. They are available through:

• bottom toolbar - contains mainly text editing styles or option to set the link to a text
• action sheet - press the ellipsis button and then block settings
• options button - press the cog button when the block is selected

In the top right corner, you can find options to get the preview of your content, its settings and you can also switch to HTML mode.

Some inspiration

As you may have noticed, this post, as well as a few previous ones I wrote, is created with the Gutenberg editor. Without much difficulty, you can edit the content and style of texts on an ongoing basis and add graphics when they are ready.

Within an editor, you can also create a photo gallery. If you like traveling and taking photos and would like to share your passion with others, it’s achievable with Gutenberg!

You can always use one of the prepared page templates:

Conclusion

To wrap everything up, Gutenberg, as a block editor, is a game-changer in the content management process and attracted a lot of interest. Its adaptation to mobile applications was inevitable and the decision to use React Native technology was right, which is proven by the increasing use of the power inherent in Block.

By writing a common cross-platform code, you are saving the time, which you can spend on faster editor development, but at the same time provide the full experience.

You can check out other services offered by our React Native development company.