Fix HTML Block: Hide CSS/JS tabs and show warning for users without unfiltered_html capability #73749
Conversation
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
Co-authored-by: sirreal <[email protected]>
Co-authored-by: sirreal <[email protected]>
Co-authored-by: sirreal <[email protected]>
Co-authored-by: sirreal <[email protected]>
Copilot
AI
changed the title
[WIP] Fix HTML block rendering issue for author role
Fix HTML Block: Hide CSS/JS tabs for users without unfiltered_html capability
Dec 4, 2025
sirreal
reviewed
Dec 4, 2025
Member
sirreal
left a comment
sirreal
left a comment
There was a problem hiding this comment.
@copilot We should show a notice if a user without sufficient capabilities is editing a post with CSS/JS that would be mangled when they save it.
@youknowriad thoughts?
Comment on lines
51
to
54
| // Show CSS/JS tabs only if user has unfiltered_html capability | ||
| // This prevents users from adding CSS/JS they can't actually save | ||
| const shouldShowCssTab = canUserUseUnfilteredHTML; | ||
| const shouldShowJsTab = canUserUseUnfilteredHTML; |
Member
There was a problem hiding this comment.
It doesn't seem like we need two values for this, we can just use canUserUseUnfilteredHTML.
Contributor
Author
There was a problem hiding this comment.
Updated in eb6f24c to use canUserUseUnfilteredHTML directly throughout the code.
Co-authored-by: sirreal <[email protected]>
Co-authored-by: sirreal <[email protected]>
Contributor
Author
Added warning notice in 47f3b9f. When a user without |
Copilot
AI
changed the title
Fix HTML Block: Hide CSS/JS tabs for users without unfiltered_html capability
Fix HTML Block: Hide CSS/JS tabs and show warning for users without unfiltered_html capability
Dec 4, 2025
sirreal
added
[Type] Bug
youknowriad
reviewed
Dec 4, 2025
| css: editedCss, | ||
| js: editedJs, | ||
| css: canUserUseUnfilteredHTML ? editedCss : '', | ||
| js: canUserUseUnfilteredHTML ? editedJs : '', |
Contributor
There was a problem hiding this comment.
Is it possible for a user without the capability to edit a post initially created by another user with the capability? What should happen in this case.
Member
There was a problem hiding this comment.
In my testing I did have a case where I authored a post without the capability, edited it as another user with the capability (adding CSS+JS), then editing again as the user without and the content gets mangled. So it's certainly possible.
youknowriad
reviewed
Dec 4, 2025
| <Tabs.Tab tabId="html">HTML</Tabs.Tab> | ||
| <Tabs.Tab tabId="css">CSS</Tabs.Tab> | ||
| { shouldShowJsTab && ( | ||
| { canUserUseUnfilteredHTML && ( |
Contributor
There was a problem hiding this comment.
Hiding the table like here is probably a good idea, but I do wonder about serialization
youknowriad
reviewed
Dec 4, 2025
| className="block-library-html__modal-notice" | ||
| > | ||
| { __( | ||
| 'This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML.' |
Contributor
There was a problem hiding this comment.
I guess that message is clear enough.
youknowriad
approved these changes
Dec 4, 2025
Contributor
youknowriad
left a comment
youknowriad
left a comment
There was a problem hiding this comment.
Actually this is nice
Member
|
@copilot can you test this PR and provide screenshots? I'd like to see the Notice rendered. You should be able to test using the playground at https://playground.wordpress.net/?gutenberg-pr=73749 if you can use a browser. |
Contributor
Author
I'm unable to access playground.wordpress.net from my environment (domain is blocked). However, based on the implementation in 47f3b9f: When the Notice appears:
Notice properties:
Testing scenario:
The Notice uses WordPress's standard warning component styling (typically yellow background with warning icon). |
|
Size Change: +70 B (0%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 47f3b9f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19928596510
|
Contributor
|
@sirreal should we merge this one? |
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @Copilot. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. 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. |
Member
|
Yeah, I think this is OK to merge. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
Fixes HTML block rendering issue where CSS/JS content displays as raw text on the frontend for users without
unfiltered_htmlcapability (authors, contributors).Why?
WordPress's kses filtering strips
<style>and<script>tags from content saved by users withoutunfiltered_htmlcapability. When authors used the CSS/JS tabs introduced in #73108, the tags were stripped but the raw text content remained, rendering visibly on the frontend instead of being applied as styles/scripts.How?
Three-part fix matching WordPress's security model:
unfiltered_htmlcapabilityChanges to
packages/block-library/src/html/modal.js:canUserUseUnfilteredHTMLto conditionally show CSS/JS tabshandleUpdate()to conditionally strip CSS/JS:css: canUserUseUnfilteredHTML ? editedCss : ''hasRestrictedContentis true (user lacks capability AND block contains CSS/JS)@wordpress/componentsThe Notice appears between the tab header and content area with:
status="warning"for yellow warning stylingisDismissible={ false }to ensure users see the messageTesting Instructions
As Administrator (has unfiltered_html):
h1 { color: blue; }<h1>Test</h1>As Author (no unfiltered_html):
<h1>Test</h1>Cross-role editing (warning notice test):
h1 { color: red; }and HTML:<h1>Test</h1>Testing Instructions for Keyboard
Navigate to HTML block using Tab, press Enter to open editor. Use Tab to navigate between HTML/CSS/JS tabs when logged in as admin. Verify CSS/JS tabs are not in tab order when logged in as author. When warning notice is present, verify it can be read by screen readers.
Screenshots or screencast
Original prompt
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.