[WordPress] 外掛分享： Levels Block Editor Styles for Oxygen Builder

WordPress 外掛 Levels Block Editor Styles for Oxygen Builder 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Levels Block Editor Styles for Oxygen Builder」是 2025-11-11 上架。
  • 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
  • 上一次更新是 2026-01-23，距離現在已有 34 天。
  • 外掛最低要求 WordPress 5.8 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

levelsdev |

外掛標籤

css | oxygen | styles | block-editor | oxygen builder |

內容簡介

總結：Levels Block Editor Styles for Oxygen Builder可以自動將Oxygen Builder的CSS注入WordPress區塊編輯器中，確保您在編輯器中看到的與前端顯示的一致。

問題與答案：

1. 這個外掛特點是什麼？
- 自動風格檢測 - 自動查找並載入所有相關的Oxygen CSS文件
- 作用域樣式 - 所有CSS都被局限，以防影響編輯器UI元素
- 可重複使用的區塊支持 - 檢測並載入嵌入的可重複使用區塊的樣式
- 智能內容檢測 - 只會在具有編輯權限的使用者的區塊編輯器中載入
- 效能優化 - 使用最小開銷的即時讀取方法

2. 這個外掛如何運作？
- 外掛從四個來源收集CSS：
- oxygen.css - 核心Oxygen框架樣式
- universal.css - 網站範圍的Oxygen樣式
- 特定頁面CSS - 緩存頁面樣式
- 可重複使用區塊CSS - 嵌入的可重複使用區塊樣式
- 所有CSS選擇器都會自動重寫為在編輯器內容區域範圍內進行局部化，以防影響WordPress管理介面UI。

3. 使用這個外掛有什麼要求？
- 必須安裝和啟用Oxygen Builder 4.x
- WordPress版本需為5.8或更高
- PHP版本需為7.4或更高

4. 這個外掛有哪些相關外掛？
- 想要加速您的Oxygen工作流程嗎？請查看Ready Made Oxygen Integration外掛，將Figma設計轉換為可編輯的Oxygen Builder節段 - 複製並粘貼，就這樣。

5. 有選擇性依賴嗎？
- 為了100%可靠的CSS範圍，您可以通過Composer安裝CSS解析器庫：
`composer install --no-dev`
- 沒有該庫時，外掛將使用正則表達式回退，適用於大多數情況。

6. 這個外掛的開發者是誰？
- 由Levels Branding＆Webdevelopment OG開發。

原文外掛簡介

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:

oxygen.css – Core Oxygen framework styles
universal.css – Site-wide Oxygen styles
Page-specific CSS – Cached page styles
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:

Go to Oxygen > Block Editor Styles in the WordPress admin
Enable “Responsive Images”
Choose a default image size (e.g. “large”)
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:

Select your Image element in Oxygen
Go to Advanced > Attributes
Add attribute: data-image-size
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 – 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

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Levels Block Editor Styles for Oxygen Builder」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | 1.1.0 | trunk |

延伸相關外掛（你可能也想知道）

  • WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager 》插入標頭和頁腳 + 完整的 WordPress 代碼片段外掛, WPCode (前稱为 WPBeginner 的 "插入標頭和頁腳"）是使用率超过 100 万个网站的 WordPress 代码片段外掛中...。
  • Code Snippets 》Code Snippets 是在您的網站上運行程式碼片段的簡單，清潔和簡單的方法。它消除了將自定義片段添加到您的佈景主題的 functions.php 檔案的需求。, 現在提供 C...。
  • Simple Custom CSS Plugin 》無需麻煩地將自訂 CSS 新增到 WordPress 網站中。, 這是一個易於使用的 WordPress 外掛，可以添加自訂 CSS 樣式以覆寫外掛和佈景主題的預設樣式。該外掛旨在...。
  • Widget CSS Classes 》Widget CSS Classes 可以讓您給 WordPress Widget 添加自定義的 class 和 id, 請注意，此外掛並不支援輸入自定義的 CSS。您需要修改主題的 style.css，或加入...。
  • Simple CSS 》需要在你的網站中添加自定義 CSS 嗎？Simple CSS 提供一個很棒的管理編輯器和 Customizer 中的即時預覽編輯器，讓你能夠輕鬆添加 CSS。, 想讓你的 CSS 僅應用...。
  • WP Add Custom CSS 》WP Add Custom CSS 外掛允許您在整個網站及個別文章、頁面和自訂文章類型（例如 Woocommerce 產品）中添加自訂的 CSS。, 對整個網站應用的 CSS 樣式將覆蓋您...。
  • Visual CSS Style Editor 》Style your WordPress site visually. Discover the most popular front-end design plugin! Try live demo., , Visual CSS Editor, The plugin allows you t...。
  • WP-SCSS 》此外掛使用 ScssPhp，在 WordPress 安裝中編譯 .scss 檔案。包含設定頁面，可配置目錄、錯誤報告、編譯選項和自動佇列。, 此外掛僅在更改 .scss 檔案時進行編...。
  • Clear Cache for Me 》Clear Cache For Me 是一個 WordPress 外掛，適用於 W3 Total Cache 和 WP Super Cache，因為它們不知道 widget 何時更新，且在更新 widget 和 menu 時都不會...。
  • Scripts n Styles 》這個外掛讓管理員用戶能夠將自訂的 CSS 和 JavaScript 直接添加到個別文章、頁面或任何註冊的自訂文章類型中，也可以將類別添加到 body 標籤和文章容器中。還...。
  • Forget About Shortcode Buttons 》相容於 WordPress 傳統編輯器，Gutenberg 整合即將推出🙂, 歡迎提出功能需求/建議！, 即忘短碼(FASC)按鈕是在所見即所得編輯器中及網站佈景主題中加入 CSS 按...。
  • Code Embed 》注意： WordPress 5.0 及以上版本的使用者請查看常見問題以了解如何在區塊編輯器中使用此外掛。, Code Embed 外掛允許您在文章中嵌入程式碼（JavaScript 和 H...。
  • Core Framework 》總結：Core Framework是一個簡單易用、樂趣滿滿的WordPress外掛，如同你的CSS瑞士軍刀，幫助你輕鬆打造完美網站。, , 問題與答案：, - Core Framework是什麼...。
  • Custom Body Class 》這個外掛程式可供您為頁面或文章添加獨特的 CSS 類別。, 範例, TasteWP 已經準備好一個快速的 WordPress 實例來展示此外掛程式，您可以在 此範例 中試用它。,...。
  • Styles 》WordPress擁有許多漂亮的佈景主題，但個性化設計可能會很困難且耗時。Styles外掛能改變這點，提供一致的使用者介面－WordPress佈景主題自訂器。Styles能讓你...。

文章
Filter
Mastodon