Skip to content

Instantly share code, notes, and snippets.

@richardtape
Created September 12, 2019 21:13
Show Gist options
  • Save richardtape/4f620c52f493f25a804cf1ffc3e8588d to your computer and use it in GitHub Desktop.
Save richardtape/4f620c52f493f25a804cf1ffc3e8588d to your computer and use it in GitHub Desktop.
Gutenberg Slot and Fill
// Reduced Example. You'll need to do your imports.
// Add a custom control which contains a Slot
export const exampleAdditionalControl = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
return (
<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody title={ __( 'Example Panel', 'block-visibility' ) } >
<PanelRow>
<Slot name="example-slot" fillProps={ props } />
</PanelRow>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, 'exampleAdditionalControl' );
addFilter( 'editor.BlockEdit', 'plugin/namespace', exampleAdditionalControl );
// Add a Fill which passes through through the props from fillProps in the Slot
// The "name" of the Fill must match the name of the Slot
function ExampleFill() {
return (
<Fill name="example-slot">
{
( fillProps ) => {
return (
<SomeComponent props={ fillProps } />
)
}
}
</Fill>
);
}
registerPlugin( 'meh', { render: ExampleFill } );
// This is the output component which has the props passed from the Slot
// Which will be details of the selected block in this case.
function SomeComponent( fillProps ) {
console.log( fillProps );
return (
<div>This outputs in the PanelRow which contains the Slot</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment