Make WordPress Core

Opened 17 months ago

Closed 17 months ago

Last modified 17 months ago

#57536 closed enhancement (fixed)

Add support for global styles custom css

Reported by: glendaviesnz's profile glendaviesnz Owned by: flixos90's profile flixos90
Milestone: 6.2 Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-patch gutenberg-merge has-unit-tests commit
Focuses: rest-api, performance Cc:


In the Gutenberg repo, a feature has been merged that allows custom CSS to be added to Global Styles via the style editor, in a similar way to how the Customizer allows the addition of custom CSS.

In order to support this a number of PHP file changes need to be ported from the Gutenberg plugin.

For further context, the Gutenberg PR that introduced this feature is:

Change History (17)

This ticket was mentioned in PR #3896 on WordPress/wordpress-develop by @glendaviesnz.

17 months ago

  • Keywords has-patch added; needs-patch removed

@glendaviesnz commented on PR #3896:

17 months ago

Still draft as need to look at also bringing across changes from, and also adding some tests

#3 @hellofromTonya
17 months ago

  • Keywords gutenberg-merge added
  • Milestone changed from Awaiting Review to 6.2

@glendaviesnz commented on PR #3896:

17 months ago

@aristath - I have updated this to match the changes merged in with, which will affect also

@glendaviesnz commented on PR #3896:

17 months ago

@Mamaduka have pulled across, but some unit tests are failing on multisite which may be related to this and I ran out of time to work out why - will take another look tomorrow if you don't have time to look at it.

@Mamaduka commented on PR #3896:

17 months ago

@glendaviesnz, I was able to resolve failing multisite tests by granting capabilities to admin users.

I added the following to WP_REST_Global_Styles_Controller_Test::wpSetupBeforeClass

if ( is_multisite() ) {

grant_super_admin( self::$admin_id );


#7 @hellofromTonya
17 months ago

  • Keywords has-unit-tests added

@Mamaduka commented on PR #3896:

17 months ago

@glendaviesnz, we should probably place the grant_super_admin part of the code after $admin_id is assigned.

#9 @hellofromTonya
17 months ago

  • Focuses rest-api added
  • Keywords changes-requested added

Changes are requested for the patch PR 3896.

#10 @hellofromTonya
17 months ago

  • Focuses performance added

Adding performance keyword for caching added into wp_get_global_styles_custom_css(). cc @flixos90.

@glendaviesnz commented on PR #3896:

17 months ago

Thanks @felixarntz and @hellofromtonya for the detailed feedback!

@glendaviesnz commented on PR #3896:

17 months ago

@hellofromtonya I have run the suggested tests, re load-styles.php:

Step 1: Added the following constants to wp-config.php:

define( 'CONCATENATE_SCRIPTS', true );
define( 'WP_DEBUG', false );
define( 'SCRIPT_DEBUG', false );

Step 2: Applied this PR
Step 3: Started localhost environment with

npm install
npm run build:dev
npm run env:start
npm run env:install

Step 4: Logged in and opened the WP Admin area.

✅No fatal error occured
✅The load-styles.css stylesheet loaded
✅Navigated through screens and no fatal error occured

@hellofromTonya commented on PR #3896:

17 months ago

I think (correct me if I'm wrong) this PR is good shape for commit.

  • The concern @felixarntz and I had has been tested to validate it's not a concern ✅
  • All feedback (minus a too long to read inline comment request) has been addressed 💹
  • Open questions have been addressed ✅

Is there anything else pending before commit? @glendaviesnz @dream-encode @felixarntz?
If no, could the committers please approve for confirmation? 🙇

#14 @flixos90
17 months ago

  • Keywords commit added; changes-requested removed
  • Owner changed from glendaviesnz to flixos90
  • Status changed from assigned to reviewing

Planning to commit this shortly.

#15 @flixos90
17 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 55192:

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.

@glendaviesnz commented on PR #3896:

17 months ago

Thanks @felixarntz, @hellofromtonya and @dream-encode !

Note: See TracTickets for help on using tickets.