Archived topic
GP Alpha - Inline text colors with letter/number pairs
6 replies · Started by Jeremy on September 25, 2021
GP 3.1.0-alpha.3
GPP 2.1.0-alpha.4
Assigning a custom color, with a letter-number pair, to inline text results in an extra hyphen being added to the span class.
For example, I set up a custom color palette similar to:
--contrast1-light1
--contrast1
--contrast1-dark1
--on-contrast1-light1
...Assigning the color --contrast1-dark1 to inline text results in:
<span class="has-inline-color has-contrast-1-dark-1-color">Text Color</span>
GP writes the correct rule to style.min.css, which makes me think this is a WordPress "feature" and not a bug.
If that's the case, would it be possible to validate new color input for this? It could prevent someone from, say... setting up 30+ colors and using them across a site for several days, before noticing his awesome new color scheme and vaguely semantic yet intuitive naming convention doesn't work with inline colors. Asking for a friend, of course. :roll:
:D
Hi there,
i believe Tom is addressing some of these issues - so i passed the topic on to him :)
Thanks for the headsup!
Thanks David!
To be clear, I was totally being tongue-in-cheek funny with my comment. :) I really enjoy testing out these non-production builds.
Just happened across this last night and wanted to pass along any potential issues.
Hope you've all had a great weekend!
Just an update on this. I found this has been a known issue with Gutenberg for some time.
https://github.com/WordPress/gutenberg/issues/19285
Justin Tadlock reported the same issue over a year later, with numerous other reports recently.
https://github.com/WordPress/gutenberg/issues/31629
It seems that the problem was fixed and then reverted as the issue was larger than numbers (evidently camelCase slugs in some contexts too). Justin had proposed a fix and expressed frustration at patching the issue for his own themes.
Hopefully, they get this sorted with Gutenberg. I think for the time being I'll create a new palette and avoid naming conventions with adjacent letters and numbers.
Hi there,
Thanks for reporting back!
WP does require "kebab case", but it's surprising that they force it like this instead of letting theme authors ultimately decide.
Looks like something that might be difficult to undo without breaking a lot of sites now.. Hopefully they figure something out.
To be fair, I don't think anyone considered the kebabCase function being used in core would cause this issue. Unfortunately, it mangles perfectly valid CSS custom property syntax.
You are right, of course. The lid is already off that pickle jar, and it really would be best for theme authors to ultimately decide such things. Hope they figure something out as well.
Have a great week Tom, thanks!
Thanks, Jeremy - you too!
