Block style variant preview styles

[samikeijonen]

For example Button block have 3 style variants. In the editor I can bring my own styles for these variants.

For example default button style:

However in the preview styles seems to come from default Core styles:

I'd except my styles to work on preview automatically. This was kind of hard to debug since the preview was populated dynamically on hover.

For the button block itself I have .edit-post-visual-editor .wp-block-button__link {}.

[karmatosed]

I agree the preview should be 'what you'd expect in theme using'. I am not sure in saying that the technical implications, but let's find out!

[ZebulanStanphill]

@samikeijonen Just to be clear, do the preview styles look like what the block looks like in the editor, and do the editor styles look like the theme styles?

I guess this kind of comes back to long-term wanting Gutenberg to directly use the main theme CSS to style blocks in the editor. What were the obstacles to having that right now? @karmatosed

[samikeijonen]

@SuperGeniusZeb I have screenshots in the first comment what the block looks like in the editor, and what does it look like in the preview.

Note that I dequeue wp-core-blocks and even deregister wp-core-blocks-theme. That's why it's even more weird that I get "Core styles" in the preview from somewhere.

[youknowriad]

@samikeijonen I think the issue is that you're using .edit-post-visual-editor as a namespace and since popovers are rendered outside of the editor’s namespace it doesn’t work.

Can I suggest to just use .wp-block-button__link {} to style your button and enqueue the style using the editor styles https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#editor-styles ?

[youknowriad]

Noting that I also opened this PR #10956 which make sure we explicitly apply the editor styles (provided following the approach from the link above) to the previews.

[samikeijonen]

Thanks @youknowriad. True, I was using .edit-post-visual-editor as a namespace.

I tried the editor styles way but that didn't quite worked for me. At the moment I'm using PostCSS to roll namespace automatically. I'll let you know what I come up with.

[strarsis]

Would hovering a variant selection already show a preview in editor?

[youknowriad]

@strarsis It shows a preview on the right of the "popover", not directly in the editor. (like the mockup above)

[designsimply]

@samikeijonen I can help test this but would need really clear instructions. Any chance you can provide a code snippet for your button style variation and help me understand exactly where to add it for testing?

[samikeijonen]

@designsimply In my short test button variant styles now works. I'm going to close this for now, I'll re-open if I find something.