-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update: Use elements mechanism for link color instead of a CSS variable #31524
Conversation
Size Change: +46 B (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
cb8a78f
to
30e1f1f
Compare
a9eb5c8
to
04039af
Compare
Hi @nosolosw, thank you for the review your feedback was addressed. Meanwhile, this PR also got more complex because we were not dealing with some cases. The layout and duotone hooks assume there is always a class attribute present. In this case, we can not make that assumption (e.g: a simple paragraph). So I added code to deal with these cases where our code does not only needs to add a class but also needs to add the attribute. |
In "styles": {
"elements": {
"link": {
"color": {
"text": "#00E"
}
}
}
} |
I've done the first pass at this: the direction is good! Excited to have this in. Some thoughts:
|
6fd8602
to
f3c4da0
Compare
I'm testing with existing content, to see how this behaves. This is what I've tried: Using the
<!-- wp:paragraph {"style":{"color":{"link":"var:preset|color|red"}}} -->
<p class="has-link-color" style="--wp--style--color--link:var(--wp--preset--color--red)">
Paragraph with <a href="http://wordpress.org">link</a>.
</p>
<!-- /wp:paragraph --> Switch to this branch:
<!-- wp:paragraph {"style":{"color":{"link":"var:preset|color|red"}}} -->
<p class="has-link-color">
<p class="has-link-color" style="--wp--style--color--link:var(--wp--preset--color--red)">
Paragraph with <a href="http://wordpress.org">link</a>.
</p>
</p>
<!-- /wp:paragraph -->
<p class="wp-elements-60a3b78a854cd has-link-color"></p>
<p class="has-link-color" style="--wp--style--color--link:var(--wp--preset--color--red)">Paragraph with <a href="http://wordpress.org">link</a>.</p>
<p></p>
<style>.wp-elements-60a3b78a854cd a{color: var(--wp--preset--color--red);}</style>
<!-- wp:paragraph {"style":{"color":{"link":"var:preset|color|red"},"elements":{"link":{"color":{"text":"var:preset|color|red"}}}}} -->
<p class="has-link-color">
<p class="has-link-color" style="--wp--style--color--link:var(--wp--preset--color--red)">
Paragraph with <a href="http://wordpress.org">link</a>.
</p>
</p>
<!-- /wp:paragraph --> I think we have a couple of issues here:
|
Ok, I've done a second pass at this. The major issues I've found are:
|
Hi @nosolosw, on the backgroundColor and textColor, we have two attributes one for named colors and one just for values so we can differentiate between color value "red" and present color "red". I think the system we have for link color is much much better. We use a single attribute. The shape of the style attribute is exactly the same as the shape of theme.json. When using a different shape people will be confused: Why on theme.json to set a paragraph link color I use style.elements.link.color for presets and color values but when creating a pattern to style a paragraph I use style.elements.link.color for color values but If I want to use a preset I need to use a linkColor attribute that is not available on theme.json? |
79d57c1
to
0c55f8d
Compare
0c55f8d
to
4bc2ac2
Compare
Hi @nosolosw I applied your suggestions to be compatible with current theme styles and I mitigated the back compatibility issue (we are not breaking the markup of the paragraph anymore). |
4bc2ac2
to
4b9438f
Compare
Ok, now this works in the tests I've done:
However, I'm a bit concerned about the resulting markup of existing content. Steps for testing:
<!-- wp:paragraph {"style":{"color":{"link":"var:preset|color|red"},"elements":{"link":{"color":{"text":"var:preset|color|red"}}}}} -->
<p class="has-link-color" style="--wp--style--color--link:var(--wp--preset--color--red)">
Paragraph with <a href="http://wordpress.org">link</a>.
</p>
<!-- /wp:paragraph --> Note how the legacy mechanism for block attributes is still there ( Do you think we can ship this as it is and do the migration in a follow-up? Do you think we could modify this PR to use the existing block attribute |
These are the blocks that have support for link color and, hence, would need to be migrated: column, columns, group, heading, media-text, paragraph, post-author, post-comments, post-comments-form, post-comments-link, post-date, post-excerpt, post-terms, post-title, query-pagination-next, query-pagination-previous, site-title, template-part, term-description, verse. I'm particularly concerned with the inline styles, as that could cause styling issues with themes that use the custom property. Perhaps unlikely for the majority of cases given our use of Given the time constraints to get this in the RC, a compromise we could do is to ship this PR as it is and backport those migrations individually later ― if that's something folks agree with or makes sense in general. |
Ran this and this by some folks. Given this has been an experimental feature not shipped to core, there's going to be a small number of users that need those migrations. The consensus is that this is an important PR to have in today's RC and that we can fix bugs later should they happen. Going to disagree and commit with this one. |
4b9438f
to
ac7e6da
Compare
…le (#31524) Co-authored-by: André <nosolosw@users.noreply.github.com> (+3 squashed commits)
This PR updates the link color mechanism to use elements instead of CSS variables.
The attribute is persisted in a paragraph is the same as in theme.json (inside elements). This is the first time we use an elements object at the block level. So we are introducing a new mechanism.
The shape looks like this:
The mechanism on the client-side is generic, e.g., it would work for any style and any element. The mechanism on the server is specified for link color for now. We can make it generic, but it requires exposing a method from lib/class-wp-theme-json.php that compiles the styles. To avoid having this PR change the public API of class-wp-theme-json.php, I removed the generic approach and kept things simpler and specific for link color so we can merge this PR faster.
How has this been tested?
I went to the site editor global styles panel and set a global link color and a link color for the heading block.
I verified both link colors were applied correctly on the front and backend.
I went to the post editor and set a red link color for a paragraph. I verified the link color was applied correctly on the editor and frontend.