Friday, July 16, 2021
The Great Tit
Updated: 28. 9. 2022, Added: 16. 7. 2021

Oxygen Front-end styles in Gutenberg

You may want to display the content when editing in Gutenberg editor with your frontend Oxygen Styles included. It is possible with

add_editor_style('your-enqueued-css-file-name.css');

But the challenge is that Oxygen is creating CSS files for all your Custom Stylesheets you made inside the editor. So you propably want to include them all. That's possible with PHP function glob();.

I tried to use glob with get_site_url but that wasn't working well for me. Then I realized, that glob(); needs to be used with ABSPATH but add_editor_style works only with URL of CSS file.

The final code which I use in Advanced Scripts:

//UPDATED 28.09.2022
// need to run on INIT
// Added Automatic.css stylesheets
add_theme_support( 'editor-styles' );
$urlacss = get_site_url() . '/wp-content/uploads/automatic-css';
$urloxy = get_site_url() . '/wp-content/uploads/oxygen/css/';
add_editor_style( $urlacss . '/automatic.css' );
add_editor_style( $urlacss . '/automatic-oxygen.css' );

$directory = ABSPATH . '/wp-content/uploads/oxygen/css/';
$extension = '.css';
if ( file_exists($directory) ) {
   foreach ( glob($directory . '*' . $extension) as $file ) {
      add_editor_style($urloxy . basename($file));
   }
}

/**
 * Show Adobe font in editor
*/
add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_style( 'adobe-fonts', 'https://use.typekit.net/848xs48.css' );
} ); 
Did I help you? Fuel our WordPress journey
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

One comment on “Oxygen Front-end styles in Gutenberg”

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram