「段落」ブロックを縦書きにする方法

はじめに

WordPress 6.4から「段落」ブロックに縦書き設定（writingMode）が追加されました。
しかし、writingModeは通常非公開で提供されている実験的機能のため、標準の編集画面では表示されません。

そこで、これを有効化し、「タイポグラフィ」設定パネルに表示させます。

この記事では、この方法について説明します

完成イメージ

実装手順

PHPとtheme.jsonを用いる2つの方法があります。

PHPで実装す場合

以下のコードをfunctions.phpに追加します。

add_filter('block_editor_settings_all', function ($editor_settings, $block_editor_context) {
  if (empty($editor_settings['__experimentalFeatures']['typography'])) {
    $editor_settings['__experimentalFeatures']['typography'] = [];
  }
  
  $editor_settings['__experimentalFeatures']['typography']['writingMode'] = true;

  return $editor_settings;
}, 10, 2);

theme.jsonで実装する場合

以下のteme.jsonファイルを子テーマのフォルダ内に配置します。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "writingMode": true
    }
  }
}

注意点

試験運用のため、WordPress 標準の CSS では、テキストの配置を変更した際に期待どおりの表示になりません。
そのため、以下のCSSを追加する必要があります。

p[style*="writing-mode"][style*="vertical"] {
  align-items: flex-end;
  display: flex;
  width: 100%;
}

p.has-text-align-center[style*="writing-mode"][style*="vertical"] {
  align-items: center;
}

p.has-text-align-right[style*="writing-mode"][style*="vertical"] {
  align-items: flex-start !important;
  rotate: unset !important;
}

さいごに

今回紹介した方法を使えば、「段落」ブロックに簡単に縦書き設定を追加でき、編集画面から直接縦書き縦書きの切り替えが可能になります。
writingModeが実験的機能であることを理解した上で利用すると安心です。