FSE Outreach #13:從 WordPress 站點編輯器構建作者模板

安妮麥卡錫 宣布第 13 輪 FSE 外展計劃 3 月 31 日。此次測試呼籲的重點是通過站點編輯器創建作者模板。 本輪使用的一些新功能僅在 古騰堡 12.9 上個星期。

該電話要求志願者在登陸 WordPress 之前測試與完整站點編輯相關的功能並提供反饋。 任何人都可以參加,截止日期為4月21日。

在這一輪測試中,我使用了 Archeo 塊主題. 這是最近的最愛,我一直在使用它 自從我第一次審查它.

以下是我最終作者模板設計的截圖:

fse-outreach-13-building-an-author-template-from-the-wordpress-site-editor FSE Outreach #13:從 WordPress 站點編輯器構建作者模板

我通讀了測試說明並開闢了自己的道路。 我仍然設法涵蓋了除塊鎖定之外的所有內容。 我已經在 Gutenberg 12.9 的發布中對其進行了廣泛的測試,並希望專註於其他功能。

除了下面提到的用戶體驗問題之外,一切都很順利。 沒有編輯器崩潰。 保存沒有問題。 前端與我在編輯器中看到的相匹配。

構建作者模板

創建新作者模板時最直接的問題是它沒有默認塊。 頁眉和頁腳至少在哪裡?

fse-outreach-13-building-an-author-template-from-the-wordpress-site-editor-1 FSE Outreach #13:從 WordPress 站點編輯器構建作者模板一個空白畫布開始。

如果我從頭開始構建一些東西,那麼空模板將是有意義的。 然而,這不是一個從零開始的項目。 它是從具有現有 archive.html 和 index.html 文件的主題構建的,它們是模板層次結構中的祖先。

由於作者模板只是存檔模板的一個更具體的版本,它應該是其在層次結構中的「父」的副本。

用戶很可能希望進行修改而不是從頭開始。 使用祖先模板作為基礎意味著它們不太可能不必要地偏離現有布局,尤其是對於更複雜的設計。

我採取的第二組操作是返回模板面板,打開存檔模板,複製所有內容,並將其粘貼到新的作者模板中。

fse-outreach-13-building-an-author-template-from-the-wordpress-site-editor-2 FSE Outreach #13:從 WordPress 站點編輯器構建作者模板複製作者模板的內容。

至少從開發人員的角度來看,這雖然有點煩人,但很容易做到。 然而,它是一塊巨大的巨石,位於用戶成功之路的中間。

對於設計,我選擇了永遠值得信賴的 Cover 塊。 我抓到了一張符合主題風格的圖片。 然後,我將 Avatar、Archives Title 和 Post Author Biography 塊放在兩列中。

fse-outreach-13-building-an-author-template-from-the-wordpress-site-editor-3 FSE Outreach #13:從 WordPress 站點編輯器構建作者模板創建自定義作者存檔頁面標題。

我花了一些時間思考作者、類別和標籤的特色圖像的想法。 如果封面塊背景是根據當前作者上下文顯示的,那該有多棒? 不幸的是,不存在這樣的功能。

我很驚訝 Avatar 和 Post Author Bio 模塊起作用了。 我在查詢循環內部和外部測試了這些。 當作者發布帖子時,這兩個塊會按原樣顯示。

但是,如果作者沒有發布任何帖子,則頭像將恢復為站點默認值,並且簡歷會消失。 我沒有深入研究代碼,但我猜他們選擇了 WordPress 的全局 $post 變數,這就是它在第一個場景中工作的原因。

fse-outreach-13-building-an-author-template-from-the-wordpress-site-editor-4 FSE Outreach #13:從 WordPress 站點編輯器構建作者模板未發表的作者缺少頭像和作者簡介。

這個限制意味著塊系統仍然無法達到目前經典的基於 PHP 主題的水平。 Avatar、Post Author Biography 和類似塊在查看作者檔案時應依賴查詢的作者變數作為後備。

此 FSE 測試輪的一部分是使用 Gutenberg 12.9 中新的 No Results 塊。 這是一個條件塊,當沒有要顯示的帖子時出現。 WordPress 為網站上的每個用戶創建「作者視圖」,無論他們是否寫過帖子。 在這種情況下,無結果塊可能是最有用的。

起初使用積木感覺很奇怪。 它去哪兒了? 在帖子模板之後? 前?

事實證明,您實際上可以將其粘貼在 Query Loop 父塊內的任何位置。 我什至在分頁前後進行了測試。 基本上,它只是工作。

用戶界面留下了一些不足之處。 它簡單地寫道:

添加在查詢未返回結果時將顯示的文本或塊。

除了明顯的語法錯誤之外,顯示消息是必要的,但我希望它看起來和感覺更像 Group 塊。 畢竟,它本質上是其他塊的容器,而 WordPress 已經為此提供了現有的 UI。

在視覺上編輯有條件顯示的功能也很奇怪。 應該有一個指示器,它的內容可能會或可能不會顯示在前端。 我不知道核心 WordPress 中有這樣一個塊的任何先例,但我們應該看看其他項目以及他們如何處理這個問題。

阻止可見性 Nick Diego 的插件可能是一個可以借用的插件。 它為上下文塊添加了覆蓋、邊框和圖標:

fse-outreach-13-building-an-author-template-from-the-wordpress-site-editor-5 FSE Outreach #13:從 WordPress 站點編輯器構建作者模板來自 Block Visibility 插件的疊加設計。

最終,我決定從她的測試中複製 McCarthy 的原始消息並將其粘貼到 No Results 塊中。 然後,我更進一步,在其中放置了一個查詢循環——是的,一個查詢循環內部的查詢循環。

它沒有問題地工作:

fse-outreach-13-building-an-author-template-from-the-wordpress-site-editor-6 FSE Outreach #13:從 WordPress 站點編輯器構建作者模板未找到結果時查詢最新帖子。

總體而言,No Results 塊是主題塊工具集的一個受歡迎的補充。 我希望看到 UI 更加充實。 當 6.0 登陸時,主題作者可能會開始更多地使用它,我可以看到用戶無意中嘗試刪除它,認為它是默認輸出的一部分。 這將使它成為塊級鎖定的候選者。

資源

相關文章