Gutenberg Hub 使用 WordPress 模式啟動在線頁面構建器應用程序

在這一點上,我一直對模式的力量讚不絕口。 而且,就在我開始想知道這個功能接下來會是什麼樣子時,有人用一個新想法讓我感到驚訝。 通常那個人就是穆尼爾·卡邁勒。

他提到他將在本周早些時候分享一個與 WordPress 模式庫相關的「小」頁面生成應用程序。 今天,他公開宣布, 住在古騰堡中心.

該應用程序仍處於概念階段,但當前的在線版本運行良好。 從本質上講,它是一個允許用戶拼湊模式以構建整個頁面的界面。 與塊編輯器本身不同,用戶不能直接編輯內容。 相反,他們可以混合和匹配模式,複製塊代碼,並將其粘貼到 WordPress 安裝的編輯器中。

首次訪問 Gutenberg Hub 上的 Builder 子站點時,用戶將在左側邊欄面板中看到一個帶有核心模式類別列表的空白畫布。 將新模式插入頁面就像選擇一個類別、搜索首選設計並單擊它一樣簡單:

gutenberg-hub-launches-an-online-page-builder-app-using-wordpress-patterns Gutenberg Hub 使用 WordPress 模式啟動在線頁面構建器應用程序將模式插入 Builder 應用程序。

用戶在插入單個圖案後無需停止。 這個項目背後的想法是從多種模式構建一個完整的網頁。 然後,通過「複製代碼」按鈕獲取生成的塊代碼並將其粘貼到 WordPress 的編輯器中。 這是一種玩耍和嘗試新想法的便捷方式。

默認情況下,模式是針對桌面視圖呈現的。 但是,用戶可以檢查設計如何響應平板電腦和移動設備。

Builder 直接從 WordPress 模式目錄. 這 API 是公開的 並允許其他人在它之上構建應用程序。

雖然 Kamal 沒有表示他會展示官方目錄之外的模式,但這可能不是不可能的。 Builder UI 在側邊欄中有一個標記為「Core」的部分。 我只是在猜測,但我認為他計劃在未來擴展這一點。

菜單按鈕位於 Builder 界面的右上角。 這將打開導航器界面。 它允許訪問者自定義頁面布局:

gutenberg-hub-launches-an-online-page-builder-app-using-wordpress-patterns-1 Gutenberg Hub 使用 WordPress 模式啟動在線頁面構建器應用程序右側的導航面板。

有向上或向下移動整個圖案、丟棄它們或複製它們的選項。 根據我迄今為止的經驗,與嘗試在 WordPress 編輯器中選擇大量塊相比,這是一種更容易進行調整的方法。

我要求的唯一功能是「返回」按鈕。 打開導航器並刪除插入的模式很容易,但通過工具欄區域中的專用按鈕撤消該操作會更快。

Gutenberg Hub 的 Builder 不允許訪問者自定義模式的內容。 它的目的更傾向於布局創建。 當用戶將其全部粘貼回自己的 WordPress 編輯器時,就會發生自定義。

也許我最喜歡該應用程序的功能是用戶可以與他人分享他們的創作。 Builder 為每個變體創建一個自定義 URL,並使其易於在社交媒體上共享:

gutenberg-hub-launches-an-online-page-builder-app-using-wordpress-patterns-2 Gutenberg Hub 使用 WordPress 模式啟動在線頁面構建器應用程序單擊共享按鈕後彈出窗口。

共享的概念幾乎內置於 WordPress 的塊系統中。 因為一切都建立在一套完善的標準之上,其他人在此基礎上構建的工具使繼續支付它變得容易。

雖然這個項目仍處於概念階段,但我很想看看 Kamal 將來會把它帶到哪裡。 他還分享了一個 YouTube 短片 的插件在行動。

來源

相關文章