Gutenberg 12.8 推出 Web Fonts API,改進組嵌套,並為鏈接添加鍵盤快捷鍵

Gutenberg 12.8 今天早些時候登陸 WordPress 插件目錄。 我一直在修改過去幾周提交的許多功能。

有些事情我很興奮。 Web Fonts API 是我耐心等待了幾個月的東西,但是在其他組中快速嵌套組塊的能力已經在我最喜歡的增強列表中贏得了一席之地。

現在可以使用用於自動完成鏈接的新鍵盤快捷鍵。 用戶還應該享受更乾淨的載入狀態 媒體與文字導航 塊。

網路字體 API
gutenberg-12-8-launches-the-web-fonts-api-improves-group-nesting-and-adds-keyboard-shortcut-for-links Gutenberg 12.8 啟動 Web 字體 API,改進組嵌套,並添加鍵盤快捷鍵鏈接測試各種網路字體。

期待已久的 網頁字體 API 在古騰堡插件中。 這 道路漫長而崎嶇 到了這裡,但到達目的地的感覺真好。

主題作者現在可以將字體文件與其主題捆綁在一起,並通過 theme.json 或 wp_register_webfonts() 函數註冊它們。

缺點是該實現僅支持本地託管的字體。 從長遠來看,這將創建大型主題 ZIP 包,因為開發人員開始發布全球風格的變體,每個都有自己的字體。

Ari Stathopoulos 在 API 中投入了數月的工作,他也有一個補丁可以 與谷歌字體集成. 該增強功能將解決 GDPR 和相關的隱私問題,因為字體文件將從 Google 下載並從伺服器載入。 但是,該功能似乎是基於 來自首席開發人員的評論 在之前的討論中。

在我最近的評論中 Web Fonts API 的早期報道斯塔索普洛斯 說了以下 關於他對 Google 字體集成的希望:

無論好壞,我不認為它會被合併,但這足以開始討論並最終找到解決使用 3rd-party webfont 提供程序所帶來的所有問題的解決方案。

現在看缺乏谷歌字體提供商將如何影響主題作者還為時過早。 但是,我預計許多人會構建自定義提供程序實現或根本不使用新 API。

分組組
gutenberg-12-8-launches-the-web-fonts-api-improves-group-nesting-and-adds-keyboard-shortcut-for-links-1 Gutenberg 12.8 啟動 Web Fonts API,改進組嵌套並添加鍵盤鏈接的快捷方式將組放入組中。

您是否曾經創建了一個 Group 塊,做了一些事情,後來意識到您需要將原始 Group 包裝在另一個 Group 中? 然後,您是否必須完成一系列複雜的任務來複制您當前的塊並將它們粘貼到一個全新的組中?

我感覺到你的痛苦。

這是 不再是痛苦的過程 曾經是。 如果不是新的 Web Fonts API,這將是該版本的亮點。

在工具欄選項下拉列表(垂直省略號)下,用戶應在選擇另一個組時查看組選項。 嵌套它們從未比單擊該按鈕更容易。

添加內聯鏈接的快捷方式
gutenberg-12-8-launches-the-web-fonts-api-improves-group-nesting-and-adds-keyboard-shortcut-for-links-2 Gutenberg 12.8 推出 Web Fonts API,改進組嵌套,並添加鍵盤鏈接的快捷方式內聯鏈接插入器。

