Show the block styles in the block inspector#10543
Conversation
gziolo
left a comment
There was a problem hiding this comment.
Code part looks great 💯, please wait for the design feedback before proceeding.
I love how composable Gutenberg is, one component which can be reused in so many places ❤️
| { ( fills ) => ! isEmpty( fills ) && ( | ||
| <div><InspectorControls.Slot /></div> | ||
| { !! blockType.styles && ( | ||
| <div className="editor-block-inspector__styles"> |
There was a problem hiding this comment.
Minor: We put a class name inside div in here and inside PanelBody for the advanced controls. Is it possible to use a common approach? It would be nice to put it inside PabelBody as we probably will want to remove those wrapping div elements at some point. It's NOT a blocker :)
| } | ||
|
|
||
| .editor-block-inspector__styles .editor-block-styles__item { | ||
| width: 100%; |
There was a problem hiding this comment.
Glad it only took this to work :)
There was a problem hiding this comment.
I love how composable Gutenberg is, one component which can be reused in so many places ❤️
Yeah :)
|
"Styles" should probably be placed at the top of all panels. |
|
After some testing decided to fit them in two columns as it makes a better use of space:
|
9c542bf to
4468a54
Compare
closes #10520
This PR adds the styles selector to the block inspector like shown in this screenshot.