Our Gutenberg block is a simple method for adding endpoints into pages, posts or wherever you can add a block. This feature was released in version 1.8.0.

Lets look at how to add our Gutenberg block to easily connect to an API.

Step 1

Click on the + symbol and search for ‘api’ or ‘wpgetapi’ and click on the result that comes up.

Step 2

After adding the block, you will see that you first need to choose your API and then choose the endpoint that you want to add to the page.

Step 3

The block will then call the API and output to the page whatever the API returns.

Click on the black ‘cog’ button at the top of the page to display the sidebar menu if it is not already shown.

You can see that in this instance we are calling the ‘quote’ API and the ‘random’ endpoint. This endpoint is returning us a JSON string.

Step 4 – Optional

You can see that there are 3 settings that are only available in the PRO plugin.

Once the PRO plugin is enabled, we can then format our JSON data into HTML by simply changing the ‘Format’ using the dropdown.

This HTML can then be styled easily on your frontend using some CSS.