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

ブロックエディターによるスタイルやレイアウトの指定がフロントエンドでは反映されないものがいくつかあります。ボタンブロックの「配置を変更」もその1つでしたが、いつの間にかフロントでも反映されるようになっていました。

ボタン以外の要素も条件付きで配置位置が反映されるようです。
詳しくは23.03.26追記の項をご覧ください。

使用したバージョン WordPress 6.1.1

ボタンブロックのレイアウトについて
ボタン以外では未だフロントに反映されないものもあり

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

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

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

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

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

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

使用しているテーマによってはボタンブロックの配置位置が問題なく反映されているかもしれませんが、これはテーマ側が上記のような方法でスタイルを補っているからです。

Twenty seventeen や Twenty twenty-one 等の配布テーマでも同様の方法で補われています。

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

結論から言うと現行のWordPressで配置したボタンブロックは配置位置がフロントにも反映されます。

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

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

書き出されるHTML（2023.03.17）

<div class="is-content-justification-center is-layout-flex wp-container-4 wp-block-buttons">
  <div class="wp-block-button">
    <a class="wp-block-button__link wp-element-button">中央揃えボタン</a>
  </div>
</div>

<div class="is-content-justification-left is-layout-flex wp-container-4 wp-block-buttons">
  <div class="wp-block-button">
    <a class="wp-block-button__link wp-element-button">左揃えボタン</a>
  </div>
</div>

<div class="is-content-justification-right is-layout-flex wp-container-4 wp-block-buttons">
  <div class="wp-block-button">
    <a class="wp-block-button__link wp-element-button">右揃えボタン</a>
  </div>
</div>

実際にブロックエディターで配置したボタンブロックのサンプル

中央揃えボタン

左揃えボタン

右揃えボタン

旧ボタンとの違い

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

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

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

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

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

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

ボタンブロックはエディターのスタイルが反映されるようになりましたが、いくつかのブロックはフロント側でスタイルが適用されません。以下はCSSを追加して補う場合の一例です。

ギャラリー

.wp-block-gallery {
  &.alignleft {
    float: left;
    margin-right: 2em;
  }
  &.alignright {
    float: right;
    margin-left: 2em;
  }
}

画像

.wp-block-image {
  &.alignleft {
    float: left;
    margin-right: 2em;
  }
  &.alignright {
    float: right;
    margin-left: 2em;
  }
  &.aligncenter {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

プルクオート

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

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

テーブル

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

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

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"
				}
			}
		}
	}
}