1

I am trying to render a Slot/Fill using createSlotFill from @wordpress/components.

I have created a test extension using @wordpress/create-block and I have edited the Edit component like so:

const { Fill, Slot } = createSlotFill( 'MyFill' );
const MyFillItem = () => <Fill>My item in the editor</Fill>;

export default function Edit() {
    return (
        <p { ...useBlockProps() }>
            <Slot />
            { __( 'Fill Test – hello from the editor!', 'fill-test' ) }
        </p>
    );
}

however when rendering in the editor it does not show my MyFillItem. Even if I explicitly render MyFillItem it does not show up.

Am I missing any steps?

1 Answer 1

2

By wrapping everything in a <SlotFillProvider> and rendering MyTestFill it works, here is the code:

const { Fill, Slot } = createSlotFill( 'MyFill' );
const TestFill = () => <Fill>My item in the editor</Fill>;

export default function Edit() {
    return (
        <p { ...useBlockProps() }>
            <SlotFillProvider>
                <Slot />
                { __( 'Fill Test – hello from the editor!', 'fill-test' ) }
                <TestFill />
            </SlotFillProvider>
        </p>
    );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.