10up Releases New Plugin That Shows How to Extend Gutenberg’s Document Panel Using SlotFill and Filters

If you’ve been looking for a way to add slots and controls to the Document panel in WordPress’ content editor, check out a new plugin released by 10up called Gutenberg SlotFill and Filter Demos.

SlotFill and Filters is a new take on the classic filters, actions, and hooks system in WordPress. Slot and Fill are React components that enable developers to inject items into predefined spaces in the new editor.

“SlotFill is a pattern for component extensibility, where a single Slot may be occupied by an indeterminate number of Fills elsewhere in the application,” Ryan Welcher said.

An Example of SlotFill in Action

In the demo screenshot above, 10up was able to stick to the Classic UI conventions in the mobile app while displaying the same information in the Document panel of the new editor.

SlotFill initially started as a GitHub repo where Welcher collected his findings. The repo eventually turned into a library of examples and explanations for SlotFill and JavaScript based filters.

In January, Welcher submitted a pull request to the Gutenberg repo asking for SlotFill to be added to the document sidebar. His request received positive feedback and not only has SlotFill’s documentation been added to the WordPress Core Gutenberg Handbook, but the functionality is available in Gutenberg 6.1 and will be available in WordPress 5.3.

To learn more about SlotFill, check out Welcher’s release post or the Gutenberg SlotFill and Filter Demos plugin. Welcher is also doing a session at the JavaScript For WordPress Conference, on July 11-13, 2019, where he’ll showcase basic and real-world examples of SlotFill in use.

Would you like to write for WP Tavern? We are always accepting guest posts from the community and are looking for new contributors. Get in touch with us and let's discuss your ideas.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.