Gutenberg 12.8 推出 Web Fonts API，改進(jìn)組嵌套，并為鏈接添加鍵盤(pán)快捷鍵

Gutenberg 12.8 推出了Web Fonts API，改進(jìn)組嵌套，新增用于自動(dòng)完成鏈接的新鍵盤(pán)快捷鍵，此外，用戶還可以享受媒體和文本以及導(dǎo)航塊的更清晰的加載狀態(tài)。

Web Fonts API

期待已久的Web Fonts API位于 Gutenberg 插件中。主題作者現(xiàn)在可以將字體文件與其主題捆綁在一起，并通過(guò)theme.json或wp_register_webfonts()函數(shù)注冊(cè)它們。

缺點(diǎn)是該實(shí)現(xiàn)僅支持本地托管的字體。從長(zhǎng)遠(yuǎn)來(lái)看，這將創(chuàng)建大型主題 ZIP 包，因?yàn)殚_(kāi)發(fā)人員開(kāi)始發(fā)布全球風(fēng)格的變體，每個(gè)都有自己的字體。

Ari Stathopoulos 在 API 中投入了數(shù)月的工作，他也有一個(gè)可以與 Google Fonts 集成的補(bǔ)丁。該增強(qiáng)功能將解決 GDPR 和相關(guān)的隱私問(wèn)題，因?yàn)樽煮w文件將從 Google 下載并從服務(wù)器加載。但是，根據(jù)先前討論中首席開(kāi)發(fā)人員的評(píng)論，該功能似乎無(wú)法啟動(dòng)。

在最近對(duì)我之前對(duì) Web Fonts API 的報(bào)道的評(píng)論中，Stathopoulos談到了他對(duì) Google Fonts 集成的希望：

無(wú)論好壞，我不認(rèn)為它會(huì)被合并，但這足以開(kāi)始討論并最終找到解決使用 3rd-party webfont 提供程序所帶來(lái)的所有問(wèn)題的解決方案。

現(xiàn)在看缺乏谷歌字體提供商將如何影響主題作者還為時(shí)過(guò)早。但是，我預(yù)計(jì)很多人會(huì)構(gòu)建自定義提供程序?qū)崿F(xiàn)，或者根本不使用新的 API。

組嵌套

您是否曾經(jīng)創(chuàng)建了一個(gè) 組（Group） 區(qū)塊，處理了一些事情，后來(lái)意識(shí)到您需要將原始 Group 包裝在另一個(gè) Group 中？然后，您是否必須完成一系列復(fù)雜的任務(wù)來(lái)復(fù)制您當(dāng)前的塊并將它們粘貼到一個(gè)全新的組中？

現(xiàn)在一切都得到的改進(jìn)。在工具欄選項(xiàng)下拉列表（垂直省略號(hào)）下，用戶應(yīng)在選擇另一個(gè)組時(shí)查看組選項(xiàng)。嵌套它們從未比單擊該按鈕更容易。

添加內(nèi)聯(lián)鏈接的快捷方式

