Skip to content
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

Jump to bottom

Fix CSS Custom Properties for presets in the site editor #36851

Merged
merged 5 commits into from Dec 7, 2021
Merged

Fix CSS Custom Properties for presets in the site editor #36851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
96698de
Remove __experimentalNoWrapper API
oandregal Nov 25, 2021
4c4bf99
Make sure CSS Custom Properties are enqueued in the site editor
oandregal Nov 25, 2021
3716889
Use gutenberg_extend_block_editor_styles_html
oandregal Dec 2, 2021
48e4e1e
Revert "Use gutenberg_extend_block_editor_styles_html"
oandregal Dec 3, 2021
b481928
Use proper function name
oandregal Dec 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
46 changes: 23 additions & 23 deletions lib/global-styles.php
View file
Open in desktop
Expand Up @@ -71,34 +71,22 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
}

$new_global_styles = array();
$new_presets = array(
array(
'css' => 'variables',
Copy link
Member Author

Choose a reason for hiding this comment

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

We no longer pass the CSS variables via the block editor settings and tell the editor not to wrap them. Instead, we enqueue them via the enqueue_block_editor_assets filter.

'__unstableType' => 'presets',
'__experimentalNoWrapper' => true,
),
array(
'css' => 'presets',

$style_css = wp_get_global_stylesheet( array( 'presets' ) );
if ( '' !== $style_css ) {
$new_global_styles[] = array(
'css' => $style_css,
'__unstableType' => 'presets',
),
);
foreach ( $new_presets as $new_style ) {
$style_css = wp_get_global_stylesheet( array( $new_style['css'] ) );
if ( '' !== $style_css ) {
$new_style['css'] = $style_css;
$new_global_styles[] = $new_style;
}
);
}

$new_block_classes = array(
'css' => 'styles',
'__unstableType' => 'theme',
);
if ( WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
$style_css = wp_get_global_stylesheet( array( $new_block_classes['css'] ) );
$style_css = wp_get_global_stylesheet( array( 'styles' ) );
if ( '' !== $style_css ) {
$new_block_classes['css'] = $style_css;
$new_global_styles[] = $new_block_classes;
$new_global_styles[] = array(
'css' => $style_css,
'__unstableType' => 'theme',
);
}
}

Expand Down Expand Up @@ -288,6 +276,16 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $
return ! ! preg_match( '/^var\(--wp-[a-zA-Z0-9\-]+\)$/', trim( $parts[1] ) );
}

/**
* Function to enqueue the CSS Custom Properties
* coming from theme.json.
*/
function gutenberg_load_css_custom_properties() {
wp_register_style( 'global-styles-css-custom-properties', false, array(), true, true );
wp_add_inline_style( 'global-styles-css-custom-properties', wp_get_global_stylesheet( array( 'variables' ) ) );
wp_enqueue_style( 'global-styles-css-custom-properties' );
}

