WordPressのブロックエディタ

2021年1月20日

ご無沙汰の投稿です。今年はCMSはWordpressを使うことが多く、ブロックエディタを提案し使う事が多いので、覚書として記載しておこうと思います。

なぜWordpressなのか

エンタープライズ規模であったりシステマチックにDBで管理する案件であればブロックエディタのようなツールは選択しないのですが、ここ最近はクライアントから組織内のスタッフでもページを作ったり更新したいという要望がかなり多くなってきています。これを従来までのウィジウィグエディタで作ってしまうと簡易的なページしか作れません。かといってコーダーがコーディングしたHTMLを入れてしまうとクライアントでは文字修正レベルでしか更新ができません。

それらの従来までの手法の解決策としてブロックエディタに注目してきました。ただ実際にはWordpressのブロックエディタで採用されているグーテンベルグであれば基本コードやCSSなどを利用することになり0ベースでコーディングしたものを載せる場合かなりの労力を要します。なのでこれまではあまり利用しなかったのですが、再利用ブロックやカスタムブロックなどの機能も便利になってきたのでそろそろ案件にも使っていきたいと思うようになりました。

以下は実際に案件で使う場合で採用した手法と注意点などを覚書として記載します。

グーテンベルグの基本CSSは利用する

見出し、パラグラフ、リスト、テーブル、ボタン、カラム制御、画像と文章、ギャラリーなどのグーテンベルグの基本CSSは利用します。これをすることでかなりの工数が削減できます。逆にこれを利用できなければグーテンベルグの採用を見送ろうと思うくらい。管理画面の表示から公開画面の制御までかなり影響があります。またWPのアップデートでコア部分を変えてしまうとアップデートの際にメンテが大変になると想像したからです。

以下のCSSをインクルードします。

<link rel="stylesheet" id="wp-block-library-css"  href="/wp/wp-includes/css/dist/block-library/style.min.css?ver=5.6" type="text/css" media="all" />

オリジナルCSSはグーテンベルグの基本CSSにオーバーライド

グーテンベルグの基本CSSはかなりクリーンなものなのでサイト独自のオリジナルのデザインは別途CSSを用意して出力されるHTMLに合わせて記載し、グーテンベルグの基本CSSにオーバーライドする形にします。またサイト独自のブロックはclassなど利用した自由なHTMLで作成し、再利用ブロックとして定義するか、カスタムブロックとして登録して呼び出せるようにします。カスタムブロックラボというプラグインでだいぶブロックを作るのも楽になりましたが、私はまずは再利用ブロックで問題なく運用できるかを考えます。それで難しい場合はカスタムブロックという選択をします。

管理画面にオリジナルCSSを適用

ブロックエディタでページを作っているとオリジナルCSSが当たっているほうがイメージしながら作れるので便利です、テーマフォルダ直下に「editor-style.css」というファイルを置くことでCSSを適用できます。

またfunctions.phpにも以下を追記しておきます。

function gutenberg_support_setup() {
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'gutenberg_support_setup' );

ブロックエディタでつまづいたポイント

といっても便利なブロックエディタですが、いくつか躓いたポイントがあるので列挙していきます。

• テーブルのブロックが非力なのでセルの結合や幅指定などを行う場合はクラシックエディタを使い且、拡張プラグインの「Advanced Editor Tools」をインストールし表の機能を拡張する必要がある
• モダルウィンドやデザインに凝りたい場合はどうしてもHTMLモードを利用しなくてはならない
• なんだかんだやっぱりマークアップエンジニアは初期の設定が大変

といった感じで細かなギミックや表現をしようと思うとなかなか実装は大変になります。