Oxygen Front-end styles in Gutenberg

min read / Custom Code, Oxygen Builder, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: You may want to display the content when editing in Gutenberg editor with your frontend Oxygen Styles included. It is possible with 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…

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' );
} ); 

2 comments