ブロックエディターによるボタンブロックの配置指定が自動的に反映されるようになっていた【WordPress】

ボタンブロックのレイアウトについて

以前の左右配置に関する仕様

これまでのボタンブロックにおいて左寄せ・右寄せを指定した場合、エディター上では位置が変更されるもののフロントエンド（公開ページ）では配置の指定が反映されていない状態でした。

とはいえ.alignleft、.alignrightというクラス名は付与されているので自前で次のようなCSSを用意することで対応していました。

.wp-block-button.alignleft {
  float: left;
  margin-right: 2em;
}

.wp-block-button.alignright {
  float: right;
  margin-left: 2em;
}

新規に設置したボタンブロックは反映されるようになった

結論から言うと現行のWordPressで配置したボタンブロックは配置位置がフロントにも反映されます。新規に設置した場合はHTMLの構造やクラス名が古いボタンブロックとは異なり、それに合わせたインラインCSS（global-styles-inline-css）が適用されることで位置の指定を実現するようになっています。

HTMLソースを確認するとこれまでのような.alignleftや.alignrightは使われておらず、代わりにwp-container-〇〇といったユニークなクラス名がブロック毎に付けられています。このクラス名に対して自動的にインラインCSSが出力されてスタイルが適用される仕組みになっているようです。

<div class="wp-container-62120095eed04 wp-block-buttons">
  <div class="wp-block-button">
    <a class="wp-block-button__link">中央揃えボタン</a>
  </div>
</div>

<div class="wp-container-62120095eef66 wp-block-buttons">
  <div class="wp-block-button">
    <a class="wp-block-button__link">左揃えボタン</a>
  </div>
</div>

<div class="wp-container-62120095ef169 wp-block-buttons">
  <div class="wp-block-button">
    <a class="wp-block-button__link">右揃えボタン</a>
  </div>
</div>

旧ボタンとの違い

• レイアウトを実現するCSSがインライン（global-styles-inline-css）で自動的に適用される。
• .alignleft、.alignrightのクラス名は付与されなくなった。
• justify-content: flex-end;で右揃えを実現するためfloatのような回り込みは無い。
• ツールバー項目が「配置を変更」から「項目の揃え位置を変更」となった。

過去に配置したボタンブロックは古い構造のまま

過去に配置したもののソースはそのままなので注意が必要です。
自前のCSSで対応している場合はそのルールセットを残しておくか、配置し直すことになります。

しかし新規サイト制作の際は自前で対応する必要が無くなったので頭の片隅にでも入れておくとよいかと思います。

ボタン以外では未だフロントに反映されないものもあり

エディターとフロントで差異が生じる他のブロック

プルクオート

配置の指定がフロントに反映されないため、自前のCSSで対応しています。

.wp-block-pullquote.alignleft {
  float: left;
  margin-right: 2em;
}

.wp-block-pullquote.alignright {
  float: right;
  margin-left: 2em;
}

テーブル

これも同様に配置位置が反映されないためCSSで補います。

.wp-block-table.alignleft {
  float: left;
  margin-right: 2em;
}

.wp-block-table.alignright {
  float: right;
  margin-left: 2em;
}

h1～h6等

ブラウザのスタイル（user agent stylesheet）の影響を受けるブロックはエディターとフロントの差異が生じることがあるため、CSSもしくはtheme.jsonでデフォルト値を指定しておきます。

CSSでの設定例

h1 {
  font-size: 2.6em;
  font-weight: 600;
  line-height: 1.5;
}

theme.jsonでの設定例

{
	"version": 2,
	"styles": {
		"elements": {
			"h1": {
				"typography": {
					"fontSize": "2.6em",
					"fontWeight": "600",
					"lineHeight": "1.5"
				}
			}
		}
	}
}

ブロックテーマでは対応済？　22.03.03追記

HTMLファイルを備えたブロックテーマの場合、プルクオートやテーブルの左右配置は反映されているようです。

ボタンブロックとの違い

プルクオートやテーブルブロックはボタンブロックと違い左 or 右配置を指定した場合.alignleft、.alignrightのクラス名が付与されます。
ブロックテーマではこれらのクラス名が付いたブロックの親要素に自動的に.wp-container-〇〇のクラス名が付けられ、それを含めた.wp-container-〇〇 .alignleft又は.wp-container-〇〇 .alignrightという形のセレクターで左右配置のスタイルが書き出されています。