Add dark black header and footer variation #307
Conversation
…harcoal-1 background color
…nsure charcoal-2 isn't displayed by default when a variation is set.
|
This is probably more a question for Design (@jasmussen), but if we're introducing a new header style, do the hover colors need to be updated too? The other styles have a noticeably different hover/submenu background color, but the default black blends in with charcoal-1 (#1e1e1e vs #1c2024).
|
| background: var(--wp-global-header--background-color); | ||
| background: inherit; |
There was a problem hiding this comment.
Rather than changing this, you can add another "case" to _common.pcss to override --wp-global-header--background-color. See how it's done for the other styles here:
…or each variation were not changed to account for backwards-compatibility support.
| @@ -13,9 +13,10 @@ import { useBlockProps } from '@wordpress/block-editor'; | |||
| import metadata from './block.json'; | |||
|
|
|||
| const variations = [ | |||
| { label: __( 'White on black (default)', 'wporg' ), value: 'white-on-black' }, | |||
| { label: __( 'White on charcoal-1', 'wporg' ), value: 'white-on-dark-black' }, | |||
There was a problem hiding this comment.
Nothing is using this value yet, correct? So it's not too late to try to improve the naming? For me the range of values is where it's going to get messy if/when we add more variations...
| { label: __( 'White on charcoal-1', 'wporg' ), value: 'white-on-dark-black' }, | |
| { label: __( 'White on charcoal-1', 'wporg' ), value: 'white-on-charcoal-1' }, |
Also I wonder if it's still manageable to migrate the existing usages to new values while we are still relatively early in the overall redesign. All the pages are saved as patterns in source control in the various repos, so we could replace eg. white-on-black with white-on-charcoal-2, and deploy all at once.
Or maybe I'm worrying too much about this... feel free to give me a reality check 😂
There was a problem hiding this comment.
For white-on-black
1 usage in wporg-main-2022
2 usages in wporg-showcase-2022
2 usages in wporg-parent-2021
Several in this repo
There was a problem hiding this comment.
Usages are even better for white-on-blue
There was a problem hiding this comment.
@adamwoodnz Perhaps for a migration strategy we could do the following:
- Add both the legacy and new values to the switch statement so we can support both the legacy and new new names.
- Create an issue so we can update the content someday.
- Eventually remove the support from the switch statements.
What do you think? I'm going to hold off until we find out whether we are going to use charcoal-1 or charcoal-2, but I think it's a good idea to implement someday.
There was a problem hiding this comment.
Yeah I was a bit hesitant to suggest we reuse the same color. I think that makes sense for simplicity's sake.
Having both values in the switch could work.
There was a problem hiding this comment.
Would a deprecation work? It might only apply to JS blocks.
If so, I think the proposed migration strategy sounds good.
Good question. I guess it depends on whether we can use charcoal 1 or 2 right? (related, #308) I'd be happy to reuse the existing charcoal for simplicity, unless @panchovm has an opportunity to chime in otherwise. |
|
Agree with @jasmussen on using the existing header scheme. |
|
Sounds good. In that case, I'm going to close this PR. If we want to implement the new naming convention, we always can in the future. |
Currently, the header and footer blocks don't support the charcoal-1 color. This variation is needed for the Enterprise landing page.
To test: