WordPressのブロック一覧です。『デザイン』に入っているものです。WordPressバージョンは 6.8.2 です。
ボタン
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
<!-- /wp:button -->
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
ボタンは複数並べられます。上の例では2つ並べています。
カラム
<!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>a</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>b</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
カラムブロックです。個々のカラムには別のブロックが入れられます。上の例では段落ブロックを入れています。
グループ
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>a</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
グループブロックです。別のブロックが入れられます。上の例では段落ブロックを入れています。
横並び、縦積み、グリッドは、グループブロックの仲間です。
横並び
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>a</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>b</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
横並びブロックです。別のブロックが入れられます。上の例では段落ブロックを入れています。
縦積み
<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>a</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>b</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
縦積みブロックです。別のブロックが入れられます。上の例では段落ブロックを入れています。
グリッド
<!-- wp:group {"layout":{"type":"grid"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>a</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>b</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>c</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
グリッドブロックです。別のブロックが入れられます。上の例では段落ブロックを入れています。
続き
<!– wp:more –>
<!–more–>
<!– /wp:more –>
続きブロックです。アーカイブ(一覧)ページでは、このブロックより前の部分が表示されます。
ページ区切り
<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->
ページ区切りブロックです。このブロックがあると、投稿をページ分割します。
区切り
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
区切りブロックです。水平方向に線が表示され、視覚的に区分されます。
スペーサー
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
スペーサーブロックです。余白を入れたいときに使います。
更新日:
