Skip to content

Plugin: Use bundled files for enqueuing global styles #50310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mamaduka merged 6 commits into from
May 11, 2023
Merged

Plugin: Use bundled files for enqueuing global styles #50310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
16ca4ac
Plugin: Use bundled files for enqueuing global styles
Mamaduka May 4, 2023
dd0862c
Override the '__experimentalFeatures'
Mamaduka May 4, 2023
6687c4b
Recreate global styles for block editors
Mamaduka May 5, 2023
f43a497
Move global styles custom CSS handlers
Mamaduka May 9, 2023
33f4e04
Move _gutenberg_clean_theme_json_caches
Mamaduka May 9, 2023
6a6b725
Override global styles custom CSS properties
Mamaduka May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions lib/block-editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<?php
/**
* Adds settings to the block editor.
*
* @package gutenberg
*/

/**
* Adds styles and __experimentalFeatures to the block editor settings.
*
* Note: The settings that are WP version specific should be handled inside the `compat` directory.
*
* @param array $settings Existing block editor settings.
*
* @return array New block editor settings.
*/
function gutenberg_get_block_editor_settings( $settings ) {
Copy link
Member

@oandregal oandregal May 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Documenting what I learn: this is mostly a copy-over of get_block_editor_settings but using the gutenberg_* functions instead of the wp_* ones.

// Recreate global styles.
$global_styles = array();
$presets = array(
array(
'css' => 'variables',
'__unstableType' => 'presets',
'isGlobalStyles' => true,
),
array(
'css' => 'presets',
'__unstableType' => 'presets',
'isGlobalStyles' => true,
),
);
foreach ( $presets as $preset_style ) {
$actual_css = gutenberg_get_global_stylesheet( array( $preset_style['css'] ) );
if ( '' !== $actual_css ) {
$preset_style['css'] = $actual_css;
$global_styles[] = $preset_style;
}
}

if ( wp_theme_has_theme_json() ) {
$block_classes = array(
'css' => 'styles',
'__unstableType' => 'theme',
'isGlobalStyles' => true,
);
$actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
if ( '' !== $actual_css ) {
$block_classes['css'] = $actual_css;
$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.
*/
$global_styles[] = array(
'css' => gutenberg_get_global_styles_custom_css(),
'__unstableType' => 'user',
'isGlobalStyles' => true,
);
} else {
// If there is no `theme.json` file, ensure base layout styles are still available.
$block_classes = array(
'css' => 'base-layout-styles',
'__unstableType' => 'base-layout',
'isGlobalStyles' => true,
);
$actual_css = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
if ( '' !== $actual_css ) {
$block_classes['css'] = $actual_css;
$global_styles[] = $block_classes;
}
}

$settings['styles'] = array_merge( $global_styles, get_block_editor_theme_styles() );
Copy link
Contributor

@ajlende ajlende May 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems this broke duotone filters which rely on updating $settings['styles'] in the same hook. Is there a reason that this hook needs to run at PHP_INT_MAX priority?

Copy link
Member Author

@Mamaduka Mamaduka May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason that this hook needs to run at PHP_INT_MAX priority?

That's what the plugin always used for block setting overrides. I guess to prevent other plugins from overriding new feature settings.

I personally don't like the use of PHP_INT_MAX; it prevents extensibility.

Can you point me to where the Duotone filters are located? Happy to help with the fix.

Copy link
Contributor

@ajlende ajlende May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's what the plugin always used for block setting overrides.

Ah, it just appended to the styles rather than replacing them before.

Can you point me to where the Duotone filters are located?

The duotone hook is here

gutenberg/lib/block-supports/duotone.php

Line 54 in b057776

add_filter( 'block_editor_settings_all', array( 'WP_Duotone_Gutenberg', 'add_editor_settings' ), 10 );

Happy to help with the fix.

Thanks! I'll probably push up a PR sometime today and add you as a reviewer. It sounds like it should be safe to lower the priority to allow for the extensibility that now comes from within the plugin.

Copy link
Member Author

@Mamaduka Mamaduka May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@oandregal, any thoughts on lowering the priority for the plugin overrides?

Copy link
Contributor

@ajlende ajlende May 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opened #50760. I found and fixed a few other things when I was digging through all of the code that used the same hook.


// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
$settings['__experimentalFeatures'] = gutenberg_get_global_settings();

return $settings;
}
add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings', PHP_INT_MAX );
31 changes: 0 additions & 31 deletions lib/compat/wordpress-6.2/block-editor-settings.php
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions lib/compat/wordpress-6.2/default-filters.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,6 @@
* @package gutenberg
*/

/**
Copy link
Member

@oandregal oandregal May 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been moved to lib/global-styles-and-settings.php verbatim. The comment no longer makes sense as core already uses the proper function as a callback.

* When backporting to core, the existing filters hooked to WP_Theme_JSON_Resolver::clean_cached_data()
* need to be removed.
*/
add_action( 'start_previewing_theme', '_gutenberg_clean_theme_json_caches' );
add_action( 'switch_theme', '_gutenberg_clean_theme_json_caches' );

/**
* This is a temporary fix to ensure that the block editor styles are enqueued
* in the order the iframe expects.
Expand Down
170 changes: 0 additions & 170 deletions lib/compat/wordpress-6.2/get-global-styles-and-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,176 +59,6 @@ function wp_theme_has_theme_json_clean_cache() {
}
}

/**
* Gets the global styles custom css from theme.json.
*
* @return string
*/
function gutenberg_get_global_styles_custom_css() {
Copy link
Member

@oandregal oandregal May 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been moved to lib/global-styles-and-settings.php verbatim.

// Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow.
$can_use_cached = ! WP_DEBUG;
$cache_key = 'gutenberg_get_global_custom_css';
$cache_group = 'theme_json';
if ( $can_use_cached ) {
$cached = wp_cache_get( $cache_key, $cache_group );
if ( $cached ) {
return $cached;
}
}

if ( ! wp_theme_has_theme_json() ) {
return '';
}

$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
$stylesheet = $tree->get_custom_css();

if ( $can_use_cached ) {
wp_cache_set( $cache_key, $stylesheet, $cache_group );
}

return $stylesheet;
}

/**
* Returns the stylesheet resulting of merging core, theme, and user data.
*
* @param array $types Types of styles to load. Optional.
* It accepts as values: 'variables', 'presets', 'styles', 'base-layout-styles.
* If empty, it'll load the following:
* - for themes without theme.json: 'variables', 'presets', 'base-layout-styles'.
* - for themes with theme.json: 'variables', 'presets', 'styles'.
*
* @return string Stylesheet.
*/
function gutenberg_get_global_stylesheet( $types = array() ) {
Copy link
Member

@oandregal oandregal May 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been moved to lib/global-styles-and-settings.php verbatim.

// Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow.
$can_use_cached = empty( $types ) && ! WP_DEBUG;
$cache_key = 'gutenberg_get_global_stylesheet';
$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_Gutenberg::get_merged_data();
$supports_theme_json = wp_theme_has_theme_json();
if ( empty( $types ) && ! $supports_theme_json ) {
$types = array( 'variables', 'presets', 'base-layout-styles' );
} elseif ( empty( $types ) ) {
$types = array( 'variables', 'presets', 'styles' );
}

/*
* If variables are part of the stylesheet,
* we add them.
*
* This is so themes without a theme.json still work as before 5.9:
* they can override the default presets.
* See https://core.trac.wordpress.org/ticket/54782
*/
$styles_variables = '';
if ( in_array( 'variables', $types, true ) ) {
/*
* We only use the default, theme, and custom origins.
* This is because styles for blocks origin are added
* at a later phase (render cycle) so we only render the ones in use.
* @see wp_add_global_styles_for_blocks
*/
$origins = array( 'default', 'theme', 'custom' );
$styles_variables = $tree->get_stylesheet( array( 'variables' ), $origins );
$types = array_diff( $types, array( 'variables' ) );
}

/*
* For the remaining types (presets, styles), we do consider origins:
*
* - themes without theme.json: only the classes for the presets defined by core
* - themes with theme.json: the presets and styles classes, both from core and the theme
*/
$styles_rest = '';
if ( ! empty( $types ) ) {
/*
* We only use the default, theme, and custom origins.
* This is because styles for blocks origin are added
* at a later phase (render cycle) so we only render the ones in use.
* @see wp_add_global_styles_for_blocks
*/
$origins = array( 'default', 'theme', 'custom' );
if ( ! $supports_theme_json ) {
$origins = array( 'default' );
}
$styles_rest = $tree->get_stylesheet( $types, $origins );
}
$stylesheet = $styles_variables . $styles_rest;
if ( $can_use_cached ) {
wp_cache_set( $cache_key, $stylesheet, $cache_group );
}
return $stylesheet;
}

/**
* Function to get the settings resulting of merging core, theme, and user data.
*
* @param array $path Path to the specific setting to retrieve. Optional.
* If empty, will return all settings.
* @param array $context {
* Metadata to know where to retrieve the $path from. Optional.
*
* @type string $block_name Which block to retrieve the settings from.
* If empty, it'll return the settings for the global context.
* @type string $origin Which origin to take data from.
* Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
* If empty or unknown, 'all' is used.
* }
*
* @return array The settings to retrieve.
*/
function gutenberg_get_global_settings( $path = array(), $context = array() ) {
Copy link
Member

@oandregal oandregal May 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been moved to lib/global-styles-and-settings.php verbatim.

if ( ! empty( $context['block_name'] ) ) {
$new_path = array( 'blocks', $context['block_name'] );
foreach ( $path as $subpath ) {
$new_path[] = $subpath;
}
$path = $new_path;
}

// This is the default value when no origin is provided or when it is 'all'.
$origin = 'custom';
if (
! wp_theme_has_theme_json() ||
( isset( $context['origin'] ) && 'base' === $context['origin'] )
) {
$origin = 'theme';
}

$cache_group = 'theme_json';
$cache_key = 'gutenberg_get_global_settings_' . $origin;
$settings = wp_cache_get( $cache_key, $cache_group );

if ( false === $settings || WP_DEBUG ) {
$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin )->get_settings();
wp_cache_set( $cache_key, $settings, $cache_group );
}

return _wp_array_get( $settings, $path, $settings );
}

