尖端模式管理和創建

那些精通塊模式的人將在設計、構建和擴展 WordPress 的新範例中處於領先地位。

觀看本次會議，了解如何利用最新的模式功能，以及一個令人興奮的新工具來提升自由職業者和代理機構的模式管理體驗。

演講嘉賓：

• WP Engine 的 React 工程師 Michael Day
• Phil Johnston，WP Engine 高級軟件工程師

會議幻燈片：

成績單：

菲爾·約翰斯頓：大家好。 我叫 Phil Johnston，是 WP Engine 的高級軟件工程師。 我和我的隊友 Mike Day 將討論 WordPress 中的尖端模式管理和創建。

所以最近有很多新的和有趣的東西被添加到 WordPress 中。 其中之一就是模式。 我將要談論那個。 圖案由塊組成。 因此，讓我們深入研究它。

您將在塊編輯器（即 WordPress 儀表板）中使用塊。 在這裡您可以創建諸如博客文章或頁面之類的內容，並且您可以在這裡開始寫作或創建。 這是您將使用塊的地方。

所以我可以從我的孩子那裡借一些樂高積木來進行這次演講。 因此，為了幫助說明這一點，當您查看此處顯示“我是標題塊”的頁面時，您可以將其視為一個樂高積木塊。 然後在它說我是一個段落塊的下面，你可以把它想像成你在它下面剪下來的另一個塊，然後依此類推。

你在下面有另一個標題塊。 所以你可以點擊它。然後你可以開始構建你想要的頁面。 您只需單擊、拖動或重新排序即可重新排列這些塊。 然後你可以很容易地重新組裝你的頁面，因為它們都被阻止了。

雖然這對於像博客文章這樣的東西來說非常簡單，你可以直接進入編輯器並開始這樣做，甚至不知道這些是塊，但你也可以構建一個更複雜的塊佈局，就像你重新看到這裡。 所以這裡有一個包含三個圖像的三列佈局。 在那之上，你實際上有一個全寬的列。 它橫跨所有這三列。 然後是三個圖像塊、三個示例標題塊、三個段落塊，然後是其下方的三個按鈕塊。

再次重申，WordPress 塊就像樂高積木。 您可以將它們拼接在一起，製作一個像我展示的第一個這樣的簡單佈局，或者像您在這裡看到的那樣製作一個更複雜的佈局。 因此，我用紅色突出顯示了您可能希望在這樣的頁面上看到的塊。 所以你可以看到第一個周圍有一個紅色框。 [清喉嚨]對不起。 那代表一個塊。 然後在其下方，您有另一個塊，其中包含一些 Lorem ipsum 文本，然後是我提到的三個圖像塊、三個標題塊、三個段落塊和三個按鈕塊。

您可能認為這就是製作這樣的頁面佈局所需的全部內容，但實際上比這要復雜得多。 所以在這張幻燈片上，我突出顯示了不可見的塊，即您看不到的塊。 這些是需要在頁面上定義事物應該放置的位置的塊，例如三列而不是一列的事實。

因此，隱形塊雖然功能強大，但對於普通用戶來說也很難深入了解並開始使用。 當您在塊編輯器內移動鼠標時，您不會知道那裡有不可見的塊，因為它們是不可見的。 並且所有這些塊還具有隨之而來的複雜控件。 例如，這是其中一個列塊。

如果你看右邊，你會看到所有復雜的控制，這些控制不是超級容易或直觀地理解的。 內部塊之類的東西使用內容寬度或填充或塊間距。 普通用戶不會知道或理解這些設置的作用。 如果我走進廚房看到一大堆香料，這有點像我。

我不是一個好廚師。 所以我會像這樣在架子上放一堆香料。 而且我不知道如何組合或使用它們，因為我還沒有花時間成為一名廚師。 就像成為五星級廚師並烹製美味可口的飯菜需要時間一樣，這需要時間，而且學習塊編輯器和理解在什麼時候使用哪些塊來製作看起來不錯或味道好的東西也很困難好的。

所以這是一個專業。 這是你必鬚髮展的手藝。 因此，普通用戶將像您在此處看到的那樣，被扔進塊編輯器中，一片空白。 而且他們不會知道他們需要使用列塊，或者如何使用該塊，或者在該塊中放入什麼，基本上是他們需要組合的香料來製作真正看起來很棒的東西。

他們可能會覺得很沮喪。 他們可能會覺得很難得到他們想要的東西。 即使他們確實學習了積木的所有這些複雜性，他們也可能只是不具備設計技能。 因此，雖然功能強大，但塊可能難以使用。 這就是發明模式概念的原因。

因此，在 WP Engine，我們構建了一個名為 Atomic Blocks 的插件。 在 Atomic Blocks 中，我們基本上提出了模式的概念，但我們稱它們為部分和佈局。 這是完全相同的概念。 WordPress Core 實際上從 Atomic Blocks 中獲得靈感，形成了 WordPress Core 中現在的概念，稱為模式。

所以模式是用戶可以瀏覽的預構建塊組，就像你在這裡看到的那樣。 這裡有一堆圖案供他們選擇。 通過單擊一個，他們只需單擊一下即可將所有內容插入到他們的頁面中。 因此，他們不需要像這樣組裝積木，樂高積木，而是得到這樣的東西，一組預先組裝好的積木，希望這些積木是由已經非常擅長設計並且已經投入數小時製作工藝的人製作的塊。

所以一旦你把它插入到頁面上，它看起來有點像這樣。 就這樣，砰的一聲，你有了一個模式，一大堆預先組裝好的塊，看起來不錯，味道不錯，而且可以工作，然後你就可以進入並輸入你需要更改的文本. 因此，您可以將示例標題之類的內容更改為您頁面的唯一文本。

所以模式對於普通用戶來說就像是一個巨大的領先優勢。 他們不需要學習塊編輯器的所有復雜性，所有那些複雜的東西。 他們不需要成為專業設計師，但只需在頁面上插入圖案即可獲得精美的設計。

因此，如果您是一家代理機構，為他人或客戶構建網站，您可以使用塊模式來幫助您的客戶自助。 通過向您的客戶提供一大堆預先設計的模式，他們可以構建自己的頁面。

所以說他們有一個活動即將到來，他們需要一個特殊的頁面。 他們可以獲取您為他們創建的與他們的品牌相匹配的塊狀圖案。 它與他們的配色方案和所有類似的東西相匹配，他們只需單擊並將其插入頁面並進行逆向工程——只需開始輸入這些塊，而不需要知道在哪個塊中使用哪個塊的所有復雜性場景，以及不該做的事情，以及如何構建一個跨設備和所有這些東西都能很好工作的佈局。

然而，雖然塊狀圖案對於普通用戶來說很容易使用，但它們並不容易創建。 隨著時間的推移，它們更難管理。 對於開發人員和代理機構，WordPress 中沒有內置工作流程或工具來幫助您製作模式。

因此，我將目前構建模式的步驟分解為 10 個步驟，我將在這裡稱之為艱難的方式。 如果這看起來勢不可擋，那是因為它確實如此。 您要做的第一件事是在 VS Code 等代碼編輯器中創建一個 PHP 文件。 您必須在該文件的頂部放置一個特定的文件頭。

然後你需要在某個地方建造。 所以你必須有一個 WordPress，可能在你的本地，這很好。 但是隨後您需要在該 WordPress 中創建一個臨時頁面，以便您可以將塊放在某個地方並對其進行處理。 然後你需要構建它。 你需要使用那些技能，你開發的手藝，讓它看起來很漂亮。 然後當你完成後，你必須切換到代碼視圖並將所有代碼複製到你在第一步中創建的文件中。

然後您必須將該文件保存到主題中的特定位置。 如果您正在構建一個主題並將其交付給您的客戶，則必須將其放入模式目錄中。 然後，如果您的模式包含像我展示的三列佈局中的圖像，您必須確保這些圖像在您將其交付給客戶時確實有效。 因此，因為您是在本地計算機上構建它，所以該圖像也將在代碼中被引用，就像它在您本地計算機的硬盤驅動器上一樣。

顯然，這是一個問題。 一旦它不再在您的計算機上，該圖像將無法使用。 因此，您需要仔細梳理代碼，查找您本地計算機的任何 URL，並將它們替換為特定的 PHP 標記。 然後您需要確保將這些圖像文件也實際移動到您的主題中。 您不能只在代碼中更改它。 您還必須移動該文件。

然後使它變得更加困難，這是我真正認為最令人沮喪的地方，至少對我來說，當我構建很多模式時，如果我在模式中犯了拼寫錯誤，我需要開始再次在第三步，每次都再次走到第九步，只是為了糾正拼寫錯誤。 您還必須——因為您每次都必須重新生成所有塊代碼——然後您必須研究所有這些圖像 URL 並替換它們，將其放回文件中。

這是一整套重複的、乏味的步驟，尤其是對於管理時間。 就像說您需要在幾個月後調整模式。 這很乏味。 這是我們在為 Genesis Pro 系列構建模式時遇到的問題。 我們已經交付了很多部分和佈局或模式，並且對一遍又一遍地做這些乏味的事情的過程感到非常沮喪。

這就是促使我們構建一個工具來幫助我們不必做這些事情、消除這種乏味並使其真正盡可能快的原因。 你可以直接處理它，保存它，然後，砰的一聲，它會直接為你進入文件。 它會將文件放在正確的位置。 它為您編寫所有代碼。 因此，我們決定在內部為自己構建一個工具，以消除所有這些痛苦。 我們實際上從未真正打算讓它成為我們可以讓其他人使用的東西，但它對我們非常有用，以至於我們想讓其他人也可以使用它。

因此，正如您所看到的，當前構建模式的困難方法並不理想，也不是做事的好方法。 這就是我們構建模式管理器的原因，它是一個用於在 WordPress 中創建和維護模式集合的 UI。 因此，我將把它轉交給我的同事 Mike Day，讓我們了解模式管理器並向我們展示其中的所有出色功能。 交給你了，邁克。

邁克·戴：嗨。 我是邁克。 我是 WP Engine 的一名軟件工程師。 模式是一種強大的佈局創建工具，有可能改變 WordPress 構建者的遊戲規則。 但正如 Phil 剛剛展示的那樣，在創建和管理它們方面實際使用這些模式的經驗至少可以說是缺乏的。 模式管理器旨在通過一個可以滑入您的工作流程的插件，以一種無摩擦的方式將模式文件的管理帶到 WordPress 設計的最前沿。 讓我們開始吧。

出於本演示的初始目的，我將在右側此處打開我的代碼編輯器窗口。 這是直接保存到我的磁盤中的實際模式文件。 我真的很想強調一點，當您使用 Pattern Manager 時，您實際上是在操作和創建保存到磁盤的物理文件。 具體來說，它們被保存到您當前的主題目錄中。 所以您可以在這裡看到這兩個 PHP 文件或模式文件，它們代表當前在此模式視圖中處於活動狀態的模式。

此外，請注意此圖像目錄。 Phil 提出了一個非常有趣的觀點，即現在在處理圖案時，假設您將一堆圖像保存到一個圖案中。 這些特定圖像的所有這些 URL 都將指向您的本地安裝。 每當真正分享您的工作時，這都是一個大問題。

所有這些圖像都將被破壞。 所以我們的做法有點不同。 我們實際上將這些圖像的副本直接保存到主題文件夾本身。 例如，這是版本控制的遊戲規則改變者。 假設您和您的合作者正在使用 Git。 現在您可以確定在工作時所有人都可以訪問相同的圖像。

好的。 因此，讓我們實際跳入界面。 這是模式視圖。 在這裡，您可以立即看到為我的主題註冊的兩種模式。 當您將鼠標懸停在模式預覽上時，請注意彈出的操作按鈕。 我們有編輯、複製或刪除給定模式的選項。 左側還有一些過濾選項，但稍後我會回到這裡。 現在，讓我們真正開始編輯模式。

所以馬上，我相信你會認出一個非常熟悉的用戶界面。 這是 WordPress 塊編輯器，在本例中重新用於提供用於處理模式的特定空間。 在右側，您會看到這些不同的標頭屬性。 現在，在我開始討論這些之前，我想提供更多背景信息，並實際使用從 WordPress 開發人員文檔中藉用的一些文本。

title 屬性是不言自明的。 這是一個人類可讀的正面 ID，如果您願意，用戶將在網站上與您的模式交互時看到。 類別實際上用於將模式分組在一起。 這將是一組已註冊類別，您可以在其中添加一個或多個類別，或者如果您願意，也可以根本不添加類別。 但是目前在 WordPress Core 中的工作方式存在問題。

確實沒有很好的方法來判斷哪些類別實際可用。 在您網站的任何地方都沒有明顯的地方可以實際找到這些已註冊的塊模式類別，至少我知道是這樣。 現在，您可以將關鍵字視為有點像搜索詞。 本質上，您可以輸入這些描述性別名來描述您的模式，這樣無論用戶在插入器中搜索什麼，他們都可以輕鬆找到他們需要的東西。 描述是該想法的一種延伸，除了它是視覺上隱藏的文本。 這對於可能使用屏幕閱讀器的視障用戶非常有用。

現在回到模式管理器，讓我們修改這些元屬性。 模式標題是一個簡單的文本輸入。 只需開始鍵入即可重命名您的模式。 但是請注意這裡的一個隱藏功能。 模式管理器告訴我主題中已存在具有此標題的模式。 我不想不小心破壞那個文件，所以我只想保留標題。

好的。 讓我們選擇一些類別。 所以，請注意，我們只是在下拉列表中呈現了這個類別列表。 否則，很難知道在哪裡可以找到這些數據。 但是這個列表是通過 API 調用動態填充的。 這意味著不僅您主題的所有已註冊塊模式類別，而且您可能已註冊的任何類別我們都會在此處顯示。 我們現在只選擇特色。

好的。 讓我們添加一些可搜索的術語。 出於本演示的目的，我將只使用樣本模式。 但請記住，您可以在此處為在插入器中搜索的用戶添加描述此模式的術語。 請注意，我在這裡使用了一個多詞術語。 模式管理器支持這些。

好的。 讓我們添加一個描述。 回想一下，這是視覺上隱藏的文本。 所以我認為這裡的主要目的是幫助屏幕閱讀器。 因此，讓我們將其描述為具有反轉顏色的三列。 好的。 完美的。 我覺得我們現在處在一個好位置。 我們實際上可以保存我們的工作。 但在我這樣做之前，我希望您密切注意右側此文件中的標題。 現在，只要我點擊“更新模式”，突然之間就會有更多的數據。 我們剛剛修改的描述、類別和關鍵字都已經出現在這裡，而無需我觸摸這個文件。

好的。 讓我們看看剩餘的元屬性。 所以首先，我們在視口寬度方面有一個非常有趣的屬性。 這是一個整數，表示預覽此圖案的縮放寬度。 因此，默認情況下，每當您創建圖案時——假設您製作的東西是全寬的，甚至可能真的很窄。 WordPress Core 中的默認設置可能會使縮放比例在預覽中看起來有點奇怪。

所以發布類型。 這只是一組旨在與該模式一起使用的 post 類型 slug。 請注意，在此處添加值實際上會限制模式，因此它僅適用於那些帖子類型。 另請注意，將此留空將導致該模式適用於所有帖子類型。

接下來我們有塊類型。 這是另一個數組，但這次是模式旨在使用的塊類型。 現在我必須承認，每當我第一次開始使用這些塊類型時，我發現它有點混亂。 看起來這種用法真的是為了多用途，但我認為它背後的意圖並不是很清楚。

最後，我們有插入器屬性。 現在默認情況下，所有模式都會出現在插入器中，但假設您想更改它。 您只需為此屬性添加一個布爾值 false，它將在插入器中隱藏起來不被使用。

那麼回到模式管理器，讓我們看看我們如何處理這些剩餘的元屬性。 首先，我要關閉這些其他面板。 讓我們看一下視口寬度。 現在回想一下，這是一個整數值，它只控制插入器中圖案的縮放預覽。 當前實施的一個痛苦之處是實際上看到了您的工作結果。

假設我修改了模式文件中的標題並更改了視口寬度。 真正看到它是什麼樣子的唯一方法是創建一個新帖子。 這有點令人費解。 來回跳轉有點過於復雜。 這有點痛苦。 因此，我們採用的方法是將鼠標懸停在滑塊上，然後立即顯示預覽。 當我四處拖動並嘗試不同的尺寸時，我可以看到這個圖案是如何縮放的。 這真的很有用並且可以節省大量時間。 我們現在選擇 1,200。 讓我們繼續討論帖子類型。

關於此面板首先要注意的是這些工具提示的存在。 這些只是一些小信息，可以在您使用該應用程序時嘗試幫助指導您。 所以首先，這只是重申我已經討論過的內容。 如果沒有選擇，如果沒有帖子類型添加到您的模式文件的標題中，您的模式將適用於所有帖子類型。 但請注意下面有一個名為模態可見性的設置。

這是一個非常酷的隱藏功能。 本質上，如果您在模式文件的標題中具有正確類型的塊類型，則每當用戶創建目標類型的新帖子時，他們都會看到模態出現。 他們可以直接從該模式中選擇您的模式。 稍後我會準確地告訴你我的意思。 但我想讓你注意到這個開關實際上是如何被禁用的。 那是因為除非填充了帖子類型，否則模態可見性設置將不起作用。

因此，我們採用的方法是簡單地禁用切換，直到出現帖子類型。 好的。 現在我可以打開它了。 顯示器和插入器切換，它會做你可能猜到的事情。 如果您要關閉它，這將在您的文件標題中分配一個 false 值。 而這種圖案將不會再出現在插入器中。 好的。 讓我們繼續更新這個。

現在讓我們看看所有這些在一篇文章中是如何實際運作的。 所以我要切換並實際創建一個新帖子。 現在，這就是我正在談論的行動模式。 因為正確的塊類型和帖子類型都添加到文件中，所以我現在在創建新帖子時會立即看到這一點。 我只需單擊模式預覽，然後，砰的一聲，我的模式就在那裡。

這很酷，但讓我們看看標籤實際上是如何工作的。 所以這是我選擇的類別，功能。 我主題中的另一個模式有列和文本類別，所以效果很好。 我的搜索詞呢？ 我的帶有示例模式的搜索詞。 效果很好。 我的隱藏文本以三列開頭，也完全按預期工作。 那太棒了。

好的。 因此，讓我們跳回並介紹另一個剩餘的元屬性。 這個解釋起來有點奇怪。 我覺得如果我只是給你看會更容易。 因此，讓我們繼續創建一個新模式。 你所要做的就是點擊這個創建新模式按鈕。 在這裡，我回到了編輯器中。 在本例中，我將選擇代碼塊。 在此代碼塊中，我將粘貼一些示例代碼。

現在這實際上取自 WordPress 文檔。 這是您使用 PHP 註冊塊轉換的方式。 所以你可以把這段代碼粘貼到一個函數文件中，無論你喜歡什麼。 讓我告訴你我們是如何處理這個問題的。 在這個轉換後的塊類型部分，有一個下拉列表。 這個下拉列表是動態填充的，就像通過 API 調用的帖子類型和類別一樣。

