Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

擴充既有的區塊編輯器功能-新增對話框

WordPress 在進入第五版以後,預設的編輯器變成區塊編輯器。這項更新迄今已經過了兩年多,各種區塊的外掛也越臻完備,因此,許多撰寫文章會用到的區塊功能,幾乎不需要重新開發,只需要在既有功能上擴充即可。

譬如說:對話框。

不知道為什麼,日本人寫文章真的很喜歡對話框的功能⋯⋯

去年 Leo 請我在公司官網中,加入對話框的功能。當時參考了這篇文章的作法,在網站中加入了 CSS 的類別屬性,使用 [媒體及文字] 區塊,搭配上 [區塊] > [進階設定] > [附加的 CSS 類別] 來建立對話框。

然而,因為需要進到區塊設定的 [進階設定] 中做調整,因此對於其他同事來說,還是多了一點技術門檻。

為了想要可以讓他們可以在介面中更簡單的加入所需的 CSS 類別,因此透過擴充區塊編輯器的方式,將這項功能增加到當前的 [媒體及文字] 中。

順帶一提,WordPress 從區塊編輯器的時代開始,已經將部分的重心,從原本的 PHP 轉向 JavaScript,因此在開發區塊編輯器的相關功能時,也會需要開始多熟悉 JavaScript。

本篇文章適合對於 WordPress 開發略有概念 (懂得使用 wp_enqueue_scripts) 同時對 JavaScript 有初步認識的人。

實作方法

註冊區塊樣式

根據 WordPress 的開發文件〈Extending the Block Editor〉,首先需要建立區塊用的 .js 檔案。如果你有使用中的子佈景主題,你也可以直接在子佈景主題的主要 .js 檔中進行編輯。

因為本次需要做的是擴充既有區塊的樣式,因此使用 wp.blocks.registerBlockStyle 這個方法。

我們實作的對象是 [媒體及文字] 區塊,需要呼叫的 API 是 core/media-text,你也可以針對想要擴充的區塊直接呼叫 API,例如段落的 core/paragraph

wp.blocks.registerBlockStyle('core/media-text', {
	name: 'balloon',
	label: 'Balloon',
});

編輯區塊樣式

透過上述方式註冊的區塊樣式,在切換成該樣式時,會產生 .is-style-{name} 的 CSS 類別,以上面的例子為例,就會是 .is-style-balloon

在子佈景主的主目錄下建立 block.css 中,加入下列的樣式:

/* --------------
改變媒體及文字預設的配置
-------------- */
.wp-block-media-text.is-style-balloon {
  grid-template-columns: 100px auto;
  margin-bottom: 1.5em;
  align-items: initial;
}

.wp-block-media-text.is-style-balloon.has-media-on-the-right {
  grid-template-columns: auto 100px;
}

.wp-block-media-text.is-style-balloon.has-media-on-the-right .wp-block-media-text__content {
  margin-right: 20px;
  margin-left: 0;
  grid-column: 1;
}

/* --------------
建立對話框的框線樣式
需要特別調整 left/right/width 與 margin 的數值
因為這些數值是針對 applemint 網站調校的,不一定適合你的網站。
-------------- */

.wp-block-media-text.is-style-balloon.has-media-on-the-right .wp-block-media-text__content::before {
  content: "";
  border-left: 10px solid #00c1d1;
  border-right: none;
  right: -20px;
  left: 100%;
}

.wp-block-media-text.is-style-balloon.has-media-on-the-right .wp-block-media-text__content::after {
  content: "";
  border-left: 10px solid #fff;
  border-right: none;
  left: calc(100% - 3px);
}

.is-style-balloon .wp-block-media-text__content {
  -ms-flex-item-align: center;
      align-self: center;
  border: 2px solid #00c1d1;
  border-radius: 5px;
  padding: 4%;
  position: relative;
  margin-left: 20px;
  width: calc( 100% - 20px );
}

.is-style-balloon .wp-block-media-text__content p:last-child {
  margin: 0;
}

.is-style-balloon .wp-block-media-text__content::before,
.is-style-balloon .wp-block-media-text__content::after {
  position: absolute;
  content: "";
  border: 10px solid transparent;
  top: calc( 50% - 10px );
}

.is-style-balloon .wp-block-media-text__content::before {
  border-right: 10px solid #00c1d1;
  left: -22px;
}

.is-style-balloon .wp-block-media-text__content::after {
  border-right: 10px solid #fff;
  left: -19px;
}

/* --------------
頭像想要呈現成圓形的
-------------- */
.is-style-balloon figure img {
  border-radius: 50%;
  border: 1px solid #ddd;
}

/* --------------
針對手行動裝置的樣式
-------------- */

@media screen and (max-width: 48em) {
.wp-block-media-text.is-style-balloon {
    grid-template-columns: 50px auto !important;
  }
.wp-block-media-text.is-style-balloon .wp-block-media-text__content {
    width: calc( 100% - 15px );
    margin-left: auto;
    padding: 15px;
    grid-row: 1;
    grid-column: 2;
  }
}

載入 JavaScript 檔

為了能夠在編輯時使用區塊,因此需要透過 enqueue_block_editor_assets 這個勾點 (hook) 將區塊載入到編輯器中。

並透過 enqueue_block_assets 勾點,引用 block.css,便能使前後台都能顯示該樣式。

/**
 * Enqueue Block Editor Scripts
 * This is used to enqueue block editor styles.
 * 
 */
function hyc_blockeditor_scripts() {
	wp_enqueue_script( 'hyc-balloon-be',
		get_stylesheet_directory_uri() . '/js/balloon-be.js',
		array( 'wp-blocks' ) );
}
add_action( 'enqueue_block_editor_assets', 'hyc_blockeditor_scripts' );

function hyc_block_scripts() {
	wp_enqueue_style( 'hyc-block-style',
		get_stylesheet_directory_uri() . '/block.css' );
}
add_action( 'enqueue_block_assets', 'hyc_block_scripts' );

結語

上述提供了自行擴充對話框功能的做法,但就如同一開始所說的,日本人非常喜歡這項功能,因此實際上已經有人將這項功能開發成專門的區塊,可以直接安裝使用。如果你希望網站中增加這個區塊,但沒有開發的相關背景,也可以試試看這款外掛。

說真的,隨著區塊編輯器的逐漸成熟,看起來已經有逐漸取代傳統 [短代碼] 與頁面編輯器的傾向了。如果接下來還想跟上 WordPress 社群的開發生態,強烈建議要好好理解一下怎麼樣選用適當的區塊,或是為既有區塊進行擴充。

參考資料

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料