WordPress 5.3 古騰堡編輯器與主題相關(guān)的更新

WordPress 5.3包括許多新增功能和對現(xiàn)有區(qū)塊的重構(gòu)，以便支持新功能。為了優(yōu)化“塊編輯器”主題集成，某些功能需要主題作者特別注意。

分組區(qū)塊

引入了一個分組區(qū)塊（Group block）作為其他區(qū)塊的通用容器。如果主題不支持寬和完整對齊（ wide and full alignments），則無需更改CSS。?

如果一個主題做了寬和完整對齊的支持，可能需要一些額外的主題樣式，以確保子塊像預(yù)期一樣展現(xiàn)：這取決于你的CSS是怎么寫的，一個主題常規(guī)的alignwide和alignfull 樣式在分組區(qū)塊中可能不會按照預(yù)期那樣展現(xiàn)。?

分組區(qū)塊包含一個內(nèi)部容器（wp-block-group__inner-container），以幫助簡化樣式。在許多情況下，該div可用作entry-content樣式的代理，從而允許寬和完整的子塊按預(yù)期顯示，而無需修改。?

為了說明這一點(diǎn)，這是使用負(fù)余量在前端實(shí)現(xiàn)寬和完整塊布局的通用方法的簡化示例：

.entry-content {
    width: 60vw;
    margin: 0 auto;
}
 
.alignwide {
    margin-left: -10vw;
    width: 80vw;
}
 
.alignfull {
    margin-left: -20vw;
    width: 100vw;
}

在這種情況下，只需幾行代碼即可實(shí)現(xiàn)分組區(qū)塊樣式：?

// Apply entry-content styles to the group block’s inner container as well. 
.entry-content,
.wp-block-group__inner-container {
    width: 60vw;
    margin: 0 auto;
}
 
// When a group block has a wide alignment, make sure that its full-width children do not extend beyond the width of the container. 
.alignwide,
.wp-block-group.alignwide .alignfull {
    margin-left: -10vw;
    width: 80vw;
}
 
.alignfull {
    margin-left: -20vw;
    width: 100vw;
}
 
// Ensure wide and full-width children do not extend beyond the width of a standard-aligned Group block.
.wp-block-group:not(.alignwide):not(.alignfull) * {
    max-width: 100%;
    margin-left: 0;
}

更多相關(guān)信息請看：?13964

降低的塊樣式特異性

在WordPress 5.3中，降低了塊編輯器CSS的特殊性。具體來說，它更改了如何應(yīng)用默認(rèn)的塊邊距，現(xiàn)在定位為[data-block]。這應(yīng)該給予主題和插件開發(fā)人員更多的控制權(quán)。

默認(rèn)情況下，所有塊都將帶有基本邊距。你可以使用編輯器樣式將該邊距設(shè)置為零：

[data-block] {
    margin-top: 0;
    margin-bottom: 0;
}

使用類名進(jìn)行文本對齊

在以前的WordPress版本中，使用內(nèi)聯(lián)樣式來更改以下核心塊的文本對齊方式：

• 標(biāo)題
• 段落
• 引用
• 詩句

這產(chǎn)生了很高的CSS專用性，這使得主題作者很難自定義這些塊的外觀。WordPress 5.3使用類名進(jìn)行文本對齊以解決以下問題：

• has-text-align-right?–當(dāng)塊的文本右對齊時
• has-text-align-center?–當(dāng)塊的文本居中對齊時
• has-text-align-left?–當(dāng)塊的文本向左對齊時

以前的所有文章都應(yīng)該像以前一樣工作。受影響的塊一旦在塊編輯器中打開并保存，便會自動轉(zhuǎn)換為使用相應(yīng)的類名。

欄目區(qū)塊類名

欄目區(qū)塊（Columns block）已更新為支持每列自定義寬度。這就刪除了has-x-columns類名。如果主題依賴該類名來設(shè)置列的寬度，需要進(jìn)行修改。

分隔符區(qū)塊支持設(shè)置顏色

分隔符塊現(xiàn)在支持自定義顏色，這可能會影響在樣式表中手動定義分隔符顏色的主題。僅當(dāng)用戶未明確應(yīng)用顏色時，主題才應(yīng)將默認(rèn)顏色分配給分隔符。你可以檢查應(yīng)用于2019主題的修復(fù)程序，以了解如何實(shí)現(xiàn)此目的。

表格區(qū)塊標(biāo)記更新

現(xiàn)在，表格區(qū)塊被包裝在一個<figure>元素中，因此<table class="wp-block-table">已被替換??<figure class="wp-block-table"><table>。這是為了允許大型表格在圖形容器中水平滾動，而不是迫使單元格內(nèi)容破裂并在小屏幕上變得不可讀。

如果主題使用了鏈?zhǔn)竭x擇器（如table.wp-block-table樣式），則此更改可能會影響主題。現(xiàn)在，主題應(yīng)改為使用.wp-block-table容器或.wp-block-table table表元素本身。

畫廊區(qū)塊標(biāo)記更新

現(xiàn)在，畫廊區(qū)塊也包裹在一個<figure>元素中，并且可以選擇包含一個<figcaption>作為整個畫廊的標(biāo)題。

主題可以使用類名.blocks-gallery-caption 為標(biāo)題設(shè)置樣式 。標(biāo)記更改將影響使用鏈?zhǔn)竭x擇器的任何主題，例如ul.wp-block-gallery對畫廊進(jìn)行樣式設(shè)置。現(xiàn)在，主題應(yīng)該只使用.wp-block-gallery來設(shè)置容器的樣式，然后使用新的.blocks-gallery-grid類名來定義ul元素本身的樣式。