為 WordPress 和 React 開發者設計的 Gutenberg 區塊課程

Contents

使用 ReactJS 和 Redux 知識從頭建立複雜的 Gutenberg 區塊( Blocks )和外掛( Plugins )

從這 11 小時的課程，你會學到

學習 Gutenberg 區塊設計的指導方針
探索 Gutenberg 如何將文章儲存到資料庫中，以及如何構建編輯器 UI
瞭解如何使用 webpack 來傳輸 ES6 和 JSX，編譯 SASS 到 CSS，綁定和縮小你的 JS 和 CSS 檔案等
在你的專案整合 ESLint、Prettier 和 husky ，以改善你的工作流程
從頭開始建立一個新的客製Gutenberg 區塊
在你的 WordPress 主題( theme )中客製 Gutenberg 功能
探索建立複雜的 Gutenberg 區塊( block )所需的每一個方面
建立一個嵌入的區塊(一個可以接受其他區塊在其內的區塊)
使用第三方 react 程式庫( libraries )來建立複雜的功能
瞭解如何處理已棄用的區塊( blocks )
瞭解如何將自訂的區塊( block )轉換為另一個
建立一個動態區塊( dynamic block )
探索如何在你的區塊( blocks ) 使用既有的 redux 儲存( stores )
瞭解如何建立自己的 redux 儲存( stores )以便在區塊( blocks )之間共享資料
學習在 Gutenberg 編輯器中管理元欄位( meta fields )的不同方法
瞭解如何在 Gutenberg 建立一個自訂的側邊欄( sitebar )，並管理其中的元欄位( meta fields )
瞭解如何擴充現有的 Gutenberg 側邊欄( sidebar )

要求

你應該熟悉 HTML、CSS (SASS) 、Javascript 和 PHP 的基礎知識
你應該熟悉 WordPress 開發
你應該熟悉 JavaScript、ReactJS & Redux
任何你能自在使用的程式碼編輯器，我將在這此使用 VS Code
本地伺服器，如 MAMP、WAMP、XAMPP、Laragon 或任何其他你熟悉的軟體。我將在本課程中使用 MAMP
NodeJS 和 NPM 或者 Yarn 必須安裝在你的機器上

課程說明

2019 年，WordPress 決定把他們舊的所見即所得( WYSIWYG )編輯器改成一個新的基於 ReactJS 的編輯器，叫做 Gutenberg。 Gutenberg ( 古騰堡 )也被稱為區塊( block )編輯器是基於區塊的。所以你的文章將由一些區塊組成，每個區塊都其目的。你可以有一個區塊來展現按鈕、影像或一些文字等等。

在本課程中，你將學習到為 Gutenberg 建立客製的區塊所需的一切知識。我們將從一個簡單的區塊開始，然後我們將建立一些更復雜的區塊。

為了從這門課程中得到最大的收穫，你需要有 WordPress 主題 / 外掛開發的知識。本課程需要你已經掌握 Javascript 知識。你應該熟悉基本的 JavaScript 概念，最好是最近的 ES6 + 版本。本課程還需要 ReactJS 知識。因此，像元件狀態( component state )、生命週期方法( lifecycle method )和基本 react 概念這樣的概念對你來說不應該是新的。此外，進階的概念，如高階元件知識將很有幫助，但它會在課程中簡要說明。已有 Redux 知識也很有幫助。並不是所有的區塊都需要使用 redux，但是在某些區塊中我們會大量使用 redux。所以，如果你熟悉 redux 的概念，比如儲存( stores )、動作( actions )、還原器( reducers )等等，這將是理想的。

課程內容如下:

首先，在編寫程式之前，我們將討論一些設計一個區塊時應該遵守的設計準則。

我們將看看你的 Gutenberg 文章是如何儲存在你的資料庫中，以及幕後發生了什麼，以便從儲存在資料庫中的內容構建基於 ReactJS 的 UI。

在第 2 部分，我們將有一個 webpack 教程。這個部分不會處理任何 WordPress 的東西。它將是純粹的 webpack。 Webpack 是一個工具，我們將使用它來解釋和綁定 Javascript 和 CSS 檔案。

在第三部分，我們將建立一個 WordPress 外掛。在這個外掛中，我們將註冊第一個 Gutenberg 區塊。我們也將使用 webpack 的知識，以便在這個外掛處理 JS 和 CSS 檔案。

在第 3 部分也會有一些額外的內容。在這個內容中，我們將學習如何整合 ESLint、prettier 和 husky 來改進工作流程。

在第 4 部分，我們將快速瀏覽一下你可以在 WordPress 主題( theme )中做的一些事情，這些事情可以讓你在 Gutenberg 編輯器中修改 / 新增一些功能。

在第 5 節中，我們將建立一個簡單的區塊。然而，在這個簡單的區塊中，我們將學到很多關於我們可以在一個區塊中做什麼。

在第 6 部分，我們將使用我們的知識建立一個更復雜的區塊與一些進階功能。這些特性包括如何在其他區塊中新增區塊，如何處理影像等等。

第 7 節將介紹如何建立動態區塊。因此區塊可以是靜態的，或者換句話說只生成一些靜態的 HTML。但是它們也可以是動態的，例如，它們可以從資料庫中獲取一些東西。

第 8 部分將在 Gutenberg 探索更多用 redux 能做的事。我們將看到如何使用現有的 redux 儲存，並建立我們自己的儲存。

最後，在第 9 節，我們將看到為了管理 Gutenberg 的元資料( metadata )，我們可以遵循的不同方法。我們將使用區塊來管理元資料。我們還將學習如何建立一個自訂的側邊欄外掛並在這側邊欄管理元資料。

目標受眾

熟悉 ReactJS 並希望從頭建立 Gutenberg 區塊的 WordPress 主題 / 外掛開發人員
任何有 WordPress 和 ReactJS 經驗，想知道關於 Gutenberg 編輯器一切的人

講師簡介

Ali Alaa 前端 Web 開發人員 ( 更多講師主講課程介紹 )

嘿！我是前端 Web 開發人員Ali Alaa。幾年前，我對 Web 開發開始充滿興趣，尤其是在前端方面。我開始探索從 HTML / CSS / JS 到 WordPress 主題建構( theming )和 JS 框架的領域。我已經擔任前端開發人員大約 7 年了。這些年來，我決定開始建立 udemy 課程，與更多人分享我的知識。