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>
</ul>
<h4>How It Works</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>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.

Sridhar Katakam

<p>This plugin enables HTML5 support for elements like the search form and adds (what I consider to be) some essential CSS – for example, to make all the images responsive when using the <a href="https://oxygenbuilder.com/" rel="nofollow ugc">Oxygen</a> visual site builder.</p>
<p>There are no settings for the plugin. Just install and activate.</p>
<p>Details:</p>
<ol>
<li>Enables HTML5 support for comment list, comment form, search form, gallery and caption elements.</li>
<li>Adds some CSS from <a href="https://hankchizljaw.com/wrote/a-modern-css-reset/" rel="nofollow ugc">Modern CSS Reset</a> for
<ul>
<li>setting a min-height of 100vh for the <code>body</code> element.</li>
<li>removing default padding, default margin and list styles on <code>ul</code> and <code>ol</code> elements that have a class set.</li>
<li>inheriting font rules for inputs and buttons.</li>
<li>removing all animations and transitions for people that prefer not to see them via <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" rel="nofollow ugc">prefers-reduced-motion</a>.</li>
</ul>
</li>
<li>Adds CSS for
<ul>
<li>making all images responsive and setting their <code>vertical-align</code> to <code>top</code> so they don’t take up an extra pixel space at the bottom.</li>
<li>WordPress <a href="https://codex.wordpress.org/Wrapping_Text_Around_Images" rel="nofollow ugc">image alignment classes</a>. This is useful for <a href="https://wpdevdesign.com/how-to-wrap-text-around-images-in-oxygen/" rel="nofollow ugc">wrapping text around images in Oxygen</a>.</li>
<li>making the <a href="https://wpdevdesign.com/how-to-fix-wordpress-toolbar-submenu-links-issue-with-fixed-header/" rel="nofollow ugc">admin bar sub menu items visible when using fixed header in Oxygen</a>.</li>
<li>making <code>label</code> elements visible which Oxygen, for some strange reason, seems to set the display of to none.</li>
<li>handling screen reader text for form labels when HTML5 output is enabled (which this plugin does).</li>
<li>aligning search form’s input and button side-by-side and changing header search form’s input width to <code>auto</code> from 100%.</li>
</ul>
</li>
</ol>
<h3>Automatic Installation</h3>
<p>Search for <code>oxygen essentials</code> from within your WordPress plugins’ Add New page and install.</p>
<h3>Manual Installation</h3>
<ol>
<li>Click on the <code>Download</code> button to download the plugin.</li>
<li>Upload the entire <code>wpdevdesign-oxygen-essentials</code> folder to the <code>/wp-content/plugins/</code> directory.</li>
<li>Activate the plugin through the <code>Plugins</code> menu in WordPress.</li>
</ol>


WPDevDesign – Oxygen – Essentials

Essential changes for sites running Oxygen, a visual site builder for WordPress.

Levels Block Editor Styles for Oxygen Builder vs WPDevDesign – Oxygen – Essentials