Show control conditionally in Gutenberg
-
I have this custom post type with two meta fields that I need to show as toggle controls (
RestrictControl
andSubscribeControl
) in thePluginDocumentSettingPanel
sidebar in the block editor. The thing is that I only want to showSubscribeControl
whenRestrictControl
is set. This is the code (redacted for clarity) I’ve got currently but it’s not working. Both controls are always displayed.Any ideas?
let RestrictControl = ({ restrict, onUpdateRestrict }) => ( <ToggleControl label={ __( 'Restrict viewing?' ) } checked={ restrict } onChange={ restrict => onUpdateRestrict( restrict ) } /> ); let SubscribeControl = ({ subscribe, onUpdateSubscribe }) => ( <ToggleControl label={ __( 'Add to newsletter?' ) } checked={ subscribe } onChange={ subscribe => onUpdateSubscribe( subscribe ) } /> ); const OptionsPanel = () => { const postType = select( 'core/editor' ).getCurrentPostType(); if ( 'custom_type' !== postType ) { return null; } return ( <PluginDocumentSettingPanel name='options' title={ __( 'Options' ) } className='options-panel' > <RestrictControl /> { restrict && ( <SubscribeControl /> ) } </PluginDocumentSettingPanel> ); } registerPlugin( 'options-panel', { render: OptionsPanel, })
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
- The topic ‘Show control conditionally in Gutenberg’ is closed to new replies.