トップへ戻る
BLOGS

WordPress 既存のブロックスタイルをカスタマイズする

WordPress 既存のブロックスタイルをカスタマイズする

今までたくさんカスタムブロックを作成してきましたが、これまではいわゆる「オリジナルブロック」と呼ばれるもので、テーマに存在するわけではなく、プラグインファイルとして追加して機能するものでした

記事は取得できませんでした

これは一からブロックを定義、登録して開発していくものでしたが、そもそもオリジナルのテーマで開発しているため、通常のデフォルトブロックがさみしいもので、イマイチ機能的に優れているわけではなかったため、そろそろ既存のブロックを拡張した開発がしたいと考えていました

ブロックカスタムスクリプトの登録

今回はテーマに読み込ませる為、functions.phpにて、登録設定用のJSファイルをエンキューします

functions.php

<?php
// カスタムブロック登録用スクリプト
add_action( 'enqueue_block_editor_assets', function () {
	wp_enqueue_script( 'custom_block_editor', get_theme_file_uri( 'js/editor.js'), [
		'wp-element',
		'wp-rich-text',
		'wp-editor',
	]);
	wp_localize_script( 'custom_block_editor', 'ojaEditorObj', [
		[
			'item' => 'editor01',
			'title' => 'marker',
			'class' => 'text-marker',
		],
	]);
});

wp_enqueue_script関数の第3パラメータに依存関係があるパッケージ名を指定します。wp-rich-textだけでも問題なく動作すると思われますが、念の為他の項目も追加しています

ちなみにプラグインで登録する場合にはブロック登録用のPHPに記述すればOKです

この依存スクリプトから、オブジェクトを受け取って処理を書いていくイメージです

editor.js

(function (richText, element, editor) {
// ここに設定を追加していきます。
}(
  window.wp.richText,
  window.wp.element,
  window.wp.editor
));

この書き方はテーマに追加する場合で公式にあるように、ブロックをプラグインとして追加する場合にはモジュールとして読み込みます

import { registerFormatType, toggleFormat } from'@wordpress/rich-text';
import { RichTextToolbarButton } from'@wordpress/block-editor';

wp_localize_script (PHPから値を渡す)

wp_localize_scriptはPHPからJavaScriptに対して値を渡せる便利なメソッドです

wp_localize_script(登録したJSのハンドル名, JSで使用する変数名, JSに渡す値の連想配列)

次はJavaScriptでブロックをラップする方法を見ていきます

registerFormatType

まずはリッチテキスト選択した範囲のテキストにHTMLのタグでラップ出来るようにしてみましょう

公式で以下の書式設定による方法が有効なうようです
書式ツールバー API

書式を登録.js

registerFormatType( 'my-custom-format/sample-output', {
    title: 'Sample output',
    tagName: 'samp',
    className: null,
 edit: SampleEventHandle
} );

richText.registerFormatType関数は、リッチテキストに文字修飾行うHTMLを含む書式を登録する関数です。リッチテキストの選択範囲に対して何らかの処理を行う場合はこの関数が良さそうです。

registerFormatType関数の第1パラメータには文字修飾のタイプ名を「〇〇/〇〇」の形式でユニークなものを指定します
もしタイプ名が「/」で挟まれていない場合はエラーになるので注意が必要です

registerFormatType関数の第2パラメータには文字修飾の設定内容を示すオブジェクトを指定する。オブジェクトの内容としては、
titleには文字修飾の名前を、tagNameには選択範囲を囲むHTML要素の名前を指定する。
classNameにはそのHTML要素のclass属性値を指定し、class属性が不要な場合はnullを指定しないとエラーになるようです。
editには文字修飾を変更する関数(イベントハンドラ)を指定する。

editプロパティ

editプロパティは、フォーカスをあたったり、文字が入力されたりといった多くのタイミングで頻繁に呼び出されるReactのライフサイクルといった内容のようです。

ここで定義するのは、ツールバーを利用したボタンと、その振る舞い(クリックイベント)を登録します
処理内容としては、propsというパラメータを受け取り、wp.element.createElement関数でUI要素を生成して、それを返します

RichTextToolbarButton

RichTextToolbarButtonはツールバーのドロップダウンメニューを提供してくれます

editor.js

return element.createElement(editor.RichTextToolbarButton, {
  icon: "admin-customizer",
  title: ojaEditorObj[0].title,
  onClick: () => {
    onChange(
      richText.toggleFormat(value, {
        type: `custom-editor/${ojaEditorObj[0].item}`,
      })
    );
  },
  isActive: isActive,
});

createElement関数の第2パラメータには、生成するUI要素の設定内容をオブジェクトで指定します

