Whoa horsey! Let's simplify this and check for explicit Gutenberg CSS…

… custom properties.
WordPress · Aug 9, 2022 · a15fcb3 · a15fcb3
1 parent 33e336a
commit a15fcb3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 27 deletions.
diff --git a/packages/style-engine/class-wp-style-engine-css-declarations.php b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -17,6 +17,12 @@
  * @access private
  */
 class WP_Style_Engine_CSS_Declarations {
+	/**
+	 * An array of valid CSS custom properties.
+	 */
+	const VALID_CUSTOM_PROPERTIES = array(
+		'--wp--style--unstable-gallery-gap',
+	);
 
 	/**
 	 * An array of CSS declarations (property => value pairs).
@@ -38,27 +44,6 @@ public function __construct( $declarations = array() ) {
 			return;
 		}
 		$this->add_declarations( $declarations );
-
-		// @TODO: This should be removed when and if safecss_filter_attr() in wp-includes/kses.php allows CSS custom properties.
-		if ( ! has_filter( 'safe_style_css', array( __CLASS__, 'safe_style_css_allow_wp_custom_property_filter' ) ) ) {
-			add_filter( 'safe_style_css', array( __CLASS__, 'safe_style_css_allow_wp_custom_property_filter' ), 10, 1 );
-		}
-	}
-
-	/**
-	 * Update allowed inline style attributes list.
-	 * We can then use this to run
-	 *
-	 * @TODO: This should be removed when and if safecss_filter_attr() in wp-includes/kses.php allows CSS custom properties.
-	 *
-	 * @param string[] $attrs Array of allowed CSS attributes.
-	 * @return string[] CSS attributes.
-	 */
-	public static function safe_style_css_allow_wp_custom_property_filter( $attrs ) {
-		// A single CSS custom property used in place of incoming `---wp--*` properties.
-		// The goal is to use it to run `---wp--*: {$value}` through safecss_filter_attr().
-		$attrs[] = '--wp--custom-property';
-		return $attrs;
 	}
 
 	/**
@@ -146,10 +131,7 @@ public function get_declarations() {
 	protected static function filter_declaration( $property, $value, $spacer = '' ) {
 		if ( isset( $property ) && isset( $value ) ) {
 			// Allow CSS custom properties starting with `--wp--`.
-			// Run a generic CSS string through `safecss_filter_attr`'s value checks.
-			// @TODO: This should be removed when and if safecss_filter_attr() in wp-includes/kses.php allows CSS custom properties.
-			if ( 0 === strpos( $property, '--wp--' ) && ! empty( safecss_filter_attr( "--wp--custom-property:{$spacer}{$value}" ) ) ) {
-				// The property has already been sanitized by $this->sanitize_property().
+			if ( in_array( $property, static::VALID_CUSTOM_PROPERTIES, true ) ) {
 				return "{$property}:{$spacer}{$value}";
 			}
 			return safecss_filter_attr( "{$property}:{$spacer}{$value}" );

diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php
@@ -167,7 +167,7 @@ public function test_remove_unsafe_properties_and_values() {
 	public function test_allow_wp_custom_properties() {
 		$input_declarations = array(
 			'--wp--love-your-work'                => 'url("https://wordpress.org")',
-			'--large-font-size'                   => '10em',
+			'--wp--style--unstable-gallery-gap'   => '12em',
 			'--wp-yeah-nah'                       => '100%',
 			'--wp--preset--here-is-a-potato'      => '88px',
 			'--wp--style--/::target-[<nonsense>]' => '2000.75em',
@@ -176,7 +176,7 @@ public function test_allow_wp_custom_properties() {
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 
 		$this->assertSame(
-			'--wp--preset--here-is-a-potato:88px;--wp--style--target-nonsense:2000.75em;--wp--style--block-gap:2em;',
+			'--wp--style--unstable-gallery-gap:12em;',
 			$css_declarations->get_declarations_string()
 		);
 	}