引入塊 3.0

已發表: 2023-02-22

這是您一直在等待的激動人心的消息：Kadence Blocks 3.0 來了！

我們很自豪地宣布 Kadence Blocks 3.0 的發布，這是我們流行的 WordPress 頁面構建器插件的最新版本。 如果您一直在關注整個開發和測試過程，您可能會意識到這個最新的更新為 Kadence Blocks 帶來了一些根本性的變化，所有這些都會帶來更好的網站構建體驗。 同樣，這種基礎重寫創建了新結構，使我們的開發團隊能夠更好地添加新功能，包括新塊。 對於每個使用 Kadence 構建快速有效的站點的人來說，前面都有一條激動人心的道路。

什麼是新的？

代碼重寫、現代化、清理和改進。

Kadence Blocks 是在早期的 WordPress 塊編輯器中構建的。 事實上，它最初是在塊編輯器成為 WordPress 核心的一部分之前三個月發布的。 在很多方面，我們從一開始就專注於塊編輯器，但這也意味著我們必須進行大量重構，因為核心代碼庫和塊編輯器本身在整個過程中發生了巨大變化年。 儘管我們在某些​​地方進行了重構，但我們遇到了一個明顯的時刻，我們需要重組大部分插件，以使其與 WordPress 核心的當前路徑更加兼容，並為塊編輯器的創新開闢未來的機會。 以下是一些亮點：

  • 完全更新構建結構，現在使用組件庫
  • 更新了塊的 React 結構以發揮作用並使用 API v2
  • 重建我們如何編譯和輸出前​​端 CSS 以進行塊自定義
  • 重構了我們保存和輸出 SVG 圖標的方式以防止 wp_kses 剝離
  • 重建我們的前端 Javascript 以不使用任何 jQuery 滑塊

塊設置的新用戶界面

Kadence Blocks 3.0 為區塊設置的用戶界面帶來了新的改進。 進行這些更改是為了優化您在頁面上創建和管理塊的速度和輕鬆程度。

按標籤組織

塊設置直觀地分為幾個部分：常規、樣式和高級。 這將使找到正確的設置來更快、更容易地調整佈局和設計。 無需再滾動瀏覽大量設置！

新的和更新的設置控件

我們想讓編輯塊樣式變得更容易。 雖然 WordPress 核心開發了一些非常好的新控件，但我們發現一些問題阻止我們簡單地採用它們的組件。 例如，WordPress 核心有一個漂亮的漸變控件，但它不適用於全局可變顏色，這對於希望更快、更輕鬆地構建網站的 Kadence 用戶來說非常重要。 更不用說 WordPress 核心沒有任何具有響應式設置控件的組件，這對於現代站點構建也很重要。 在此處插入令人興奮的表情符號。

我們為我們的組件庫構建了很多我們自己的控件。 其中一些控件基於 WordPress 核心，而其他控件則在一些小方面有所不同，我們認為我們可以通過定制的 Kadence 控件提供更好的指導。 所有這些都考慮了響應式設計，並為我們的塊控件帶來了更多的一致性。 以下是其中一些新控件的一些圖片。

視覺填充和邊距

Kadence Blocks 始終讓您能夠在 Row Layout Block 中直觀地設置頂部和底部填充。 Kadence Blocks 3.0 在行佈局和我們的許多其他塊中改進了這種體驗。 當您將鼠標懸停在填充和邊距設置上時，會顯示突出顯示的區域，現在可以更輕鬆地查看您的設置如何影響頁面佈局。

行佈局塊的變化

Kadence Blocks 插件的基石之一是 Row Layout Block。 Row Layout Block 是一個容器，可以將各個部分組合在一起，使使用塊構建起來更加容易。 我們將大量注意力集中在使這個基礎塊更易於使用上。

在行佈局中輕鬆移動部分

我們在行佈局中都經歷過的一個挫折（是的，我們也是）是將一個部分從一個區域移動到另一個區域的困難。 用塊構建通常意味著將右側的一個部分移動到左側的繁瑣的複制和粘貼移動。 由於行佈局塊中有許多部分塊，因此通常需要從頭開始重建行佈局以確保可以輕鬆移動部分塊。

現在，在行佈局塊中移動部分塊比以往任何時候都更容易。 單擊箭頭，您可以在任何地方快速移動一個部分，並將它們從一個行佈局塊拖到另一個塊。

新的行網格佈局選項

行佈局現在可以包含部分網格。 例如，如果您想要一個包含兩行的三列網格，您可以使用一個行佈局塊來實現。 這樣做的好處在於您可以在平板電腦上將其設為兩列網格。

行佈局使用 Grid CSS 和其他優化

