参考：「グループ」ブロックにheight設定を追加する方法
「グループ」ブロックにheight（高さ）の設定を追加します。
WordPress 7.1では、ブロックエディターで設定できるディメンション機能が拡張されました（表1参照）。
| バージョン | 追加された機能 |
|---|---|
| 6.2 | minHeight（最小高さ） |
| 7.0 | width、height（通常の幅・高さ）+ ディメンションプリセット（dimensionSizes） |
| 7.1 | minWidth（最小幅） |
完成イメージ
実装手順
以下の手順で実装します。
- ラベルPHPを追加
以下のコードをfunctions.phpに追加します。
// theme.json相当の設定 add_filter('wp_theme_json_data_theme', function ($theme_json) { return $theme_json->update_with([ 'version' => WP_Theme_JSON::LATEST_SCHEMA, 'settings' => [ 'dimensions' => [ 'width' => true, 'height' => true, 'minWidth' => true, ], ], ]); }); // グループブロックが width / height をサポートすると宣言 add_filter('register_block_type_args', function ($args, $block_type) { if ($block_type !== 'core/group') { return $args; } $args['supports']['dimensions']['width'] = true; $args['supports']['dimensions']['height'] = true; return $args; }, 10, 2); - ラベルCSSを追加
以下のコードをstyle.cssに追加します。
.wp-block-group { overflow: auto; scrollbar-width: thin; }
参考：スタイル追加で実現する方法
ブロックスタイルとして登録する方法もあります。
サイドバーの「スタイル」から「画像スクロール」を選んだグループだけに、スクロールが適用されます。
ただし、高さはCSSで固定されるため（このコード例では300px）、画像ごとに変えることはできません。
高さが毎回同じでよければ、設定の手間がかからない分、こちらのほうが手軽です。
完成イメージ
実装手順
以下のコードをfunctions.phpに追加します。
add_action('init', function () {
register_block_style('core/group', [
'name' => 'image-scroll',
'label' => '画像スクロール',
'inline_style' => '
.wp-block-group.is-style-image-scroll {
max-height: 300px;
overflow: auto;
scrollbar-width: thin;
}
',
]);
});さいごに
今回紹介した方法を使えば、Gutenbergエディターで自由にスクロール可能なブロックを簡単に追加できます。
これにより、記事内で長い段落やリストなどを枠内に収めつつ、スクロール操作で閲覧可能にすることができ、ページレイアウトを崩さずに情報を整理できます。
高さや枠線の太さもブロックごとに調整できるため、視覚的に見やすく、ユーザー体験を損なわずにコンテンツを提供できます。
