BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. WordPressの新しいエディター「Gutenberg」の基本的なカスタマイズ
by ウラカワ ウラカワ

WordPressの新しいエディター「Gutenberg」の基本的なカスタマイズ

WordPressの新しいエディター「Gutenberg」の基本的なカスタマイズ

こんにちは、ウラカワです。

今回はWordPressの新しいエディターGutenbergについてです。

挙動が怪しかったり調整不足だったりして、お世辞にも使いやすいとは言えないですが、じわじわと改善されています。

まだリリースされていないので仕様変更は十分ありうると思いますが、執筆時点での基本的なカスタマイズ方法をまとめてみました。

目次

そもそもGutenbergを使いたくない場合

そもそも使いたくないという場合は以下でクラシックエディターに戻ります。

ただ、スタイルの読み込みがそのままだったりと完全に取り除くわけではありません。専用のオプションが欲しいですね。

テーマで使う機能の設定

今のところテーマでの設定は3つです。

  • ワイドブロックの有無
  • カラーの自由選択の有無
  • パレットの設定

ワイドブロックは基本的にワンカラム用かと思います。

カスタム投稿タイプで使う方法

カスタム投稿タイプの登録時に以下2つを満たせばOKです。

  1. supportsでeditorを指定
  2. show_in_restでtrueを指定

supportsで明確に指定出来るようになると良いですね。

ブロックを制御する方法

デフォルト状態だと使うことの無さそうなブロックが大量にあります。

ブロックが多いと探すのも大変なので不要なものは消しておいた方が親切ですね。

jsの中身は以下のようになります。
コメントアウトしてないものが許可されたブロックです。

スタイルを設定する方法

GutenbergにCSSを読み込むには以下のように設定します。

さて、エディター用のスタイルですが当てるべき箇所は3つになります。
(クラシックエディターがGutenbergブロック内にもあるので要注意。)

  1. gutenberg
  2. クラシックエディター
  3. フロントのコンテンツ

クラシックエディターの方は今まで通りですが、Gutenbergには各ブロックにクラスが付いているので、それを利用してスタイルを当てていきます。

  1. .editor-block-list__block[data-type=”●●●”]
  2. .editor-block-list__block-edit
  3. .wp-block-●●●

このあたりを利用していくのが良いと思いますがそれぞれ位置が違います。
上から順に深い位置にあります。

(1)、(2) を使うことで今までのクラシックエディターと似たような形で調整出来ますが、予期してないところに反映する場合もあるので注意してください。

また、編集画面では各要素に .mce-content-body というクラスが付いているので、編集画面だけスタイルを微調整する場合はこれを利用します。

ざっくりとですがこんな形になるかと思います。

line-heightが別途指定してあって調整が地味に面倒なのと、ワイドブロックの扱いに困ります・・・

実際にプラグインをインストールして頂くと分かると思いますが、スタイルがデフォルトであったり無かったりで困惑する部分が多々あります。

結構複雑な構造になっているものもあるので、完璧に調整するには時間が必要です。

また、基本的にUIが白に合わせてあるので、黒背景で調整するのは大変かもしれません。ナイトモードはよ。

最後に

今回まとめたのは本当に基本的なものばかりです。

リリース後はオリジナルのブロックを追加する必要性も出てくると思います。

自由自在に使いこなすには中々ハードルが高いですが、慣れ親しんだエディターも残りますし、カスタムフィールドも使えます。

リリースを楽しみに待ちましょう!

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る