Extending Gutenberg With SlotFill and Filters
Last year, WordPress 5.0 launched with an entirely new, block-based content editing experience—previously codenamed Gutenberg—and along with it, a new paradigm for developers to extend the editing and content publishing experience.
SlotFills enable developers to extend WordPress’ new editor interface.
We agreed that—due to the constraints of the classic TinyMCE-based editor—many developers were relying heavily on adding controls better served as contextual properties of a content block. For example, adding a block for a “featured video”—with properties that appear when editing the block—is much more elegant than adding yet another “meta box” to every publishing screen. It was common to see dozens of fields below the actual content editor. The new editor is a huge leap forward in addressing that deficient user experience, as we saw first hand in a Podcasting plugin project that was an early adopter of both editors.
At the same time, we still saw clear use cases for expanding on the fields and interfaces outside of the editor itself—adding properties, information, and workflow tools that are specific to the entire document, and not one block of content, much like categories or the publication status.
SlotFill is a modernized take on classic interface “hooks and filters”—a convention for empowering developers to extend the publishing interface outside of the block editor itself—that found its way into WordPress.
There are currently seven SlotFills available in the “edit post” package that facilitate extending the content editing screen:
We worked with the Gutenberg Team to spearhead the adoption of SlotFills and thus empower other developers to further extend WordPress’s content publishing experience. Partly the inspiration for our efforts, we leveraged the PluginPostStatusInfo SlotFill for our Distributor plugin, to insert content distribution data in the Status and Availability Panel, making it easy and intuitive for publishers to see critical information.
As seen in the screenshot below, our work on SlotFills allowed us to maintain the classic editor UI conventions (shown on the mobile display) for Distributor in the new block-based editor.
After receiving a positive response from the community, the decision was made to merge the SlotFill developer documentation into the official WordPress Core Gutenberg Handbook as seen below.
The Gutenberg SlotFill paradigm is still evolving.
While the focus has been on the adding SlotFills to the panels and user interface surrounding the block-based editor itself, there are also four slots available at the block-level; one example being the ability to add Inspector Controls to blocks. Documentation for these slots, with examples and screenshots, is in progress.
Other additions to surrounding panels are also in progress, including PluginDocumentSettingPanel that introduces a new SlotFill below the Status & Availability panel in the document settings-sidebar component. This new SlotFill, as show below, has been officially added to the next WordPress core release.
Learn More About SlotFill And Filters
In the meantime, check out the free, open-source Gutenberg SlotFill and Filter Demos plugin to experiment with and experience how it works. If solutions like this get you excited, consider coming to work with us!
One issue I’ve had with the Gutenberg editing experience is that the sidebar is too small to have complex/larger fields be easily edited there.
Is using the Editor mode on blocks the only way around this, currently?