FSE外展第2輪:使用Gutenberg的網站編輯器創建自定義首頁

安妮·麥卡錫(Anne McCarthy)宣布了 第二輪測試 適用於「完整站點編輯(FSE)外展計劃」。 測試電話要求用戶從Gutenberg插件的網站編輯器中建立主頁。 反饋意見開放至3月5日。

第一輪測試 從2020年12月開始,到上個月結束。 測試人員能夠 確定幾個痛點 在塊編輯器中使用模板編輯模式。 該程序創建了可操作的項目,古騰堡開發人員可以進行改進。

第二輪是相似的。 但是,測試覆蓋的區域更大,更複雜。 用戶將離開熟悉的塊編輯器,而轉而使用站點編輯器,距離可行的產品還有幾個月的路程。

McCarthy列出了構建主頁的22個步驟。 當我遵循它時,在很大程度上,我在完成之前感到無聊。 這就是我對考試成績差的原因之一。 我喜歡自己探索並看到可能的事。 如果有想法,我想嘗試執行它。 我主要堅持使用整個腳本,即使它有些混亂。

最終,我為一家名為The Grilled Cheese的餐廳創建了一個自定義主頁-如果我離開WordPress社區,我肯定會在現實世界中開設這家餐廳。

fse-outreach-round-2-使用Gutenbergs站點編輯器構建自定義主頁FSE擴展第二輪:使用Gutenberg的站點編輯器構建自定義主頁帶有邊欄的自定義餐廳主頁。

這很簡單。 總而言之,在到達這個階段之前,我花了大約兩個小時來研究各種概念。 建造一些我很滿意的東西會花費幾個小時。

總體而言,我在布置理想的首頁方面感覺有限。 每一步都是對工具的艱苦戰鬥。 我用HTML和CSS可以用不到一半的時間來構建它。 我可以使用其他適用於WordPress的現代頁面構建器插件進行相同甚至更多的操作。

在深入測試結果之前,我要有一些野蠻的誠實。 TT1區塊(用於FSE擴展測試的主題)還無法實現。 該主題無法可靠地處理站點編輯器在最終用戶手中設置的眾多可能性。 更好的主題可以使整個體驗更加流暢。 但是,選擇是有限的,並且我不確定目前是否有更好的基於塊的主題可以使用。

站點編輯器和前端之間存在如此眾多的不一致之處,以至於無法全部列出它們。 間隔嚴重偏離。 我一般認為這是一個主題問題。 我花了很多時間在試錯模式下,在編輯器中進行了調整,然後刷新以查看前端結果。 沖洗。 重複。

識別痛點

儘管這篇文章批評了站點編輯器,但這並不意味著體驗完全不好。 每周看到的改進使我希望WordPress會擁有一個可以與市場上任何產品匹敵的網站編輯器。 最終。 但是,我的目標是提供團隊可以使用的真實反饋。

除了前面提到的一般間距問題之外,我在構建自定義首頁時發現了幾個絆腳石。

最大寬度

通過站點編輯器設計整個站點頁面時,一個問題比大多數問題更為突出。 WordPress缺乏完善的「最大寬度」系統。 作為用戶,在設置主頁內容區域的寬度時,我別無選擇。 當前,主題作者可以設置自定義內容,寬和全寬。 但是,該系統非常有限。 主題作者可以做的事情很少,而且這個問題直接限制了用戶在塊和站點編輯器中都可以做的事情。

我以前寫過關於 需要設計框架,可由主題作者自定義。 Tailwind CSS有一個 最大寬度系統 提供了很大的靈活性。 WordPress需要開始從這些現代設計框架中借鑒思想。

添加塊圖標

將滑鼠懸停在默認內容區域中的元素之間時,使「添加塊」圖標出現。 我必須將滑鼠定位在合適的位置才能顯示出來。 這是一次無奈的練習,即使是最輕微的動作也使圖標再次消失。

fse-outreach-round-2-使用gutenbergs-site-editor-1構建自定義主頁FSE第2輪:使用Gutenberg的Site Editor構建自定義主頁找到「添加塊」圖標。

切換到「頂部工具欄」模式使此操作變得更加容易。 我假設默認的塊工具欄在某種程度上隱藏了它。 切換到此模式的問題是我的工具欄選擇未保存。 每次返回站點編輯器時,都必須再次啟用它。

查詢塊

在自定義首頁上列出帖子最令人沮喪的方面是設置限制。 我想將數字設置為三個。 但是,Query塊沒有執行此操作的選項。 最終,我使用類別過濾器創建了一個虛假限制,選擇了只有幾篇文章的限制。

fse-outreach-round-2-使用gutenbergs-site-editor-2構建自定義主頁FSE擴展第二輪:使用Gutenberg的站點編輯器構建自定義主頁通過使用查詢塊的類別過濾器來限制帖子。

查詢塊的另一個令人困惑的方面是關鍵字過濾器。 據我所知,WordPress從未使用過「關鍵字」術語。 在SEO插件之外,此過濾器的作用似乎沒有任何上下文。 我猜它像搜索關鍵字一樣工作。

所有塊的全局樣式

切換到「全局樣式」面板時,我注意到在塊級應用樣式時缺少一些塊。 特別是,我想為「最新評論」塊調整樣式。

我猜想列表中只會出現帶有排版,顏色和其他與設計相關的選項的塊。 當站點編輯器進入WordPress時,這可能會使最終用戶感到困惑。 所有塊均應具有用戶可以自定義的樣式選項。

沒有全形列

對於我的主頁內容,我嘗試創建一個全形Columns塊。 但是,儘管分別佔據了66.67%和33.33%,但兩個單獨的列的大小仍然受到限制。

fse-outreach-round-2-使用gutenbergs-site-editor-3構建自定義主頁FSE第2輪:使用Gutenberg的Site Editor構建自定義主頁全形列未覆蓋整個區域。

這似乎是一個主題問題。 我還要指出,這是對最大寬度進行更直接控制會有所幫助的時代之一。 我真的想要介於主題的全寬和寬幅之間的內容。

特色圖片

無法設置「後置特色圖像」塊輸出的圖像的大小。 目前獲得統一大小的唯一方法是在將圖片上傳到WordPress之前對其進行預裁剪。

沒有理由這基本上不應該是Image塊的變體。 特色圖片需要的唯一不同之處是可以選擇鏈接到該帖子。

像這樣:

喜歡載入中……

來源

相關文章