WordPress Gutenberg ブロックエディタのHTML構造とクラス名まとめ

Gutenbergのブロックのスタイルを自分のテーマに合わせて編集したい方のための、HTML構造と選択できるクラス名のまとめです。需要ありそうなのだけですがまとめました。

スタイルについては、僕が実装したものとそうでないのと色々混じってるので、見た目参考程度にどうぞ。

画像

<figure class="wp-block-image">
  <img alt="" class="wp-image-990" src="https://e-joint.jp/wp-content/uploads/2019/06/logo-ejointjp-dark.png ">
  <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit</figcaption>
</figure>

引用

もし今日が人生最後の日だとしたら、今やろうとしていることは 本当に自分のやりたいことだろうか？　- Steve Jobs –

https://iyashitour.com/archives/25343

<blockquote class="wp-block-quote">
  <p>もし今日が人生最後の日だとしたら、今やろうとしていることは 本当に自分のやりたいことだろうか？　- Steve Jobs – </p>
  <cite>
    <a href="https://iyashitour.com/archives/25343">https://iyashitour.com/archives/25343</a>
  </cite>
</blockquote>

ギャラリー

is-cropped , columns-3 は設定で変わります。

<ul class="wp-block-gallery columns-3 is-cropped">
  <li class="blocks-gallery-item">
    <figure>
      <a href="/wp-content/uploads/2019/07/cover-url2qr.jpg">
        <img
          src="/wp-content/uploads/2019/07/cover-url2qr.jpg"
          alt="" data-id="1034" data-link="https://e-joint.jp/1013/cover-url2qr/"
          class="wp-image-1034"
          sizes="(max-width: 2048px) 100vw, 2048px">
      </a>
    </figure>
  </li>
</ul>

カバー

has-parallax は固定背景の設定にするとつきます

<div
  class="wp-block-cover has-background-dim has-parallax"
  style="background-image:url(/wp-content/uploads/2019/06/logo-ejointjp-dark.png)"
>
  <div class="wp-block-cover__inner-container">
    <p
      style="text-align:center"
      class="has-large-font-size"
    >Lorem Ipsum</p>
  </div>
</div>

ファイル

<div class="wp-block-file">
  <a href="/wp-content/uploads/2019/07/cover-url2qr.jpg">cover-url2qr</a>
  <a
    href="/wp-content/uploads/2019/07/cover-url2qr.jpg"
    class="wp-block-file__button"
  download="">
    ダウンロード
  </a>
</div>

ソースコード

<pre class="wp-block-code"> 
  <code>Lorem ipsum dolor sit amet, consectetur adipisicing elit</code>
</pre>

整形済み

Lorem ipsum dolor sit amet, consectetur adipisicing elit

<pre class="wp-block-preformatted">Lorem ipsum dolor sit amet, consectetur adipisicing elit</pre>

テーブル

Lorem ipsum	dolor sit amet,
consectetur	adipisicing elit

is-style-default , is-style-stripes をAdvanced CSSとして選択できる。

固定幅のテーブルセルで has-fixed-layout がつく

<table class="wp-block-table is-style-strpies">
  <tbody>
    <tr>
      <td>Lorem ipsum</td>
      <td>dolor sit amet,</td>
    </tr>
    <tr>
      <td>consectetur</td>
      <td>adipisicing elit</td>
    </tr>
  </tbody>
</table>

プルクオート

Lorem ipsum dolor sit

amet, consectetur adipisicing elit

Advanced CSSで is-style-default , is-style-solid-color

<figure class="wp-block-pullquote">
  <blockquote>
    <p>Lorem ipsum dolor sit </p>
    <cite>amet, consectetur adipisicing elit</cite>
  </blockquote>
</figure>

詩

Lorem ipsum dolor sit amet, consectetur adipisicing elit

<pre class="wp-block-verse">Lorem ipsum dolor sit amet, consectetur adipisicing elit</pre>

ボタン

Advanced CSSで is-style-default is-style-outline is-style-squared

<div class="wp-block-button">
  <a class="wp-block-button__link" href="https://e-joint.jp">This is a Btn.</a></div>

カラム

has-6-columns まで

<div class="wp-block-columns has-2-columns">
  <div class="wp-block-column">
    <p>Column1</p>
  </div>
  <div class="wp-block-column">
    <p>Column 2</p>
  </div>
</div>

メディアと文章

「モバイルで重ねる」 で is-staced-on-mobile がつく

<div class="wp-block-media-text alignwide is-stacked-on-mobile">
  <figure class="wp-block-media-text__media">
    <img
      src="/wp-content/uploads/2019/06/logo-ejointjp-dark.png"
      alt="" class="wp-image-990"
      sizes="(max-width: 1024px) 100vw, 1024px"
    >
  </figure>
  <div class="wp-block-media-text__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>
</div>

区切り

---

Advanced CSSで is-style-default is-style-wide is-style-dots を選べる

<hr class="wp-block-separator">

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="赤い公園「凛々爛々」Music Video" width="500" height="281" src="https://www.youtube.com/embed/uSLXMLOZZpk?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
  </div>
  <figcaption>Lorem ipsum dolor sit amet</figcaption>
</figure>