WordPressブロックエディタの設定

WordPressでのエディタ（Gutenbergエディタ）でCSSを適用するにはeditor-style.cssを書くらしい。調べると山ほど情報が出てくるのだけど、皆さん言いたい放題でよくわからない。
ただ単にエディタで写真を右寄せしたら、実際の記事ページでも右寄せになって欲しいだけなのに、なんでそうなる為の機能がないのか。

そこで、適当に書いてみた。
つまり、嘘が混じっているので適当に呼んでください。
その場しのぎのことをしています。

何をしているか

editor-style.cssを書いてテキストエディタ（Gutenbergエディタ）と実際の記事ページの両方に同じcssを与えることをしています。

editor-style.cssファイルを有効にする

function.phpに次のコードを加える。editor-style.cssファイルのスタイルシートをエディタと実際の記事ページの両方に与えるようにしています。

function wpdocs_theme_add_editor_styles() {
  add_theme_support('editor-styles');
  add_editor_style('editor-style.css');
}

add_action('after_setup_theme', 'wpdocs_theme_add_editor_styles');

function wpdocs_enqueue_styles() {
  wp_enqueue_style('editor-style', get_template_directory_uri() . '/editor-style.css');
}

add_action('wp_enqueue_scripts', 'wpdocs_enqueue_styles');

editor-style.cssファイルを作る

WordPressのテーマファイルの第一階層にeditor-style.cssファイルを作り、次のスタイルシートを書きます。

@charset "utf-8";

/* タイトル、段落などの基本スタイル */
.wp-block-title h1,
.wp-block-title h2,
.wp-block-title h3,
.wp-block-title h4,
.wp-block-title h5,
.wp-block-title h6 {
  margin: 1.5em 0;
}

.wp-block-title {
  scroll-behavior: smooth;
  font-feature-settings: "palt";
  font-family: 'Noto Sans JP', sans-serif;
}

/* テキストブロックのスタイリング */
.wp-block-paragraph {
  font-size: 1rem;
  line-height: 1.6;
  text-indent: 1rem;
}

/* 画像の中央寄せ・左寄せ・右寄せ */
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

figure.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  /* キャプションなどテキスト要素を中央寄せするために追加することができます */
}

figure.alignleft {
  float: left;
  margin: 1rem 2rem 2rem 0;
}

figure.alignright {
  float: right;
  margin: 1rem 0 2rem 2rem;
}

/* クォート */
.wp-block-quote {
  border-left: 2px solid #ddd;
  padding-left: 10px;
  font-style: italic;
}

.wp-block-quote cite {
  display: block;
  text-align: right;
  font-size: smaller;
}

/* コード */
.wp-block-code {
  background-color: #f0f0f0;
  padding: 10px;
  overflow: auto;
}

/* リスト */
.wp-block-list {
  margin: 1rem 0;
  padding-left: 20px;
}

.wp-block-list ul {
  list-style-type: disc;
  margin-left: 20px;
}

.wp-block-list ol {
  list-style-type: decimal;
  margin-left: 20px;
}

.wp-block-list li {
  margin: 0.5rem 0;
}

/* カラムブロックのスタイリング */
.wp-block-embed {
  max-width: 100%;
}

これでスタイルシートが適用されます。

WordPressはマニュアルも設計も酷くてちゃんと覚える気にもなりません。
そうして適当な情報が増えて、またWordPressは酷くなっていくのです。