我們優化了行佈局塊輸出 CSS 的方式以及它使用的 CSS 類型。 從 CSS Flexbox 切換到 CSS Grid 允許 Kadence Blocks 顯著減小 CSS 文件大小（36kb -> 6kb）。 與此同時，我們將輸出中的 HTML 標記數量從三個減少到兩個，進一步幫助您優化 DOM（文檔對像模型）大小。 此改進顯著提高了頁面速度並改善了整體用戶體驗。

在高級文本塊中鍵入文本

一項全新的功能是高級文本塊中的鍵入文本選項。 您現在可以定義一系列字符串以在您的內容中鍵入和替換。 這對於將注意力吸引到特定標題並在您的網站上建立參與度非常有用。

要將此添加到您的站點，請選擇一些文本並單擊高級文本塊工具欄中的箭頭，在下拉列表中單擊鍵入的文本。 然後，將打開一個包含所有類型文本設置的面板。

遷移到內部塊

Kadence Blocks最初創建時，內部塊的控件非常缺乏。 這意味著對於我們的幾個塊，我們必須創建自定義數組屬性來創建一種實際上不是內部塊的內部塊。 我們的按鈕塊就是一個很好的例子。 它的一個重要目的是讓用戶能夠輕鬆地在彼此旁邊添加兩個按鈕。 隨著 WordPress 核心的發展，使用內部塊構建的工具要好得多。 現在，將帶有單個按鈕的容器塊作為內部塊更有意義。 這允許您單擊按鈕進行編輯並顯著簡化設置面板。 在 Kadence Blocks 3.0 中，我們遷移了四個塊以利用內部塊來簡化開發。

  • 高級按鈕塊
  • 推薦塊
  • 圖標塊
  • 圖標列表塊

設置變量

Kadence Blocks 3.0 的眾多目標之一是讓設計決策更加直觀。 對於許多用戶來說，了解像素、EM 或 REM 單位之間的區別以及他們應該將其用於各種設置（如字體大小、填充或裝訂線）並不在他們的待辦事項列表的頂部。

在 Kadence Blocks 3.0 中，我們將許多默認尺寸設置移動到使用自定義變量，因此您可以為標準元素尺寸設置設置小、中和大尺寸，讓我們處理其餘部分。

使用像素或您在塊設置中想要的任何其他單位仍然很容易設置您自己的自定義大小。 但是，堅持使用默認變量選項將幫助您保持設計的一致性並限制對響應覆蓋的需求。 此外，從長遠來看，您的設計更易於管理。 在需要精確控制的時候，Kadence Blocks 也將這種力量交到您手中。

通過 CSS Clamp 進行響應式設計

無論您使用什麼設備，為了提供更好的觀看體驗，Kadence Blocks 3.0 從根本上改變了設計的加載方式。 如果您對 CSS clamp 背後的技術感興趣，可以在此處閱讀更多相關信息。 本質上，CSS Clamp 建立了高端視口尺寸（例如，桌面瀏覽器）和低端視口尺寸（例如，手機）。 而且無論網站如何加載，或者用戶如何調整瀏覽器窗口的大小，您的網站都會根據檢測到的瀏覽器窗口大小靈活地更改這些元素的大小。

雖然 Kadence Blocks 仍然允許您根據台式機、平板電腦或移動設備設置尺寸規格，但 Kadence Blocks 3.0 免除了您需要調整這些視圖尺寸的責任。 現在，您可以依靠使用 Clamp 的基於變量的設置，讓 Kadence Blocks 為您完成工作。

複製和粘貼樣式的更新

複製和粘貼樣式的選項已經成為 Kadence Blocks 的一部分，但我們在 Blocks 3.0 中對其進行了改進，並將其包含在我們所有的塊中。 該工具需要一些意向性才能使其成為您工作流程的一部分，但我們保證它將使您的開發速度更快！

更新阻止默認值

如果您發現自己總是在 Kadence Block 中設置一些東西，您可以定義該塊的“默認”是什麼。 因為如果您始終將行佈局設置為使用主題內容最大寬度，則無論何時向頁面添加新的行佈局塊，都可以將其設置為默認值。 您可以使用任何塊上的任何設置來執行此操作。 雖然在 Kadence Blocks 3.0 之前，您已經能夠在大多數區塊上執行此操作，但我們已經改變了它的工作方式。 現在設置塊默認值比以往任何時候都容易。 在每個塊中，您可以單擊“高級”，然後單擊“塊默認值”，這將允許您查看是否應用了任何塊默認值。 您甚至可以刪除您不想成為塊默認值一部分的某些屬性。 使它如此簡單的原因是您可以使用您正在處理的當前塊來定義新的默認值，只需單擊一個按鈕。 您還可以導出塊默認值並將它們導入其他站點。

完全向後兼容

