Jamie Marsland 使用塊編輯器在 20 分鐘內重新創建 WordPress.org 主頁

jamie-marsland-recreates-wordpress-org-homepage-in-20-minutes-using-the-block-editor Jamie Marsland 使用塊編輯器在 20 分鐘內重新創建 WordPress.org 主頁

為了回應最近關於多久的爭議 WordPress.org 的新主頁和下載頁面設計 應該採取實施,古騰堡 YouTuber Jamie Marsland 決定嘗試使用塊編輯器重新創建它。

馬特·穆倫韋格 評論 關於新設計進入開發的計劃,稱它應該「花費數小時而不是數周來實施」。 他最具煽動性的評論引發了隨後關於使用塊編輯器的現實的對話,引用了 WordPress 的競爭對手。

「這是一個如此基本的布局,很難想像一個人在 Squarespace、Wix、Webflow 或其中一個 WP 頁面構建器上花費超過一天的時間,」Mullenweg 說。

Marsland 決定使用古騰堡來迎接挑戰。 在這個練習中,他使用了 WordPress 最新的默認主題,二十二十二。 他的結果與 WordPress 的新設計不同,但非常接近,他能夠在大約 20 分鐘內打開主頁。

在裡面 視頻 (嵌入在下面),Marsland 介紹了主頁每個部分的創建過程。 他是塊編輯器的高級用戶。 他可以快速移動行、列和組,根據需要調整填充和邊距,並為每個部分分配相應的設計顏色。 在這一點上,這不是大多數普通 WordPress 用戶可以做的事情,這就是視頻在觀眾中反應如此強烈的原因。 Marsland 的 YouTube 頻道以幫助用戶為中心 使用 Gutenberg 主構建頁面 和 WooCommerce 的商店。

[embedded content]

「我的結論是,快速完成 95% 的設計非常容易,但在我的經驗中,最後的 5% 總是花費最多的時間,」Marsland 說。 「我的猜測是,導致延誤的更多是內部流程,但如果不參與,很難確定。 我真的很想表明,構建設計不是 Gutenberg 問題(正如 Matt Mullenweg 提到的 Wix 和 Squarespace 以及其他 WP 頁面構建器。)」

該項目由 Automattic 贊助的貢獻者 Alex Shiels 引用了一些與塊編輯器無關的項目,這些項目導致了延誤,包括努力制定「a11y、響應能力、瀏覽器兼容性、搜索引擎優化和性能的合理標準」,以及與不同大陸的貢獻者合作。

為了回應 Marsland 的嘗試,WordPress 開發人員 Patrick Boehner 評論了小細節如何仍然非常重要。 「你絕對可以分辨出什麼是設計驅動的,什麼是編輯器中設計的,」Boehner .

在古騰堡在 WordPress 中首次亮相五年後,主題開發人員仍然面臨著將設計變為現實的挑戰,而這些設計並不是以塊優先的方法創建的。

WordPress 開發人員 Jon Brown 說:「今天,採用傳統的模擬頁面設計並使用塊來執行該設計,從根本上來說仍然是不可能的。」 . 「這是個問題。

「當然,塊可以『在瀏覽器中設計一個頁面』並接受你從塊中得到的東西,但塊仍然缺乏基於模型生成響應式、可訪問、像素完美布局所需的靈活性和控制。 .

「過去需要一天、十幾行 php 和十幾行 css 的工作,現在需要數周的時間來構建自定義塊,因為核心塊不能通過鉤子輕鬆調整,並且缺乏必要的基本控制項。」

古騰堡的貢獻者正在大踏步前進 引入流體排版 並且是 跟蹤一系列問題 與提高設計工具的一致性有關。 與此同時,隨著塊編輯器的成熟以適應那些希望讓他們的設計立即響應的人,主題開發人員正在忍受必要的成長痛苦。

「我一直在從頭開始構建一個完整的 FSE 主題,我很驚訝我能夠使用編輯器、theme.json 和最小到無自定義 CSS 成功複製我的設計,」資深主題開發人員 Mike McAlister 說. 「當然,這需要很多修補,但我仍然印象深刻。

「然而,正如 Jon 所提到的,第二次你需要為更小的屏幕(或者如果你敢在編輯器中嘗試移動優先設計,則需要更大的屏幕)進行調整,你就碰壁了。 邊距、填充和塊間隙尤其明顯,它們還沒有響應控制項。 你可以在 .org 的新主題中看到通過 CSS 進行的調整。」

響應性是 Shiels 提到的問題之一,為什麼實施設計比簡單地在塊編輯器中重新創建設計需要更多時間。

「然而,有跡象表明響應能力會有所改進,」麥卡利斯特評論道。 「流暢的排版和clamp() 確實有助於檢查排版,但總會有需要更好控制的情況。 所有其他網站建設者都解決了這個問題,沒有理由認為 WordPress 不能或不會。 (我當然希望如此,因為如今約 50-60% 的流量來自移動設備!)

「克服這些成長痛苦的最佳方法之一是儘可能多地吃狗糧——使用編輯器和 FSE 構建儘可能多的現實生活場景,以發現這些盲點。」

Marsland 的簡短練習表明,如果您熟悉塊編輯器,您可以在短時間內重新創建 WordPress.org 的設計。 他成功地證明了 Gutenberg 頁面構建 UI 不是複製在其他應用程序中創建的設計的障礙。 相反,它是開發人員通常必須在編輯器之外解決的所有其他相關清單項目——包括可訪問性、響應性和 SEO 考慮因素。 Gutenberg 越能減少與響應性和可訪問性相關的額外工作,對於嘗試自行製作他們夢想的設計的普通用戶來說,就越容易接近。

類別: 消息, WordPress

資源

相關文章