Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contact Form Block: Lacks styles for block editor's dark palette #11853

Closed
laurelfulford opened this issue Jan 16, 2019 · 2 comments
Closed

Contact Form Block: Lacks styles for block editor's dark palette #11853

laurelfulford opened this issue Jan 16, 2019 · 2 comments
Assignees
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

Comments

@laurelfulford
Copy link
Contributor

The Contact Form block needs some styles for Gutenberg's dark background editor scheme.

Steps to reproduce the issue

  1. Start with a theme that has the dark scheme enabled 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)
  2. Add the Contact Form block

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 the body 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:
image

Form itself, with 'name' label focussed:
image

@simison simison transferred this issue from Automattic/jetpack Jan 17, 2019
@scruffian scruffian transferred this issue from Automattic/wp-calypso Apr 3, 2019
@scruffian scruffian added [Type] Bug When a feature is broken and / or not performing as intended [Feature] Contact Form [Status] Needs Design [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack labels Apr 3, 2019
@simison
Copy link
Member

simison commented Feb 19, 2020

FYI, easiest way to test these is with https://github.com/WordPress/gutenberg-starter-theme

@apeatling
Copy link
Member

Tested and this will be fixed with #15286

@apeatling apeatling self-assigned this May 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
None yet
Development

No branches or pull requests

6 participants