Force HTML blocks to be in preview mode when in a shared block #7138
Conversation
Introduces Disabled.Consumer so that components are able to tell if they are wrapped in a <Disabled> or not. Then, use this to force HTML blocks to render in preview mode when disabled. This will be the case when in a shared block.
noisysocks
added
[Type] Enhancement
There was a problem hiding this comment.
It took me a while to understand what kind of magic is happening in this PR. I like this usage of Context API. I must admit it nicely takes advantage of the virtual DOM tree scoping to inform child blocks that they should be in disabled state ❤️
It also tests well, very nice improvement. Can we use it also with other blocks that have preview mode, maybe shortcodes?
|
Thanks @gziolo! To my knowledge, the HTML block is the only block that has a distinction between edit mode and preview mode when viewed in the visual editor. |
| <div ref={ this.bindNode } className="components-disabled"> | ||
| { this.props.children } | ||
| </div> | ||
| <Provider value={ true }> |
There was a problem hiding this comment.
In my testing, if we set the default value for context above to true, there's no need to pass value at all.
i.e.
const { Consumer, Provider } = createContext( true );
// ...
return <Provider>{ /* ... */ }</Provider>;
|
@aduth, the thing is that you want to default to false so you could override the value with the consumer with true only for selected branches - shared block in edit mode as of this PR. |
|
Oooh right, makes sense. I guess I forgot that the consumer is expected to be used even when a provider ancestor doesn't exist (i.e. detect that element is, in-fact, not disabled). |
Fixes #4875. Supersedes #5298.
Introduces
Disabled.Consumerso that components are able to tell if they are wrapped in a<Disabled>component.We then use this functionality to force HTML blocks to render in preview mode when disabled. This means that HTML blocks always render in preview mode when they are shared which is a nice UX enhancement.
How has this been tested?
I unfortunately had to temporarily skip all of the
Disabledtests because Enzyme does not support React 16.3 APIs as of yet (enzymejs/enzyme#1513).I manually tested by: