Aleš Sýkora / July 16, 2021 / 2 comments
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' );
} );
Fuel my passion for writing with a beer🍺
Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻
Matt Sartori
Just another very helpful snippet from the great tit. I just swapped out the example typekit link with mine and it worked immediately. This site is my favorite Oxygen resource.
Dhak
Great. It is very helpful. Thanks