I'm just testing this PR and, for me, the border color panel doesn't add the border color inline style to the root element. The has-{color}-border-color class is present however.

The result is that the border color doesn't change when I select a new border color.

Strangely, changing the text color modifies the border color, though I can't see why in the computed styles.

If I change this line to color: colorObject?.color || value, it works as I'd expect.

Is there a reason why the style prop should be undefined here in the presence of colorObject?.slug?

Or are there CSS definitions for .has-{color}-border-color classes that I'm not seeing (or something else I'm missing)?

Thanks!

There's a good chance I missed something here so I'll look into it. Thanks for testing.

Is there a reason why the style prop should be undefined here?

This was undefined so that when using a named color it uses the CSS classes generated for the color from the current palette. If it stored the color value there the inline style overrules it. This could become a problem if the theme changes the color palette or the user switches themes.

Strangely, changing the text color modifies the border color, though I can't see why in the computed styles.

I have the suspicion that the theme sets the border color to the currentColor which would be determined by the text color. The inline border style works for me when a border style is set though.

This was undefined so that when using a named color it uses the CSS classes generated for the color from the current palette.

Thanks, that's what I suspected, was just scratching my head as to where those CSS class definitions were being (or should be) generated.

Thanks for the clarification. Just dropping here to add that I had the TwentyTwentyOne theme activated.

I could see the expected behaviour after switching to TT1 Blocks.

I've added the missing filter to force the inline styles for themes that don't load their color palettes in the editor.

Testing TwentyTwentyOne, the appropriate border colors are now correctly shown in the editor. The CSS classes on the frontend still do not appear to be having any effect there though.

After a rebase, the named color css classes do work for the TwentyTwentyOne theme. TwentyTwenty and some other older themes don't look to be qualifying for the generation of the css classes via the theme.json. I'm still looking into those.

@nosolosw would you be able to point me in the right direction for getting the color styles generated from the theme.json color palette available for themes such as TwentyTwenty?

I believe the active theme currently has to satisfy this check before the necessary styles are included.