オブジェクトの内容としてiconにはアイコン名(dashiconsのクラス名から先頭の’dashicons-‘を取ったもの)を、titleにはメニューに表示される名前を指定する。
メニュー内容の表示位置は、titleの内容でソートされるようです

onClickにはメニューがクリックされた際に呼び出されるイベントハンドラを指定します
このイベントハンドラでは、richText.toggleFormat関数を使ってスイッチの要素、
「HTML要素で囲む/HTML要素を外すの」トグル処理した内容をprops.onChange関数を呼び出してリッチテキストを更新するようにします
その後、isActiveを呼び出し、リッチテキストにフォーカスを移すようにしています。

そしてcreateElement関数の第3パラメータには子要素を指定できるが、ツールバーのボタンやメニューの場合はそのような要素が不要なため、今回は省略しています

テキストマーカーブロック

今回作成した選択したテキストにマーカーを引くブロックの全文です

editor.js

(function (richText, element, editor) {
  richText.registerFormatType(`custom-editor/${ojaEditorObj[0].item}`, {
    title: ojaEditorObj[0].title,
    tagName: "span",
    className: ojaEditorObj[0].class,
    edit: function ({ isActive, onChange, value }) {
      return element.createElement(editor.RichTextToolbarButton, {
        icon: "admin-customizer",
        title: ojaEditorObj[0].title,
        onClick: () => {
          onChange(
            richText.toggleFormat(value, {
              type: `custom-editor/${ojaEditorObj[0].item}`,
            })
          );
        },
        isActive: isActive,
      });
    },
  });
})(window.wp.richText, window.wp.element, window.wp.editor);

ここまでの書き方はほぼテンプレートのようなもので、必要に応じて項目をカスタマイズすることで機能の追加は可能だと思います

これで、ツールバーにボタンが追加されており、これをクリックすると指定した「spanタグ」に「text-marker」クラスを付与した状態でラップする実装が完了しました
後は、このクラス名に実際にスタイリングを行います

マーカーのスタイリング

editor.scss

// カスタムマーカー
.text-marker {
  background: linear-gradient(to top, #eaeb16 40%, transparent 40%);
  font-weight: bold;
}

既存のブロックにスタイルを追加する

ここからは別のアプローチとして、インスペクターに(管理画面右のサイドバー)にスタイル設定を追加する方法を見ていきます
こちらは非常に簡単です
使用するスクリプトファイルは上記で使用したeditor.jsに追記していきます

registerBlockStyle

registerBlockStyle関数はその名の通りブロックに対して、スタイルを生成する関数で、以下の書式で動作します

wp.blocks.registerBlockStyle("名前空間/ブロック名", {
  name: "クラス名",
  label: "デフォルト",
  isDefault: true, //初期状態
});

第2引数の name プロパティが「is-style-○○」という形で対象のブロックに付与されます

たったこれだけでブロックに対してクラス名のつけ外しが可能なので、ほとんどの場合この関数だけでまかなえるかもしれません

見出しの種類をカスタマイズ

registerBlockStyle関数を使用して記事を書く際に必ず使用する見出しタグ(core/heading)に対してたくさんの種類から選択できるようなカスタマイズを実装してみます

editor.js

wp.blocks.registerBlockStyle("core/heading", {
  name: "default",
  label: "デフォルト",
  isDefault: true,
});

wp.blocks.registerBlockStyle("core/heading", {
  name: "under-line",
  label: "下線",
  isDefault: false,
});

wp.blocks.registerBlockStyle("core/heading", {
  name: "left-line",
  label: "左線",
  isDefault: false,
});

後は、これに対して実際にスタイリングを行います
ここでCSSを当てるだけで、Reactによるプレビューがマウスオーバーで行われます
WordPressすげー

editor.scss

h1, h2, h3, h4, h5, h6{
  margin: 2em 0 0.5em;
  font-weight: bold;
  &.is-style-under-line{
    padding-bottom: 5px;
    border-bottom: 2px solid green;
  }

  &.is-style-left-line{
    padding-left: 5px;
    border-left: 5px solid #ddd;
  }
}
@each $tag, $size in (
  h1: 30px,
  h2: 24px,
  h3: 20px,
  h4: 18px,
  h5: 16px,
  h6: 14px
) {
  #{$tag}{
    font-size: $size;
  }
}

おわりに

今回は簡単な内容にて進めやすくほぼコピペでOKな内容でしたが、
やはり既存のブロックカスタムを極めてからオリジナルのブロック開発へ進むのが公式的にも望ましいようですので、もう少し掘り下げて頑張ってみます

お疲れさまでした

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA