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

Duotone and social icons are hard coded as hex values and this is not good when switching style variations #46547

Open
anarieldesign opened this issue Dec 14, 2022 · 12 comments · Fixed by #51020
Assignees
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts [Feature] Theme Style Variations Related to style variations provided by block themes [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@anarieldesign
Copy link

Theme is using predefined color palette. For example primary or accent slug. When I switch to different style variations, block patterns are changing the colors, as I'm using slugs for the colors. But duotone and social icons are hard coded hex colors ("duotone":["#211F1D","#E61D3E"]) and they are always in the same color. I definitely think they should not be hard coded as hex values, as that reduces the creativity of patterns. For example in our latest theme I needed to choose black color for the social icons as if I choose the accent color and switch to other style variation it will not change to the accent color of that style variation. As it's hard coded hex color it always stay in that color and I think this is not good.

Hope this makes sense.

@bph
Copy link
Contributor

bph commented Dec 14, 2022

Thanks for raising this, @anarieldesign
Do you have some steps on how to reproduce this, or a short video that would illustrate the problem with the Twenty-Twenty-Three theme?

It would be helpful if there were more context available

@bph bph added the [Block] Social Affects the Social Block - used to display Social Media accounts label Dec 14, 2022
@annezazu annezazu added [Feature] Theme Style Variations Related to style variations provided by block themes [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Dec 14, 2022
@ajlende
Copy link
Contributor

ajlende commented Dec 14, 2022

This would be solved by #42870, at least the duotone part, but I haven't had the time to work on it recently

@iamtakashi
Copy link

I've noticed the issue with social icons. I'll add some visuals to help illustrate the issue. This example uses Twenty Twenty-three, but this is not a theme-specific issue.

Let's say you wanted to have social icons that match the theme colours. So you chose the base for the icon colour and the contrast for the icon background.

Frame 1

Save the page and change the style to the pitch, for example.

iamtakashi jurassic tube_wp-admin_site-editor php_postType=wp_template postId=twentytwentythree%2F%2Fhome

You'd expect the colours of the social icons to change to the theme colours in pitch, but it stays the colour of the default style.

iamtakashi jurassic tube__page_id=1244 (1)

The colour setting in the editor says what you expect, but the colours of the icons are stuck with the ones from the default style.

iamtakashi jurassic tube_wp-admin_post php_post=1244 action=edit (2)

If you re-select the colours again in the editor, it changes the colour, but it shouldn't require you to do so.

iamtakashi jurassic tube_wp-admin_post php_post=1244 action=edit (3)

@bph
Copy link
Contributor

bph commented Dec 15, 2022

@iamtakashi Thanks for walking me through the issue. Great illustrations.

@bph bph added the [Type] Bug An existing feature does not function as intended label Dec 15, 2022
@justintadlock
Copy link
Contributor

@gyurmey2
Copy link

@ndiego solved this problem in his great plugin. Maybe that's a clue?

@getdave

This comment was marked as resolved.

@iamtakashi
Copy link

iamtakashi commented Feb 25, 2023

@getdave Thanks for looking into this issue.

However, the new values for Base and Contrast are perhaps not what we'd expect and thus it's black background on black background.

I'm not following this bit. I'd expect an element with base should change to whatever colour the current variation specifies for base. Same for contrast. These are the colours specified in the two variations.

Default Pitch
base #ffffff
contrast #000000
base #202124
contrast #e8eaed

In this example, when you switch to the Pitch style variation, the icon background should change to #e8eaed and the icon colour should change to#202124. In fact, the editor suggests that is the intention.

Frame 1

However, the icon and icon background colours remain to be the colours from the default, #ffffff and #000000, because they are in the markup. I don't think this is how it's expected to work.

Editor
Screenshot 2023-02-25 at 15 52 42

Front of the site
Screenshot 2023-02-25 at 15 48 20

@ndiego
Copy link
Member

ndiego commented Feb 25, 2023

@ndiego ndiego/icon-block#18 in his great plugin. Maybe that's a clue?

Thanks for the shoutout @gyurmey2. I'll take a look at this next week and see if a similar solution could be applied.

@getdave
Copy link
Contributor

getdave commented Feb 27, 2023

@iamtakashi I follow this now. Sorry for confusing things. I will hide my comments.

@gyurmey2
Copy link

gyurmey2 commented Mar 3, 2023

@ndiego ndiego/icon-block#18 in his great plugin. Maybe that's a clue?

Thanks for the shoutout @gyurmey2. I'll take a look at this next week and see if a similar solution could be applied.

Thank you.

@ajlende
Copy link
Contributor

ajlende commented May 31, 2023

Reopening since #51020 solved the social icons part, but the duotone part is still relevant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts [Feature] Theme Style Variations Related to style variations provided by block themes [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
9 participants