Search code examples
wordpresswordpress-gutenberggutenberg-blockscreate-guten-block

Standard Editor Styles for Components in Gutenburg for Wordpress

I'm experimenting with Gutenburg blocks in Wordpress using the create-guten-block tool. What I wanted to know is whether there are standard styles that we can use to style our interfaces. As an example, I have created a very simple control using the TabPanel component which renders as:

enter image description here

Pretty ugly and if we code the component such that the orientation is vertical, there is no change to the layout.

Are we, as developers, responsible for styling these components or is there a standard set of styles we can pull in and use?

Solution

  • For some components you are responsible of styling. Wordpress has added styles for the <TabPanel>component. However Wordpress only uses it in the Block Editor Sidebar, not in the Blocks themselves.

    You can get an inspiration from here where the tab styles are defined. It should be easy to mimic them and adapt them to your needs.