Learning site for website creation

WordPress:「メディア」カテゴリブロック確認

公開日:2020年10月05日

WordPressのビジュアルエディタ「Gutenberg(グーテンベルク)」の「メディア」カテゴリのブロック紹介


画像ブロック

右サイドバー「ブロック」で設定できる項目

画像キャプション

出力結果

<figure class="wp-block-image size-large">
  <img loading="lazy" width="640" height="426" src="https://jobtech.jp/wp-content/uploads/friends-3042751_640-1.jpg" alt="" class="wp-image-4055" srcset="https://jobtech.jp/wp-content/uploads/friends-3042751_640-1.jpg 640w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-1-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-1-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-1-50x33.jpg 50w" sizes="(max-width: 640px) 100vw, 640px">
  <figcaption>画像キャプション</figcaption>
</figure>
左寄せ

段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章

出力結果

<div class="wp-block-image">
  <figure class="alignleft size-large is-resized">
    <img loading="lazy" src="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg" alt="" class="wp-image-4054" width="320" height="213" srcset="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg 640w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-50x33.jpg 50w" sizes="(max-width: 320px) 100vw, 320px">
    <figcaption>左寄せ</figcaption>
  </figure>
</div>
<p>段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章</p>
中央揃え

段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章

出力結果

<div class="wp-block-image">
  <figure class="aligncenter size-large is-resized">
    <img loading="lazy" src="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg" alt="" class="wp-image-4054" width="320" height="213" srcset="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg 640w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-50x33.jpg 50w" sizes="(max-width: 320px) 100vw, 320px">
    <figcaption>中央揃え</figcaption>
  </figure>
</div>
<p>段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章</p>
右寄せ

段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章

出力結果

<div class="wp-block-image">
  <figure class="alignright size-large is-resized">
    <img loading="lazy" src="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg" alt="" class="wp-image-4054" width="320" height="213" srcset="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg 640w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-50x33.jpg 50w" sizes="(max-width: 320px) 100vw, 320px">
    <figcaption>右寄せ</figcaption>
  </figure>
</div>
<p>段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章</p>

ギャラリーブロック

右サイドバー「ブロック」で設定できる項目

出力結果

<figure class="wp-block-gallery columns-3 is-cropped">
  <ul class="blocks-gallery-grid">
    <li class="blocks-gallery-item">
      <figure>
        <img loading="lazy" width="600" height="383" src="https://jobtech.jp/wp-content/uploads/swimmer-1678307_640-600x383-1.jpg" alt="" data-id="4091" data-full-url="https://jobtech.jp/wp-content/uploads/swimmer-1678307_640-600x383-1.jpg" data-link="https://jobtech.jp/swimmer-1678307_640-600x383/" class="wp-image-4091" srcset="https://jobtech.jp/wp-content/uploads/swimmer-1678307_640-600x383-1.jpg 600w, https://jobtech.jp/wp-content/uploads/swimmer-1678307_640-600x383-1-300x192.jpg 300w, https://jobtech.jp/wp-content/uploads/swimmer-1678307_640-600x383-1-313x200.jpg 313w, https://jobtech.jp/wp-content/uploads/swimmer-1678307_640-600x383-1-50x32.jpg 50w" sizes="(max-width: 600px) 100vw, 600px">
      </figure>
    </li>
    <li class="blocks-gallery-item">
      <figure>
        <img loading="lazy" width="640" height="426" src="https://jobtech.jp/wp-content/uploads/male-4494491_640.jpg" alt="" data-id="4088" data-full-url="https://jobtech.jp/wp-content/uploads/male-4494491_640.jpg" data-link="https://jobtech.jp/male-4494491_640/" class="wp-image-4088" srcset="https://jobtech.jp/wp-content/uploads/male-4494491_640.jpg 640w, https://jobtech.jp/wp-content/uploads/male-4494491_640-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/male-4494491_640-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/male-4494491_640-50x33.jpg 50w" sizes="(max-width: 640px) 100vw, 640px">
      </figure>
    </li>
    <li class="blocks-gallery-item">
      <figure>
        <img loading="lazy" width="640" height="426" src="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg" alt="" data-id="4054" data-full-url="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg" data-link="https://jobtech.jp/friends-3042751_640/" class="wp-image-4054" srcset="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg 640w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-50x33.jpg 50w" sizes="(max-width: 640px) 100vw, 640px">
      </figure>
    </li>
    <li class="blocks-gallery-item">
      <figure>
        <img loading="lazy" width="640" height="479" src="https://jobtech.jp/wp-content/uploads/feet-932346_640.jpg" alt="" data-id="4052" data-full-url="https://jobtech.jp/wp-content/uploads/feet-932346_640.jpg" data-link="https://jobtech.jp/feet-932346_640/" class="wp-image-4052" srcset="https://jobtech.jp/wp-content/uploads/feet-932346_640.jpg 640w, https://jobtech.jp/wp-content/uploads/feet-932346_640-300x225.jpg 300w, https://jobtech.jp/wp-content/uploads/feet-932346_640-267x200.jpg 267w, https://jobtech.jp/wp-content/uploads/feet-932346_640-534x400.jpg 534w, https://jobtech.jp/wp-content/uploads/feet-932346_640-50x37.jpg 50w" sizes="(max-width: 640px) 100vw, 640px">
      </figure>
    </li>
  </ul>
  <figcaption class="blocks-gallery-caption">ギャラリーキャプション</figcaption>
</figure>

カバーブロック

右サイドバー「ブロック」で設定できる項目

カバーブロック

出力結果

<div class="wp-block-cover has-background-dim" style="background-image:url(https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg)">
  <div class="wp-block-cover__inner-container">
    <p class="has-text-align-center has-large-font-size">カバーブロック</p>
  </div>
</div>

左寄せ

段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章

出力結果

<div class="wp-block-cover alignleft has-background-dim" style="background-image:url(https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg)">
  <div class="wp-block-cover__inner-container">
    <p class="has-text-align-center has-large-font-size">左寄せ</p>
  </div>
</div>
<p>段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章</p>

中央揃え

段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章

出力結果

<div class="wp-block-cover aligncenter has-background-dim" style="background-image:url(https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg)">
  <div class="wp-block-cover__inner-container">
    <p class="has-text-align-center has-large-font-size">中央揃え</p>
  </div>
</div>
<p>段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章</p>

右寄せ

段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章

出力結果

<div class="wp-block-cover alignright has-background-dim" style="background-image:url(https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg)">
  <div class="wp-block-cover__inner-container">
    <p class="has-text-align-center has-large-font-size">右寄せ</p>
  </div>
</div>
<p>段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章</p>

文字位置調整

出力結果

<div class="wp-block-cover has-background-dim has-custom-content-position is-position-bottom-right" style="background-image:url(https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg)">
  <div class="wp-block-cover__inner-container">
    <p class="has-text-align-center has-normal-font-size">文字位置調整</p>
  </div>
</div>

ファイルブロック

右サイドバー「ブロック」で設定できる項目

出力結果

<div class="wp-block-file">
  <a href="https://jobtech.jp/wp-content/uploads/testdata.txt">testdata</a>
  <a href="https://jobtech.jp/wp-content/uploads/testdata.txt" class="wp-block-file__button nolightbox" download="">ダウンロード</a>
</div>

出力結果

<div class="wp-block-file">
  <a href="https://jobtech.jp/wp-content/uploads/testdata.txt">ファイル名編集可能</a>
  <a href="https://jobtech.jp/wp-content/uploads/testdata.txt" class="wp-block-file__button nolightbox" download="">ボタン名編集可能</a>
</div>

段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック

出力結果

<div class="wp-block-file alignleft">
  <a href="https://jobtech.jp/wp-content/uploads/testdata.txt">testdata</a>
  <a href="https://jobtech.jp/wp-content/uploads/testdata.txt" class="wp-block-file__button nolightbox" download="">左寄せ</a>
