WordPressプラグイン「Editor Bridge (エディタブリッジ) 」は、デフォルトのブロックエディタを拡張するプラグインです。
デフォルトブロックの機能を拡張したり、フォーマットやスタイルを追加してみました。どのようなことができるかを確認できるサンプルページを作りましたので、そちらをざっくり見てみてください。
WordPressプラグイン「Editor Bridge」で、できることは大きく3つ。
1つ目は、デフォルトブロックの機能を横断的に拡張します。 デフォルトブロックに背景画像や枠線 (ボーダー) を付けたり、マージンやパディングなど余白 (スペース) を設定できます。またボタンのサイズや幅など各種設定ができるように設定パネルに追加しています。
対応しているブロックは以下の通り。
- Background image (背景画像)
- core/heading
- core/paragraph
- core/column
- core/columns
- core/group
- Border (枠線)
- core/heading
- core/paragraph
- core/group
- Button size and width (ボタンの大きさと幅サイズ)
- core/button
- Space, Margin (upper margin as default) and Padding (スペース)
- core/heading
- core/paragraph
- core/image
- core/button (only Margin)
- core/buttons
- core/media-text (only Margin)
- core/gallery (only Margin)
- core/list (only Margin)
- core/table (only Margin)
- core/columns
- core/column (only Padding)
- core/group
- core/cover
2つ目は、見出しや段落など文字を入力するところに使われる RichText Component にフォーマットを追加。文字の大きさや太さを変えたり、文字を装飾する強調やバッジが使えます。
バッジはちょっとしたアクセント用のテキスト装飾に、強調は文章の一部を強調できます。ブロックにスタイルがあるように、フォーマットにもスタイルが選べるようにしてみました。
- Badge (バッジ)
- Default (デフォルト)
- Round Corner (角丸)
- Round (円形)
- Outline (アウトライン)
- Status (ステイタス)
- Perfect Circle (正円)
- Font size (フォントのサイズ)
- Font weight (フォントの太さ)
- Highlight (強調)
- Highlight (強調)
- Marker (マーカー)
- Underline (アンダーライン)
3つ目は、ブロックにスタイルを追加。
よく使うブロック5つほどにスタイルを追加しています。応用的な活用方法として、まずスタイルを設定して、次に拡張機能のパディングで余白バランスを整えたり。ブロックの拡張機能を組み合わせてスタイルに柔軟性をもたせることができます。
- Button block (ボタン)
- Triangle Icon (三角アイコン)
- Blur (ぼかし)
- Shadow (シャドウ)
- Expansion (膨張)
- Emboss (エンボス)
- Heading block (見出し)
- Underline (アンダーライン)
- Thick Underline (太めのアンダーライン)
- Two Color Underline (2色アンダーライン)
- Up Down Line (上下線)
- Accent Line (強調線)
- Kebab Line (横串線)
- Single Box (囲み線)
- Double Box (2重囲み線)
- Left Accent Line (左ラインアクセント)
- Gradation Line (グラデーション
- Stripe Line (ストライプ)
- Cross Box (交わり囲み線)
- Brackets (カッコ)
- Japanese quotation marks (日本語の引用符)
- Image block (画像)
- Round Corner (角丸)
- Frame (フレーム)
- Shadow (シャドウ)
- Separator block (区切り線)
- Thick line (太線)
- Dotted (点線)
- Shadow (シャドウ)
- Circle Mark (円マーク)
- Table block (テーブル)
- No Style (スタイルなし)
- Underline (アンダーライン)
- Dashed (破線)
- Round Corner (角丸)
プラグイン命名に悩む
今回WordPressプラグイン「Editor Bridge」を公式ディレクトリに登録するにあたり直前にプラグイン名を変更しました。
理由は、プロジェクト名「gutenberg」がプラグイン名に含まれていることについてです。 含まれていると表示名 (後で変えられる) とパーマリンク (後で変えられない) にも含まれるからです。プラグインの登録申請すると、一旦確認のメールが届きます。
そのメール内容には、上記の理由とリスクが書いてあり、正式エディタは、WordPressエディタとクラシックエディタなので、「gutenberg」プロジェクト名は時間が経てば忘れ去られる。コードネーム的な扱いですね。
そのときにそのまま登録を進めていいのか。パーマリンクを変更するなど何か対応する必要があるのか決めて返信するとレビューが開始されます。つまりワンステップ追加した形でプラグインのレビューが進められます。
もともとは「Guten Plus」というプラグイン名でしたが、その前にも「Guten Bridge」と付けていましたので、実は2回めのプラグイン名を変更でした。
「Guten Bridge」のときは、開発している途中に他に同名のプロジェクトが出てきたので、「Guten Plus」に変えたのですが。。。
今後は、とりあえずコードネーム的に名前をつけて開発を進めたほうがいいかもしれないなぁと思いつつ。いつもプラグイン命名に頭を悩まされています。
2転3転して何度も心を折られた開発
今回の開発したWordPressプラグイン「Editor Bridge」はだいぶ難航しました。
プラグインの構想自体は、WordPressバージョン 5.0 リリース直前にちょこちょこブロックの作り方を学びつつ進めてきました。
その中でいちばん実現したかったことは、スペースの設定。ブロックにマージン (margin) とパディング (padding) をいい感じにつけれたらいイイなぁと。レイアウトに変化をもたらすものになればなぁと。
しかしそれは容易なことではありませんでした。特にフロント部分とエディタ部分の整合性を調整するところ。
ブロックエディタは、2018年12月6日にWordPress (v 5.0) の標準エディタとして搭載されてからブロックエディタ自体がまだまだ発展途上で機能追加されるし、改良もされます。そのたびに仕様が変更されてしまいます。
初期の頃のブロックエディタは、とにかくエディタ部分のDOM (Document Object Model) 構造が複雑すぎて。作ってもCSSセレクタが入れ子の連続だったり、設定次第でレイヤーが一つ増えたりしてDOM構造が動的に変わります。ありとあらゆることに対応するには複雑になりすぎて整合性が全く取れませんでした。変更容易性も保守性も確保できなくなるのが目に見えて挫折。。。
アップデートのたびに大幅にDOM構造が変わるところもあり、なかなか安定しません。バージョン5.4 あたりからようやくDOM構造が素直になりつつある感が出てきました。フロント部分とエディタ部分の整合性がとれるような感触を掴んだので。形にしてもいいのではないかと。そしてリリースにこぎつけました。
今後の展望
WordPressプラグイン「Editor Bridge」は特定のテーマに依存する形ではなく、なるべくブロックエディタに対応するいろんなテーマで使えるようにしたいなぁと考えています。
一番の課題は、テーマそれぞれにマージンやパディングの余白のとり方が違うと思うので。またマージンの付け方も上部または下部とあるでしょう。そこをどのように埋められるか。
すでに少し考えていて、今回裏ではCSSカスタムプロパティを仕込んでいていろんなテーマにフィットするように開発者向けの仕組みをつくることを視野に入れていたりします。
ブロックエディタは、まだまだ改良が続くと思います。 WordPressプラグイン「Editor Bridge」もまだまだ改良や調整をしながらいいプラグインにしていきたいと思います。
話はそれてしまいましたが、ブロックエディタでWordPressプラグイン「Editor Bridge」をぜひ活用してみてくださいね。