Gutenberg Sidebar – Setting up the Meta Boxes

Gutenberg Sidebar - Setting up the Meta Boxes

in this post we’re going to begin to add references to meta boxes, which we’ll need in our sidebar.

The end result will be a sidebar like the following;

Gutenberg Sidebar

Why Meta Boxes?

Meta boxes, in our case, are simply going to be registered. The meta boxes will be setting aside a custom field for each meta box needed. Once registered, we can reference them in the WordPress REST API, which will be needed if we create a Gutenberg sidebar. We have to think carefully what meta boxes we’ll need, so let’s quickly brainstorm what meta boxes we’ll need to register.

  1. A meta box for enabling or disabling full-screen mode. This will be a boolean (yes or no).
  2. A meta box for disabling the Twenty Twenty One stylesheet. This will be a boolean (yes or no).
  3. A meta box for a custom body class. This will be a text field.
  4. A meta box for a custom body background color. This will also be a text field that will store the hex field of a color picker.

The great thing about meta boxes? We can always add more as needed.

Let’s go ahead and wire up the necessary meta boxes for our Gutenberg sidebar.

Creating the Meta Boxes File

Let’s go ahead and create a file called class-meta-boxes.php in our includes folder.

. └── landing-page-gutenberg-template/ ├── .babelrc ├── autoloader.php ├── landing-page-gutenberg-template.php ├── package.json ├── webpack.config.js ├── dist/ │ ├── sidebar.js (compiled JS) │ └── template.css (compiled SCSS) ├── includes/ │ ├── class-enqueue.php │ └── class-meta-boxes.php ├── languages (.mo, .po, .json files go here) └── src/ ├── js/ │ └── index.js └── scss/ ├── style.scss └── common.scss
Code language: AsciiDoc (asciidoc)

Inside the class, let’s go ahead and wire up the namespace and base class structure.

<?php /** * Add meta boxes to post types. * * @package wpajax */ namespace WPAndAjax\Includes; /** * Meta Box class */ class Meta_Boxes { /** * Class runner. * * @since 1.0.0 */ public function run() { add_action( 'init', array( $this, 'register_meta_boxes' ) ); } /** * Register Meta Boxes. */ public function register_meta_boxes() { } }
Code language: PHP (php)

Within our class, a run method is created and also a method called register_meta_boxes is registered as a callback to the init action.

Let’s move back to our base class and go ahead and load in this new file.

. └── landing-page-gutenberg-template/ ├── .babelrc ├── autoloader.php ├── landing-page-gutenberg-template.php ├── package.json ├── webpack.config.js ├── dist/ │ ├── sidebar.js (compiled JS) │ └── template.css (compiled SCSS) ├── includes/ │ ├── class-enqueue.php │ └── class-meta-boxes.php ├── languages (.mo, .po, .json files go here) └── src/ ├── js/ │ └── index.js └── scss/ ├── style.scss └── common.scss
Code language: AsciiDoc (asciidoc)
/** * Fired when the plugins for WordPress have finished loading. */ public function plugins_loaded() { // Admin enqueue actions. $this->admin_enqueue = new \WPAndAjax\Includes\Enqueue(); $this->admin_enqueue->run(); $this->meta_boxes = new \WPAndAjax\Includes\Meta_Boxes(); $this->meta_boxes->run(); }
Code language: PHP (php)

Fantastic. Now we can concentrate on adding the meta boxes via code.

Registering the Meta Boxes

Inside our meta boxes class, we’ll use the WordPress function register_post_meta to initialize our meta boxes.

The register_post_meta function takes in three arguments:

  1. The post type you want to register the meta box for. If we pass an empty string (which we’re going to do), then it’ll register the meta for ALL post types.
  2. The meta key we want to register. We’ll be prefixing them with an underscore so if someone has custom fields enabled in the block editor, they will be hidden from the custom fields list.
  3. An array of arguments.

Let’s look at the first meta box and go over what’s happening.

/** * Meta for enabling/disabling the full-screen template. */ register_post_meta( '', '_wpajax_enable_landing_template', array( 'sanitize_callback' => 'rest_sanitize_boolean', 'show_in_rest' => true, 'type' => 'boolean', 'auth_callback' => function () { return current_user_can( 'edit_posts' ); }, ) );
Code language: PHP (php)

As predicted, the first argument is an empty string. This will register the meta box for every single post type. This is what we want. We want the ability to turn every post, page, or whatever, into a full-page template.

For the custom field, I’m naming it: _wpajax_enable_landing_template

The underscore is there to prevent the custom field from showing up in the regular custom fields area if someone were to enable the custom field view within the block editor.

Up next is our array filled with arguments.

sanitize_callback

The sanitize_callback argument lets us decide how we’re going to sanitize our data before it’s stored in the database. In this case, it’s a boolean. So we use the callback function that is built into WordPress called rest_sanitize_boolean. This ensures that the value passed to it is indeed a boolean.

show_in_rest

Passing true to this argument will allow the meta box to be used within the Block Editor, since almost anything in the Block Editor needs to have REST enabled.

type

Type can be a string, number, boolean, object, and even an array. In our case, this meta box is a boolean.

auth_callback

This allows us to make sure that people editing the meta box value can access it securely. In our case, we pass it a function that ensures that the user editing the meta has the edit_posts capability.

Registering the Meta Boxes… Continued.

Let’s go ahead and wire up the remaining meta boxes.

/** * Register Meta Boxes. */ public function register_meta_boxes() { /** * Meta for enabling/disabling the full-screen template. */ register_post_meta( '', '_wpajax_enable_landing_template', array( 'sanitize_callback' => 'rest_sanitize_boolean', 'show_in_rest' => true, 'type' => 'boolean', 'auth_callback' => function () { return current_user_can( 'edit_posts' ); }, ) ); /** * Meta for enabling/disabling the theme's stylesheet (optional). */ register_post_meta( '', '_wpajax_disable_theme_stylesheet', array( 'sanitize_callback' => 'rest_sanitize_boolean', 'show_in_rest' => true, 'type' => 'boolean', 'auth_callback' => function () { return current_user_can( 'edit_posts' ); }, ) ); /** * Meta for body class to add (optional). */ register_post_meta( '', '_wpajax_set_body_class', array( 'sanitize_callback' => 'sanitize_title', 'show_in_rest' => true, 'type' => 'string', 'auth_callback' => function () { return current_user_can( 'edit_posts' ); }, ) ); /** * Meta for background color of landing page (optional) */ register_post_meta( '', '_wpajax_set_body_color', array( 'sanitize_callback' => 'sanitize_text_field', 'show_in_rest' => true, 'single' => true, 'type' => 'string', 'auth_callback' => function () { return current_user_can( 'edit_posts' ); }, ) ); }
Code language: PHP (php)

Conclusion

Now all of our meta boxes are wired up and ready to be displayed and manipulated. Nothing will show at this point. We have to move into some fancy JavaScript to get this to happen.