// The else clause can be removed when plugin support requires WordPress 5.8.0+.
if ( function_exists( 'get_block_editor_settings' ) ) {
add_filter( 'block_editor_settings_all', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX );
Expand All @@ -304,3 +302,5 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $
add_filter( 'force_filtered_html_on_import', 'gutenberg_global_styles_force_filtered_html_on_import_filter', 999 );
add_filter( 'safecss_filter_attr_allow_css', 'gutenberg_global_styles_include_support_for_wp_variables', 10, 2 );
// This filter needs to be executed last.

add_filter( 'enqueue_block_editor_assets', 'gutenberg_load_css_custom_properties' );
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this was of loading styles is kind of deprecated to the iframing. cc @ellatrix

Copy link
Member

Choose a reason for hiding this comment

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

For them to load in the iframe, the styles need to be enqueued here:

gutenberg/lib/client-assets.php

Lines 710 to 780 in e523441

/**
* Sets the editor styles to be consumed by JS.
*/
function gutenberg_extend_block_editor_styles_html() {
global $pagenow;
$script_handles = array();
$style_handles = array(
'wp-block-editor',
'wp-block-library',
'wp-block-library-theme',
'wp-edit-blocks',
);
if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) {
$style_handles[] = 'wp-widgets';
$style_handles[] = 'wp-edit-widgets';
}
$block_registry = WP_Block_Type_Registry::get_instance();
foreach ( $block_registry->get_all_registered() as $block_type ) {
if ( ! empty( $block_type->style ) ) {
$style_handles[] = $block_type->style;
}
if ( ! empty( $block_type->editor_style ) ) {
$style_handles[] = $block_type->editor_style;
}
if ( ! empty( $block_type->script ) ) {
$script_handles[] = $block_type->script;
}
}
$style_handles = array_unique( $style_handles );
$done = wp_styles()->done;
ob_start();
// We do not need reset styles for the iframed editor.
wp_styles()->done = array( 'wp-reset-editor-styles' );
wp_styles()->do_items( $style_handles );
wp_styles()->done = $done;
$styles = ob_get_clean();
$script_handles = array_unique( $script_handles );
$done = wp_scripts()->done;
ob_start();
wp_scripts()->done = array();
wp_scripts()->do_items( $script_handles );
wp_scripts()->done = $done;
$scripts = ob_get_clean();
$editor_assets = wp_json_encode(
array(
'styles' => $styles,
'scripts' => $scripts,
)
);
echo "<script>window.__editorAssets = $editor_assets</script>";
}
add_action( 'admin_footer-appearance_page_gutenberg-edit-site', 'gutenberg_extend_block_editor_styles_html' );
add_action( 'admin_footer-post.php', 'gutenberg_extend_block_editor_styles_html' );
add_action( 'admin_footer-post-new.php', 'gutenberg_extend_block_editor_styles_html' );
add_action( 'admin_footer-widgets.php', 'gutenberg_extend_block_editor_styles_html' );

Copy link
Member Author

Choose a reason for hiding this comment

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

Hey @ellatrix I've pushed the changes to use the function you mention, but it looks like it enqueues the given styles within the iframe. Or perhaps I need to do more things?

In this PR I'm actually trying to do the opposite: enqueue the styles outside the iframe, so they're available for the global styles sidebar.

This is the setup:

  • Styles for the content, within the iframe: CSS vars + block styles. This is working fine and it's done at gutenberg_experimental_global_styles_settings (adds them to editor settings' styles key).
  • Styles for the sidebar: only the CSS vars. So far, we've been using the same method than the content's styles but with an additional flag (__experimentalNoWrapper) so they weren't wrapped by .editor-styles-wrapper and so targeted the sidebar. This is what I'm struggling to see how to do in an iframed editor.

Copy link
Member Author

Choose a reason for hiding this comment

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

Talked with ella in private and can confirm that using enqueue_block_editor_assets is fine. So, switching this back to the original direction.

Copy link
Member

Choose a reason for hiding this comment

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

enqueue_block_editor_assets is for the editor UI only, not the iframe. If you need it to load in both, you'll need to use both.

29 changes: 13 additions & 16 deletions packages/block-editor/src/utils/transform-styles/index.js
View file
Open in desktop
Expand Up @@ -23,23 +23,20 @@ import wrap from './transforms/wrap';
* @return {Array} converted rules.
*/
const transformStyles = ( styles, wrapperClassName = '' ) => {
return map(
styles,
( { css, baseURL, __experimentalNoWrapper = false } ) => {
Copy link
Member Author

Choose a reason for hiding this comment

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

We no longer need the __experimentalNoWrapper so this is an extra win.

const transforms = [];
if ( wrapperClassName && ! __experimentalNoWrapper ) {
transforms.push( wrap( wrapperClassName ) );
}
if ( baseURL ) {
transforms.push( urlRewrite( baseURL ) );
}
if ( transforms.length ) {
return traverse( css, compose( transforms ) );
}

return css;
return map( styles, ( { css, baseURL } ) => {
const transforms = [];
if ( wrapperClassName ) {
transforms.push( wrap( wrapperClassName ) );
}
if ( baseURL ) {
transforms.push( urlRewrite( baseURL ) );
}
);
if ( transforms.length ) {
return traverse( css, compose( transforms ) );
}

return css;
} );
};

export default transformStyles;
1 change: 0 additions & 1 deletion packages/edit-site/src/components/global-styles/use-global-styles-output.js
View file
Open in desktop
Expand Up @@ -378,7 +378,6 @@ export function useGlobalStylesOutput() {
{
css: customProperties,
isGlobalStyles: true,
__experimentalNoWrapper: true,
},
{
css: globalStyles,
Expand Down