Inline block preview: add preview block in nested global style panels #46401
Conversation
| blocks={ getBlockFromExample( name, blockExample ) } | ||
| /> | ||
| </div> | ||
| <BlockPreview |
There was a problem hiding this comment.
BlockPreview uses memo, I was hoping the preview to not re-render on forward and back navigation.
However, it still renders.
Also tried wrapping BlockPreviewPanel component with memo, yet it re-renders.
Please suggest.
There was a problem hiding this comment.
Hmm.. is it re-rendering because the clientId of the elements is changing? I guess memo should stop this happening, but it still re-renders?
There was a problem hiding this comment.
You can't avoid re-renders unless you're using the same component instance. So you'd need the same <BlockPreview /> call for all the previews.
ntsekouras
added
Needs Design Feedback
|
This seems valuable. The only challenge here is that it animates with the sliding panel, and of course it would. I suppose it could be an argument for showing this preview only in the drilldown panels, i.e. not on Blocks > Button, but on Blocks > Button > Typography, etc. But for now, seems good to move forward with this and explore further. |
madhusudhand
force-pushed
the
inline-preview-2
branch
from
1e122fb
to
6af94db
Compare
I tried, but failed to avoid re-render on drilldown panels so that the transition is smooth. Also, there is an idea of hiding the |
madhusudhand
force-pushed
the
inline-preview-2
branch
from
6af94db
to
c6aa163
Compare
What?
This is a followup for #45719
It adds the inline preview block under nested style panels
typography,colors,borderandlayout.Why?
This allows to preview the block while editing the styles without having to navigate to main panel.
How?
Moved spacer into the BlockPreviewPanel component and included the component in all the respective panels.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast