在最近的幾個Gutenberg版本中,一系列工作對站點編輯器進行了大量改進,以擴展體驗、提供清晰度并添加更多計劃的新功能。這些功能使您可以更輕松地全面了解您的網(wǎng)站并添加更多更改方式,從新的導航塊體驗到自定義CSS. 改進后的體驗還解決了在 FSE 外展計劃等地方出現(xiàn)的關(guān)鍵反饋:對導航塊感到沮喪,對哪些部分可全局編輯感到困惑,希望添加自定義 CSS,對塊的數(shù)量感到不知所措設置等等。雖然始終需要迭代,但這標志著改進、功能和易用性方面的重大轉(zhuǎn)變,為結(jié)束階段 2鋪平了道路。
提供清晰易用的界面
以前,在對您的站點進行更改時,很難知道這些更改會如何影響其他部分。例如,如果您打開樣式并對您所在模板上不可見的塊進行了更改,則不清楚這些更改將如何著陸。同樣的事情發(fā)生在模板部件塊上,其中對一個實例所做的更改會影響所有其他實例。界面中沒有跡象表明這些塊的功能不同。
現(xiàn)在,有了樣式書Style Book和內(nèi)置的樣式系統(tǒng)預覽,可以更容易地了解您使用樣式所做的事情的影響。樣式書通過提供一種切換樣式視圖的方法來實現(xiàn)這一點,該視圖顯示所有塊,分為多個部分:
同時,樣式中內(nèi)置的預覽提供了另一種方式,讓您無需完全進入樣式簿即可一目了然地查看所做的更改。每一種都提供了一種特定的方式來按照您認為合適的方式設計您的網(wǎng)站。
最后,模板部件和可重復使用的塊在編輯器和列表視圖中都被著色,以清楚地顯示它們是如何與其他塊相比具有不同功能的不同塊。導航塊將進行相同的處理!這種顏色變化增加了視覺摩擦,有助于更好地概念化網(wǎng)站設計如何組合在一起。

站點導航是構(gòu)建大多數(shù)站點的一個非常重要的部分,而導航塊通常難以提供涵蓋構(gòu)建簡單菜單的大多數(shù)用例的體驗。雖然 6.1 中改進的回退向前邁出了一大步,但基礎可用性仍需要改進。在過去的幾個版本中,作為 Gutenberg > Experiments 中的一項實驗,塊設置中的可編輯列表視圖已添加到 Navigation 塊中。這種可編輯的列表視圖讓人想起之前的菜單編輯體驗,但植根于塊的世界。您可以在項目的專用 GitHub 板或當前的導航塊跟蹤問題中關(guān)注這項工作。
擴展體驗
隨著插入器中添加更多模板、更多功能和更多類型的內(nèi)容,在許多情況下需要擴展界面以適應站點編輯器不斷增長的特性。這確保了隨著體驗的增加,復雜性的管理方式仍然使構(gòu)建網(wǎng)站變得愉快和直觀。
打開站點編輯器時,您不再處于站點的更狹窄但更重要的部分,而是可以完整地瀏覽它并使用瀏覽樣板從那里進行編輯。這種新樣板通過提供一種在模板和模板部件之間移動的方式來重新組織站點編輯器。您可以直接從此界面添加新模板或模板部件,或選擇隨時編輯。這與之前打開站點編輯器并被放入支持主頁的模板而不必知道如何訪問其他模板或模板部分的體驗形成鮮明對比。
插入器 Inserter 體驗針對模式進行了升級,樣板是內(nèi)容和網(wǎng)站創(chuàng)建的關(guān)鍵部分,它通過依賴預構(gòu)建設計來節(jié)省時間。以前的設計要求您在查看每個類別的樣板之前從下拉列表中進行選擇。新設計提供了一種簡單的方法來查看每個類別并在顯示每個模式的較大預覽之前在每個類別之間單擊,并且可以選擇將鼠標懸停在樣板上以查看其名稱。正在進行更多工作以通過更新類別名稱和區(qū)別來繼續(xù)改進。在展望與 樣板目錄 Pattern Directory 的集成以及可能接觸更多樣板時,此迭代提供了堅實的基礎。
隨著 6.1 中引入的大量新設計工具,塊設置界面需要進行調(diào)整。為了簡化和組織體驗,塊設置被分成不同的選項卡,根據(jù)每個塊的需要進行調(diào)整。雖然這會導致進入不同設置的步驟更多,但它提供了一個用于自定義塊的心理框架,可以更好地反映每個選項的作用。這與更復雜的塊特別相關(guān),例如導航或組塊。改進這種體驗的空間仍然存在,特別是圍繞如何最好地處理未設置/繼承的值,它目前被列為一個實驗,可以在 Gutenberg > Experiments 中啟用。

從長遠考慮,更多的工作將用于擴展 UI 以添加新模板。
添加功能
雖然在 WordPress 5.9 中推出的站點編輯器最初以更封閉的狀態(tài)啟動,但每個 WordPress 版本都帶來了新功能以完成更多工作。在某些情況下,這意味著以新的方式完成舊事物以自定義您的內(nèi)容,例如使用自定義 CSS,而在其他情況下,它更多地與輕松擁抱站點編輯器有關(guān),例如遷移小部件以阻止主題的能力。
塊主題作者和設計師們長期以來一直要求自定義CSS,即使設計工具的發(fā)展使您能夠使用內(nèi)置的功能工具。對于許多人來說,總會有樣式未涵蓋的項目,從 Gutenberg 14.8 開始,現(xiàn)在可以選擇直接在樣式界面中添加自定義 CSS,這樣您就可以在使用站點編輯器時直接進行自定義,并確保這些自定義堅持跨主題。這目前在 Gutenberg > Experiments 中列為一項實驗,正在進行穩(wěn)定該功能的工作。除了這項工作,我們還在努力為每個塊添加自定義 CSS,以便它們可以協(xié)同工作。
以前,當您在為單個塊設置樣式時在站點編輯器中發(fā)揮創(chuàng)造力時,您必須在全局級別將您的想法復制到該單個塊的樣式系統(tǒng)。從 Gutenberg 14.9 開始,隨著引入“將更改推送到全局樣式”按鈕而發(fā)生變化,該按鈕會自動將這些更改移動到樣式的單個塊。這一新功能讓您可以更輕松地隨時隨地進行設計,因為您知道只需按一下按鈕即可確保一致性。迭代已經(jīng)在進行中,以使這個選項更加用戶友好。

切換到塊主題需要盡可能無縫,以幫助人們開始使用站點編輯器。在 Gutenberg 14.9 中,發(fā)布了一種將工具從經(jīng)典主題導入站點編輯器的方法,確保切換時不會丟失內(nèi)容。
最后,插入器現(xiàn)在允許直接添加媒體,因此您可以從一個地方添加塊、樣板和最近的媒體庫項目。接下來,Openverse 集成正在進行中,這意味著您很快就可以訪問 Openverse 中的所有內(nèi)容,以便在您創(chuàng)建網(wǎng)站時使用。
下一步是什么?
圍繞這些領(lǐng)域中的每一個領(lǐng)域仍有更多工作要做,您可以在 GitHub 上關(guān)注這個跟蹤問題,其中每周為一組主要任務提供更新。如果您想幫助塑造正在進行的工作,知道GitHub 問題/PR總是受歡迎的,FSE 外展計劃將繼續(xù)促進探索和呼吁測試以探索這些功能中的每一個。歡迎所有人加入,無論網(wǎng)站編輯器或 WordPress 的總體經(jīng)驗水平如何。





體驗還是不錯的