Skip to content

Extend conditional loading of block global styles to third-party blocks #9413

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

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from
+56 −14
Open

Extend conditional loading of block global styles to third-party blocks #9413

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6338a29
Extend conditional loading of block global styles to third-party blocks
Aug 10, 2025
469cddf
Improve third-party block conditional loading implementation
Aug 10, 2025
2941f39
Add backward compatibility for third-party block styles
Aug 10, 2025
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
70 changes: 56 additions & 14 deletions src/wp-includes/global-styles-and-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,37 @@ function wp_get_global_stylesheet( $types = array() ) {
return $stylesheet;
}

/**
* Generate the stylesheet handle for a block.
*
* @since 6.9.0
* @access private
*
* @param string $block_name The block name (e.g., 'core/paragraph' or 'my-plugin/custom-block').
* @return string|null The stylesheet handle or null if generation fails.
*/
function wp_generate_block_stylesheet_handle( $block_name ) {
if ( ! is_string( $block_name ) || empty( $block_name ) ) {
return null;
}

// Handle core blocks.
if ( str_starts_with( $block_name, 'core/' ) ) {
$block_name = str_replace( 'core/', '', $block_name );
return 'wp-block-' . $block_name;
}

// Handle third-party blocks.
$block_name_parts = explode( '/', $block_name );
if ( count( $block_name_parts ) === 2 && ! empty( $block_name_parts[0] ) && ! empty( $block_name_parts[1] ) ) {
$namespace = $block_name_parts[0];
$name = $block_name_parts[1];
return 'wp-block-' . $namespace . '-' . $name;
}

return null;
Copy link
Member

Choose a reason for hiding this comment

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

this function performs a lot of work, but is it doing anything other than replacing the slash with a dash?

Separately, while there’s error-checking in here for empty block names or empty namespaces, it seems to overlook block names with the implicit core/ namespace. Currently I believe it returns null for those. If it’s provided paragraph should it return null or wp-block-paragraph?

$block_name = str_replace( 'core/', '', $block_name );
$handle     = str_replace( '/', '-', $block_name );

return "wp-block-{$handle}";

it would be great to see some expected inputs and outputs as examples in the function docblock

Copy link
Author

Choose a reason for hiding this comment

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

Great points, @dmsnell! You're absolutely right on both counts.

-Re: "more than replacing slash with dash"
You're correct - the function name undersells what it's actually doing. It's performing namespace normalization (stripping core/), character replacement, and CSS class generation. The complexity could be better reflected in either the function name or documentation.

-Re: core namespace handling
Good catch on the implicit core namespace issue. Looking at the current logic, I believe both cases should work correctly:

  • 'paragraph' → 'wp-block-paragraph' (no change from str_replace)
  • 'core/paragraph' → 'wp-block-paragraph' (core/ stripped)

However, the return null; on line 274 suggests there might be additional validation logic that's causing issues with certain block names. Could you share a specific example where 'paragraph' returns null? That would help identify if there's a validation condition I'm missing.

Re: documentation
Absolutely agree on adding examples to the docblock. Something like:

/**
 * @example
 * generate_classname_from_block_name( 'paragraph' )        // 'wp-block-paragraph'
 * generate_classname_from_block_name( 'core/paragraph' )   // 'wp-block-paragraph'  
 * generate_classname_from_block_name( 'custom/slider' )    // 'wp-block-custom-slider'
 */

Would also be worth optimizing for the common case where no namespace is present (avoiding unnecessary string operations).

Let me know if you can provide more details on the null return case - happy to investigate further!

}

/**
* Adds global style rules to the inline style for each block.
*
Expand Down Expand Up @@ -312,33 +343,44 @@ function wp_add_global_styles_for_blocks() {
* Block-specific global styles should be attached to the global-styles handle, but
* only for blocks on the page, thus we check if the block's handle is in the queue
* before adding the inline style.
* This conditional loading only applies to core blocks.
* TODO: Explore how this could be expanded to third-party blocks as well.
* This conditional loading applies to both core and third-party blocks.
*/
if ( isset( $metadata['name'] ) ) {
if ( str_starts_with( $metadata['name'], 'core/' ) ) {
$block_name = str_replace( 'core/', '', $metadata['name'] );
$block_handle = 'wp-block-' . $block_name;
if ( in_array( $block_handle, $wp_styles->queue, true ) ) {
$block_handle = wp_generate_block_stylesheet_handle( $metadata['name'] );

if ( $block_handle && in_array( $block_handle, $wp_styles->queue, true ) ) {
wp_add_inline_style( $stylesheet_handle, $block_css );
} elseif ( ! $block_handle ) {
// Fallback for blocks with unexpected naming patterns.
wp_add_inline_style( $stylesheet_handle, $block_css );
} else {
// For third-party blocks, load styles if the block handle was generated successfully
// but not found in queue. This maintains backward compatibility where third-party
// block styles were always loaded.
if ( ! str_starts_with( $metadata['name'], 'core/' ) ) {
wp_add_inline_style( $stylesheet_handle, $block_css );
}
} else {
wp_add_inline_style( $stylesheet_handle, $block_css );
}
}

// The likes of block element styles from theme.json do not have $metadata['name'] set.
if ( ! isset( $metadata['name'] ) && ! empty( $metadata['path'] ) ) {
$block_name = wp_get_block_name_from_theme_json_path( $metadata['path'] );
if ( $block_name ) {
if ( str_starts_with( $block_name, 'core/' ) ) {
$block_name = str_replace( 'core/', '', $block_name );
$block_handle = 'wp-block-' . $block_name;
if ( in_array( $block_handle, $wp_styles->queue, true ) ) {
$block_handle = wp_generate_block_stylesheet_handle( $block_name );

if ( $block_handle && in_array( $block_handle, $wp_styles->queue, true ) ) {
wp_add_inline_style( $stylesheet_handle, $block_css );
} elseif ( ! $block_handle ) {
// Fallback for blocks with unexpected naming patterns.
wp_add_inline_style( $stylesheet_handle, $block_css );
} else {
// For third-party blocks, load styles if the block handle was generated successfully
// but not found in queue. This maintains backward compatibility where third-party
// block styles were always loaded.
if ( ! str_starts_with( $block_name, 'core/' ) ) {
wp_add_inline_style( $stylesheet_handle, $block_css );
}
} else {
wp_add_inline_style( $stylesheet_handle, $block_css );
}
}
}
Expand Down
Loading