Skip to content

Gallery block: update the gallery gap to load styles in header for block themes #41015

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
glendaviesnz merged 8 commits into from
May 30, 2022
Merged

Gallery block: update the gallery gap to load styles in header for block themes #41015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3b646e2
Move styles to header for block themes
May 30, 2022
11bd870
Move the scriptloader method to the 6.1 compat folder
May 30, 2022
ba78b17
Add doc comment to help 6.1 release maintainer
May 13, 2022
4c771fa
Fix typos
May 13, 2022
c2c45e2
Another typo
May 13, 2022
be27303
Escape output and remove dupe import after rebase
May 30, 2022
5d66c81
Revert escape output as it escapes CSS selector such as `>`
ramonjd May 24, 2022
79afad9
Remove duplicate file load!
May 30, 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
26 changes: 0 additions & 26 deletions lib/compat/wordpress-5.9/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,29 +46,3 @@ function gutenberg_enqueue_global_styles_assets() {
}
add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_assets' );
add_action( 'wp_footer', 'gutenberg_enqueue_global_styles_assets' );

/**
* This function takes care of adding inline styles
* in the proper place, depending on the theme in use.
*
* 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.
*/
function gutenberg_enqueue_block_support_styles( $style ) {
$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";
}
);
}
31 changes: 31 additions & 0 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,6 +5,37 @@
* @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
2 changes: 1 addition & 1 deletion lib/load.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,10 @@ function gutenberg_is_experiment_enabled( $name ) {
require __DIR__ . '/compat/wordpress-6.1/blocks.php';
require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
require __DIR__ . '/compat/wordpress-6.1/script-loader.php';
require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-6-1.php';
require __DIR__ . '/compat/wordpress-6.1/block-template-utils.php';
require __DIR__ . '/compat/wordpress-6.1/wp-theme-get-post-templates.php';
require __DIR__ . '/compat/wordpress-6.1/script-loader.php';

// Experimental features.
remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
Expand Down
11 changes: 1 addition & 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 @@ -79,16 +79,7 @@ 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 = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';

// Ideally styles should be loaded in the head, but blocks may be parsed
// after that, so loading in the footer for now.
// See https://core.trac.wordpress.org/ticket/53494.
add_action(
'wp_footer',
function () use ( $style ) {
echo '<style> ' . $style . '</style>';
},
11
);
gutenberg_enqueue_block_support_styles( $style, 11 );
return $content;
}
/**
Expand Down