最新更新增加了一個 鏈接的內聯快捷方式 通過鍵入 [[ in a Rich Text area, such as a Paragraph block. This should be a welcome feature for users who like to insert links while writing but do not want their hands to leave the keyboard.

At first, I thought this feature was not working. The inserter did not appear as swiftly as expected, so I hit the spacebar on my keyboard, thinking I needed to trigger it somehow. However, that did not work. Essentially, it was slow for me, which may have been my computer or connection.

Typing [[ followed by some other characters seems to work the best. For example, if I am looking for the What a Wonderful Day post, I just start typing the post name: [[what a…. The link inserter appears by the time I am a few characters in.

I would love to see more of a Markdown-style auto-completer for links. Typing [some text] 應該觸發鏈接插入器。[[語法目前感覺很奇怪。[[syntaxfeelsoddatthemoment

無論哪種方式,我都不會在我的工作流程中使用它。 我傾向於在編輯階段準備好所有文本並添加鏈接。 編輯器允許我突出顯示任何文本並粘貼 URL,從而使我的工作流程變得輕鬆。

全局樣式中首先顯示的核心塊
gutenberg-12-8-launches-the-web-fonts-api-improves-group-nesting-and-adds-keyboard-shortcut-for-links-3 Gutenberg 12.8 啟動 Web 字體 API,改進組嵌套,並添加鍵盤鏈接的快捷方式塊在全局樣式面板中排序。

古騰堡現在 首先顯示核心塊 在站點編輯器的全局樣式面板中。 那些來自插件的被推到了堆的底部。

在列出的幾十個區塊中尋找一個區塊時,這並沒有多大幫助。 將它們按字母順序排列會有所幫助,但它也可能會將像段落這樣的常用塊推到列表中。 側邊欄的空間有限,但我希望在這裡看到按類別分組的塊。

從站點編輯器構建主題……幾乎
gutenberg-12-8-launches-the-web-fonts-api-improves-group-nesting-and-adds-keyboard-shortcut-for-links-4 Gutenberg 12.8 推出 Web Fonts API、改進組嵌套並添加鍵盤鏈接的快捷方式導出自定義的二十二十二主題。

最新版本讓我們更接近 完全創建主題 來自 WordPress 網站編輯器。 一世 涵蓋了這個功能 本周早些時候更深入。

用戶可以從早期版本的編輯器中下載其模板和部件的 ZIP 文件。 新的導出包括來自主題的 theme.json、style.css 和 index.php 文件。 theme.json 文件還從全局樣式面板添加用戶自定義。

從技術上講,如果不需要 functions.php 或包含來自新 API 的字體文件,則導出可以是整個主題(減去屏幕截圖)。 但是,這是一種罕見的情況。

代碼塊樣式移至

 元素
gutenberg-12-8-launches-the-web-fonts-api-improves-group-nesting-and-adds-keyboard-shortcut-for-links-5 Gutenberg 12.8 推出 Web Fonts API、改進組嵌套並添加鍵盤鏈接的快捷方式代碼塊上的填充和邊框加倍。

以前,當使用代碼塊時,WordPress 將自定義樣式放在內部 內聯 HTML 元素上,而不是包裝

 元素上。 諸如填充、背景和邊框之類的東西在子元素上幾乎沒有意義。 我一直認為這是一種奇怪的做法,而且這是我以前在那個特定案例之外很少見到的。

當然,作為一名主題設計師,我試圖與之抗爭。 然而,我最終屈服了,因為我想通過使用 theme.json 並允許用戶自定義外觀以「正確的方式」構建塊主題。

Gutenberg 12.8 通過以下方式糾正了這個問題 移動樣式 到外部

 元素。

請注意,這可能是某些主題的重大更改。 在其 CSS 中以 .wp-block-code > 代碼為目標的作者可能需要在 WordPress 6.0 之前更新他們的代碼。 這取決於它是字面意思的內聯 元素還是 WordPress 之前的事故的解決方法。

在此期間,當主題啟用了 should_load_separate_block_assets 標誌時,這只是部分修復,這是所有塊主題的默認情況。 當與 WordPress 5.9 一起運行 Gutenberg 時,代碼塊樣式將應用於編輯器中的

 和內部  元素。 這意味著該塊可能具有雙邊框、填充和其他樣式,這可能使它現在看起來有點不對勁。

此問題並非特定於代碼塊。 相反,這是一個更廣泛的問題, 現在有一張開票. 我只希望這張票能先修好,避免這個風格破碎的過渡期。

像這樣

喜歡載入...

資源

相關文章