Core Tech
Gutenberg
Source Directory
Slotfills

Slotfills

For PMC Slotfills are largely used to replace legacy metaboxes with Gutenberg features and are typically reading and writing to post meta.

Adding a Slotfill

Refer to the Core Slotfill Reference (opens in a new tab) which breaks down the anatomy of a slot as well as available Core slots we can extend.

function return_config() {
	return [
		'any'  => [
			'slotfills' => [ 'custom-slotfill' ],
		],
	];
}
add_filter( 'pmc_gutenberg_enable_block_editor', 'return_config' );

Creating a Custom Slotfill

A slotfill, like filters, are just React Components that are called using the registerPlugin (opens in a new tab) method.

The mimnimum requirements beyiond that is that the return value contains a PluginDocumentSettingPanel (opens in a new tab) for which to house your custom feature.

See pmc-gutenberg/src/slotfills (opens in a new tab) for prior art.

Custom Slots

PMCSidebarPanel

This slot allows injecting elements into the PMC Plugin Sidebar without directly interacting with the pmc-sidebar.js file in pmc-gutenberg/src/sidebars. Available to add brand-specific features into the PMC Plugin Sidebar.

Example

Custom slotfill defined:

/**
 * WordPress dependencies
 */
import { createSlotFill } from '@wordpress/components';
 
/**
 * Generate slotfill.
 */
export const { Fill, Slot } = createSlotFill( 'PMCSidebarPanel' );
 
const PMCSidebarPanel = ( { children } ) => <Fill>{ children }</Fill>;
 
PMCSidebarPanel.Slot = Slot;
 
export default PMCSidebarPanel;

Custom slotfill utilized:

/**
 * WordPress dependencies.
 */
import { __ } from '@wordpress/i18n';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { registerPlugin } from '@wordpress/plugins';
/**
 * Custom slotfill.
 */
import PMCSidebarPanel from './custom-slotfill';
 
/**
 * Shared.
 */
const sidebarName = 'pmc-sidebar-panel';
const sidebarLabel = __( 'PMC Controls', 'pmc-gutenberg' );
 
/**
 * Sidebar panel consolidation.
 *
 * @return {JSXElement} Sidebar panel.
 */
const PMCSidebar = () => (
  <>
    <PluginSidebar>
      <PMCSidebarPanel.Slot>
        { ( fills ) => (
          <>
            { fills }
            { /* Custom fills above */ }
          </>
        ) }
      </PMCSidebarPanel.Slot>
    </PluginSidebar>
    <PluginSidebarMoreMenuItem target={ sidebarName } icon={ pmcLogo }>
      { sidebarLabel }
    </PluginSidebarMoreMenuItem>
  </>
);
 
registerPlugin( sidebarName, { render: PMCSidebar } );
SidebarsStore