Description

#73959 introduced block level custom CSS.

Everything works as expected unless a user without unfiltered_html edits a page/post with existing block-level custom CSS that includes nested selectors, eg.

color: green;
& p {color: blue}

In these cases, entities like & are encoded and the CSS breaks in the editor and the frontend.

See the discussion on WordPress/wordpress-develop#11104

Core trac ticket: https://core.trac.wordpress.org/ticket/64771

There, @sirreal pointed out that for 7.0 this needs to be fixed in GB by:

1. Encoding the CSS stored in the serialised attributes as base64, with a prefix to indicate this is the case, eg. data:text/css;base64 OR
2. Deleting the attribute if a user without unfiltered_html tries to edit/save the post - with a warning to them that this is going to happen

Step-by-step reproduction instructions

1. Create a test user with the Author role (no unfiltered_html capability)
2. Create a new post as an admin user
3. Add a Group block with a nested Paragraph block
4. Open the block's Advanced panel → Additional CSS textarea
5. Enter: color: blue; & p { color: red; }
6. Save the post
7. Log in as a user without unfiltered_html, eg. author and edit the paragraph, eg. make part of string italic. Note you will not see the custom CSS input box when logged in as this user. Just edit the existing paragraph in the post content and save.
8. Save again and then log back in as an admin user and CSS shows color: blue; & .child { color: red; } and styles do not show correctly in editor or frontend.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure