『デザイン』ブロック一覧

WordPressのブロック一覧です。『デザイン』に入っているものです。WordPressバージョンは 6.9 です。

6.9からあるもの

アコーディオン

<!-- wp:accordion -->
<div role="group" class="wp-block-accordion"><!-- wp:accordion-item -->
    <div class="wp-block-accordion-item"><!-- wp:accordion-heading -->
        <h3 class="wp-block-accordion-heading"><button class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title"></span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
        <!-- /wp:accordion-heading -->

        <!-- wp:accordion-panel -->
        <div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
            <p></p>
            <!-- /wp:paragraph --></div>
        <!-- /wp:accordion-panel --></div>
    <!-- /wp:accordion-item --></div>
<!-- /wp:accordion -->

全体がアコーディオン(accordion)となり、その中にアコーディオン項目(accordion-item)が入ります。アコーディオン項目は複数入れられます。アコーディオン項目の中には、アコーディオン見出し(accordion-heading)とアコーディオンパネル(accordion-panel)が入ります。アコーディオンパネル(accordion-panel)の中には、段落などの他のブロックが入ります。

6.8以前からあるもの

ボタン

<!-- 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 -->

スペーサーブロックです。余白を入れたいときに使います。

更新日: 2025年12月24日