Levels Branding and Webdevelopment

<p>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.</p>
<h4>Features</h4>
<ul>
<li><strong>Automatic Style Detection</strong> – Automatically finds and loads all relevant Oxygen CSS files</li>
<li><strong>Scoped Styling</strong> – All CSS is scoped to prevent affecting editor UI elements</li>
<li><strong>Reusable Block Support</strong> – Detects and loads styles for embedded reusable blocks</li>
<li><strong>Smart Context Detection</strong> – Only loads in the block editor for users with edit permissions</li>
<li><strong>Performance Optimized</strong> – Live-read approach with minimal overhead</li>
<li><strong>Responsive Images</strong> – Automatically converts img tags to responsive versions with srcset and sizes attributes</li>
<li><strong>Per-Image Size Control</strong> – Use the <code>data-image-size</code> attribute to override the default image size per element</li>
<li><strong>Settings Page</strong> – Configure features under Oxygen > Block Editor Styles</li>
</ul>
<h4>Block Editor Styles</h4>
<p>The plugin collects CSS from four sources:</p>
<ol>
<li><strong>oxygen.css</strong> – Core Oxygen framework styles</li>
<li><strong>universal.css</strong> – Site-wide Oxygen styles</li>
<li><strong>Page-specific CSS</strong> – Cached page styles</li>
<li><strong>Reusable block CSS</strong> – Styles for embedded reusable blocks</li>
</ol>
<p>All CSS selectors are automatically rewritten to be scoped within the editor content area to prevent affecting the WordPress admin UI.</p>
<h4>Responsive Images</h4>
<p>When enabled, the plugin automatically replaces <code><img></code> tags in your content with responsive versions that include <code>srcset</code> and <code>sizes</code> attributes. This provides optimized images for all screen sizes without any manual work.</p>
<p><strong>How to use in Oxygen Builder:</strong></p>
<ol>
<li>Go to <strong>Oxygen > Block Editor Styles</strong> in the WordPress admin</li>
<li>Enable “Responsive Images”</li>
<li>Choose a default image size (e.g. “large”)</li>
<li>All images in your content will now automatically get srcset attributes</li>
</ol>
<p><strong>Per-image size override:</strong></p>
<p>You can override the default size on individual images using the <code>data-image-size</code> attribute:</p>
<ol>
<li>Select your Image element in Oxygen</li>
<li>Go to <strong>Advanced > Attributes</strong></li>
<li>Add attribute: <code>data-image-size</code></li>
<li>Set value to any registered image size: <code>thumbnail</code>, <code>medium</code>, <code>medium_large</code>, <code>large</code>, or <code>full</code></li>
</ol>
<p>The <code>data-image-size</code> attribute is automatically removed from the final HTML output – it only serves as a control attribute for the plugin.</p>
<h4>Requirements</h4>
<ul>
<li>Oxygen Builder 4.x (must be installed and activated)</li>
<li>WordPress 5.8 or higher</li>
<li>PHP 7.4 or higher</li>
</ul>
<h4>Related Plugins</h4>
<p>Looking to speed up your Oxygen workflow? Check out <a href="https://wordpress.org/plugins/ready-made-oxygen-integration/" rel="ugc">Ready Made Oxygen Integration</a> – Turn Figma designs into editable Oxygen Builder sections – copy & paste, just like that.</p>
<h4>Optional Dependencies</h4>
<p>For 100% reliable CSS scoping, you can install the CSS parser library via Composer:</p>
<pre><code>composer install --no-dev
</code></pre>
<p>Without the library, the plugin uses a regex fallback that works for most cases.</p>
<h3>Credits</h3>
<p>Developed by Levels Branding & Webdevelopment OG</p>


Levels Block Editor Styles for Oxygen Builder

Syncs Oxygen Builder 4.x styles into the block editor for visual parity between editor and frontend. Includes responsive images with automatic srcset  …

ukuwi

<p>Editor Enhancer for Oxygen uses CSS and JavaScript to make improvements to the standard editor of <a href="https://oxygenbuilder.com" rel="nofollow ugc">Oxygen Builder</a>. To keep things safe and speedy, these enhancements are only applied for logged-in users who are currently using the editor. Further, files have been combined and minified (as permitted) to reduce load.</p>
<h4>Features</h4>
<p><strong>Improved UI/UX</strong><br />
* Upgraded Add+ panel, with shortcuts and expanded view<br />
* Easy access to media queries<br />
* Media query indicators<br />
* Styling indicators for advanced tabs<br />
* Remodeled structure panel<br />
* Graphical indicators for structure panel<br />
* Back to front end button<br />
* Serious beautification<br />
* Neutral grayscale<br />
* Consistent buttons<br />
* Better organization</p>
<p><strong>Keyboard Shortcuts</strong><br />
* CTRL + S = Save<br />
* CTRL + D = Duplicate selected element<br />
* CTRL + Q = Toggle Quick-View Full-Screen<br />
* CTRL + 1 = Toggle Add Element Panel<br />
* CTRL + 2 = Toggle Structure Panel<br />
* CTRL + 3 = Toggle Settings Panel<br />
* CTRL + 4 = Toggle Stylesheets Panel<br />
* CTRL + 5 = Toggle Selectors Panel</p>
<p><strong>Goodies & Testing</strong><br />
* Extra Links in “Back to WP” dropdown<br />
* Better top-right buttons<br />
* Quick-View Full-Screen Mode<br />
* Works with Oxygen 3.X.X<br />
* Tested up to WordPress 5.3<br />
* Tested in all major browsers</p>
<h4>Troubleshooting</h4>
<p>Start by clearing your browser cache. So far, that alone has been the fix for every issue.</p>
<h4>More Information</h4>
<ul>
<li><a href="https://oxyui.ukuwi.com/" rel="nofollow ugc">Visit the Editor Enhancer for Oxygen Homepage</a>.</li>
<li>Love this plugin? Give it a review!</li>
<li>Feeling generous? <a href="https://paypal.me/ukuwi" rel="nofollow ugc">Buy me a cup of coffee!</a></li>
</ul>


Editor Enhancer for Oxygen

Editor Enhancer for Oxygen does exactly what you think: it enhances the UI/UX of the Oxygen Builder editor!

Levels Block Editor Styles for Oxygen Builder vs Editor Enhancer for Oxygen