Contact Form Block: Lacks styles for block editor's dark palette #11853
Labels
[Feature] Contact Form
[Focus] Blocks
Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack
[Pri] Normal
[Size] M
[Status] Needs Design
[Type] Bug
When a feature is broken and / or not performing as intended
The Contact Form block needs some styles for Gutenberg's dark background editor scheme.
Steps to reproduce the issue
add_theme_support( 'dark-editor-style' );
(unfortunately the one I discovered this with is currently in dev, but you can add this to any theme -- it switches Gutenberg's interface to work against a dark background, but the theme also has to include styles to actually add the dark background to the editor. More info)What I expected
That the interface would have styles that work with the
dark-editor-style
.What happened instead
It doesn't look like styles are included.
The first screen is mostly fine -- the only missing styles appear to be for the icon (screenshot below shows the white icon used for the image block, for contrast).
The form has more issues, mostly due to a mix of it seeming to inherit some styles (white text for labels, unless they're focused), and other styles from the block clashing (like the white backgrounds on the text areas for labels).
Gutenberg adds a
.is-dark-theme
class to thebody
when the scheme is enabled that can be used to adjust the styles.It's possible this is an issue with the other blocks -- I haven't had a chance to test yet!
Screenshots
Initial block appearance, with dark icon against dark background:
Form itself, with 'name' label focussed:
The text was updated successfully, but these errors were encountered: