Request: Social Icons: icon color, use variable instead of hex code

[Sandstromer]

What problem does this address?

Currently when adding a Social Icons block and changing either the icon color or icon background color, the selected color is added using the color's hex code, rather than the global color variable.

What is your proposed solution?

Use the global color variable instead of the hex code.

This would be hugely benefical for child themes, or when editing a global color in the color palette.

For example a parent theme has a template part containing the Social Icons block, with either the icon or background color using a theme color. A child theme would then be able to use a different color palette (with same color names) and the social media icons would display in the correct color for that child theme, rather than the hardcoded hex color of the parent theme.

Another example is when a user edits the global color styles to change the color, currently they would also have to edit all templates, pages, posts etc where the Social Icons block is in use, and manually change the icon/background color to the correct color.

[Sandstromer]

This is how the block markup currently looks:

<!-- wp:social-links {
	"iconColor":"primary",
	"iconColorValue":"#000000",
	"iconBackgroundColor":"secondary",
	"iconBackgroundColorValue":"#ffffff"
} -->

The variable names iconColor & iconBackgroundColor are already present, so is there any reason why the corresponding iconColorValue & iconBackgroundColorValue are also needed?

Testing this in a theme template seems to work using the encoded variable in place of the hex code:

<!-- wp:social-links {
	"iconColor":"primary",
	"iconColorValue":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dprimary)",
	"iconBackgroundColor":"secondary",
	"iconBackgroundColorValue":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dsecondary)"
} -->

But this doesn't help with user added Social Icons blocks, as it is much too complicated to expect users to switch to code editor and enter the variables like this.

[carolinan]

This is also preventing having different colors for social links in global style variations.