More than 5 years have passed since last update.

【WordPress】Gutenbergブロック毎のクラス名まとめ

WordPress

Last updated at 2019-10-10Posted at 2019-10-10

#前書き
各ブロックのクラス名をまとめてる記事があまりなかったので、使いそうなものを全て書き出してみました

##一般ブロック
###段落


<p>段落</p>

###見出し


<h2>h2見出し</h2>

<h3>h3見出し</h3>

<h4>h4見出し</h4>

###引用


<blockquote class="wp-block-quote">
   <p>最も重要な決定とは、何をするかではなく、何をしないかを決めることだ。</p>
   <cite>スティーブ・ジョブズ</cite>
</blockquote>

###画像


<figure class="wp-block-image">
   <img src="" alt="" class="wp-image-1" srcset="">
   <figcaption>キャプション</figcaption>
</figure>

###ギャラリー


<ul class="wp-block-gallery columns-3 is-cropped alignleft">
   <li class="blocks-gallery-item">
      <figure>
         <img src="" alt="" data-id="1" data-link="" class="wp-image-" srcset="" sizes="" />
         <figcaption>キャプション</figcaption>
      </figure>
   </li>
   <li class="blocks-gallery-item">
      <figure>
         <img src="" alt="" data-id="2" data-link="" class="wp-image-" srcset="" sizes="" /> 
         <figcaption>キャプション</figcaption>
      </figure>
   </li>
</ul>

###リスト


<ul>
   <li>リスト</li>
   <li>リスト</li>
</ul>

<ol>
   <li>リスト</li>
   <li>リスト</li>
</ol>

###オーバーレイ


<div class="wp-block-cover has-background-dim has-undefined-content" style="background-image:url()">
   <p class="wp-block-cover-text">タイトル</p>
</div>

###ファイル


<div class="wp-block-file">
   <a href="">リンク</a>
   <a href="" class="wp-block-file__button" download>ダウンロードボタン</a>
</div>

###動画


<figure class="wp-block-video">
   <video controls src=""></video>
   <figcaption>キャプション</figcaption>
</figure>

##フォーマット

###プルクオート


<figure class="wp-block-pullquote">
   <blockquote>
      <p>最も重要な決定とは、何をするかではなく、何をしないかを決めることだ。</p>
      <cite>スティーブ・ジョブズ</cite>
   </blockquote>
</figure>

###ソースコード


<pre class="wp-block-code">
   <code></code>
</pre>

###整形済み

<pre class="wp-block-preformatted">
   <code></code>
</pre>

###テーブル


<table class="wp-block-table">
   <tbody>
      <tr>
         <td>テーブル</td>
         <td>テーブル</td>
      </tr>
      <tr>
         <td>テーブル</td>
         <td>テーブル</td>
      </tr>
   </tbody>
</table>

###詩


<pre class="wp-block-verse"></pre>

##レイアウト要素

###ボタン


<div class="wp-block-button">
   <a class="wp-block-button__link" href="">ボタンテキスト</a>
</div>

###カラム


<div class="wp-block-columns has-2-columns">
   <div class="wp-block-column">
      <p>カラム</p>
   </div>

   <div class="wp-block-column">
      <p>カラム</p>
   </div>
</div>

###メディアと文章


<div class="wp-block-media-text">
   <figure class="wp-block-media-text__media">
      <img src="" alt="" class="wp-image-1" srcset="" sizes="">
   </figure>
   <div class="wp-block-media-text__content">
      <p class="has-large-font-size">メディアと文章</p>
   </div>
</div>

##ウィジェット

###カレンダー


