Try/encode decode custom css#76479
Closed
ramonjd wants to merge 16 commits into
Closed
Conversation
… invalidate once all uploads have finished to reduce flickering
…d of in the registerBatch function
…tion This update introduces functions to encode and decode CSS strings as base64 data URIs, ensuring that CSS is safely stored and retrieved without being altered by wp_kses. The changes include a new decoding function in PHP and corresponding encoding/decoding logic in JavaScript, allowing for seamless handling of custom CSS in the block editor.
github-actions
Bot
added
[Package] Block editor
6 tasks
Member
Author
|
Created from wrong base. Redoing over in #76480 |
|
Size Change: +2.71 kB (+0.03%) Total Size: 8.75 MB
ℹ️ View Unchanged
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Important
Tests to come. This is a POC
What
When a user without
unfiltered_html(e.g. an Editor role) saves a post, WordPress runswp_kseson the post content.wp_ksestreats block attribute string values as HTML, so it mangles CSS containing characters like&,>, or nested selectors —& p { color: red }becomes& p { color: red }, and the rendered selector becomes.wp-custom-css-xxxamp; p {}.How
Before saving, the JS
onChangehandler base64-encodes the CSS value as adata:text/css;base64,…URI.wp_ksespasses base64 characters through untouched. On read, the value is decoded back to plain CSS in three places:CustomCSSControl— decodes intodisplayStylebefore passing toAdvancedPanel, so the user always sees readable CSS in the paneluseBlockProps— decodes beforevalidateCSSandprocessCSSNesting, so the editor preview works correctlygutenberg_render_custom_css_support_styles— decodes beforeprocess_blocks_custom_css, so the frontend renders the correct CSSBoth decode paths are safe-by-default: values that don't start with the prefix (legacy content, or content saved by admins who bypass KSES entirely) are returned unchanged.
Migration path
This encoding is intentionally temporary. When
WP_CSS_Token_Processoror a proper CSS sanitizer API lands in WordPress core:encodeCSSAttributecall inonChange— plain CSS can then be stored directlydecodeCSSAttributeandgutenberg_decode_css_attributeas read-time shims — they decode any previously encoded values, and the next save will write plain CSS, so migration is lazy with no batch script requiredNotes
&already in the DB) is not auto-repaired — the user must re-edit and re-save the affected blockunfiltered_html) bypass KSES; their CSS is stored plain and the decode is a no-opTextEncoder/TextDecoderare used instead of rawbtoa/atobto correctly handle non-ASCII characters in CSS (e.g.content: "→")gutenberg_decode_css_attributerejects crafted payloads that might otherwise survive base64 decodingTesting
unfiltered_html), add a block and open Advanced → Additional CSSbackground: green; & p { color: yellow; padding: 20px; }