Dynamic color var

[willybahuaud]

Hi !

First: thanks for this block, it's really usefull :)

For the bug: When I update my color scheme, icon color aren't updated. It's because you assign the value when saving. So I use the snippet below to force the use of CSS dynamic var, but it's kinda tricky, isn't?

function w_replace_color_value_by_dynamic_color_var( $block_content, $block ) {
  if ( $block['blockName'] === 'outermost/icon-block' ) {
    if ( $block['attrs']['iconColor'] !== $block['attrs']['iconColorValue'] ) {
      $block_content = str_replace(
        $block['attrs']['iconColorValue'],
        sprintf('var(--wp--preset--color--%s)', $block['attrs']['iconColor']),
        $block_content );
    }
  }
  return $block_content;
}
add_filter( 'render_block', 'w_replace_color_value_by_dynamic_color_var', 10, 2 );

What do you think about passing color varname to render instead?

[ndiego]

Thanks for logging this @willybahuaud. I completely agree with you. It's frustrating when you change colors in the Site Editor, and then the icon colors do not update. The current functionality is the same used by the WordPress core Social Icons block which I used as a rough guide when building the Icon Block but it's obviously not ideal. I will look into a method to resolve this for the next release.

Sidenote, your workaround is impressive. Love it!