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

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

使用したバージョン WordPress 5.9

リンク

ブロック名とクラス名の使い道・必要な場面
カテゴリー別ブロック名

ブロック名とクラス名の使い道・必要な場面

theme.jsonでのデフォルトスタイルの指定

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

クラス名でのデフォルトスタイルの指定

一部を除き、エディター上で表示されているブロックまたはそれによって実際に書き出されたブロックにはそれぞれ異なるクラス名が付けられるので、細かくCSSを適用する場合等に役立ちます。

ブロックスタイルの追加時

ブロック毎にオリジナルのブロックスタイルを追加するカスタマイズでは、目当てのブロックをブロック名で指定する必要があります。

カテゴリー別ブロック名

テキスト

表示名	ブロック名	クラス名
段落	`core/paragraph`	なし
見出し	`core/heading`	なし
リスト	`core/list`	なし
引用	`core/quote`	`wp-block-quote`
コード	`core/code`	`wp-block-code`
詳細	`core/details`	`wp-block-details`
整形済みテキスト	`core/preformatted`	`wp-block-preformatted`
プルクオート	`core/pullquote`	`wp-block-pullquote`
テーブル	`core/table`	`wp-block-table`
詩	`core/verse`	`wp-block-verse`
脚注	`core/footnotes`	`wp-block-footnotes`

ウェブ倉庫

アップデートで「詳細・脚注ブロック」が追加されたようです。

メディア

表示名	ブロック名	クラス名
画像	`core/image`	`wp-block-image`
ギャラリー	`core/gallery`	`wp-block-gallery`
音声	`core/audio`	`wp-block-audio`
カバー	`core/cover`	`wp-block-cover`
ファイル	`core/file`	`wp-block-file`
メディアとテキスト	`core/media-text`	`wp-block-media-text`
動画	`core/video`	`wp-block-video`

デザイン

表示名	ブロック名	クラス名
ボタン ^*1	`core/button`	`wp-block-buttons` `wp-block-button`
カラム ^*2	`core/columns`	`wp-block-columns` `wp-block-column`
グループ	`core/group`	`wp-block-group`
横並び	`core/group`	`wp-block-group is-nowrap`
縦積み	`core/group`	`wp-block-group is-vertical`
続き	`core/more`	`wp-block-more`
ページ区切り ^*3	`core/nextpage`	`wp-block-nextpage`
区切り	`core/separator`	`wp-block-separator`
スペーサー	`core/spacer`	`wp-block-spacer`

※1 個別のボタンとそれらを囲む<div>要素にクラス名が付与されます。
※2 個別のカラムとそれらを囲む<div>要素にクラス名が付与されます。
※3 ページ区切りはエディター上のブロックにのみクラス名が付与されます。

ウェブ倉庫

新しく追加された「横並び・縦積みブロック」はグループブロックにスタイルを追加した派生版と考えて良さそうです。

ウィジェット

表示名	ブロック名	クラス名
アーカイブ	`core/archives`	`wp-block-archives`
カレンダー	`core/calendar`	`wp-block-calendar`
カテゴリー	`core/categories`	`wp-block-categories`
カスタムHTML ^*1	`core/html`	`wp-block-html`
最新のコメント	`core/latest-comments`	`wp-block-latest-comments`
最新の投稿	`core/latest-posts`	`wp-block-latest-posts`
固定ページリスト	`core/page-list`	`wp-block-page-list`
RSS	`core/rss`	`wp-block-rss`
検索	`core/search`	`wp-block-search`
ソーシャルアイコン	`core/social-links`	`wp-block-social-links`
タグクラウド	`core/tag-cloud`	`wp-block-tag-cloud`

※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/avatar`	`wp-block-avatar`
タイトル	`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-author`	`wp-block-post-author`
投稿者名	`core/post-author-name`	`wp-block-post-author-name`
投稿日	`core/post-date`	`wp-block-post-date`
投稿更新日	`core/post-date`	`wp-block-post-date__modified-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/read-more`	`wp-block-read-more`
コメント	`core/post-comments`	`wp-block-post-comments`
投稿コメントフォーム	`core/post-comments-form`	`wp-block-post-comments-form`
ログイン/ログアウト	`core/loginout`	`wp-block-loginout`
タームの説明	`core/term-description`	`wp-block-term-description`
アーカイブタイトル	`core/query-title`	`wp-block-query-title`
検索結果のタイトル	`core/query-title`
投稿者のプロフィール情報	`core/post-author-biography`	`wp-block-post-author-biography`

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