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

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

使用したバージョン WordPress 5.9

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

theme.jsonでのブロック指定

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

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

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

クラス名

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

カテゴリー別ブロック名

テキスト

表示名ブロック名クラス名
段落core/paragraphなし
見出しcore/headingなし
リストcore/listなし
引用core/quotewp-block-quote
コードcore/codewp-block-code
整形済みテキストcore/preformattedwp-block-preformatted
プルクオートcore/pullquotewp-block-pullquote
テーブルcore/tablewp-block-table
core/versewp-block-verse

メディア

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

デザイン

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

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

ウィジェット

表示名ブロック名クラス名
アーカイブcore/archiveswp-block-archives
カレンダーcore/calendarwp-block-calendar
カテゴリーcore/categorieswp-block-categories
カスタムHTMLcore/htmlwp-block-html
最新のコメントcore/latest-commentswp-block-latest-comments
最新の投稿core/latest-postswp-block-latest-posts
固定ページリストcore/page-listwp-block-page-list
RSScore/rsswp-block-rss
検索core/searchwp-block-search
ソーシャルアイコンcore/social-linkswp-block-social-links
タグクラウドcore/tag-cloudwp-block-tag-cloud

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

テーマ

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

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

タイトルとURLをコピーしました