How can I add conditional control field in Inspector controls of Gutenberg?

风流意气都作罢 提交于 2019-12-25 03:15:27

问题


I'm developing a countdown Block for Gutenberg. I have 7 styles in the block, So I want to show/hide some control fields in the inspector control based on the style.

As far I know Gutenberg didn't introduce conditional field yet. So I want to do it by custom code. Here is my full code for the inspector controls. https://pastebin.com/177BDgMQ

And here is a screenshot of what i want. I'm a javascript beginner, so can't understand how can I apply a condition in tenter code herehere.


回答1:


I've learned how to put the condition. The condition should be like this:

{ style == 2 && (
<PanelColor
    title={ __( 'Text Bg Color', 'prefixx' ) }
    colorValue={ textBgColor }
    initialOpen={ false }
>
    <ColorPalette
        value={ textBgColor }
        onChange={ textBgColor => setAttributes( { textBgColor } ) }
    />
</PanelColor>
) }


来源:https://stackoverflow.com/questions/52136911/how-can-i-add-conditional-control-field-in-inspector-controls-of-gutenberg

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!