當然，通過這樣的重大重寫，最大的問題之一就是確保完全向後兼容。 我們在整個開發過程中一直關注這一要求，以確保您使用 Kadence Blocks 2.* 構建的站點可以輕鬆遷移到更新的 3.0 插件。 在漫長的測試期間，超過 400 人為測試 Kadence Blocks 3.0 做出了貢獻。 此外，借助我們使用 Kadence Blocks 構建的大型入門模板庫，我們已經能夠使用它們進行大量內部測試。 如果您好奇的話，我們自己也一直在我們自己的網站上使用 Kadence Blocks 3.0。

雖然可能存在 Kadence Blocks 3.0 尚未經過測試的邊緣情況，並且錯誤可能仍然存在，但我們相信這些情況會很少，並且我們的支持團隊可以在您過渡到 3.0 時提供幫助。

塊編輯器中的更新如何工作

當您更新 Kadence Blocks 時，您的帖子和頁面內容不會自動更新。 這些頁面的大部分內容都保存為靜態 HTML 並呈現在您網站的前端，與之前呈現的方式非常相似。 雖然我們更新了部分 HTML 的呈現方式，並且更新了隨其輸出的外部 CSS 和 Javascript 文件，但塊的基本結構將保持不變。

例如，Kadence Blocks 2.* 中的行佈局塊在其輸出中使用三個 HMTL DIV，而 Kadence Blocks 3+ 中的行佈局塊僅使用兩個 DIV。 此更改不會立即在您的網站上生效。 直到您打開頁面或發佈時，保存的 HTML 才會重新生成為最新更新。

我們限制了我們所做和測試的 HTML 更改數量，以確保我們支持這兩個版本。 進行這些更改是為了提高您網站的性能。

更新和故障排除提示

以下是我們關於如何更新到 Kadence Blocks 3.0 的建議，以及如果您遇到任何問題可以首先檢查的一些事項。

更新之前

  1. 備份您的網站。
  2. 獎勵：創建一個暫存站點並先在那裡更新。

更新後

  1. 清除站點緩存（瀏覽器、頁面緩存、對象緩存）。
  2. 為 CSS 和 Javascript 重建你的 minify 腳本。
  3. 查看您站點的頁面以驗證一切是否正常運行。

故障排除

  1. 如果頁面在前端顯示不正確，請打開頁面並嘗試重新保存。 這將重建頁面內容中的靜態 HTML 並更新塊格式。
  2. 如果頁面在前端顯示不正確，請檢查您添加的任何自定義 CSS，看看您的自定義 CSS 是否需要更新才能正常工作。

下一步是什麼？

您可能已經註意到 Kadence Blocks 3.0 沒有附帶任何新塊。 這最終是一個有意的決定，將此更新的範圍限制在核心結構、設置和編輯器用戶界面上。 Kadence Blocks 3.0 更新為我們提供了應該很快登陸的新塊的發射台，以及其他強大的功能。 下面是一個簡化的路線圖，讓您對 Kadence Blocks 的事物有所了解。

  • Kadence Blocks 3.1——不到一個月
    • 高級表單塊
    • 進度條塊
  • 新設計庫 – Q1/Q2
  • Kadence Blocks Pro 2.0 – Q1/Q2
    • 結構和 UI 更新以匹配 Blocks 3.0
    • 改造現有的塊。
  • 高級查詢塊 - Q2
  • 動態中繼器現場支持——第二季度

高級表單塊

對於大部分開發，我們計劃推出 3.0 和一個新的 Advanced Form 塊，但決定不再支持 3.0。 我們仍然希望這個區塊很快就會出來。 這個塊的第一個版本將提供比我們當前的表單塊更靈活的構建表單的方式。 例如，您將能夠使用行佈局塊將字段分組到列中，因為每個字段都將是父表單塊的內部塊。

此塊還巧妙地以自定義帖子類型創建自己的帖子，因此可以將表單添加到多個頁面並從單個位置更新。 在初始版本中，會有一些期待已久的功能，例如文件上傳和 Convert Kit 集成，但這僅僅是個開始。 今年晚些時候，我們計劃發布條件字段、付款和多步表單。

特別感謝

感謝所有在 Kadence Blocks 3.0 Beta 過程中為 Kadence 開發團隊貢獻時間、錯誤報告和想法的人。 這是對 Kadence Blocks 工作方式的徹底改革，如果沒有您的錯誤報告，我們將無法完全確保 Kadence Blocks 適合所有人。

您將使用 Kadence Blocks 3.0 構建什麼？

我們很高興為您帶來這些新功能和改進，我們希望您喜歡使用 Kadence Blocks 3.0，就像我們喜歡開發它一樣。 在您看來最大的改進是什麼？ 您對新更新有什麼疑問？ 在下面的評論中分享您的想法和經驗。 此外，計劃於 2 月 23 日星期四在 YouTube 上加入我們的直播，以了解此版本的亮點，向 Kadence 團隊提出任何問題，並詳細了解我們即將推出的使用 Kadence Blocks 構建的路線圖。