Size Change: +1.25 kB (0%)

Total Size: 818 kB

_{compressed-size-action}

It seems on this PR when I apply a predefined color with 2020 the color is not viewable on the editor. The same also happened on master but it does not happen on WordPress 5.4.

While I'm unable to reproduce it on master, I do see the same issue. Interestingly, I think it's a side-effect of the fact that this "fixes" theme styling (#21917, #21909). You can see in the screenshot below that the color from theme styles (from TwentyNineteen) has a higher specificity than the predefined color styling:

Like you, I did find that it worked as expected on the front-end. In fact, the changes here help restore theme styles which were not working correctly after #21266, in addition to using the correct predefined color assigned to the button.

As far as interoperability with the specific theme styles I'm seeing, I think this is in a better state than master, at least so far as the colors working correctly on the front-end. It would be good if we can get the colors interoperating better with the theme styles in the editor. For the purposes of today's RC release and if Riad has finished for the day, for me it would make sense to merge this with the above as an acknowledged "Known Issue", ideally with a resolution before Wednesday's final release.

While I'm unable to reproduce it on master

It appears this may be theme-dependent. On TwentyTwenty, I see the same problems with predefined colors not taking effect in the editor, both on this branch and on master. On TwentyNineteen, predefined colors work correctly on master but not in this branch. It seems the difference is how the selectors differ between TwentyNineteen and TwentyTwenty. As seen in the screenshot of my previous comment, the TwentyNineteen themes try to style this by assuming separate elements .wp-block-button and .wp-block-button__link, hence the remark about the fact that this is expected as a result of "fixing" the markup to respect theme styles.

@jorgefilipecosta @aduth are you testing with the mu-plugins that disable colors enabled or not? this could have an impact here.

@youknowriad I am. But even disabling the behavior of it, the problem persists.

I'd still encourage theme authors to update their styles to only rely on wp-block-button__link without requiring the presence of a wp-button parent or not which would make the styles work regardless of the chosen markup in the end.

This is the best thing to do but it doesn't guarantee the styles will work.

In the current structure the modifiers (.is-style-outline) get applied to the wrapper, and not the button itself, so you still have to do some CSS gymnastics to make it work consistently for new and old structures.

Hehe, I just finished refactoring the styles to match the new-old button markup. 😄

@strarsis that's a good thing because in theory they work on both markups right? and it's a win if it ever becomes new again 😬

Will it stay lke that?
I like CSS gymnastic but just to know....

In the current structure the modifiers (.is-style-outline) get applied to the wrapper, and not the button itself, so you still have to do some CSS gymnastics to make it work consistently for new and old structures.