レイアウトブロックを追加してGutenbergをページビルダーにカスタマイズする方法
WordPressのコンテンツページを追加する際の投稿用エディターとして使われているGutenbergですが、いくつかブロックを追加している内に、これでページ全体を作成できちゃうことに気づいてしまいます。
それはもうページビルダーのプラグイン著者泣かせな程で、レイアウト系とフォーマット系のブロックを追加していくだけで、エディターとしてだけでなく、Gutenbergをより使い勝手の良いページビルダーにカスタマイズできます。
レイアウト系というとカラムブロックが思い浮かびますが、実際にはタブだったり、セクションだったりと、あると使ってみたくなる様々なレイアウトが思い付くでしょう。
あると便利なブロックの種類ですが、標準的にカラムを追加したり、画像と横並びにしたりするレイアウトが用意されていますので、それだけでもCSSをちょろっと書いてしまうだけで見栄えも随分変わり、綺麗な仕上がりにはなるでしょうが、これらだけでは少し物足りない気もするでしょう。
かといって凝ったものだと、設定するのが面倒になってしまいますし、ましてやユーザーに設定を任せるエディターでのブロックを追加するとなると、そのブロックの作業コストが大きくなります。まぁ結構簡単に作れるものが多いと思いますが。
Gutenbergにブロックを追加する方法は以前紹介しましたので、追加方法をご存知でない方はサッと読んでおいた方が読みやすいかもしれません。
関連記事：ワードプレスのエディター「Gutenberg」にカスタムブロックを追加する方法
レイアウト系カスタムブロックの作成には「InnerBlocks」
ワードプレスが用意しているGutenbergのコンポーネントに「InnerBlocks」と言うものがあります。
これが非常に便利で、簡単に言うとテンプレートのセットあるいはブロックの集合体となるコンポーネントです。
特別なプロパティやメソッドなどを与えることもなくても、Gutenbergでブロックを追加した際のひとまとまりとなるテンプレートとなります。
編集側では、
<InnerBlocks />フロントエンド用に保存するメソッド「save」では
<InnerBlocks.Content />と書き込むだけの超簡単設定で、そこに放り込んだブロック集合体の設定を丸ごと保存してくれます。
カスタマイズもできますが、これだけでブロックの集合をセットできるので、これを入れておいてラッパーでデザインするとレイアウトの作成に役立ちますよ。
wp.editorにありますので、
const { InnerBlocks } = wp.editor;と書いておけば使えるようになります。
タブレイアウト
まずは最近僕も追加した切り替えができるタブのようなブロックです。
横幅が狭い場合などはタブを隠し、縦長に全部表示してしまうようにしていますが、こういったタブの表示スタイルはラッパーに与えるクラスを編集できるようにしておくだけで、ブロック１つで結構なバリエーションのデザインができてしまいます。
タブ内コンテンツもブロックで管理
タブレイアウトを作っておけば、タブ内であっても縦長なページだけでなく、このように自由にブロックの塊を作成してコンテンツを作成することができます。
前の項目で紹介した「InnerBlocks」をタブブロックのラッパーコンポーネントで囲ってやればOKです。
既にカラムブロックが標準で備わっていますので、それを参考にタブを追加し、属性値やクラス名などを与えるだけで結構簡単に作成できます。
フロントエンドでは
ブロックを追加できているのであれば、JavaScriptをある程度書くことが出来る筈ですので、フロントエンドでタブの切り替えやCSSの編集で躓くことはないでしょう。
しかもこれらのブロックは再利用可能ブロックとしてHTMLを保存できますし、使用するCSS・JSを変えたり、ブロック編集時にクラスを与えるだけで、ブロックを追加しているプラグインを無効化しても問題なく機能しますので、簡単にスタイルのバリエーションも豊富に仕上げられます。
使い回しができるように指定のコーディング標準に合わせて書いておくと、CSSやJSを引き継いで別テーマやプラグインでも使い回しがしやすいです。
ちょっと投稿ページでは使いにくいのですが、固定ページだとタブの使い所も有るかもしれません。
アクティブなタブ以外は非表示にしている状態なので、スルーされてしまう場合を危惧してしまいます。
モバイル端末など横幅によってはタブボタンが表示され内容にして、そのままタブ無しのコンテンツが順番に並んでいる状態になっています。
セクションレイアウト
結構漠然とした表現ですが、部分的にラッパーとしてセクションを与えることで、その範囲にデザインなどを加えることが出来るようにするもののことです。
例えば、このページはテーマ「Ace」で敢えて１カラムのレイアウトに設定しているのですが、セクションブロックを追加することでこのように部分的に最大幅でのコンテンツを作成することも可能にしています。
１カラムページのみ作用するようにCSSを用意します。
.custom-section {
margin: topBottomMargin calc( 50% - 50vw + marginBetweenSectionAndWindow );
}こんな感じで「topBottomMargin」は上下のマージン、「marginBetweenSectionAndWindow」はウィンドウとのマージンを指定することができます。
インナーはこのセクションに合わせた最大幅に合わせる場合はそのままにし、コンテンツ幅に合わせる場合は、CSSで別個にコンテンツの横幅と同じ値に設定しておけば良いです。
最大幅のセクションにして背景を与えると、項目の変化などを視覚的に訴えることができます。
まぁ使う使わないは別として、有るのと無いのとでは、有る方が良いでしょう？
Gutenbergでは静的にHTMLを保存しているので、ウィジェットやショートコードのようにフロントエンドで関数を読む必要が無く、スタイルやスクリプトの補完さえできれば、ブロックを追加するテーマやプラグインを無効化しても問題なく機能するのが便利です。
ページビルダーにするには
Gutenbergをページビルダー用にするためのテンプレートファイルを用意しても良いと思います。
方法としては、ワードプレスでは関数「the_content()」によりエディターで編集したコンテンツが出力されますので、この関数に出力させる範囲を定めてやるだけです。
ヘッダーやフッター、主要なマークアップタグもブロックで用意してしまえば、本格的に丸々１ページ分のページビルダーを作ることもできてしまいますよね。
ええ、だからページビルダー著者泣かせだと言う話で、ワードプレスではプラグインなどのよるオリジナルのページビルダーの需要が一気に減っていく予感を勝手に感じています。
まだ旧エディターから脱していないのであれば、カスタマイズはGutenbergブロックの追加から着手してみると良いかもしれません。
僕も試行錯誤しながらやっております。。。
