古騰堡編輯器插件的7.8版昨天發(fā)布了。該團(tuán)隊(duì)繼續(xù)使用從7.7版開始的刷新界面工作來改進(jìn)編輯器。此插件更新中最有用的功能是包括用于插件和主題開發(fā)人員的Patterns API。
此版本不是我們?cè)谀承┹^早版本中遇到的大量功能版本。它是許多較小改進(jìn)的最終結(jié)果，特別是在改進(jìn)用戶界面和體驗(yàn)方面。該更新包括20多個(gè)錯(cuò)誤修復(fù)，一些實(shí)驗(yàn)性功能（如站點(diǎn)編輯器）的持續(xù)工作以及代碼質(zhì)量的多項(xiàng)改進(jìn)。
在無需保存的情況下編輯文章永久鏈接應(yīng)該可以正常工作，一年多來這一直是一個(gè)突出的問題。用戶現(xiàn)在可以為最新文章塊選擇多個(gè)類別，而不是單個(gè)類別。并且，實(shí)驗(yàn)性全站點(diǎn)編輯功能現(xiàn)在支持全屏模式。
用戶界面不斷改進(jìn)
隊(duì)在Gutenberg 7.7中開始了用戶界面的大規(guī)模刷新。在此發(fā)行版中，他們繼續(xù)在最初的工作上進(jìn)行開發(fā)。設(shè)計(jì)師已經(jīng)微調(diào)了編輯器工具欄上的幾個(gè)圖標(biāo)，其中包括粗體、斜體、刪除線、縮進(jìn)、凸出和間隔圖標(biāo)。
最顯著的差異之一是文章預(yù)覽按鈕的面向用戶文本的更新。在以前的版本中，有一個(gè)按鈕僅顯示為“桌面”。單擊后，它將打開一個(gè)下拉列表，以在臺(tái)式機(jī)、平板電腦或移動(dòng)模式下預(yù)覽文章。在7.8版中，該按鈕的文本現(xiàn)在顯示為“預(yù)覽”，這是急需的更改，不再引起混淆。
總體而言，在編輯器上完成的細(xì)節(jié)工作看起來不錯(cuò)。
建立自定義塊模式（ Patterns ）
之前已經(jīng)說過，但是需要重復(fù)：我對(duì)塊模式（ Patterns ）感到興奮。對(duì)于插件和主題作者能夠通過構(gòu)建自己的自定義模式來開始測(cè)試此功能，我感到更加興奮。我預(yù)計(jì)在接下來的幾個(gè)月及以后，創(chuàng)意會(huì)激增。
模式是一個(gè)或多個(gè)塊的HTML注冊(cè)。插件和主題作者可以進(jìn)一步定義這些塊的設(shè)置。Gutenberg團(tuán)隊(duì)提供了一個(gè)簡(jiǎn)單的PHP函數(shù)register_pattern()， 供開發(fā)人員注冊(cè)稱為的自定義模式 。
自從昨天晚上更新以來，我已經(jīng)修補(bǔ)了許多模式創(chuàng)意。建立模式的最簡(jiǎn)單方法是在可視化編輯器上進(jìn)行。打開編輯器，然后創(chuàng)建您喜歡的一組獨(dú)特的塊。然后，切換到代碼編輯器并復(fù)制代碼。從那時(shí)起，您可以通過PHP注冊(cè)模型并粘貼復(fù)制的代碼。該過程實(shí)際上并沒有涉及多少實(shí)際編碼。甚至具有足夠DIY技巧的高級(jí)用戶也可以在主題functions.php文件中注冊(cè)他們。
以下是一個(gè)簡(jiǎn)單的“英雄”模式，如上面的屏幕快照所示，它使用了封面、標(biāo)題、段落和按鈕組（我在復(fù)制和粘貼后略微格式化了代碼以提高可讀性）：
add_action( 'init', function() {
register_pattern( 'tavern/hero-1', [
'title' => __( 'Hero 1' ),
'content' =>
'<!-- wp:cover {"customOverlayColor":"#273f60","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim" style="background-color:#273f60">
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"align":"center"} -->
<h2 class="has-text-align-center">Heading Title Here</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter">
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button A</a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button B</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
</div>
<!-- /wp:cover -->'
] );
} );免責(zé)聲明：前面的代碼是針對(duì)實(shí)驗(yàn)性功能的，可能會(huì)在更高版本的Gutenberg插件中或在API正式添加到核心WordPress之前進(jìn)行更改。
要了解更多古騰堡插件7.8的更新，請(qǐng)查看官方文檔： https://make.wordpress.org/core/2020/03/26/whats-new-in-gutenberg-25-march/
注：文本出自WordPress Tavern，由WordPress大學(xué)翻譯整理。
