If you want to extract the CSS generated by Gutenberg and your WordPress theme, you can do so using built-in functions and developer tools. Below is a step-by-step guide to retrieving and exposing this CSS.
1. Retrieve Gutenberg Editor CSS
Gutenberg dynamically generates CSS based on block styles. You can access these styles by calling the core block styles.
Method 1: Using wp_enqueue_style
Add the following snippet to your theme’s functions.php file to retrieve and expose Gutenberg block styles:
1 2 3 4 5 6 7 8 9 | function expose_gutenberg_css() { global $wp_styles; foreach ($wp_styles->registered as $handle => $style) { if (strpos($handle, 'wp-block') !== false) { echo '<link rel="stylesheet" href="' . esc_url($style->src) . '" />'; } }}add_action('wp_head', 'expose_gutenberg_css'); |
What This Does: This function loops through all registered styles and exposes those related to Gutenberg blocks.
Method 2: Manually Extracting Gutenberg CSS
Alternatively, you can manually retrieve Gutenberg CSS from the following locations:
- Check
wp-content/themes/your-theme/style.cssfor any theme-specific Gutenberg styles. - Inspect files in
wp-includes/css/dist/block-library/style.css(core Gutenberg styles). - Use browser DevTools (F12) > Elements tab to inspect inline styles.
2. Retrieve Theme-Generated CSS
WordPress themes often generate dynamic CSS. You can retrieve it using the following method:
Method 1: Fetch Theme Stylesheets
Use this snippet in functions.php to expose theme styles:
1 2 3 4 5 6 7 8 9 | function expose_theme_css() { global $wp_styles; foreach ($wp_styles->registered as $handle => $style) { if (strpos($style->src, get_template_directory_uri()) !== false) { echo '<link rel="stylesheet" href="' . esc_url($style->src) . '" />'; } }}add_action('wp_head', 'expose_theme_css'); |
What This Does: This function scans all enqueued styles and lists those originating from your active theme.
Method 2: Extract Inline CSS
Some themes generate inline styles dynamically. Use the following query to capture these styles:
1 2 3 4 5 6 7 8 | function get_inline_styles() { ob_start(); do_action('wp_head'); return ob_get_clean();}$inline_styles = get_inline_styles();preg_match_all('/<style[^>]*>(.*?)<\/style>/is', $inline_styles, $matches);echo implode("\n", $matches[1]); |
What This Does: It retrieves and prints all inline CSS generated during the wp_head action.
3. SEO Considerations When Exposing CSS
Exposing CSS can be useful for debugging, performance optimization, or customizing styles. However, ensure that:
Minify and combine styles to improve loading speed.
Avoid exposing sensitive theme structure information.
Use rel="preload"for critical stylesheets to optimize render time.
Final Thoughts
By following these methods, you can retrieve and expose Gutenberg and theme-generated CSS efficiently. If your goal is performance optimization, consider using a caching plugin to reduce unnecessary CSS loading.
Need help troubleshooting CSS issues? Share your findings below! 