Get generated block styles programmatically

Question

If you use wp_head() in the header of your theme Wordpress generated a style tag for the Gutenberg block editor.

Who knows how you can get the generated css style tag with the styles without using wp_head()?

Answer 1

We can look at the source of the wp_head() function:

function wp_head() {
    /**
     * Prints scripts or data in the head tag on the front end.
     *
     * @since 1.5.0
     */
    do_action( 'wp_head' );
}

And see that it really only calls the wp_head hook. We can then look through the WordPress core code for hooked functions that output the styles. From what I could discern in wp-includes/default-filters.php, the main function could be wp_print_styles:

add_action( 'wp_head', 'wp_print_styles', 8 );

This is further supported when we look at the function description for wp_print_styles:

Displays styles that are in the $handles queue.

However, this will print out all enqueued CSS, not those only for blocks. You'd also want to ensure that all styles are enqueued too by ensuring wp_enqueue_scripts function has run (this is also hooked into wp_head).

If you need to only have CSS enqueued for blocks, you may need to look at hooking into hooks to determine if a CSS asset is enqueued from a block. For example, you could use the render_block hook to get a list of view_style_handles and style_handles. Plus, you'd want to look at styles rendered by various block supports.