実装してみようと思ったことをどのように実現したのか、その過程と考察をお伝えします。
きっかけ
見出しの文字数が多いと、画面幅に合わせたところで自動改行されてしまい、見た目が悪くなってしまいます。
ちょうどよい所で改行したいと思い立ち、ググりました。
検索ワードは、「CSS 自動改行 制御」。
検索結果の中から、spanタグを利用して「改行位置になっても構わないポイントで分割する塊を作る」
という方法を見つけました。
そして、このspanタグはinline-blockに変更します。
［HTMLとして編集］からspanタグを追加することができますが、それだと手間がかかります。
そこで、「選択した文字列をspanタグで囲う機能を追加したい」と思いました。
この機能から連想されるものは、わたしがよく利用する［インラインコード］や［ハイライト］などです。
ということで、「ブロックのツールバーに独自の機能を追加しよう」と決意します。
検索
方向性が見えてきたので、ググります。
公式サイト好きなので、サイト内検索は必ずします。
Q1. この部分の名称は?
［インラインコード］や［ハイライト］などのメニューは、何と呼ぶのでしょうか？
WordPress.orgのサイト内を検索します。
検索ワードは、「site:ja.wordpress.org インラインコード」。
段落ブロックについてのサポート記事から、「追加リッチテキストコントロール」だと分かります。
Q2. リッチテキストコントロールに機能を追加する方法は？
WordPressのDeveloper Resources内を検索します。
検索ワードは、「site:developer.wordpress.org rich text control」。
Block Editor HandbookのRichText Referenceが見つかります。
このページにコードの例があるのですが、理解できないので、「wordpress rich text」でググります。
そうすると、さまざまな書き方が見つかります。
どのコードが良いのか判断が付かないので、検索結果から見つけた気になる単語で検索を続けます。
一日中しらべていました。
今だから分かること
Block Editor HandbookとWordPressのGitHubが参考になるということが分かりました。
参考になるリソースをいくつかあげます。
- Gutenberg ブロック開発の基本
- Live Q & A: Adding Formatting Buttons to the RichText Component of WordPress Block Editor
- Advanced Rich Text Tools for Gutenberg
- Webpack App
一緒にやってみよう
Block Editor Handbookの書式ツールバー APIまたはFormatting Toolbar APIを参考にしながら、コードを書いていきましょう。
プラグインの開発環境がなくても動くようにしたいので、コードを書き換えています。
ご注意ください
これから紹介するコードは、試験的な使用にとどめてください。
開発環境を構築すれば、コードを書き換える必要はありません。
保存するファイルもBlock Editor Handbookに書かれている通りです。
ブログの〆切まで時間がないので、「ステップ 1: 新しい書式を登録する」だけ解説します。
新しい書式を登録するために以下のコードを追加するそうです。
import { registerFormatType } from '@wordpress/rich-text';
registerFormatType( 'my-custom-format/sample-output', {
title: 'Sample output',
tagName: 'samp',
className: null,
} );registerFormatTypeについて調べてみましょう。
@wordpress/◎◎◎については、Block Editor HandbookのPackage ReferenceまたはGitHubのgutenberg/packagesに一覧があるので、@wordpress/rich-textまたはgutenberg/packages/rich-textを参照します。
そうすると、registerFormatTypeにはnameとsettingsという２つのパラメーターがあることが分かります。
ここで一度、利用可能な書式タイプの一覧を表示してみましょう。
固定ページまたは投稿の編集画面で開発者ツールのコンソールを開いて、次のコードを入力してください。
wp.data.select( 'core/rich-text' ).getFormatTypes();そして、「太字」を確認してみましょう。
name: 'core/bold', title: '太字', tagName: 'strong', className: nullとなっています。
'my-custom-format/sample-output'は書式名で、｛｝で囲まれたものは書式設定ということが分かります。
nameはユニークなものにした方がよいはず・・・
関数を定義すると同時に実行するための即時関数を使い、次のように書きます。
(function () {
const { registerFormatType } = wp.richText;
registerFormatType( 'zero1pg/control-br', {
title: '改行を制御',
tagName: 'span',
className: 'zero1pg-inline-block',
});
} () );このコードを「zero1pg-control-br.js」というファイル名で保存します。
そして、サーバーにアップロードします。
これだけでは何も起きないので、Code Snippetsを使ってPHPコードを書きます。
do_action( ‘enqueue_block_editor_assets’ )の関数呼び出しで、wp_enqueue_scriptとwp_enqueue_styleを使用して、機能をブロック エディターに追加します。
スタイルは、Simple Custom CSS and JSや追加CSSなどに記述すればよいので、wp_enqueue_styleは省略します。
スクリプトのURLは、書き換えてください。
add_action( 'enqueue_block_editor_assets', function() {
if( is_admin() ) {
wp_enqueue_script(
'zero1pg-control-br-js',
"スクリプトのURL/zero1pg-control-br.js",
array( 'wp-rich-text' ),
null,
true
);
}
} );このPHPコードは［管理画面のみで実行］を選択します。
Code SnippetsやSimple Custom CSS and JSは、コードを管理画面またはフロントエンドのどちらで実行するかを選べるので便利です。
もう一度、編集画面から開発者ツールのコンソールを開いて、次のコードを入力してください。
wp.data.select( 'core/rich-text' ).getFormatTypes();登録した書式タイプが追加されていれば成功です！！
最後に、CSSを書く時の注意点をお伝えします。
例えば、マーカー機能を追加した場合、編集画面にもスタイルを適用するようCSSを書かないと、マーカーが引かれたことが編集画面で視覚的に確認できないです。
まとめ
このブログが、プラグインを開発したい方のお役に立てれば嬉しいです。