/**
* Private function to clean the caches used by gutenberg_get_global_settings method.
*
* @access private
*/
function _gutenberg_clean_theme_json_caches() {
Copy link
Member

@oandregal oandregal May 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been moved to lib/global-styles-and-settings.php verbatim.

wp_cache_delete( 'wp_theme_has_theme_json', 'theme_json' );
wp_cache_delete( 'gutenberg_get_global_stylesheet', 'theme_json' );
wp_cache_delete( 'gutenberg_get_global_settings_custom', 'theme_json' );
wp_cache_delete( 'gutenberg_get_global_settings_theme', 'theme_json' );
wp_cache_delete( 'gutenberg_get_global_custom_css', 'theme_json' );
WP_Theme_JSON_Resolver_Gutenberg::clean_cached_data();
}

/**
* Tell the cache mechanisms not to persist theme.json data across requests.
* The data stored under this cache group:
Expand Down
22 changes: 0 additions & 22 deletions lib/compat/wordpress-6.2/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,25 +152,3 @@ function( $settings ) {
},
100
);

/**
* Enqueues the global styles custom css.
*
* @since 6.2.0
*/
function gutenberg_enqueue_global_styles_custom_css() {
Copy link
Member

@oandregal oandregal May 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The function and the filter has been moved to lib/script-loader.php verbatim.

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 .= gutenberg_get_global_styles_custom_css();

if ( ! empty( $custom_css ) ) {
wp_add_inline_style( 'global-styles', $custom_css );
}
}
add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_custom_css' );
Loading