-
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
Allow custom CSS for theme.json elements #55614
Conversation
I am taking this out of #49396 while work continues on the block style variations separately. |
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack. Thank you! ❤️ View changed files❔ lib/class-wp-theme-json-gutenberg.php |
Size Change: -292 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
Flaky tests detected in 4712384. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7898030046
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks OK to me 👍
I have a simple improvement suggestion (for performance we should avoid using wp_array_get()
when the number of args is known), but I don't consider it a blocker 🥇
Co-authored-by: Ari Stathopoulos <aristath@gmail.com>
@aaronrobertshaw @tellthemachines |
Thanks for the ping 👍
If I understand it correctly, the addition of the custom CSS shouldn't be an issue. The selector it is added to the ruleset under though might just need a tweak to match what is settled on in #57841.
The goal is to land #57841 for 6.5 and this would only need a minor tweak I think if #57841 does get merged, so I don't know that it should be punted just yet. Happy to defer to @tellthemachines though 🙂 |
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
#57841 is not planned for 6.5. But his seems to have been removed from the 6.5 editor task board without comment, I suppose that confirms it is punted. |
Correction, the issue is moved to the 6.6 board: not the PR: |
Remove the unused stylesheet variable in get_block_custom_css_nodes() and use the block_nodes array.
@tellthemachines @aaronrobertshaw With the changes in #58991, The inline docs can be updated to reflect that it is not only block nodes that are returned; but for clarity and perhaps for future proofing, would it be better to use two separate methods? Or, if they don't need to be separate methods, can we make the if statements neutral to the type, and make one if statement work for both blocks and elements? |
@carolinan that's a great question! Based on @oandregal's recent feedback , I was considering refactoring those functions in |
@carolinan @tellthemachines what're the remaining blockers for this? Seems like a nice improvement to meet expectations on this front. |
What are the plans or expectations for custom CSS for elements when it comes to the extended block style variations within #57908? I expect we'll want them there too but given the complexity of that work already, do we have any leeway to hold off here until that lands? |
I suppose the expectation is that
Yes, let's land #57908. |
What?
Enables CSS in theme.json styles > elements > CSS
Closes #48439
Why?
Custom CSS under theme.json styles.elements is not working, even though the schema says it works.
How?
Updates
class WP_Theme_JSON_Gutenberg
with a condition that checks if there are any items under styles > elements, locates custom css, and adds it to the custom CSS stylesheet.Updates the global styles output to loop through the elements, locate the CSS, and add the css to the styles array.
Testing Instructions
Activate Twenty Twenty-Three or Twenty Twenty-Four.
In theme.json, under styles > elements > heading, add the following as the first object:
"css": "border:3px solid orange;",
Example from TT4:
Next, open the Site editor, block editor, and the front of the website and confirm that headings have an orange border.
Screenshots or screencast