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

Block switcher icon no longer overrides custom background color #29130

Closed
sabernhardt opened this issue Feb 18, 2021 · 0 comments · Fixed by #29552
Closed

Block switcher icon no longer overrides custom background color #29130

sabernhardt opened this issue Feb 18, 2021 · 0 comments · Fixed by #29552
Assignees
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Blocks Overall functionality of blocks [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@sabernhardt
Copy link
Contributor

The block-switcher stylesheet no longer has a background color for block switcher icons in the disabled state.

PR #16390 added a gray background color to make sure the dark icon color had contrast, and then #19344 removed the light background.

Original report by @dingo_d on Trac

In the wp-includes/css/dist/block-editor-style.min.css there is a
.components-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors{color:#1e1e1e!important}

Which turns all the icons in the editor for blocks black (dark gray). Not sure why, as I don't see this in the GB on github 🤷🏼‍♂️

This is grating because when you are building your own blocks and icons, they are turned black, even though you set the color to be white for instance (when you want to switch one block to another).

We have fills in the icons set to currentColor so that the background of the icon can come through and it looks seamless in the block picker.

CSS overrides the color of the icon in the editor

@talldan talldan added [Feature] Blocks Overall functionality of blocks [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Bug An existing feature does not function as intended CSS Styling Related to editor and front end styles, CSS-specific issues. labels Feb 19, 2021
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Mar 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Blocks Overall functionality of blocks [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants