Showing custom CSS in the Styles preview area

[paaljoachim]

Is your feature request related to a problem? Please describe.
For a few blocks we have the Styles area showing for example various button, Seperator etc style.
These seem like default CSS showing up in the Styles preview area. It in a sense gives the impression that one can just add the block CSS and create a new styling that will show up in the Styles area.

Example of the Styles area in the Seperator block:

I believe that there are variants of this same issue.

Having a simple way to add CSS and have it preview up in the Styles area would be awesome.

[jwold]

Wanted to make sure I understand the need here. Are you suggesting:

1. If I see a dot block separator, I should expect to see that on the frontend?
   or
2. Are you suggesting to add a CSS style field in the sidebar?
   or
3. Are you suggesting to add some "styling" options in the sidebar, such as color, size, space, etc?

[paaljoachim]

(I apologise for my lack of correct words.)

Default styling here is:
Short Line, Wide Line and Dots.

Clicking the Advanced one will see the CSS:
is-style-default
is-style-wide
is-style-dots

Lets say that I wanted to add a custom style something like this wireframe:

I would click custom and then click the Advanced section and fill in the CSS I choose to use.
It could start with a suggestion like this:

I then fill in with the word thick.

Then go to the style.css and add the following CSs.

.is-style-thick {
	color: red;
        height: 15px;
	width: 250px;
        margin: auto;
}

I then go back to the Gutenberg editor. The custom style preview box which was earlier empty (as I had not added the css) now shows the CSS used. Something like this:

Notice the new style preview box shows the red line. Notice there is also a new custom box automatically added so that one can create another style. Also notice the red line in the layout.

This would be a good way to add new CSS to various blocks and have also a preview inside the Styles area of what it looks like. The user would then also have additional styles to select from.

[mtias]

I think this is very close to the proposal in #7551. Closing to consolidate.