Incorporate port of CSS.escape() to support funky ID attributes#2397
Incorporate port of CSS.escape() to support funky ID attributes#2397westonruter merged 2 commits intotrunkfrom
CSS.escape() to support funky ID attributes#2397Conversation
Co-authored-by: gemini-cli <[email protected]>
westonruter
added
[Type] Bug
|
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. |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## trunk #2397 +/- ##
==========================================
+ Coverage 69.17% 69.29% +0.11%
==========================================
Files 90 90
Lines 7708 7737 +29
==========================================
+ Hits 5332 5361 +29
Misses 2376 2376
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR adds CSS identifier escaping to properly handle embed FIGURE elements with special characters in their ID attributes. The implementation ports the JavaScript CSS.escape() polyfill by Mathias Bynens to PHP, ensuring that special characters in HTML IDs (like dots, brackets, colons) are properly escaped when used in CSS selectors.
Changes:
- Added
escape_css()private method to properly escape CSS identifiers according to CSSOM spec - Added comprehensive unit tests for the escape function covering edge cases
- Added integration test demonstrating proper escaping of IDs with brackets, dots, and colons
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php |
Implements the escape_css() method and integrates it into the CSS selector generation for embed elements |
plugins/embed-optimizer/tests/test-class-embed-optimizer-tag-visitor-escape-css.php |
Comprehensive unit tests for the escape_css() method covering empty strings, special characters, control characters, unicode, and complex identifiers |
plugins/embed-optimizer/tests/test-cases/figures-with-fancy-ids/set-up.php |
Test setup file defining URL metrics for three test figures with special ID attributes |
plugins/embed-optimizer/tests/test-cases/figures-with-fancy-ids/expected.html |
Expected HTML output showing proper CSS escaping in generated style rules for IDs containing brackets, dots, and colons |
plugins/embed-optimizer/tests/test-cases/figures-with-fancy-ids/buffer.html |
Input HTML for integration test with three figure elements having IDs with special characters |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
1 participant
Summary
This fixes handling of Embeds which have
FIGUREelements that have anidattribute containing characters which need escaping to form a valid ID selector in CSS. For example, an HTML ID likea.b.cneeds escaping to be a CSS selector as#a\.b\.c.Important
This fixes an XSS security vulnerability which required an authenticated user with at least a contributor role. Props to @duc193 for responsible disclosure.
Use of AI Tools
Gemini CLI was used to port Mathias Bynens's
CSS.escape()polyfill from JS to PHP.