<div class="wp-block-calendar"><table id="wp-calendar">
	<caption>2019年10月</caption>
	<thead>
	<tr>
		<th scope="col" title="月曜日">月</th>
		<th scope="col" title="火曜日">火</th>
		<th scope="col" title="水曜日">水</th>
		<th scope="col" title="木曜日">木</th>
		<th scope="col" title="金曜日">金</th>
		<th scope="col" title="土曜日">土</th>
		<th scope="col" title="日曜日">日</th>
	</tr>
	</thead>

	<tfoot>
	<tr>
		<td colspan="3" id="prev" class="pad">&nbsp;</td>
		<td class="pad">&nbsp;</td>
		<td colspan="3" id="next" class="pad">&nbsp;</td>
	</tr>
	</tfoot>

	<tbody>
	<tr>
		<td colspan="1" class="pad">&nbsp;</td><td>1</td><td><a href="http://sample/2019/10/02/" aria-label="2019年10月2日 に投稿を公開">2</a></td><td>3</td><td>4</td><td>5</td><td>6</td>
	</tr>
	<tr>
		<td>7</td><td>8</td><td id="today">9</td><td>10</td><td>11</td><td>12</td><td>13</td>
	</tr>
	<tr>
		<td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
	</tr>
	<tr>
		<td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td>
	</tr>
	<tr>
		<td>28</td><td>29</td><td>30</td><td>31</td>
		<td class="pad" colspan="3">&nbsp;</td>
	</tr>
	</tbody>
	</table></div>

###アーカイブ


<ul class="wp-block-archives wp-block-archives-list">
   <li><a href=""></a></li>
</ul>

###カテゴリー


<ul class="wp-block-categories wp-block-categories-list">
   <li class="cat-item cat-item-1"><a href="">カテゴリー</a></li>
</ul>

###コメント


<ol class="wp-block-latest-comments has-avatars has-dates has-excerpts">
   <li class="wp-block-latest-comments__comment"><img alt="" src="" srcset="" class="avatar avatar-48 photo wp-block-latest-comments__comment-avatar" height="48" width="48">
      <article>
         <footer class="wp-block-latest-comments__comment-meta">
            <a class="wp-block-latest-comments__comment-link" href="">Hello world!</a> に <a class="wp-block-latest-comments__comment-author" href="https://wordpress.org/">A WordPress Commenter</a> より
            <time datetime="2019-10-02T09:25:28+00:00" class="wp-block-latest-comments__comment-date">10月 2, 2019</time>
         </footer>
         <div class="wp-block-latest-comments__comment-excerpt">
            <p>Hi, this is a comment. To get started with moderating, editing, and deleting comments, please visit the Comments screen in…</p>
         </div>
      </article>
   </li>
</ol>

###最新の記事


<ul class="wp-block-latest-posts">
   <li><a href="">記事4</a></li>
   <li><a href="">記事3</a></li>
   <li><a href="">記事2</a></li>
   <li><a href="">記事1</a></li>
</ul>

###検索


<form class="wp-block-search" role="search" method="get" action="">
   <label for="wp-block-search__input-1" class="wp-block-search__label">検索</label>
   <input type="search" id="wp-block-search__input-1" class="wp-block-search__input" name="s" value="" placeholder="">
   <button type="submit" class="wp-block-search__button">検索</button>
</form>

###タグクラウド


<p class="wp-block-tag-cloud">
   <a href="http://sample/tag/saltwater-fish/" class="tag-cloud-link tag-link-4 tag-link-position-1" style="font-size: 8pt;" aria-label="海水魚 (1個の項目)">海水魚</a>
   <a href="http://sample/tag/freshwater-fish/" class="tag-cloud-link tag-link-2 tag-link-position-2" style="font-size: 8pt;" aria-label="淡水魚 (1個の項目)">淡水魚</a>
</p>

##埋め込み

###YouTube


<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
   <div class="wp-block-embed__wrapper">
      <iframe title="タイトル" width="500" height="281" src="https://www.youtube.com/embed/?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
   </div>
</figure>

#後書き
今更ですがブロックめちゃくちゃ多いです。
カスタマイズする際にどれだけ非表示にするか悩みますね。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up