Changeset 55192

Timestamp:

02/02/2023 06:50:54 PM (2 years ago)

Author:

flixos90

Message:

Editor: Add support for custom CSS in global styles.

This changeset introduces functions wp_get_global_styles_custom_css() and wp_enqueue_global_styles_custom_css(), which allow accessing and enqueuing custom CSS added via global styles.

Custom CSS via global styles is handled separately from custom CSS via the Customizer. If a site uses both features, the custom CSS from both sources will be loaded. The global styles custom CSS is then loaded after the Customizer custom CSS, so if there are any conflicts between the rules, the global styles take precedence.

Similarly to e.g. [55185], the result is cached in a non-persistent cache, except when WP_DEBUG is on to avoid interrupting the theme developer's workflow.

Props glendaviesnz, oandregal, ntsekouras, mamaduka, davidbaumwald, hellofromtonya, flixos90.
Fixes #57536.

Location:

trunk

Files:

• src/wp-includes/block-editor.php (modified) (1 diff)
• src/wp-includes/class-wp-theme-json.php (modified) (3 diffs)
• src/wp-includes/default-filters.php (modified) (1 diff)
• src/wp-includes/global-styles-and-settings.php (modified) (2 diffs)
• src/wp-includes/rest-api/endpoints/class-wp-rest-global-styles-controller.php (modified) (4 diffs)
• src/wp-includes/script-loader.php (modified) (1 diff)
• tests/phpunit/tests/rest-api/rest-global-styles-controller.php (modified) (1 diff)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (2 diffs)

trunk/src/wp-includes/block-editor.php

@@ -411 +411 @@
             $global_styles[]      = $block_classes;
         }
+
+        /*
+         * Add the custom CSS as a separate stylesheet so any invalid CSS
+         * entered by users does not break other global styles.
+         */
+        $editor_settings['styles'][] = array(
+            'css'            => wp_get_global_styles_custom_css(),
+            '__unstableType' => 'user',
+            'isGlobalStyles' => true,
+        );
     } else {
         // If there is no `theme.json` file, ensure base layout styles are still available.

trunk/src/wp-includes/class-wp-theme-json.php

@@ -426 +426 @@
             'textTransform'  => null,
         ),
+        'css'        => null,
     );
 
@@ -1001 +1002 @@
         if ( in_array( 'presets', $types, true ) ) {
             $stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
+        }
+
+        return $stylesheet;
+    }
+
+    /**
+     * Returns the global styles custom css.
+     *
+     * @since 6.2.0
+     *
+     * @return string
+     */
+    public function get_custom_css() {
+        // Add the global styles root CSS.
+        $stylesheet = _wp_array_get( $this->theme_json, array( 'styles', 'css' ), '' );
+
+        // Add the global styles block CSS.
+        if ( isset( $this->theme_json['styles']['blocks'] ) ) {
+            foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) {
+                $custom_block_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'css' ) );
+                if ( $custom_block_css ) {
+                    $selector    = static::$blocks_metadata[ $name ]['selector'];
+                    $stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector );
+                }
+            }
         }
 
@@ -2741 +2767 @@
             }
 
-            $output = static::remove_insecure_styles( $input );
+            // The global styles custom CSS is not sanitized, but can only be edited by users with 'edit_css' capability.
+            if ( isset( $input['css'] ) && current_user_can( 'edit_css' ) ) {
+                $output = $input;
+            } else {
+                $output = static::remove_insecure_styles( $input );
+            }
 
             /*

trunk/src/wp-includes/default-filters.php

@@ -578 +578 @@
 add_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
 
+// Global styles custom CSS.
+add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles_custom_css' );
+
 // Block supports, and other styles parsed and stored in the Style Engine.
 add_action( 'wp_enqueue_scripts', 'wp_enqueue_stored_styles' );

trunk/src/wp-includes/global-styles-and-settings.php

@@ -219 +219 @@
 
     $stylesheet = $styles_variables . $styles_rest;
+    if ( $can_use_cached ) {
+        wp_cache_set( $cache_key, $stylesheet, $cache_group );
+    }
+
+    return $stylesheet;
+}
+
+/**
+ * Gets the global styles custom css from theme.json.
+ *
+ * @since 6.2.0
+ *
+ * @return string Stylesheet.
+ */
+function wp_get_global_styles_custom_css() {
+    if ( ! wp_theme_has_theme_json() ) {
+        return '';
+    }
+    /*
+     * Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme
+     * developer's workflow.
+     *
+     * @todo Replace `WP_DEBUG` once an "in development mode" check is available in Core.
+     */
+    $can_use_cached = ! WP_DEBUG;
+
+    /*
+     * By using the 'theme_json' group, this data is marked to be non-persistent across requests.
+     * @see `wp_cache_add_non_persistent_groups()`.
+     *
+     * The rationale for this is to make sure derived data from theme.json
+     * is always fresh from the potential modifications done via hooks
+     * that can use dynamic data (modify the stylesheet depending on some option,
+     * settings depending on user permissions, etc.).
+     * See some of the existing hooks to modify theme.json behavior:
+     * @see https://make.wordpress.org/core/2022/10/10/filters-for-theme-json-data/
+     *
+     * A different alternative considered was to invalidate the cache upon certain
+     * events such as options add/update/delete, user meta, etc.
+     * It was judged not enough, hence this approach.
+     * @see https://github.com/WordPress/gutenberg/pull/45372
+     */
+    $cache_key   = 'wp_get_global_styles_custom_css';
+    $cache_group = 'theme_json';
+    if ( $can_use_cached ) {
+        $cached = wp_cache_get( $cache_key, $cache_group );
+        if ( $cached ) {
+            return $cached;
+        }
+    }
+
+    $tree       = WP_Theme_JSON_Resolver::get_merged_data();
+    $stylesheet = $tree->get_custom_css();
+
     if ( $can_use_cached ) {
         wp_cache_set( $cache_key, $stylesheet, $cache_group );
@@ -370 +424 @@
     wp_cache_delete( 'wp_get_global_settings_custom', 'theme_json' );
     wp_cache_delete( 'wp_get_global_settings_theme', 'theme_json' );
+    wp_cache_delete( 'wp_get_global_styles_custom_css', 'theme_json' );
     WP_Theme_JSON_Resolver::clean_cached_data();
 }

trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-global-styles-controller.php

@@ -269 +269 @@
 
         $changes = $this->prepare_item_for_database( $request );
+        if ( is_wp_error( $changes ) ) {
+            return $changes;
+        }
+
         $result  = wp_update_post( wp_slash( (array) $changes ), true, false );
         if ( is_wp_error( $result ) ) {
@@ -291 +295 @@
      *
      * @since 5.9.0
+     * @since 6.2.0 Added validation of styles.css property.
      *
      * @param WP_REST_Request $request Request object.
-     * @return stdClass Changes to pass to wp_update_post.
+     * @return stdClass|WP_Error Prepared item on success. WP_Error on when the custom CSS is not valid.
      */
     protected function prepare_item_for_database( $request ) {
@@ -313 +318 @@
             $config = array();
             if ( isset( $request['styles'] ) ) {
+                if ( isset( $request['styles']['css'] ) ) {
+                    $css_validation_result = $this->validate_custom_css( $request['styles']['css'] );
+                    if ( is_wp_error( $css_validation_result ) ) {
+                        return $css_validation_result;
+                    }
+                }
                 $config['styles'] = $request['styles'];
             } elseif ( isset( $existing_config['styles'] ) ) {
@@ -658 +669 @@
         return $response;
     }
+
+    /**
+     * Validate style.css as valid CSS.
+     *
+     * Currently just checks for invalid markup.
+     *
+     * @since 6.2.0
+     *
+     * @param string $css CSS to validate.
+     * @return true|WP_Error True if the input was validated, otherwise WP_Error.
+     */
+    private function validate_custom_css( $css ) {
+        if ( preg_match( '#</?\w+#', $css ) ) {
+            return new WP_Error(
+                'rest_custom_css_illegal_markup',
+                __( 'Markup is not allowed in CSS.' ),
+                array( 'status' => 400 )
+            );
+        }
+        return true;
+    }
 }

trunk/src/wp-includes/script-loader.php

@@ -2456 +2456 @@
 
 /**
+ * Enqueues the global styles custom css defined via theme.json.
+ *
+ * @since 6.2.0
+ */
+function wp_enqueue_global_styles_custom_css() {
+    if ( ! wp_is_block_theme() ) {
+        return;
+    }
+
+    // Don't enqueue Customizer's custom CSS separately.
+    remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
+
+    $custom_css  = wp_get_custom_css();
+    $custom_css .= wp_get_global_styles_custom_css();
+
+    if ( ! empty( $custom_css ) ) {
+        wp_add_inline_style( 'global-styles', $custom_css );
+    }
+}
+
+/**
  * Renders the SVG filters supplied by theme.json.
  *

trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php

@@ -533 +533 @@
         }
     }
+
+    /**
+     * @covers WP_REST_Global_Styles_Controller::update_item
+     * @ticket 57536
+     */
+    public function test_update_item_valid_styles_css() {
+        wp_set_current_user( self::$admin_id );
+        if ( is_multisite() ) {
+            grant_super_admin( self::$admin_id );
+        }
+        $request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+        $request->set_body_params(
+            array(
+                'styles' => array( 'css' => 'body { color: red; }' ),
+            )
+        );
+        $response = rest_get_server()->dispatch( $request );
+        $data     = $response->get_data();
+        $this->assertSame( 'body { color: red; }', $data['styles']['css'] );
+    }
+
+    /**
+     * @covers WP_REST_Global_Styles_Controller::update_item
+     * @ticket 57536
+     */
+    public function test_update_item_invalid_styles_css() {
+        wp_set_current_user( self::$admin_id );
+        if ( is_multisite() ) {
+            grant_super_admin( self::$admin_id );
+        }
+        $request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+        $request->set_body_params(
+            array(
+                'styles' => array( 'css' => '<p>test</p> body { color: red; }' ),
+            )
+        );
+        $response = rest_get_server()->dispatch( $request );
+        $this->assertErrorResponse( 'rest_custom_css_illegal_markup', $response, 400 );
+    }
 }

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -14 +14 @@
  */
 class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
+
+    /**
+     * Administrator ID.
+     *
+     * @var int
+     */
+    private static $administrator_id;
+
+    /**
+     * User ID.
+     *
+     * @var int
+     */
+    private static $user_id;
+
+    public static function set_up_before_class() {
+        parent::set_up_before_class();
+
+        static::$administrator_id = self::factory()->user->create(
+            array(
+                'role' => 'administrator',
+            )
+        );
+
+        if ( is_multisite() ) {
+            grant_super_admin( self::$administrator_id );
+        }
+
+        static::$user_id = self::factory()->user->create();
+    }
 
     /**
@@ -4506 +4536 @@
         $this->assertSame( $expected_styles, $theme_json->get_stylesheet() );
     }
+
+    /**
+     * @ticket 57536
+     */
+    public function test_get_custom_css_handles_global_custom_css() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'css' => 'body { color:purple; }',
+                ),
+            )
+        );
+        $custom_css = 'body { color:purple; }';
+        $this->assertSame( $custom_css, $theme_json->get_custom_css() );
+    }
+
+    /**
+     * Tests that custom CSS is kept for users with correct capabilities and removed for others.
+     *
+     * @ticket 57536
+     *
+     * @dataProvider data_custom_css_for_user_caps
+     *
+     * @param string $user_property The property name for current user.
+     * @param array  $expected      Expected results.
+     */
+    public function test_custom_css_for_user_caps( $user_property, array $expected ) {
+        wp_set_current_user( static::${$user_property} );
+
+        $actual = WP_Theme_JSON::remove_insecure_properties(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'css'    => 'body { color:purple; }',
+                    'blocks' => array(
+                        'core/separator' => array(
+                            'color' => array(
+                                'background' => 'blue',
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $this->assertSameSetsWithIndex( $expected, $actual );
+    }
+
+    /**
+     * Data provider.
+     *
+     * @return array[]
+     */
+    public function data_custom_css_for_user_caps() {
+        return array(
+            'allows custom css for users with caps'     => array(
+                'user_property' => 'administrator_id',
+                'expected'      => array(
+                    'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                    'styles'  => array(
+                        'css'    => 'body { color:purple; }',
+                        'blocks' => array(
+                            'core/separator' => array(
+                                'color' => array(
+                                    'background' => 'blue',
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            ),
+            'removes custom css for users without caps' => array(
+                'user_property' => 'user_id',
+                'expected'      => array(
+                    'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                    'styles'  => array(
+                        'blocks' => array(
+                            'core/separator' => array(
+                                'color' => array(
+                                    'background' => 'blue',
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            ),
+        );
+    }
 }