內容簡介
Magic Block 使用區塊編輯器註冊了一個容器區塊。這個區塊有元素(div、section等)、ID、類別名稱、內嵌樣式,以及任意其他屬性(包括 data-* 和 aria-*)的設置,透過自定義屬性選項區。
Magic Block 設計的目的是給希望完全掌握文章 HTML 結構的人,或希望使用編輯器來創建複雜佈局,如 Flexbox、CSS Grid、Bootstrap 等等。
此區塊不會添加任何開發人員未提供的 CSS 樣式。相反,它使您可以輕鬆地將其他區塊包含在帶有任意 ID 或 Class 的父元素中。然後,您可以通過 ID 或 Class 在您的佈景主題樣式表或通過 CSS 外掛輕鬆地定位這些容器元素。對於較小的自定義,有一個內嵌樣式欄位,對應於容器元素的 “style” HTML 屬性。
在編輯器視圖中,每個魔法區塊都有一個薄灰色輪廓,以便您輕鬆地看到哪些子元素屬於它。它還提供了元素類型、ID 和類別的顯示,因此您可以跟踪如何使用 CSS 定位它們。
從 WordPress 5.3 開始,您可能不需要此外掛,因為核心現在提供了一個 “Group Block”(群組區塊),其目的類似,但選項較少。
外掛標籤
開發者團隊
原文外掛簡介
Magic Block registers a container block with the block editor. This block has settings for element (div, section, etc), ID, classname, inline style, and any other attribute (including data-*, and aria-*) via a custom attributes section.
Magic Block is designed for people who want full control over post HTML structure, or wish to use the editor to create complex layouts such as Flexbox, CSS Grid, Bootstrap, etc…
This block does not add any CSS styles that you, as a developer, do not provide. Rather, it allows you to easily contain other blocks in parent elements with an arbitrary ID or Class. You may then easily target these container elements by ID or Class in your theme’s stylesheets or through CSS plugins. For smaller customizations there is an inline style field which maps to the “style” HTML attribute for the container element.
In the editor view, each Magic Block has a thin grey outline so you can easily see which child elements belong to it. It also provides a display of element type, ID, and classes so you can keep track of how to target them with your CSS.
As of WordPress 5.3 you might not need this plugin since the core now ships with a “Group Block” which is similar in purpose, although it has fewer options.