所以我可以簡單地搜索我的目標類型——就是這樣，核心/代碼——然後選擇它。 現在再次說明一下，不同之處在於您現在如何執行此操作與使用模式管理器。 現在要做到這一點，我必須找到這個代碼塊，找出我可能需要的確切內容，找出我的塊類型，並將其粘貼到某個地方，而在模式管理器中，我只是選擇了這個字段。 我從下拉列表中選擇了這個值。 好的。 讓我們更新一下。 我將創建一個新帖子。 讓我們退出我們的模態。

這次，我還要選擇代碼塊。 但是我不需要用內容實際填充它，我可以簡單地從工具欄中選擇這個選項。 並註意這個模式選擇。 當我選擇模式時，就有我的模式。 通過單擊它，該塊立即轉換為我的目標模式。

轉換類型要涵蓋的另一件事是所謂的語義塊模式。 這些類似於塊轉換，但針對模板部分。 例如，頁眉和頁腳。 但是那裡有一個問題。 關於選擇目標模板部分塊類型需要了解的一件事是，您必須還分配了正確類型的帖子類型，否則它將無法工作。 因此，我們採用的方法是簡單地為您分配此模板類型。 它是鎖著的。 並且它將保持鎖定狀態，直到實際刪除此塊類型為止。

這就是這個編輯器視圖的初始演示，但我確實需要在此處切換後台主題。 現在我將切換回模式視圖。 這裡的重點是向您展示模式管理器如何處理大量模式。 這個特定的主題註冊了 50 多個模式。

現在請注意，當我點擊這些不同的類別時，這些模式是如何立即被過濾掉的。 當我試圖在一堆模式中找到我需要的東西時，這非常有用。 但是假設您想要更精細的控制。 只需開始打字。 此過濾的工作方式與插入器非常相似。 它真的很有用而且非常活潑。 說到 snappy，還需要指出的是這個 UI 給人的感覺有多快。

請注意，在我真正滾動到它們之前，這些預覽是如何加載的。 這是一個非常擅長節省瀏覽器資源的自定義實現。 無論您使用多少種模式，它都會讓這款應用程序感覺快速且非常活潑。 好的。 我們在本次演示中介紹了很多內容，所以讓我們快速回顧一下。 模式代表了單個內容元素的管理和整頁設計之間有趣的交集。

作為 WordPress 構建者，創建更大的佈局元素並在主題中重複使用它們的能力是一個引人注目的想法。 頁眉、頁腳、推薦、功能框。 這些都是每個網站的標誌。 現在您可以使用模式輕鬆設計整個站點。

現在，儘管模式作為塊主題的關鍵組成部分出現，但 WordPress 本身沒有用於實際創建或管理這些模式的官方界面，路線圖上也沒有任何內容。 相反，構建者必須在他們的代碼編輯器中手動創建模式，來回複製和粘貼代碼數十次，從而留下很大的出錯空間。

我們的產品 Pattern Manager 旨在融入您的工作流程。 只需安裝並激活該插件，您將獲得一個用於過濾模式、創建、複製、編輯、刪除以及所有這些的現代 UI，以及在使用核心 WordPress 編輯器的熟悉體驗中編輯內容的體驗。 此外，許多難以理解的正確標記模式文件的複雜性，例如，添加類別、關鍵字，或者甚至可能限制僅適用於某些自定義帖子類型，都在我們的 UI 中被抽象掉了。 構建者可以通過易於使用的側邊欄控件完全控制這些設置。

Pattern Manager 已發布，現在可從以下 URL 下載。 試一試，讓我們知道您的想法。 請隨時親自與我聯繫，讓我知道您的想法。 我們希望您嘗試一下模式管理器。 我們希望它能像幫助我們的 WordPress 構建者團隊一樣幫助您。 謝謝。