FSE 外展第 12 輪:使用塊構建站點標題

周三,安妮麥卡錫宣布 FSE 外展計劃第 12 輪. 與往常一樣,每個人都可以通過測試功能和使用 WordPress 中的設計工具就問題區域提供直接反饋來自由加入。 任何有興趣的人應在 3 月 16 日之前回復。

在這一輪中,志願者的任務是測試一些老歌但好東西。 在該計劃的早期,任何加入的人都做了很多網站標題和導航工作。 第 12 輪要求用戶重新訪問其中一些基本工具。

這對我來說是一個令人興奮的測試號召。 在 2021 年初,我對 FSE 的經歷感到沮喪。 我想解決的設計太多了,但我常常未能創造出我想要的東西。

因此,我及時跳回並重新審視了標題​​設計 第四輪測試 2021 年 3 月。當時,WordPress 的領導者距離決定某些與 FSE 相關的組件是否會在 WordPress 中登陸還有幾周的時間。 我當時對工具的結論是:

我開始意識到試圖用站點編輯器做任何遠程高級的事情根本不會發生……作為一個以近乎無限的耐心而自豪的人,第 4 輪試圖破解我。

我曾想重新創造英國的元素 河粉咖啡廳 測試期間的頁眉。 這是一項艱巨的任務,無法完成。

fse-outreach-round-12-building-a-site-header-with-blocks FSE Outreach 第 12 輪:使用塊構建站點標題Pho Cafe 標頭。

然而,將近一年後的現在,發生了多大的變化? 是否可以從塊編輯器創建站點標題的精確副本?

是和不是。 像往常一樣,這取決於。

作為開發人員和設計師,我相信我可以使用自定義代碼來做到這一點。 考慮到這對於付費客戶來說可能是一次性的設計,我會對此感到滿意。

將其作為公開發布的通用主題的一部分來創建,在這種定製級別上會遇到很多障礙。 但是,有可能捕捉到設計的大部分特徵和本質。

至於直接從塊編輯器構建它,仍然存在一些嚴重的限制。 然而,這就是我挑戰自己要做的事情。 我想在不編寫 CSS 代碼的情況下了解站點編輯器的位置。

結果如下:

fse-outreach-round-12-building-a-site-header-with-blocks-1 FSE 外展第 12 輪:使用塊構建站點標題比薩餐廳標頭。
披薩照片來源: 詹妮弗伯恩

從技術上講,我確實編寫了一些代碼來載入 KG 快樂字體. 除此之外,我只是將手頭的塊主題分叉並更改了「寬」大小。 我從網站編輯器中創建了 100% 的其他所有內容。

這是編輯器本身的設計截圖:

fse-outreach-round-12-building-a-site-header-with-blocks-2 FSE Outreach 第 12 輪:使用塊構建站點標題站點編輯器中的自定義標題模板部分。

總的來說,這出乎意料的順利。 一年後,網站編輯器變得更加強大。

正如我所說,它仍然有其局限性。 任何使用過塊主題的人都可能會告訴您上面屏幕截圖中的布局問題。 問題區域是用於站點徽標、導航和頂部按鈕的列塊。 您不妨放棄在較小的屏幕尺寸上運行良好的任何希望。

fse-outreach-round-12-building-a-site-header-with-blocks-3 FSE 外展第 12 輪:使用塊構建站點標題標題的移動視圖。

完全無法使用嗎? 不,但它並不接近理想。

如果沒有像 Columns 塊這樣的布局類型容器的響應式控制項,使用站點編輯器設計任何複雜的東西有時會感覺像是一個巨大的 hack。 在這一點上,這不是任何形式的啟示。

與去年相比,塊設計工具有很多改進。 核心塊間隙、邊距和填充控制項是調整垂直和水平間距的天賜之物。 那時,即使是想控制這件事也是一件令人頭疼的事情。 除了幾個街區仍然缺少這些選項外,現在 [mostly] 無壓力。

在這個實驗中,我沒有遇到與間距相關的問題。 經過一年多的 FSE 功能測試,這讓人感到很欣慰。

但是,我確實遇到了其他一些障礙。 導航塊可能是我最不喜歡站點編輯器的東西。 我還沒有看到它將如何提供一個通用系統,該系統可以很好地與主題作者想要使用的 1,000 種設計變體配合使用。 經典的導航菜單仍然非常適合定製設計。

我在這個實驗中遇到了兩個主要問題。 一年前我在使用 FSE Outreach #4 時遇到的一個問題是創建一個帶有類似按鈕的鏈接的菜單。 導航塊仍然無法進行這種基本設計,至少使用核心設計工具:

fse-outreach-round-12-building-a-site-header-with-blocks-4 FSE Outreach 第 12 輪:使用塊構建站點標題類似按鈕的導航項。

用戶可以為整個導航塊添加背景,但不能為單個菜單項添加背景。 我是怎麼做到的? 我改用了 Buttons 塊。

我現在想得越多,我就越喜歡 Buttons 塊替代方案。 但是,沒有辦法將其包裝在

相關文章