Adding Custom Gutenberg Blocks into your App

In this tutorial, you will learn to make a React Native component representation of your block and register it in the app. You might have a need to show additional blocks on App Pages and the App Editor, aside from the blocks that are already supported.

This tutorial is a continuation of the tutorial Registering Custom App Gutenberg Blocks, so if you haven’t yet, please check that one first. After you create and register a block in WordPress, you can proceed with this tutorial.

Registration of Gutenberg blocks in WordPress is done with a unique string identifier. This means that every block has its own identifier.

For example, let’s say you have registered a new block to show “Books” data to your users and you have done it under “bbapp/books” identifier.

Now we need to make a component that will represent the books in the app. Components are usually made in separate files, outside of index.js, so we will create a file BooksBlock.js in the /components folder of your custom code repo. It can be as simple as:

// components/BooksBlock.js

import React from "react";
import {View, Text} from "react-native";
const PropTypes = require("prop-types");

const BooksBlock = (props) => {
    const {
        appBossWrapStyle,
        block,
        calcFontSize,
        colors,
        fontFamilyStyle,
        global,
        handleLinkClicks,
        htmlHandleClicks,
        id,
        isNavActive,
        lastItem,
        navigation,
        toUserBasedOnSettings,
        viewWidth,
        wrapHtml,
        wrapStyle
    } = props;
	return (
		<View>
		    <Text>
			    Books List
		    </Text>
        </View>
	);
};

Your component can be a lot more useful than this one. This example is just outputting the text “Books List”, but you could connect it to Redux if you need to pull in data. You can also do your own requests inside of the component.

The next step is to register this component as a block renderer component by using the blocksApi.addCustomBlockRender hook and unique block identifier:

// index.js
import React from "react";
import BooksBlock from "./components/BooksBlock";
...
export const applyCustomCode = externalCodeSetup => {
	// call custom code api here

      ...
	externalCodeSetup.blocksApi.addCustomBlockRender(
		'myapp/greeting'
		props => <BooksBlock {...props} />
	);

};

As you can see, there are some props that are being passed to your component and they are all described in this type CustomBlockRenderCallback. The most important of all is the “block” prop which contains all block data that the API is sending upon request.

Note that if you use the identifier of an already existing block in the hook (for example “bbapp/courses”, which will override Course block), it will override the default renderer component of your app and use your component. This is exactly what you should do if you want to override existing blocks and change the way they render.