chiilog

GutenbergでWordPressサイトを制作するときに気をつけたほうがいいなと思ったポイント

—

by

chiaki
in

ただいま絶賛Gutenbergでサイト制作をしているのですが、これから先WordPressでサイトを作るのならこれは注意したほうがよさそうだなぁと思ったポイントを考えてみました。

サイトのパーツのコンポーネント化をしっかりする

Gutenbergはブロックエディターです。
カラムやテーブルなど、様々なブロックがデフォルトで用意されているので、サイト自体をGutenbergに最適化したほうがコーディングがﾁｮｯﾄﾀﾞｹ楽になりそうだなと実感しています。

WordPressを使用するということはクライアント側で更新をするということなので、エレメントに対してデフォルトのデザインを当てて、パーツにクラスを当てて不要なCSSをリセットする。
今回アドバイスをもらってこんな感じの作り方をしましたが、WordPressに限らずCMS使ったサイトだとこちらの方がよさそうです。

つまり何がいいたいかと言うと、「ページごとに全く共通化されていないデザインを実装するのは向かなそう」ということです。

カスタムHTMLを書けるブロックはありますが…CMSを入れるということは、HTMLの知識がなくても更新できるようにするのが正しい姿ではないかなあと思っているので、「これやりたかったらカスタムHTMLでこのHTMLをペーストして文字だけ変えてくださいね！」は全然やさしくないのではないでしょうか。
（コンポーネントを作る量も増えるし） というか、エディター画面でHTMLを見たくない派の人なので、GUIバンザイです。

何でもかんでもカスタムブロックにしない

「Gutenbergはカスタムブロックでブロックつくれるんでしょ？これカスタムブロック、これもカスタムブロック！」ってすると、ブロックが増えすぎて結果煩雑になったり、そもそもReactが必要ですが…大丈夫ですか？私はよくわかりません。

ただ、デフォルトだけだとデザイン反映も何もできないじゃないかというのはご尤もです。そんなときは、CSSのスタイルだけを追加しましょう！

例えば、ulのスタイルをちょっと変えたいとかtableのデザインを複数パターン用意したいというときは、わざわざカスタムブロックを用意しなくても、クラスを追加して割り当てることが可能です。

私が用意するのはちょっとハードルが高くて用意してもらったコードですが、こんな感じのコードだけでクラス追加ができます。

import { addFilter } from '@wordpress/hooks';

addFilter(
   'blocks.registerBlockType',
   ‘mytheme/featured-table-style',
   ( settings, name ) => {
      if ( name !== 'core/table' ) {
         return settings;
      }

      return {
         ...settings,
         styles: [
            { name: 'regular', label: 'Default', isDefault: true },
            { name: 'horizontal', label: 'Horizontal' },
         ],
      };
   }
);

※ESnextのコードなのでコンパイル必要です。私はこのあたりよくわかってないので記事書くのもアドバイスもらってます。

stylesの中に追加したいスタイルを足します。

これを足すことによって、使うブロックの親要素に `is-style-regular` とか `is-style-horizontal` といったスタイルが追加されます。 ルールは基本的に `is-style-○○` と覚えておくといいと思います。

Gutenbergは敵ではないよ！

よく書きにくいとかクラシックエディターを入れましょう！という記事を見かけますが、何記事か書くとむしろクラシックエディターの方が書きづらく感じます。

自由なレイアウトも組みやすく、LP的な使い方もしやすそうです。

ではここで一句。

いつまでも　あるとおもうな　クラシックエディター

ということで、早めにGutenbergに慣れるのがよいのではないかなあと思います。カスタムフィールドが大量にあってすぐ移行できない！というのではない限り…。