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

Gallery: register styles with style engine #43070

Merged
merged 5 commits into from
Oct 27, 2022
Merged

Gallery: register styles with style engine #43070

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
5eaf738
Removing gutenberg_enqueue_block_support_styles
ramonjd Aug 8, 2022
4f4c5b3
Deprecate gutenberg_enqueue_block_support_styles
ramonjd Aug 8, 2022
a79f2e7
Remove enqueue option (deprecated)
ramonjd Sep 27, 2022
8f08972
Use the WP_HTML_Tag_Processor to add the unique classname to the cont…
ramonjd Oct 13, 2022
84d1e7b
Move gutenberg_enqueue_block_support_styles wordpress-6.2/script-load…
ramonjd Oct 14, 2022
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
31 changes: 0 additions & 31 deletions lib/compat/wordpress-6.1/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,6 @@
* @package gutenberg
*/

/**
* This function takes care of adding inline styles
* in the proper place, depending on the theme in use.
*
* This method was added to core in 5.9.1, but with a single param ($style). The second param ($priority) was
* added post 6.0, so the 6.1 release needs to have wp_enqueue_block_support_styles updated to include this param.
*
* For block themes, it's loaded in the head.
* For classic ones, it's loaded in the body
* because the wp_head action happens before
* the render_block.
*
* @link https://core.trac.wordpress.org/ticket/53494.
*
* @param string $style String containing the CSS styles to be added.
* @param int $priority To set the priority for the add_action.
*/
function gutenberg_enqueue_block_support_styles( $style, $priority = 10 ) {
$action_hook_name = 'wp_footer';
if ( wp_is_block_theme() ) {
$action_hook_name = 'wp_head';
}
add_action(
$action_hook_name,
static function () use ( $style ) {
echo "<style>$style</style>\n";
},
$priority
);
}

/**
* This applies a filter to the list of style nodes that comes from `get_style_nodes` in WP_Theme_JSON.
* This particular filter removes all of the blocks from the array.
Expand Down
35 changes: 35 additions & 0 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 @@ -28,3 +28,38 @@ function gutenberg_register_vendor_scripts_62( $scripts ) {
$script->deps = array_merge( $script->deps, array( 'wp-inert-polyfill' ) );
}
add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts_62' );

/**
* This function takes care of adding inline styles
* in the proper place, depending on the theme in use.
*
* This method was added to core in 5.9.1, but with a single param ($style). The second param ($priority) was
* added post 6.0, so the 6.1 release needs to have wp_enqueue_block_support_styles updated to include this param.
*
* For block themes, it's loaded in the head.
* For classic ones, it's loaded in the body
* because the wp_head action happens before
* the render_block.
*
* @link https://core.trac.wordpress.org/ticket/53494.
*
* @deprecated 6.2 Block supports styles are now stored for enqueuing via the style engine API. See: packages/style-engine/README.md.
*
* @param string $style String containing the CSS styles to be added.
* @param int $priority To set the priority for the add_action.
*/
function gutenberg_enqueue_block_support_styles( $style, $priority = 10 ) {
_deprecated_function( __FUNCTION__, '6.2' );

$action_hook_name = 'wp_footer';
if ( wp_is_block_theme() ) {
$action_hook_name = 'wp_head';
}
add_action(
$action_hook_name,
static function () use ( $style ) {
echo "<style>$style</style>\n";
},
$priority
);
}
29 changes: 19 additions & 10 deletions packages/block-library/src/gallery/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,10 @@ function block_core_gallery_render( $attributes, $content ) {
}
}

$class = wp_unique_id( 'wp-block-gallery-' );
$content = preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
'class="' . $class . ' ',
$content,
1
);
$unique_gallery_classname = wp_unique_id( 'wp-block-gallery-' );
$processed_content = new WP_HTML_Tag_Processor( $content );
$processed_content->next_tag();
$processed_content->add_class( $unique_gallery_classname );

// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
// gap on the gallery.
Expand All @@ -102,10 +99,22 @@ function block_core_gallery_render( $attributes, $content ) {
}

// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
$style = '.wp-block-gallery.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
$gallery_styles = array();
$gallery_styles[] = array(
'selector' => ".wp-block-gallery.{$unique_gallery_classname}",
'declarations' => array(
'--wp--style--unstable-gallery-gap' => $gap_column,
'gap' => $gap_value,
),
);

wp_enqueue_block_support_styles( $style, 11 );
return $content;
gutenberg_style_engine_get_stylesheet_from_css_rules(
Copy link
Member Author

@ramonjd ramonjd Aug 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

I think we might have to come up with a way to ensure these styles are printed after the layout styles:

See:

cc @glendaviesnz

Copy link
Contributor

@andrewserong andrewserong Oct 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Following the testing in #41423, it looks like the fallback styling rules aren't being output on a classic theme for me (TwentyTwentyOne), so if I add the following to my theme's css, it doesn't affect the gallery gap:

html {
	--wp--style--gallery-gap-default: 37px;
}

From a bit of introspection, it appears that the fallback rules in $fallback_gap are being stripped in WP 6.0, as it's a pretty complex value, and the gutenberg_safecss_filter_attr_allow_css_6_1 function here hasn't been updated to reflect the final version in 6.1 on these lines: https://github.com/WordPress/wordpress-develop/blob/2b4d385298504d412e9f0dea2e7019d53463c705/src/wp-includes/kses.php#L2508-L2512

If I copy over that preg_replace line to the Gutenberg function, it appears that the style output works correctly, so we might need to land another backport of a backport before we can go with this PR?

Copy link
Contributor

Choose a reason for hiding this comment

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

I'll put up a PR to backport that line.

$gallery_styles,
array(
'context' => 'block-supports',
)
);
return (string) $processed_content;
}
/**
* Registers the `core/gallery` block on server.
Expand Down