G2 組件，從頭開始重新構想 WordPress 組件

更新一些東西。

這是 Automattic 的首席設計師 Jon Quach 在將 G2 Components 項目集成到 Gutenberg 並最終集成到核心 WordPress 的路線圖中的目標。 該項目是對製作塊編輯器的部件的重新構想，是對組件系統的“從頭開始”大修。 一次更新所有東西甚至很多東西都有破壞一切的風險。

“理想情況下，應該發生的是你應該以一種非常可控和有意識的方式只更新一些東西，”Quach 在帖子中寫道。 他將城市逐段過渡比作太陽能，直到傳統的發電廠可以關閉。 在移至下一部分之前，您轉換一件、測試、發現問題並糾正它們。

這就是將 G2 Components 集成到 Gutenberg 的計劃。

“G2 Components 是一個項目，它體現了為他人打造更好的用戶界面和用戶體驗的理念，”Quach 說。 “目前，它被具體化為一個組件系統，旨在在 Gutenberg 和 WordPress 的上下文和環境中工作。”

目標是提供資源來改進 Gutenberg 項目的 UI。 組件應該使創建更新的 UI 變得更容易，而無需將代碼拼湊在一起。 Quach 表示，組件系統的一致性和體驗應該可以擴展，並在整個 WordPress 平台上產生連鎖反應。 這也將擴展到第三方區塊開發者。

“代碼組件只是起點，”他說。 “我的最終目標是超越代碼和影響力並提升設計 - 創建一個統一的設計系統，使人們能夠並授權人們在 WordPress 世界中製作有凝聚力和功能豐富的 UI 體驗。”

Quach 認為，平台已從採用類似方法中受益。 他提到 Google 的 Material Design 提升了 Android 平台並為公司的產品帶來了凝聚力。

Gutenberg 團隊已經開始將 G2 組件集成到項目中。 此集成以受控方式替換 WordPress 組件 (@wordpress/components)，不應破壞核心編輯器或第三方項目中的現有實現。 新組件將在它們準備就緒時進行交換。 “就像打開開關一樣，”Quach 說。

以下視頻是 Quach 在 YouTube 上發布的長達一小時的 G2 組件演練：

他經常在 G2 Components 博客上發布更新。 除此之外，他還深入探討了他對該項目的設計思想。 他還幾乎每天都在他的 Twitch 直播中談論這個項目。

什麼是組件？

組件是從按鈕到切換到復選框的所有內容。 它們是組成塊編輯器 UI 的標準化部分。 它們可供核心和第三方開發人員使用，以創建最終用戶所看到和與之交互的內容。 但是，原始組件系統的構建方式存在問題。

“當前組件的構建並非考慮到系統，而是為了滿​​足即時需求，”Quach 說。 “這個特殊的設計細節至關重要。 系統優先的方法更容易支持添加新功能，更重要的是，支持定制！”

新方法是為 WordPress 構建原生設計系統。 這樣的系統將允許任何人在它之上構建並創造原生體驗。

Quach 說，最簡單的方法之一是從後端主題的角度來看——組件系統也有一個主題子系統。 “與傳統的將 CSS 編寫為‘皮膚’疊加的方法不同，UI 美學可以通過配置值進行調整——類似於 WordPress 可以使用wp-config.php文件中的定義進行配置，”他說。 “這種區別很重要，因為這些值直接進入樣式系統，允許樣式在正確的位置和正確的時間正確加載。 所有這些都不會影響當前環境的風格，更重要的是不受當前環境風格的影響。”

他回答了我關於為什麼組件系統應該從頭開始重建的問題。 這個想法是讓組件在諸如 WordPress 管理員之類的環境中“正常工作”，例如確保 WordPress 主題樣式表的存在不會僅僅通過加載而破壞組件。

“為什麼要重新思考、重建和增強輸入、按鈕、模式、下拉菜單等？” 作為回應，Quach 反駁道。 “這樣開發人員就不必這樣做了。”

這對開發人員意味著什麼？

尊重向後兼容性是 Quach 說他在設計 G2 Components 項目的架構時非常重視的事情。 他還表示，這是他提出的整合戰略的一部分。

“我曾提到這個項目'體現了為他人提供更好的用戶界面和用戶體驗的想法'，”他說。 “考慮向後兼容性和支持第三方遷移絕對屬於用戶體驗的範疇。”

隨著 Gutenberg 團隊繼續集成新組件，它不應該改變開發人員已經在做的事情。 但是，它可以開闢一些新的可能性。

“新的組件系統肯定會對 UI 部門有所幫助，”Quach 說。 “我特別興奮的一個領域是快速開發/原型設計領域。 因為這些組件是獨立的單元，所以它們可以被引入像 CodeSandbox 這樣的平台，它們……只是……工作。 您可以立即開始并快速構建和共享原型（從微小但強大到大型和負責）。”

他說他在測試組件設計和展示快速反饋的想法方面取得了成功。 他還從相反的方向工作，在 CodeSandbox 中構建複雜的組件並將它們帶回組件系統。

“作為一名設計師和前端開發人員，我無法強調這種‘微型建築’工作流程的效率、有效性和創造性地解放了多少，”他說。 “我很高興其他人也能體驗到這一點。”