</div>
<p>段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック</p>

段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック

出力結果

<div class="wp-block-file aligncenter">
  <a href="https://jobtech.jp/wp-content/uploads/testdata.txt">testdata</a>
  <a href="https://jobtech.jp/wp-content/uploads/testdata.txt" class="wp-block-file__button nolightbox" download="">中央揃え</a>
</div>
<p>段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック</p>

段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック

出力結果

<div class="wp-block-file alignright">
  <a href="https://jobtech.jp/wp-content/uploads/testdata.txt">testdata</a>
  <a href="https://jobtech.jp/wp-content/uploads/testdata.txt" class="wp-block-file__button nolightbox" download="">右寄せ</a>
</div>
<p>段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック文章段落ブロック</p>

メディアと文章ブロック

右サイドバー「ブロック」で設定できる項目

メディアと文章

メディアを左に表示

出力結果

<div class="wp-block-media-text alignwide is-stacked-on-mobile">
  <figure class="wp-block-media-text__media">
    <img loading="lazy" width="640" height="426" src="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg" alt="" class="wp-image-4054" srcset="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg 640w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-50x33.jpg 50w" sizes="(max-width: 640px) 100vw, 640px">
  </figure>
  <div class="wp-block-media-text__content">
    <p class="has-large-font-size">メディアと文章</p>
    <p>メディアを左に表示</p>
  </div>
</div>

メディアと文章

メディアを右に表示

出力結果

<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile">
  <figure class="wp-block-media-text__media">
    <img loading="lazy" width="640" height="426" src="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg" alt="" class="wp-image-4054" srcset="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg 640w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-50x33.jpg 50w" sizes="(max-width: 640px) 100vw, 640px">
  </figure>
  <div class="wp-block-media-text__content">
    <p class="has-large-font-size">メディアと文章</p>
    <p>メディアを右に表示</p>
  </div>
</div>

垂直位置を変更

縦位置を上に

メディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロック

出力結果

<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-top">
  <figure class="wp-block-media-text__media">
    <img loading="lazy" width="640" height="426" src="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg" alt="" class="wp-image-4054" srcset="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg 640w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-50x33.jpg 50w" sizes="(max-width: 640px) 100vw, 640px">
  </figure>
  <div class="wp-block-media-text__content">
    <p class="has-large-font-size">垂直位置を変更</p>
    <p>縦位置を上に</p>
    <p>メディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロック</p>
  </div>
</div>

垂直位置を変更

縦位置を中央に

メディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロック

出力結果

<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-center">
  <figure class="wp-block-media-text__media">
    <img loading="lazy" width="640" height="426" src="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg" alt="" class="wp-image-4054" srcset="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg 640w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-50x33.jpg 50w" sizes="(max-width: 640px) 100vw, 640px">
  </figure>
  <div class="wp-block-media-text__content">
    <p class="has-large-font-size">垂直位置を変更</p>
    <p>縦位置を中央に</p>
    <p>メディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロック</p>
  </div>
</div>

垂直位置を変更

縦位置を下に

メディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロック

出力結果

<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-bottom">
  <figure class="wp-block-media-text__media">
    <img loading="lazy" width="640" height="426" src="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg" alt="" class="wp-image-4054" srcset="https://jobtech.jp/wp-content/uploads/friends-3042751_640.jpg 640w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-300x200.jpg 300w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-601x400.jpg 601w, https://jobtech.jp/wp-content/uploads/friends-3042751_640-50x33.jpg 50w" sizes="(max-width: 640px) 100vw, 640px">
  </figure>
  <div class="wp-block-media-text__content">
    <p class="has-large-font-size">垂直位置を変更</p>
    <p>縦位置を下に</p>
    <p>メディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロックメディアと文章内の段落ブロック</p>
  </div>
</div>

動画ブロック(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/w05Q_aZKkFw?feature=oembed&wmode=opaque" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
  </div>
</figure>