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

Add support for setting widget areas as dark (darker background, light content) #35890

Open
paulwilde opened this issue Oct 22, 2021 · 1 comment
Labels
[Feature] Widgets Screen The block-based screen that replaced widgets.php. Needs Technical Feedback Needs testing from a developer perspective. [Type] Enhancement A suggestion for improvement.

Comments

@paulwilde
Copy link
Contributor

Unless I'm mistaken, there is currently no support for setting a sidebar widget area as having a dark background, therefore changing the content and appender to a lighter colour.

In the main post editor this is typically handled by using the .is-dark-theme CSS class.

Currently this is how a widget area looks with the background colour set by manually styling the background-color for [data-widget-area-id="header"] (with the sidebar name being "header" in this case):

image

Whereas by applying .is-dark-theme to the .wp-block-widget-area__inner-blocks container for the widget area the appender and paragraph content is now more visible. The colour of the appender automatically changes (handled by core), whereas the paragraph text colour has been styled by myself:

image

Currently the only approach to styling this would be to manually style every block and the core appender for the [data-widget-area-id="header"] selector, but this is less than ideal as it populates the amount of CSS needed and also means I would need to style core UI (the appender).

I propose 2 possible solutions to handle this:

  1. Add a filter where you can manually set the CSS classes which are applied to the .wp-block-widget-area__inner-blocks container, where one argument of the filter is the name of the widget so you can then either apply the CSS class(es) to a particular widget area or all of them.
  2. Enhance the register_sidebar API to add an array argument such as 'dark_theme' => true, where it will automatically apply the .is-dark-theme class. Arguably more user-friendly than the first option, but more restrictive.
@stevenlinx stevenlinx added [Type] Enhancement A suggestion for improvement. [Feature] Widgets Screen The block-based screen that replaced widgets.php. Needs Technical Feedback Needs testing from a developer perspective. labels Oct 27, 2021
@noisysocks
Copy link
Member

Can we detect whether or not to add .is-dark-theme based on the background colour? I thought this is what the post editor did, but I could be mistaken.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Widgets Screen The block-based screen that replaced widgets.php. Needs Technical Feedback Needs testing from a developer perspective. [Type] Enhancement A suggestion for improvement.
3 participants