探索Seedlet,Automattic的Block-First WordPress主題

Explore-seedlet-automattics-block-first-wordpress-theme探索Seedlet,Automattic的Block-first WordPress主題

8月26日,自動機 推出了一個名為「種子」的新主題 專註於與WordPress塊編輯器集成。 幾天後, 居住在WordPress.org主題目錄中。 主題開發團隊希望製作一個主題,該主題將在今年下半年隨著WordPress 5.6登陸而過渡到全站點編輯。

Seedlet廣泛使用了與塊編輯器集成的功能。 它以最簡單的方式做到這一點,這證明了在基於塊的主題時代的曙光下主題開發變得越來越容易。 該主題大量使用了主題支持的功能,例如自定義字體大小,顏色和漸變。 通過註冊塊樣式和圖案,它的集成又需要額外的步驟。

Seedlet幾乎感覺到塊編輯器周圍的皮膚。 這是我們正在努力的未來的一個很好的例子,這將意味著更少地關注代碼,而更多地關注設計配置。 主題將不是傳統意義上的主題。 我之所以使用「皮膚」一詞,是因為它在過去的日子裡已經滲入到各種系統中,而設計師只是簡單地將CSS添加到網站皮膚中。 WordPress主題總是比簡單的樣式表複雜一些,但沒有那麼多。 我們將回到CSS和HTML的基礎知識。

這就是我查看Seedlet主題代碼時看到的。 儘管它仍然具有豐富的PHP,但是有一個明確的結構可以清楚地表明主題開發正在發生變化-這就是我們過渡時的樣子。

我已經看到開發人員為與塊編輯器一起使用而構建的許多主題。 但是,我只看到少數採用塊編輯器優先的方法。 這幾乎是微妙的,除非您多年來一直深入主題開發,否則您可能會錯過它。 Automattic的主題團隊正順應變革之風。 想要順風順水的主題作者應注意未來幾個月該項目的發展方向。

我不明白的一件事是為什麼Automattic沒有選擇向主題添加「塊編輯器樣式」標籤。 顯然添加了此類樣式。 這是錯過的機會,可以幫助用戶找到與塊編輯器兼容的主題。

主題不適合每個人的口味。 它是基本的博客主題。 但是,其敞開的畫布使其適用於各種場所。 主題的排版是正確的,可以為較長格式的工作提供舒適的閱讀速度。 這個主題有很多值得一看的地方,但是我主要對開發團隊為塊編輯器構建的內容感興趣。

主題的主要設計師Kjell Reigstad也 宣布團隊正在工作 在一個完全基於塊的版本上 苗塊。 當前的計劃是繼續對其進行迭代,並在將來將其作為單獨的獨立主題發布。

實驗塊模式

儘管Seedlet僅包含三種塊模式,但它們立即對我脫穎而出。 圖案並不太複雜,但是它們是獨特的設計,利用核心塊以及主題預設(例如自定義漸變和塊樣式)的混合。

「具有分割背景的組」模式使用具有主題的預設對角線漸變的「組」塊為圖像塊創建背景。 它不是一個特別開創性的設計。 然而,美麗在於簡單。 它表明主題作者可以創建有趣的設計,而無需添加額外的CSS代碼。

Explore-seedlet-automattics-block-first-wordpress-theme-1探索Seedlet,Automattic的Block-first WordPress主題在編輯器中使用「分割背景」模式進行分組。

主題的「圖像重疊組」模式使它的複雜性提高了一個等級。 從具有另一個自定義漸變預設的Group塊的相同概念開始,它將拋出Columns塊。 在左列中,用戶可以添加兩個堆疊的圖像。 在右列中,用戶可以添加一張圖像。 最終結果是自定義布局-主要是由於漸變背景-左欄中的兩個圖像與純色背景重疊。

Explore-seedlet-automattics-block-first-wordpress-theme-2探索Seedlet,Automattic的Block-first WordPress主題具有「圖像重疊」模式的組的前端輸出。

就代碼而言,該技術很簡單,但是需要一個好的設計師來創建這個概念。 我們現在才剛剛開始探討主題設計者在開始考慮將各種技術應用於模塊系統時將能夠完成的工作。 Seedlet在使用漸變時具有一些開箱即用的想法。 我們需要從主題社區中了解更多。

誠然,我不喜歡主題添加的第三個模式。 「最新帖子的替代網格」以主題的自定義「替代網格」樣式將「最新帖子」塊插入到編輯器中。 通常,我只是不在乎布局,但這只是基於我的個人品味。

Explore-seedlet-automattics-block-first-wordpress-theme-3探索Seedlet,Automattic的Block-first WordPress主題編輯器中的「最新帖子」交替網格。

總的來說,我喜歡主題與塊模式的關係。 這種類型的探索正是WordPress社區當前需要的。

像這樣:

喜歡載入中……

資源

相關文章