I want to use the PluginDocumentSettingPanel
similar to how the InspectorControls
component works, where I can add my own controls from different parts of the application. But if there aren't any controls (meta fields, input controls, etc) for a certain post type for example, I'd like to not show the setting panel at all.
Here is what I have so far, but I'm not sure how to make it conditional based off if any of the slot fill's children will be rendered. In this example, a post type that supports "author" would show the settings panel, but a type that does not support it should not show the panel at all.
SitePostOptions.js
import { createSlotFill, withFilters } from '@wordpress/components'
import { PluginDocumentSettingPanel } from '@wordpress/edit-post'
import { registerPlugin } from '@wordpress/plugins'
const { Fill: SitePostOptions, Slot } = createSlotFill('SitePostOptions')
SitePostOptions.Slot = Slot
export { SitePostOptions }
registerPlugin('plugin-document-setting-panel-site-post-options', {
render: withFilters('site.postOptions')(() => {
return (
<PluginDocumentSettingPanel name="site-post-options" title="Options">
<SitePostOptions.Slot />
</PluginDocumentSettingPanel>
)
}),
})
example.js
import { PanelRow } from '@wordpress/components'
import { createHigherOrderComponent } from '@wordpress/compose'
import { PostTypeSupportCheck } from '@wordpress/editor'
import { addFilter } from '@wordpress/hooks'
import { SitePostOptions } from './SitePostOptions.js'
addFilter('site.postOptions', 'site/post-options/example', createHigherOrderComponent((Block) => (props) => {
return (
<>
<Block { ...props } />
<PostTypeSupportCheck supportKeys="author">
<SitePostOptions>
<PanelRow>
Example test
</PanelRow>
</SitePostOptions>
</PostTypeSupportCheck>
</>
)
}, 'withExample'))