WordPress

【WordPress】Gutenberg をカスタマイズするための情報

投稿日:2019年5月24日 更新日:

1. はじめに

WordPress の バージョン 5 から、「Gutenberg」というツールを使って記事を編集するようになりました。

本記事では、Gutenberg をカスタマイズするための情報をまとめていきます。

2. ツールバーにボタンを追加する

記事編集中、

  1. 特定の文字列を選択し 、
  2. ツールバー上に用意したボタンを押すと、
  3. その部分が <span class="foo"></span> で囲まれて(ソースコードレベルで)
  4. foo クラスで定義された視覚的効果が与えられる

といった動作を自作する方法です。

これを実現する方法は、gutenberg/docs/designers-developers/developers/tutorials/format-api at master · WordPress/gutenberg(リンク切れ)に書いてあり、基本的にはこれを真似ればできます。

但し、2019年5月時点では、1つのHTML要素に対して複数のボタンを登録することができないようです。例えば <span class="foo">...</span> を挿入するボタンと、<span class="bar">...</span> を挿入するボタンを両方追加することはできません(バグ?)。Gutenberg のリポジトリに対策コードが追加されていますが、まだ WordPress のリリースには組み込まれていません(下記リンク先を参照)。

使えるアイコン

情報源

関連ソースコード

3. 自作ブロックを追加する

gutenberg/docs/designers-developers/developers/tutorials/block-tutorial(リンク切れ)にあるドキュメントを読んで真似することで自作ブロックを追加することができます。

wp-cli を使って雛形を生成する

WP-CLI には、ブロックの雛形ファイルを生成するコマンドが用意されています。

コマンド例

wp scaffold block my-block --title="MyBlock" --plugin=my-plugin
  • my-block は、このブロックの内部的な名前になります。
  • --title="MyBlock" では、このブロックの名前を指定しています。
  • --plugin=my-plugin では、既に存在している my-plugin というプラグインの中にブロックの雛形ファイルを追加することを指示しています。

参考

情報源

  • gutenberg/docs/designers-developers/developers/tutorials/format-api at master · WordPress/gutenberg(リンク切れ)

関連ソースコード

4. フィルタを使って既存の機能に手を加える

既存の機能に手を加えたい場合は、フィルターフックが使えます。いろいろな種類のフックにフィルター処理を追加することにより、対象となる値を変更することができます。

以下は、Block Filters に載っているサンプルコードに説明を加えたものです。

PHPコード

add_action( 'init', function() {
        // JSファイルを事前に登録する
	wp_register_script(
                // 登録するJSファイルの登録名
		'my-filter-js',
                // 登録するJSファイル
		plugins_url( 'my-filter.js', __FILE__ ),
                // 依存しているスクリプト(wp-includes/script-loader.php 内で登録されている)
		array( 'wp-rich-text', 'wp-element', 'wp-editor', 'wp-compose', 'wp-data' )
	);
});

add_action( 'enqueue_block_editor_assets', function() {
        // 登録したJSファイルを読み込む
	wp_enqueue_script( 'my-filter-js' );
});

my-filter.js ファイル

/**
 * Block type 'core/image' の要素に手を加える
 *
 * @param {object} element
 * @param {object} blockType
 * @param {object} attributes
 *
 * @return The element.
 */
function convertImageUrlToRelative( element, blockType, attributes ) {
        // 目的のブロックでなければ何もせず element を返す
	if ( 'core/image' !== blockType.name ) {
		return element;
	}

        // ブロックが 'core/image' であれば、element に手を加える

	// (ここのコードは省略)

        // element を返す
	return element;
}

wp.hooks.addFilter(
        // フック名 (hookName)
	'blocks.getSaveElement',
        // 名前空間 (namespace)
	'my-filters/do-something',
        // コールバック関数
	convertImageUrlToRelative
);

関連ソースコード

情報源

5. 関連情報

WordPress

【WordPress】Gutenberg の 画像ブロック(core/image)で相対URLをセットする

2019.05.24

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPress をフレームワークとして利用する

目次1. はじめに2. WordPress をフレームワークとして利用する場合に便利な機能3. ブログでない Webサイトに WordPress を使う試み3-1. したいこと3-1-1. メインのコ …

WordPress

【WordPress】Gutenberg の 画像ブロック(core/image)で相対URLをセットする

WordPress の Gutenberg において、「 画像ブロック (core/image)」で相対URLを使用するプラグインを作りましたので紹介します。

WordPress

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生する

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生した場合の対応方法について書きました。

WordPress

WordPress の機能を使って独自のPHPファイルにヘッダーとフッターを追加するサンプルページを作成しました

WordPress の持つ get_header(), get_footer() 関数を利用して、独自のPHPファイルにヘッダとフッターを表示するサンプルページを作成しました。 サンプルページのURL …

WordPress の Attitude テーマに日本語翻訳ファイルを使用する(子テーマ利用)

WordPress の Attitude テーマに日本語翻訳ファイルを追加する方法です。 子テーマを利用していることを前提としており、子テーマのディレクトリ側に翻訳ファイルを追加します。 目次前置き( …