Inject a React component into a named slot (Tier 2)

Free Advanced Since v1.0.0

For interactive UI that can’t be expressed as a field declaration — custom pickers, live previews, embedded third-party widgets — add-ons register React components directly into named extension slots via window.BenecasterExtensions.registerFill(). The add-on must ship compiled JavaScript. Tier 1 (PHP config) and Tier 2 (SlotFills) are complementary: use Tier 1 to declare the tab shell, Tier 2 to fill it with complex interactive content.

Code

<?php
// my-addon/resources/js/admin.js (compiled)
const MyDashboardCard = ({ showId }) => (
    <div className="p-4 border rounded">
        <h3>My Add-on Stats</h3>
        <p>Show ID: {showId}</p>
    </div>
);

wp.domReady( () => {
    window.BenecasterExtensions?.registerFill(
        'BenecasterDashboardCards',
        MyDashboardCard
    );
} );

// Named slots and their fillProps:
// BenecasterEpisodePrePublish        — { episode_id, show_id }
// BenecasterEpisodeEditorTab_{id}    — { episodeId, showId }
// BenecasterEpisodeEditorAfterFields — { episodeId, showId }
// BenecasterShowEditorAfterFields    — { showId }
// BenecasterDashboardCards           — { showId }
// BenecasterSettingsPage_{id}        — { showId }
// BenecasterSubscriberDetailAfter    — { subscriberId, showId }