Making a “Plugin Options Page” With Gutenberg Components

Making a "Plugin Options Page" With Gutenberg Components

Building option panels for plugins have never been a fun task. It is usually the thing developers do at the end, and most developers do not put much effort into designing their options panel at all. But can you make an options page with components from Gutenberg?

jetpack

Previously in a two-part series, I discussed how to build blocks for Gutenberg, now known as the block editor. But the brilliance of the whole block experience does not end on the front end – with blog posts and pages.

We can also make an options page with components from Gutenberg. While it sounds complicated, it is a straightforward process that actually requires less time than the standard way of doing things.

Here’s a screenshot of Gutenberg Blocks and Template Library by Otter (our plugin) where we built an options page with components from Gutenberg:

Options Page with Components from Gutenberg

Simple and clean, right? Here’s how to build something like this:

What are these components?

Great question! Gutenberg components are nothing but React components made with an abstraction layer that makes you feel like you are not using React. But yeah, technically it is React.

Also, we will be using JSX to write our code. If you are new to JSX, you are going to love it.

Code files + notes

? Before we go ahead, you can find all the code that we have used here in this GitHub repository. You can install the plugin to see the final product of this tutorial.

In this article, I do not use Block Editor and Gutenberg interchangeably. By Block Editor, I only refer to the editor part of Gutenberg.

Setting up a “plugin options page”

The setup for our project is straightforward. Just like the human heart, it has two parts: the options page & build files.

First, we need to register our plugin & options page as usual:

define( 'CODEINWP_AWESOME_PLUGIN_VERSION', '1.0.0' );

function codeinwp_options_assets()

[…]

 



This article was written by Hardeep Asrani and originally published on CodeinWP.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top