通過(guò)在富文本區(qū)域（例如段落塊）中鍵入[[來(lái)添加鏈接的內(nèi)聯(lián)快捷方式。對(duì)于喜歡在寫(xiě)作時(shí)插入鏈接但又不想雙手離開(kāi)鍵盤(pán)的用戶來(lái)說(shuō)，這應(yīng)該是一個(gè)受歡迎的功能。

起初，我認(rèn)為這個(gè)功能不起作用。插入器沒(méi)有像預(yù)期的那樣迅速出現(xiàn)，所以我按了鍵盤(pán)上的空格鍵，認(rèn)為我需要以某種方式觸發(fā)它。然而，這并沒(méi)有奏效。從本質(zhì)上講，這對(duì)我來(lái)說(shuō)很慢，這可能是我的電腦或連接。

鍵入[[后跟一些其他字符似乎效果最好。例如，如果我正在尋找What a Wonderful Day帖子，我只需開(kāi)始輸入帖子名稱：[[what a...。當(dāng)我輸入幾個(gè)字符時(shí)，鏈接插入器就會(huì)出現(xiàn)。

我希望看到更多的 Markdown 風(fēng)格的鏈接自動(dòng)完成器。鍵入[some text]應(yīng)觸發(fā)鏈接插入器。語(yǔ)法現(xiàn)在[[感覺(jué)很奇怪。

無(wú)論哪種方式，我都不會(huì)在我的工作流程中使用它。我傾向于在編輯階段準(zhǔn)備好所有文本并添加鏈接。編輯器允許我突出顯示任何文本并粘貼 URL，從而使我的工作流程變得輕松。

全局樣式中首先顯示的核心塊

Gutenberg 現(xiàn)在將首先在站點(diǎn)編輯器的全局樣式面板中顯示核心塊。那些來(lái)自插件的被推到了底部。

在列出的幾十個(gè)區(qū)塊中尋找一個(gè)區(qū)塊時(shí)，這并沒(méi)有多大幫助。將它們按字母順序排列會(huì)有所幫助，但它也可能會(huì)將像段落這樣的常用塊推到列表中。側(cè)邊欄的空間有限，但我想在這里看到按類別分組的塊。

從站點(diǎn)編輯器構(gòu)建主題……幾乎

最新版本使我們離完全從 WordPress 站點(diǎn)編輯器創(chuàng)建主題更近了一步。用戶可以從早期版本的編輯器中下載其模板和部件的 ZIP 文件。新的導(dǎo)出包括主題中的theme.json、style.css和index.php文件。該theme.json文件還從全局樣式面板添加用戶自定義。

從技術(shù)上講，如果不需要functions.php或包含來(lái)自新 API 的字體文件，則導(dǎo)出可以是整個(gè)主題（減去屏幕截圖）。但是，這是一種罕見(jiàn)的情況。

代碼塊樣式移至<pre>元素

以前，當(dāng)使用代碼塊時(shí)，WordPress 將自定義樣式放在內(nèi)部的內(nèi)<code>聯(lián) HTML 元素上，而不是包裝<pre>元素上。諸如填充、背景和邊框之類的東西在子元素上幾乎沒(méi)有意義。我一直認(rèn)為這是一種奇怪的做法，而且這是我以前在那個(gè)特定案例之外很少見(jiàn)到的。

當(dāng)然，作為一名主題設(shè)計(jì)師，我試圖與之抗?fàn)帯Ｈ欢易罱K屈服了，因?yàn)槲蚁胪ㄟ^(guò)使用theme.json和允許用戶自定義外觀來(lái)以“正確的方式”構(gòu)建塊主題。

Gutenberg 12.8 通過(guò)將樣式移動(dòng)到外部<pre>元素來(lái)糾正這個(gè)問(wèn)題。

請(qǐng)注意，這可能是某些主題的重大更改。以 CSS 為目標(biāo).wp-block-code > code的作者可能需要在 WordPress 6.0 之前更新他們的代碼。這取決于它是字面意思的內(nèi)聯(lián)<code>元素還是 WordPress 之前的事故的解決方法。

在此期間，這只是主題should_load_separate_block_assets啟用標(biāo)志時(shí)的部分修復(fù)，這是所有塊主題的默認(rèn)情況。當(dāng)與 WordPress 5.9 一起運(yùn)行 Gutenberg 時(shí)，代碼塊樣式將應(yīng)用于編輯器中<pre>的內(nèi)部元素和內(nèi)部元素。<code>這意味著該塊可能具有雙邊框、填充和其他樣式，這可能使它現(xiàn)在看起來(lái)有點(diǎn)不對(duì)勁。

此問(wèn)題并非特定于代碼塊。相反，這是一個(gè)更廣泛的問(wèn)題，現(xiàn)在有一張公開(kāi)的工單。我只希望這張工單能先修復(fù)好，避免這個(gè)風(fēng)格破碎的過(guò)渡期。

要了解此版本的更多信息，請(qǐng)看官方日志。

注：本文內(nèi)容出自wptavern.com ，由 WordPress大學(xué) 翻譯整理。