Aleš Sýkora wrote

Oxygen Front-end styles in Gutenberg

WARNING: I can’t figure how to make it working currently. If you have any idea, please put in in the comments below.

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:

// Add theme support for Gutenberg options
add_theme_support( 'responsive-embeds' );
add_theme_support( 'customize-selective-refresh-widgets' );
add_theme_support( 'wp-block-styles' );
add_theme_support( 'align-wide' );
add_theme_support( 'editor-styles' );

// Add editor support for loading custom styles
add_editor_style( 'style-editor.css' );

// Load Google Fonts
add_editor_style( 'https://fonts.googleapis.com/css?family=Inter' );

// Add Oxygen default Stylesheet
add_editor_style( get_site_url() . '/wp-content/plugins/oxygen/component-framework/oxygen.css' );

// Add all CSS stylesheets from Oxygen Custom CSS Stylesheets folder
$directory = ABSPATH . '/wp-content/uploads/oxygen/css/';
$extension = '.css';
$path = get_site_url() .'/wp-content/uploads/oxygen/css/';
if ( file_exists($directory) ) {
   foreach ( glob($directory . '*' . $extension) as $file ) {
      add_editor_style($path . basename($file));
   }
}

Just to be clear – If u use Frameworks like Oxyninja, or others, you would not see any changes. Thats because you do not style the elements like h1, h2, h3, pre, code… directly in your stylesheets.

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.

More from category
Aleš Sýkora wrote
Oxygen Lazy Load Gallery (Working 2021)
8. 4. 2020 in ,
Tutorial for working Lazy Load solution for Oxygen Builder gallery module.
Read More
Aleš Sýkora wrote
Shortcode to display word count or reading time
1. 7. 2019 in
This shortcode "word-count" will display a count of words for whatever content is passed, and can optionally display an estimated reading time.
Read More
Aleš Sýkora wrote
User friendly Multiple Select Field with Toolset Forms & Select2.js
11. 6. 2019 in
Using the standard multiple select field is bad. Bad for UX. Why should I hold down the CTRL when I need select more than one value? Let’s make your multiple select fields user friendly with Select2.js.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram