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

メールアドレスが公開されることはありません。

関連記事

Web Vitals

WordPress: 特定の記事に特定のCSSを出力する方法

WordPress: 特定の記事に特定のCSSを出力する方法

WordPress

WordPress プラグイン開発における多言語対応(gettextを利用する場合)

目次1. はじめに2. 想定している開発環境3. gettext のインストール4. 多言語対応の作業1. プログラム中の翻訳文字列を使用する箇所で、専用の関数を使うようにします。2. 翻訳ファイルを …

WordPress

【WordPress】Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが表示されました

WordPressで、Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが発生しました。

WordPress

WordPress: create-block して wp-env start する際の注意点

WordPress: create-block と wp-env を使う際の注意点について書いています。

WordPress

WordPress 5.4 以降で記事にリンクを貼る際のオプション

WordPress 5.4 以降で、記事にリンクを貼る際のオプションについて説明します。