Gutenberg Slot and Fill

gutenberg-slot-and-fill.js

// 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>
    );
}