WordPressブロックエディターのスタイル検証用コード

<!-- wp:heading -->
<h2>見出し2</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">文字サイズ小</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>文字サイズデフォルト</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">文字サイズ中</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">文字サイズ大</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"huge"} -->
<p class="has-huge-font-size">文字サイズ特大</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>太字テキスト</strong><br><em>イタリックテキスト</em><br><a href="https://google.com" target="_blank" rel="noreferrer noopener">リンクテキスト</a></p>
<!-- /wp:paragraph -->

<p class="has-text-align-center">センタリング</p>
<p class="has-text-align-right">右寄せ</p>

<!-- wp:heading {"level":3} -->
<h3>見出し3</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>見出し4</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":5} -->
<h5>見出し5</h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":6} -->
<h6>見出し6</h6>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>リスト</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>リストリストリストリストリストリスト</li><li>リストリストリストリストリストリスト<ul><li>リストリストリストリストリストリスト</li></ul></li><li>リストリストリストリストリストリスト</li></ul>
<!-- /wp:list -->

<!-- wp:list {"ordered":true} -->
<ol><li>リストリストリストリストリストリスト</li><li>リストリストリストリストリストリスト<ol><li>リストリストリストリストリストリスト</li></ol></li><li>リストリストリストリストリストリスト</li></ol>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>コード</h3>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>//開閉機能
( function() {
  $( function() {
    $( '.js-toggle-state' ).on( 'click' , toggleClassOpen );

    function toggleClassOpen() {
      $( '.js-toggle-state' ).toggleClass( 'is-open' );
    }
  } );
} ) ( jQuery );</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>整形済みテキスト</h3>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">スペースやタブを含むテキストを追加し、スタイリングして表示します。</pre>
<!-- /wp:preformatted -->

<!-- wp:heading {"level":3} -->
<h3>プルクオート</h3>
<!-- /wp:heading -->

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>テキストの引用に特別な視覚的強調を加えます。</p><cite>プルクオート引用元</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:heading {"level":3} -->
<h3>テーブル</h3>
<!-- /wp:heading -->

<!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th>ヘッダー</th><th><strong>ヘッダー</strong></th><th><strong>ヘッダー</strong></th></tr></thead><tbody><tr><td>項目</td><td>項目</td><td>項目</td></tr><tr><td>項目</td><td>項目</td><td>項目</td></tr><tr><td>項目</td><td>項目</td><td>項目</td></tr></tbody><tfoot><tr><td>フッターラベル</td><td>フッターラベル</td><td>フッターラベル</td></tr></tfoot></table><figcaption>キャプション</figcaption></figure>
<!-- /wp:table -->

<!-- wp:heading {"level":3} -->
<h3>詩</h3>
<!-- /wp:heading -->

<!-- wp:verse -->
<pre class="wp-block-verse">詩を挿入します。特別な余白形式を使ったり、歌詞を引用したりできます。</pre>
<!-- /wp:verse -->

<!-- wp:heading -->
<h2>メディア</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>画像</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":827,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://placehold.jp/700x300.png" alt="" class="wp-image-827"/><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4>中央寄せ</h4>
<!-- /wp:heading -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://placehold.jp/700x300.png" alt=""/><figcaption>キャプション</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>ギャラリー</h3>
<!-- /wp:heading -->

<!-- wp:gallery {"ids":[768,767],"linkTo":"none"} -->
<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://placehold.jp/700x300.png" alt="Huatulco Coastline" data-id="768" data-full-url="https://placehold.jp/700x300.png" data-link="https://placehold.jp/700x300.png" class="wp-image-768"/><figcaption class="blocks-gallery-item__caption">Sunrise over the coast in Huatulco, Oaxaca, Mexico</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://placehold.jp/700x300.png" alt="Windmill" data-id="767" data-full-url="https://placehold.jp/700x300.png" data-link="https://placehold.jp/700x300.png" class="wp-image-767"/><figcaption class="blocks-gallery-item__caption">Windmill shrouded in fog at a farm outside of Walker, Iowa</figcaption></figure></li></ul><figcaption class="blocks-gallery-caption">ギャラリーのキャプション</figcaption></figure>
<!-- /wp:gallery -->

<!-- wp:heading {"level":3} -->
<h3>カバー</h3>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://placehold.jp/700x300.png","id":87,"contentPosition":"center center"} -->
<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background wp-image-87" alt="" src="https://placehold.jp/700x300.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">テキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading {"level":3} -->
<h3>ファイル</h3>
<!-- /wp:heading -->

<!-- wp:file {"id":2293,"href":"#"} -->
<div class="wp-block-file"><a href="#">b36ef582119168792b6d509c00151e9f</a><a href="#" class="wp-block-file__button" download>ダウンロード</a></div>
<!-- /wp:file -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文</p><cite>引用元</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:heading {"level":3} -->
<h3>メディアとテキスト</h3>
<!-- /wp:heading -->

<!-- wp:media-text {"mediaId":136,"mediaLink":"#","mediaType":"image"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://placehold.jp/700x300.png" alt="" class="wp-image-136 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"コンテンツ…","fontSize":"large"} -->
<p class="has-large-font-size">画像と文章を横並びのリッチなレイアウトにします。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:heading -->
<h2>デザイン</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>ボタン</h3>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0} -->
<div class="wp-block-button"><a class="wp-block-button__link no-border-radius">ボタン要素</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">ボタン要素</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"vivid-red","textColor":"white","width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-white-color has-vivid-red-background-color has-text-color has-background">全幅ボタン</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:heading {"level":3} -->
<h3>カラム</h3>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト2カラムテスト</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:heading {"level":3} -->
<h3>区切り</h3>
<!-- /wp:heading -->

<!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>ウィジェット</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>カテゴリー</h3>
<!-- /wp:heading -->

<!-- wp:categories /-->

<!-- wp:heading {"level":3} -->
<h3>アーカイブ</h3>
<!-- /wp:heading -->

<!-- wp:archives /-->

<!-- wp:heading {"level":3} -->
<h3>カレンダー</h3>
<!-- /wp:heading -->

<!-- wp:calendar /-->

<!-- wp:heading {"level":3} -->
<h3>最新の記事</h3>
<!-- /wp:heading -->

<!-- wp:latest-posts /-->

<!-- wp:heading {"level":3} -->
<h3>検索</h3>
<!-- /wp:heading -->

<!-- wp:search /-->

<!-- wp:heading {"level":3} -->
<h3>タグクラウド</h3>
<!-- /wp:heading -->

<!-- wp:tag-cloud /-->

<!-- wp:paragraph -->
<p>これより下は改ページ設定を指定しています。</p>
<!-- /wp:paragraph -->

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

<!-- wp:paragraph -->
<p>改ページ設定で、2ページ目に現れるテキストです。</p>
<!-- /wp:paragraph -->