Post Metadata, Gutenberg, and SlotFills – Part 1

When I started writing this post, the idea behind it was going to be how to two things:

  1. Understand SlotFills in the context of WordPress and Gutenberg
  2. Create a SlotFill for introducing metadata

But the more I began writing, the more I recognized there’s a lot of material to cover. So in an attempt to write content that’s short, to the point, and practical (with the theory behind it coming later)

I thought I’d start with the first point and move to the next. The general idea behind what I want to do i sthis:

  • Provide a short introduction to SlotFills
  • Explain how to add your own SlotFill to WordPress
  • Save data from the user to the database (and verify it’s there)
  • Adding a column to display the post metadata in the All Articles view
  • Search the data just like you would titles and content
  • And then a short note about table prefixes

This is not a table of contents but a general guide of where I’m going with all of this. (Though feel free to bookmark this page.)

With that said, let’s started with a general introduction to SlotFills before going any further.

Adding Post Metadata in Gutenberg, Part 1: SlotFills

If you’re new to working with the Gutenberg editor (and most of us are given that it really hasn’t been in WordPress core that long), then the rest of this post and this series is going to depend on your understanding of SlotFills.

Luckily, the WordPress Block Editor Handbook does a decent job of breaking down how to introduce a new option to the sidebar of the editor. If you’re a back-end developer, consider this a new or updated way to add meta boxes, options, or settings at the post level.

Slot and Fill are components that have been exposed to allow developers to inject items into some predefined places in the Gutenberg admin experience.

Block Editor Handbook

You may also read other definitions of SlotFills as one or more of the following:

  • A way for developers to extend the Gutenberg interface
  • A way to emulate meta boxes (or other actions and filters) without the use for backend code
  • A way to use block-editor based technology outside of the block editor

All of the above ways are ways accurate none of which or wrong. And all are helpful in understanding what SlotFills work and how SlotFills work regardless of what background from which you’re coming.

Case in point, I’m coming from a backend perspective so the idea of actions, filters, and extending the interface outside the editor are helpful for me.

Why Slot and Why Fill?

As with most things in programming, SlotFills are a combination of two ideas. If you don’t know React (and I’m not one who does yet – but I’m getting there), they are two aptly named concepts:

  • Slots are essentially JSX, an extension of JavaScript, components that are passed into a props, which is short for properties, and are inputs that are processed and then return React elements that can be rendered or used elsewhere in the application.
  • Fills are a little more abstract because they work with slots and they allow us to, ahem, fill pre-defined spaces in the UI.

Seeing them in action should solidify this concept, and that’s what I’m going to work on introducing in the next article.

Further Reading

if you’re interested in a few resources to review to get started, then I recommend the following:

  • React Slot & Fill. “Slot & Fill component for merging React subtrees together. Portal on steroids.”
  • SlotFill. “Slot and Fill are a pair of components which enable developers to render elsewhere in a React element tree, a pattern often referred to as “portal” rendering.”
  • Pass Multiple Children to a React Component with Slots. “You need to create a reusable component. But the children prop won’t cut it. This component needs to be able to accept multiple children and place them in the layout as it sees fit – not right next to each other.”

And that should set you up for what’s to come.

In the Next Post, Adding a SlotFill

In the next post, I’m going to go through the process of introducing a simple SlotFill that will add an input to the sidebar for the Gutenberg editor.

Credit Where It’s Due

I’d also like to comment that this particular post wouldn’t be possible without the insight of front-end engineering colleagues, like Mike, at WDS who are currently in the process of building some seriously cool things with Gutenberg.