WordPressエディター Gutenbergで指定できるブロックはどんな表示になるのか確認したい

本ページでは、各ブロックの表示画像とHTMLより ブロックがどう構成されるかを紹介する

凡例

ブロックのカテゴリ

ブロック名

表示イメージ





html

考察 ほか

インライン要素

インライン画像

インライン画像は 同一行に代替テキストが表示できる

<p>インライン画像は 同一行に<img class="wp-image-NNN" style="width: 150px;" src="*fileUrl*" alt="代替テキスト" srcset="*fileUrl* 532w, *fileUrl* 300w" sizes="(max-width: WWWpx) 100vw, WWWpx">が表示できる</p>
<p>

srcset の記述があることから、ブラウザのサイズに合わせて画像の表示サイズを切り替えるところまでやってくれるようだ
ちなみに上記画像はサイズ分だけ作成しているわけではないので、WordPress上で画像をアップロードした際に自動でサイズ分生成しているのではないかと思われる

幅の種類 > 1676px, 300px, 1024px, 660px (最小100px, 最大1676px)

一般ブロック

段落と見出しは割愛。

リスト

  • ブロック [リスト]
  • 表示イメージ
<ul class="追加CSSクラス">
  <li>ブロック [リスト]</li>
  <li>表示イメージ</li>
</ul>
  1. ブロック [リスト]
  2. 数字Version
<ol class="追加CSSクラス">
  <li>ブロック [リスト]</li>
  <li>数字Version</li>
</ol>

リストのブロック内で改行をした後 改行を削除しても <li></li> が残ってしまうことがあった。

この画像には alt 属性が指定されておらず、ファイル名は image-32-300x300.png です
①WordPressでの編集中。改行ミス
②不要な改行削除
(右)この状態では ・が多く表示される
この画像には alt 属性が指定されておらず、ファイル名は image-34.png です
(右)末行の・が消えない
③ビジュアル編集では ・が2行あるが、HTML編集に切り替えると <li />が 3つ記録されている
※本事象は 2018/12/09時点で確認

この場合、HTML編集モードで不要な<li></li>を削除するか、ビジュアル編集モードで不要な改行をした前の行を編集する(上記例で言うと「表示イメージ」) と 不要な<li></li>が削除されるようだ

本事象、Gutenberg 編集機能における事象と思われ、改行削除しても<li></li>は削除されず、行編集したときに<li></li>の数を もしくはHTMLの再作成しているために起きるものではないか と思われる

画像

代替テキスト
キャプション
<figure class="wp-block-image">
  <img src="https://*fileUrl*" alt="代替テキスト" class="wp-image-71"
    srcset="https://*fileUrl* 1024w, https://*fileUrl* 300w, https://*fileUrl* 768w, https://*fileUrl* 660w" sizes="(max-width: 1024px) 100vw, 1024px">
  <figcaption>キャプション</figcaption>
</figure>

インライン画像同様、ブラウザの幅に合わせて画像を差し替える処理が組み込まれているようだが、インライン画像とは サイズの階層が異なる
幅の種類 > 1024px, 300px, 768px, 660px (最小 100px, 最大 1024px)

(2018/12/09) 以下ブロックについては 解説文 未記載。後日更新予定

固定ページ: 1 2 3

CAPTCHA