Block Editor: Strip per-block custom CSS on save for users without edit_css

backport-changelog/7.0/11347.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/11347
+
+* https://github.com/WordPress/gutenberg/pull/76650

lib/block-supports/custom-css.php

@@ -8,8 +8,6 @@
 /**
  * Render the custom CSS stylesheet and add class name to block as required.
  *
- * @since 7.0.0
- *
  * @param array $parsed_block The parsed block.
  * @return array The same parsed block with custom CSS class name added if appropriate.
  */
@@ -58,8 +56,6 @@ function gutenberg_render_custom_css_support_styles( $parsed_block ) {
 
 /**
  * Enqueues the block custom CSS styles.
- *
- * @since 7.0.0
  */
 function gutenberg_enqueue_block_custom_css() {
 	wp_enqueue_style( 'wp-block-custom-css' );
@@ -71,8 +67,6 @@ function gutenberg_enqueue_block_custom_css() {
  * The class name is generated in `gutenberg_render_custom_css_support_styles`
  * and stored in block attributes. This filter adds it to the actual markup.
  *
- * @since 7.0.0
- *
  * @param string $block_content Rendered block content.
  * @param array  $block         Block object.
  * @return string               Filtered block content.
@@ -136,6 +130,142 @@ function gutenberg_register_custom_css_support( $block_type ) {
 	}
 }
 
+/**
+ * Strips `style.css` attributes from all blocks in post content.
+ *
+ * Uses WP_Block_Parser::next_token() to scan block tokens and surgically
+ * replace only the attribute JSON that changed — no parse_blocks() +
+ * serialize_blocks() round-trip needed.
+ *
+ * @param string $content Post content to filter, expected to be escaped with slashes.
+ * @return string Filtered post content with block custom CSS removed.
+ */
+function gutenberg_strip_custom_css_from_blocks( $content ) {
+	if ( ! has_blocks( $content ) ) {
+		return $content;
+	}
+
+	$unslashed = stripslashes( $content );
+
+	$parser           = new WP_Block_Parser();
+	$parser->document = $unslashed;
+	$parser->offset   = 0;
+	$end              = strlen( $unslashed );
+	$replacements     = array();
+
+	while ( $parser->offset < $end ) {
+		$next_token = $parser->next_token();
+		list( $token_type, , $attrs, $start_offset, $token_length ) = $next_token;
+
+		if ( 'no-more-tokens' === $token_type ) {
+			break;
+		}
+
+		$parser->offset = $start_offset + $token_length;
+
+		if ( 'block-opener' !== $token_type && 'void-block' !== $token_type ) {
+			continue;
+		}
+
+		if ( ! isset( $attrs['style']['css'] ) ) {
+			continue;
+		}
+
+		// Remove css and clean up empty style.
+		unset( $attrs['style']['css'] );
+		if ( empty( $attrs['style'] ) ) {
+			unset( $attrs['style'] );
+		}
+
+		// Locate the JSON portion within the token.
+		$token_string   = substr( $unslashed, $start_offset, $token_length );
+		$json_rel_start = strcspn( $token_string, '{' );
+		$json_rel_end   = strrpos( $token_string, '}' );
+
+		$json_start  = $start_offset + $json_rel_start;
+		$json_length = $json_rel_end - $json_rel_start + 1;
+
+		// Re-encode attributes. If attrs is now empty, remove JSON and trailing space.
+		if ( empty( $attrs ) ) {
+			// Remove the trailing space after JSON: `{"style":{"css":"x"}} ` → ``
+			$replacements[] = array( $json_start, $json_length + 1, '' );
+		} else {
+			$replacements[] = array( $json_start, $json_length, serialize_block_attributes( $attrs ) );
+		}
+	}
+
+	if ( empty( $replacements ) ) {
+		return $content;
+	}
+
+	// Build the result by splicing replacements into the original string.
+	$result = '';
+	$was_at = 0;
+
+	foreach ( $replacements as $replacement ) {
+		list( $offset, $length, $new_json ) = $replacement;
+		$result                            .= substr( $unslashed, $was_at, $offset - $was_at ) . $new_json;
+		$was_at                             = $offset + $length;
+	}
+
+	if ( $was_at < $end ) {
+		$result .= substr( $unslashed, $was_at );
+	}
+
+	return addslashes( $result );
+}
+
+/**
+ * Adds the filters to strip custom CSS from block content on save.
+ * @access private
+ */
+function gutenberg_custom_css_kses_init_filters() {
+	add_filter( 'content_save_pre', 'gutenberg_strip_custom_css_from_blocks', 8 );
+	add_filter( 'content_filtered_save_pre', 'gutenberg_strip_custom_css_from_blocks', 8 );
+}
+
+/**
+ * Removes the filters that strip custom CSS from block content on save.
+ * @access private
+ */
+function gutenberg_custom_css_remove_filters() {
+	remove_filter( 'content_save_pre', 'gutenberg_strip_custom_css_from_blocks', 8 );
+	remove_filter( 'content_filtered_save_pre', 'gutenberg_strip_custom_css_from_blocks', 8 );
+}
+
+/**
+ * Registers the custom CSS content filters if the user does not have the edit_css capability.
+ * @access private
+ */
+function gutenberg_custom_css_kses_init() {
+	gutenberg_custom_css_remove_filters();
+	if ( ! current_user_can( 'edit_css' ) ) {
+		gutenberg_custom_css_kses_init_filters();
+	}
+}
+
+/**
+ * Initializes custom CSS content filters when imported data should be filtered.
+ *
+ * This filter is the last being executed on force_filtered_html_on_import.
+ * If the input of the filter is true it means we are in an import situation and should
+ * enable the custom CSS filters, independently of the user capabilities.
+ * @access private
+ *
+ * @param mixed $arg Input argument of the filter.
+ * @return mixed Input argument of the filter.
+ */
+function gutenberg_custom_css_force_filtered_html_on_import_filter( $arg ) {
+	if ( $arg ) {
+		gutenberg_custom_css_kses_init_filters();
+	}
+	return $arg;
+}
+
+add_action( 'init', 'gutenberg_custom_css_kses_init', 20 );
+add_action( 'set_current_user', 'gutenberg_custom_css_kses_init' );
+add_filter( 'force_filtered_html_on_import', 'gutenberg_custom_css_force_filtered_html_on_import_filter', 999 );
+
 // Register the block support.
 WP_Block_Supports::get_instance()->register(
 	'custom-css',

packages/block-editor/src/hooks/custom-css.js

@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useEffect, useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 import { processCSSNesting } from '@wordpress/global-styles-engine';
 import { useBlockEditingMode } from '../components/block-editing-mode';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -69,6 +70,8 @@ function CustomCSSControl( { blockName, setAttributes, style } ) {
 	);
 }
 
+const CUSTOM_CSS_WARNING_NOTICE_ID = 'custom-css-edit-warning';
+
 function CustomCSSEdit( { clientId, name, setAttributes } ) {
 	const { style, canEditCSS } = useSelect(
 		( select ) => {
@@ -113,6 +116,31 @@ function useBlockProps( { style } ) {
 		customCSS.trim().length > 0 &&
 		validateCSS( customCSS );
 
+	const canEditCSS = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().canEditCSS,
+		[]
+	);
+
+	const { createWarningNotice } = useDispatch( noticesStore );
+
+	// Show a warning notice when the user lacks edit_css and a block has
+	// custom CSS. The fixed notice ID ensures only one notice is shown
+	// regardless of how many blocks have CSS.
+	const hasCustomCSS = !! customCSS?.trim();
+	useEffect( () => {
+		if ( ! canEditCSS && hasCustomCSS ) {
+			createWarningNotice(
+				__(
+					'This post contains blocks with custom CSS. You do not have permission to edit CSS. If you save this post, the custom CSS will be removed.'
+				),
+				{
+					id: CUSTOM_CSS_WARNING_NOTICE_ID,
+					isDismissible: true,
+				}
+			);
+		}
+	}, [ canEditCSS, hasCustomCSS, createWarningNotice ] );
+
 	const customCSSIdentifier = useInstanceId(
 		CUSTOM_CSS_INSTANCE_REFERENCE,
 		'wp-custom-css'

phpunit/block-supports/custom-css-test.php

@@ -438,4 +438,103 @@ public function test_custom_css_accepts_valid_css() {
 
 		$this->assertArrayHasKey( 'className', $result['attrs'], 'Block should have className added for valid CSS.' );
 	}
+
+	/**
+	 * Tests that style.css is stripped from a single block.
+	 *
+	 * @covers ::gutenberg_strip_custom_css_from_blocks
+	 */
+	public function test_strip_custom_css_removes_css_from_block() {
+		$content = '<!-- wp:paragraph {"style":{"css":"color: red;"}} --><p>Hello</p><!-- /wp:paragraph -->';
+
+		$result = wp_unslash( gutenberg_strip_custom_css_from_blocks( $content ) );
+		$blocks = parse_blocks( $result );
+
+		$this->assertArrayNotHasKey( 'css', $blocks[0]['attrs']['style'] ?? array(), 'style.css should be stripped from block attributes.' );
+	}
+
+	/**
+	 * Tests that style.css is stripped from nested inner blocks.
+	 *
+	 * @covers ::gutenberg_strip_custom_css_from_blocks
+	 */
+	public function test_strip_custom_css_removes_css_from_inner_blocks() {
+		$content = '<!-- wp:group --><div class="wp-block-group"><!-- wp:paragraph {"style":{"css":"color: red;"}} --><p>Hello</p><!-- /wp:paragraph --></div><!-- /wp:group -->';
+
+		$result = wp_unslash( gutenberg_strip_custom_css_from_blocks( $content ) );
+		$blocks = parse_blocks( $result );
+
+		$inner_block = $blocks[0]['innerBlocks'][0];
+		$this->assertArrayNotHasKey( 'css', $inner_block['attrs']['style'] ?? array(), 'style.css should be stripped from inner block attributes.' );
+	}
+
+	/**
+	 * Tests that content without blocks is returned unchanged.
+	 *
+	 * @covers ::gutenberg_strip_custom_css_from_blocks
+	 */
+	public function test_strip_custom_css_returns_non_block_content_unchanged() {
+		$content = '<p>This is plain HTML content with no blocks.</p>';
+
+		$result = gutenberg_strip_custom_css_from_blocks( $content );
+
+		$this->assertSame( $content, $result, 'Non-block content should be returned unchanged.' );
+	}
+
+	/**
+	 * Tests that content without style.css attributes is returned unchanged.
+	 *
+	 * @covers ::gutenberg_strip_custom_css_from_blocks
+	 */
+	public function test_strip_custom_css_returns_unchanged_when_no_css_attributes() {
+		$content = '<!-- wp:paragraph {"style":{"color":{"text":"#ff0000"}}} --><p class="has-text-color" style="color:#ff0000">Hello</p><!-- /wp:paragraph -->';
+
+		$result = gutenberg_strip_custom_css_from_blocks( $content );
+
+		$this->assertSame( $content, $result, 'Content without style.css attributes should be returned unchanged.' );
+	}
+
+	/**
+	 * Tests that other style properties are preserved when css is stripped.
+	 *
+	 * @covers ::gutenberg_strip_custom_css_from_blocks
+	 */
+	public function test_strip_custom_css_preserves_other_style_properties() {
+		$content = '<!-- wp:paragraph {"style":{"css":"color: red;","color":{"text":"#ff0000"}}} --><p>Hello</p><!-- /wp:paragraph -->';
+
+		$result = wp_unslash( gutenberg_strip_custom_css_from_blocks( $content ) );
+		$blocks = parse_blocks( $result );
+
+		$this->assertArrayNotHasKey( 'css', $blocks[0]['attrs']['style'], 'style.css should be stripped.' );
+		$this->assertSame( '#ff0000', $blocks[0]['attrs']['style']['color']['text'], 'Other style properties should be preserved.' );
+	}
+
+	/**
+	 * Tests that empty style object is cleaned up after stripping css.
+	 *
+	 * @covers ::gutenberg_strip_custom_css_from_blocks
+	 */
+	public function test_strip_custom_css_cleans_up_empty_style_object() {
+		$content = '<!-- wp:paragraph {"style":{"css":"color: red;"}} --><p>Hello</p><!-- /wp:paragraph -->';
+
+		$result = wp_unslash( gutenberg_strip_custom_css_from_blocks( $content ) );
+		$blocks = parse_blocks( $result );
+
+		$this->assertArrayNotHasKey( 'style', $blocks[0]['attrs'], 'Empty style object should be cleaned up after stripping css.' );
+	}
+
+	/**
+	 * Tests that slashed content is handled correctly.
+	 *
+	 * @covers ::gutenberg_strip_custom_css_from_blocks
+	 */
+	public function test_strip_custom_css_handles_slashed_content() {
+		$content = '<!-- wp:paragraph {"style":{"css":"color: red;"}} --><p>Hello</p><!-- /wp:paragraph -->';
+		$slashed = wp_slash( $content );
+
+		$result = gutenberg_strip_custom_css_from_blocks( $slashed );
+		$blocks = parse_blocks( wp_unslash( $result ) );
+
+		$this->assertArrayNotHasKey( 'css', $blocks[0]['attrs']['style'] ?? array(), 'style.css should be stripped even from slashed content.' );
+	}
 }