Gutenberg ブロック名やクラス名一覧【WordPress】

ブロックエディターやtheme.jsonを利用しているとブロック名やクラス名が必要になることが多々あります。そんな場合の確認用にカテゴリー別一覧にしました。カテゴリーはブロック挿入ツールの分類に合わせています。

使用したバージョン WordPress 5.9

ブロック名とクラス名の使い道

WordPress5.8以降で使われるtheme.jsonでは任意のブロックにスタイルを適用する際にブロック名で指定します。

ブロックに独自のスタイルを追加する場合も該当するブロック名が必要になります。

編集中のブロックエディター上で表示されているブロック、またはそれによって実際に書き出されたブロックのクラス名です。

表示名	ブロック名	クラス名
ボタン	`core/button`	`wp-block-buttons` `wp-block-button`
カラム	`core/columns`	`wp-block-columns` `wp-block-column`
グループ	`core/group`	`wp-block-group`
行	`core/group`	`wp-block-group`
続き	`core/more`	`wp-block-more`
ページ区切り	`core/nextpage`	`wp-block-nextpage`
区切り	`core/separator`	`wp-block-separator`
スペーサー	`core/spacer`	`wp-block-spacer`

※ 1つ以上のボタンを囲む要素と内包するボタンそれぞれにクラス名が付与されます。
※ 1つ以上のカラムを囲む要素と内包するカラムそれぞれにクラス名が付与されます。
※ ページ区切りはエディター上のブロックにのみクラス名が付与されます。

※ カスタムHTMLはエディター上のブロックにのみクラス名が付与されます。

表示名	ブロック名	クラス名
ナビゲーション	`core/navigation`	`wp-block-navigation`
サイトロゴ	`core/site-logo`	`wp-block-site-logo`
サイトのタイトル	`core/site-title`	`wp-block-site-title`
サイトのキャッチフレーズ	`core/site-tagline`	`wp-block-site-tagline`
クエリーループ	`core/query`	`wp-block-query`
投稿一覧	`core/query`	`wp-block-query`
投稿タイトル	`core/post-title`	`wp-block-post-title`
投稿の抜粋	`core/post-excerpt`	`wp-block-post-excerpt`
投稿のアイキャッチ画像	`core/post-featured-image`	`wp-block-post-featured-image`
投稿コンテンツ	`core/post-content`	`wp-block-post-content`
投稿者	`core/post-author`	`wp-block-post-author`
投稿日	`core/post-date`	`wp-block-post-date`
投稿カテゴリー	`core/post-terms`	`wp-block-post-terms`
投稿タグ	`core/post-terms`	`wp-block-post-terms`
次の投稿	`core/post-navigation-link`	`wp-block-post-navigation-link`
前の投稿	`core/post-navigation-link`	`wp-block-post-navigation-link`
投稿コメント	`core/post-comments`	`wp-block-post-comments`
ログイン/ログアウト	`core/loginout`	`wp-block-loginout`
タームの説明	`core/term-description`	`wp-block-term-description`
アーカイブタイトル	`core/query-title`	`wp-block-query-title`

参考リンク
WordPress.org – Core Blocks Reference