Global Styles: Element styles not working for third-party blocks

[ehtmlu]

This is a follow-up to #56915.

The Problem:

Element-specific global styles for third-party blocks still don't work. The styles are not added to the inline CSS in the frontend.

---

General global styles for third-party blocks work well:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "styles": {
        "blocks": {
            "my/third-party-block": {
                "color": {
                    "background": "hotpink"
                }
            }
        }
    }
}

✔ work well in the block editor
✔ work well in the frontend

---

Element-specific global styles for third-party blocks don't work:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "styles": {
        "blocks": {
            "my/third-party-block": {
                "elements": {
                    "link": {
                        "color": {
                            "background": "hotpink"
                        }
                    }
                }
            }
        }
    }
}

✔ work well in the block editor
❌ don't work in the frontend

---

Investigation:

Since it works fine in the block editor, I thought it must be unintentional that it doesn't work in the frontend. So I researched deeper and came across the wp_add_global_styles_for_blocks function.

At the end of the function there is this part:

function wp_add_global_styles_for_blocks() {

	...

		// The likes of block element styles from theme.json do not have  $metadata['name'] set.
		if ( ! isset( $metadata['name'] ) && ! empty( $metadata['path'] ) ) {
			$result = array_values(
				array_filter(
					$metadata['path'],
					function ( $item ) {
						if ( strpos( $item, 'core/' ) !== false ) {
							return true;
						}
						return false;
					}
				)
			);
			if ( isset( $result[0] ) ) {
				if ( str_starts_with( $result[0], 'core/' ) ) {
					$block_name        = str_replace( 'core/', '', $result[0] );
					$stylesheet_handle = 'wp-block-' . $block_name;
				}
				wp_add_inline_style( $stylesheet_handle, $block_css );
			}
		}
	}
}

In that part this happens:

1. With the statement if ( str_starts_with( $result[0], 'core/' ) ) we check whether it is a core block or not. However, because of the array_filter before, the values of $result can only start with core/ anyway. So this if statement is redundant.
2. So if isset( $result[0] ) is TRUE, it always is a core block. Therefor the function wp_add_inline_style will be called only for core blocks but never for third-party blocks.

---

Solution:

• Remove the redundant if ( str_starts_with( $result[0], 'core/' ) ) statement
• Move the wp_add_inline_style function call outside the if ( isset( $result[0] ) ) statement

  function wp_add_global_styles_for_blocks() {
  
  	...
  
  		// The likes of block element styles from theme.json do not have  $metadata['name'] set.
  		if ( ! isset( $metadata['name'] ) && ! empty( $metadata['path'] ) ) {
  			$result = array_values(
  				array_filter(
  					$metadata['path'],
  					function ( $item ) {
  						if ( strpos( $item, 'core/' ) !== false ) {
  							return true;
  						}
  						return false;
  					}
  				)
  			);
  			if ( isset( $result[0] ) ) {
  				$block_name        = str_replace( 'core/', '', $result[0] );
  				$stylesheet_handle = 'wp-block-' . $block_name;
  			}
  			wp_add_inline_style( $stylesheet_handle, $block_css );
  		}
  	}
  }