Title: Levels Block Editor Styles for Oxygen Builder Author: Levels Branding and Webdevelopment Published: Novambor 12, 2025 Last modified: Januari 23, 2026 --- Search plugins ![](https://ps.w.org/levels-block-editor-styles-for-oxygen-builder/assets/banner- 772x250.jpg?rev=3394210) This plugin **hasn’t been tested with the latest 3 major releases of WordPress**. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. ![](https://ps.w.org/levels-block-editor-styles-for-oxygen-builder/assets/icon.svg? rev=3394210) # Levels Block Editor Styles for Oxygen Builder By [Levels Branding and Webdevelopment](https://profiles.wordpress.org/levelsdev/) [Download](https://downloads.wordpress.org/plugin/levels-block-editor-styles-for-oxygen-builder.1.1.0.zip) * [Details](https://rhg.wordpress.org/plugins/levels-block-editor-styles-for-oxygen-builder/#description) * [Reviews](https://rhg.wordpress.org/plugins/levels-block-editor-styles-for-oxygen-builder/#reviews) * [Installation](https://rhg.wordpress.org/plugins/levels-block-editor-styles-for-oxygen-builder/#installation) * [Development](https://rhg.wordpress.org/plugins/levels-block-editor-styles-for-oxygen-builder/#developers) [Support](https://wordpress.org/support/plugin/levels-block-editor-styles-for-oxygen-builder/) ## Description Levels Block Editor Styles for Oxygen Builder automatically injects your Oxygen Builder CSS into the WordPress block editor, ensuring that what you see in the editor matches what appears on the frontend. #### Features * **Automatic Style Detection** – Automatically finds and loads all relevant Oxygen CSS files * **Scoped Styling** – All CSS is scoped to prevent affecting editor UI elements * **Reusable Block Support** – Detects and loads styles for embedded reusable blocks * **Smart Context Detection** – Only loads in the block editor for users with edit permissions * **Performance Optimized** – Live-read approach with minimal overhead * **Responsive Images** – Automatically converts img tags to responsive versions with srcset and sizes attributes * **Per-Image Size Control** – Use the `data-image-size` attribute to override the default image size per element * **Settings Page** – Configure features under Oxygen > Block Editor Styles #### Block Editor Styles The plugin collects CSS from four sources: 1. **oxygen.css** – Core Oxygen framework styles 2. **universal.css** – Site-wide Oxygen styles 3. **Page-specific CSS** – Cached page styles 4. **Reusable block CSS** – Styles for embedded reusable blocks All CSS selectors are automatically rewritten to be scoped within the editor content area to prevent affecting the WordPress admin UI. #### Responsive Images When enabled, the plugin automatically replaces `` tags in your content with responsive versions that include `srcset` and `sizes` attributes. This provides optimized images for all screen sizes without any manual work. **How to use in Oxygen Builder:** 1. Go to **Oxygen > Block Editor Styles** in the WordPress admin 2. Enable “Responsive Images” 3. Choose a default image size (e.g. “large”) 4. All images in your content will now automatically get srcset attributes **Per-image size override:** You can override the default size on individual images using the `data-image-size` attribute: 1. Select your Image element in Oxygen 2. Go to **Advanced > Attributes** 3. Add attribute: `data-image-size` 4. Set value to any registered image size: `thumbnail`, `medium`, `medium_large`, ` large`, or `full` The `data-image-size` attribute is automatically removed from the final HTML output– it only serves as a control attribute for the plugin. #### Requirements * Oxygen Builder 4.x (must be installed and activated) * WordPress 5.8 or higher * PHP 7.4 or higher #### Related Plugins Looking to speed up your Oxygen workflow? Check out [Ready Made Oxygen Integration](https://wordpress.org/plugins/ready-made-oxygen-integration/)– Turn Figma designs into editable Oxygen Builder sections – copy & paste, just like that. #### Optional Dependencies For 100% reliable CSS scoping, you can install the CSS parser library via Composer: ``` composer install --no-dev ``` Without the library, the plugin uses a regex fallback that works for most cases. ### Credits Developed by Levels Branding & Webdevelopment OG ## Screenshots [⌊Before: Block editor with default styling⌉⌊Before: Block editor with default styling⌉[ Before: Block editor with default styling ## Installation 1. Upload the plugin files to `/wp-content/plugins/levels-block-editor-styles-for- oxygen-builder/`, or install through WordPress plugins screen 2. Activate the plugin through the ‘Plugins’ screen in WordPress 3. Block editor styles work automatically – no configuration needed 4. For responsive images, go to **Oxygen > Block Editor Styles** and enable the feature Note: This plugin requires Oxygen Builder 4.x to be installed and activated. ## FAQ ### Does this work with Oxygen 6.x? No, this plugin is designed specifically for Oxygen Builder 4.x only. ### Will this affect my frontend styles? No, the plugin only loads styles in the block editor. Your frontend remains unchanged. ### Do I need to configure anything? Block editor styles work automatically. For responsive images, go to **Oxygen > Block Editor Styles** to enable and configure the feature. ### How do I set a specific image size for one image? In Oxygen Builder, select your Image element, go to **Advanced > Attributes**, and add the attribute `data-image-size` with a value like `medium`, `large`, or `full`. This overrides the global default for that specific image. ### Does responsive images work with Image URL mode in Oxygen? Yes! The plugin detects the attachment from the URL regardless of whether you used Media Library or Image URL mode in Oxygen. As long as the image URL points to a file in your WordPress media library, it will be converted. ### What if I see weird styling in the editor UI? All styles are scoped to the content area only. If you experience issues, please report them in the support forum. ### Do I need Composer? No, Composer is optional. The plugin includes a regex fallback for CSS scoping that works in most cases. Installing the CSS parser library via Composer just provides extra reliability for complex CSS. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Levels Block Editor Styles for Oxygen Builder” is open source software. The following people have contributed to this plugin. Contributors * [ Levels Branding and Webdevelopment ](https://profiles.wordpress.org/levelsdev/) [Translate “Levels Block Editor Styles for Oxygen Builder” into your language.](https://translate.wordpress.org/projects/wp-plugins/levels-block-editor-styles-for-oxygen-builder) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/levels-block-editor-styles-for-oxygen-builder/), check out the [SVN repository](https://plugins.svn.wordpress.org/levels-block-editor-styles-for-oxygen-builder/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/levels-block-editor-styles-for-oxygen-builder/) by [RSS](https://plugins.trac.wordpress.org/log/levels-block-editor-styles-for-oxygen-builder/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.1.0 * Added settings page under Oxygen > Block Editor Styles * Added responsive images feature with automatic srcset generation * Added per-image size control via `data-image-size` attribute * Added configurable default image size #### 1.0.0 * Initial release * Automatic CSS collection from Oxygen sources * Scoped CSS injection into block editor * Support for reusable blocks * Optional CSS parser library for enhanced reliability * Regex fallback for environments without Composer ## Meta * Version **1.1.0** * Last updated **9 mac óll ago** * Active installations **10+** * WordPress version ** 5.8 or higher ** * Tested up to **6.8.11** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/levels-block-editor-styles-for-oxygen-builder/) * Tags * [block-editor](https://rhg.wordpress.org/plugins/tags/block-editor/)[css](https://rhg.wordpress.org/plugins/tags/css/) [oxygen](https://rhg.wordpress.org/plugins/tags/oxygen/)[oxygen builder](https://rhg.wordpress.org/plugins/tags/oxygen-builder/) [styles](https://rhg.wordpress.org/plugins/tags/styles/) * [Advanced View](https://rhg.wordpress.org/plugins/levels-block-editor-styles-for-oxygen-builder/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/levels-block-editor-styles-for-oxygen-builder/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/levels-block-editor-styles-for-oxygen-builder/reviews/) ## Contributors * [ Levels Branding and Webdevelopment ](https://profiles.wordpress.org/levelsdev/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/levels-block-editor-styles-for-oxygen-builder/)