{"id":63,"date":"2022-11-18T15:18:25","date_gmt":"2022-11-18T15:18:25","guid":{"rendered":"https:\/\/developer.wordpress.org\/news\/?p=63"},"modified":"2023-09-07T13:51:12","modified_gmt":"2023-09-07T13:51:12","slug":"how-to-extend-wordpress-via-the-slotfill-system","status":"publish","type":"post","link":"https:\/\/developer.wordpress.org\/news\/2022\/11\/how-to-extend-wordpress-via-the-slotfill-system\/","title":{"rendered":"How to extend WordPress via the SlotFill system"},"content":{"rendered":"\n
\n

WordPress developers have relied on Hooks AP<\/a>I since version 2.0 to extend the functionality of WordPress and until WordPress 5.0, it was the only way. <\/p>\n\n\n\n

In WordPress 5.0, the WordPress SlotFill system was introduced as part of the Gutenberg project and is the extension paradigm that allows developers to extend the UIs introduced with the Gutenberg project such as the Post Editor and the Site Editor.<\/p>\n\n\n\n

At a high level, the SlotFill system is an extension paradigm that allows developers to register plugins containing content, or Fills, to be displayed in a specific location, or Slot, in the UI. <\/p>\n<\/div>\n\n\n\n

\n

How does it compare to Hooks?<\/h1>\n\n\n\n

Historically, if a developer wanted to add UI elements to the WordPress admin, there would be an Action exposed that they could \u201chook\u201d into.<\/p>\n\n\n\n

For example, if the edit_form_after_title <\/code>action was leveraged, it was possible to add a secondary title to the existing post-edit screen:<\/p>\n\n\n\n

add_action(\n   edit_form_after_title',\n   function() {\n       echo ''<input type=\"text\" class=\"widefat\" placeholder=\"Add secondary title\" \/>';\n   }\n);<\/code><\/pre>\n\n\n\n
Which would display as:<\/p>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
This was possible due to the action being exposed by calling do_action()<\/code> in a specific location in the files that are loaded to render the edit post screen.<\/p>\n\n\n\n
do_action( 'edit_form_after_title', $post );<\/code><\/pre>\n\n\n\n
Based on this, an Action can be viewed as having three steps:<\/p>\n\n\n\n
    \n
  1. A location is exposed for extension via a do_action()<\/code> call in WordPress core.<\/li>\n\n\n\n
  2. A developer creates a plugin ( or theme ) that contains a corresponding add_action()<\/code> call.<\/li>\n\n\n\n
  3. WordPress loads the page and when the do_action<\/code> is run, the custom code from the plugin is run in the location where do_action<\/code> was called.<\/li>\n<\/ol>\n\n\n\n
    SlotFill is similar to actions in the sense that they are also location-based. The actual implementation is much different, but the steps are very similar in concept<\/p>\n\n\n\n
      \n
    1. A Slot is exposed somewhere in WordPress core.<\/li>\n\n\n\n
    2. A developer registers a plugin with wp.plugins.registerPlugin(<\/code>) which contains a Fill for a corresponding Slot.<\/li>\n\n\n\n
    3. WordPress loads the page where the Slot is exposed and The SlotFill system renders the Fill content in the Slot location.<\/li>\n<\/ol>\n<\/div>\n\n\n\n
      \n
      The pieces of the puzzle<\/h1>\n\n\n\n
      The SlotFill system consists of five pieces that work together to render Fill content in Slot locations:<\/p>\n\n\n\n
        \n
      1. Slot component<\/li>\n\n\n\n
      2. Fill component<\/li>\n\n\n\n
      3. SlotFillProvider component<\/li>\n\n\n\n
      4. registerPlugin()<\/li>\n\n\n\n
      5. PluginArea component.<\/li>\n<\/ol>\n<\/div>\n\n\n\n
        \n
        Slot<\/h2>\n\n\n\n
        The Slot component is used to determine where in the UI the extension point will be exposed. Wherever this component is rendered is where the associated Fill components content will be displayed.<\/p>\n\n\n\n
        Slot accepts the following props:<\/p>\n\n\n\n