about

Gutenbergが出力するHTMLとCSSとについてまとめてみた

WordPressに新しくGutenbergと言うエディタが登場しました。これからWordpressの投稿画面はこのエディタに切り替わっていくと言うことですので、まずはこのエディタで書かれたものがどの様に出力されているかをまとめてみました。

投稿画面のカスタマイズ等にご利用ください。

ブロックとそのコードのまとめ

見出し

<h1></h1>~<h5></h5>

デフォルトではclass等の表記は無いので、そのままh1等を指定してCSSを適用することになります。
(classが必要な場合、詳細からclassを指定することは可能です)

文章(段落)

<p></p>

1つの段落で1ブロックになります。これも、デフォルトでclass等は設置されません。

画像

・画像
基本構成
左揃え
<div class="wp-block-image"><figure class="alignleft"><img></figure></div>
右揃え
<div class="wp-block-image"><figure class="alignright"><img></figure></div>
中央揃え
<div class="wp-block-image"><figure class="aligncenter"><img></figure></div>

旧エディタ(クラシック)とは若干タグの構成が変わっているようです。しかし、floatで回り込むのは旧エディタと同じなので、使い方に変化はないと思います。ちなみにfloatのcssはプラグイン側が持っているので、alignleftやalignrightをcssに書き加えなくても大丈夫です。

リスト

・リスト
<ul><li>~</li></ul>
・リスト(数字)
<ol><li>~</li></ol>

普通にulとolでリストは作成されています。classの無い素の状態で貼り付けられているので、classで指定する場合、後に表記するギャラリーとのコンフリクトに注意する事。

引用

<blockquote class="wp-block-quote"><p>引用してます</p><cite>引用元の表示</cite></blockquote>

引用は普通にblockquote。ulやolにはclassをつけてないが、blockquoteはリードコラムと2種類の使い分けがあるのでclassを付けています。
引用文はp、引用元にはciteタグが使用されています。

リードコラム

<blockquote class="wp-block-pullquote"><p>リードコラム</p><cite>引用元の表示</cite></blockquote>

リードコラムは引用と同じ扱いだけど、class名だけが違うだけのようです。

ギャラリー

<ul class="wp-block-gallery columns-3 is-cropped"><li class="blocks-gallery-item"><figure><a><img></a></figure></li></ul>

ulにflexboxを設定して並べている。必要な箇所の必要なclassを使って、モーダルボックスなどの設定を行う時はこのclassを利用すればスムーズに適用できると思います。
これも、必要なcssはプラグイン側がもっているので、こちらで全部準備する必要はなさそうです。ただし、前述のリストが素のulの為、リストの見た目を変更する場合、ギャラリーの方も修正する必要があります。
ただ、クラシックに比べて使い勝手が良いと思うので、ぜひ使ってみたいところです。

コード表示

<pre class="wp-block-code"><code>~</code></pre>

コードを表記する場合はこちら。これ以外にもpreを使うブロックは後2種類あります。

カバー画像

<pre class="wp-block-code"><code>~</code></pre>

カバー画像はcssのbackgroundを使用する。直接styleに書き込むので気持ち悪い。

テーブル

<table class="wp-block-table"><tbody><tr><td>テーブル1</td><td>テーブル2</td></tr><tr><td>てーぶる1</td><td>てーぶる2</td></tr></tbody></table>

テーブルはビジュアルエディタを使用するとtdしか使えない? 多分、tableは直接書くことのほうが多いので、これで良いかなと思います。 ビジュアルエディア上でテーブルの文字の差し替えがやりやすいのは良いかもしれない。

整形済みテキスト・詩

・整形済みテキスト
<pre class="wp-block-preformatted">~</pre>
・詩
<pre class="wp-block-verse">~</pre>

整形済みテキストと詩は、preのclass違いになります。特に使用する必要がなければ使用しなくても良いと思います。しかし、使う場合はそれぞれのclassにcssを設置する必要があります。詩の使いみちがあまり浮かばなかったです…。

ボタン

<div class="wp-block-button aligncenter"><a class="wp-block-button__link has-text-color has-pale-pink-color has-background has-very-dark-gray-background-color" href="ボタン表示">ボタン<br/></a></div>

ボタンはプラグイン側で全部設定するようになっているので、こちらでcssを変更する必要はほとんどなさそうです。

カラム

<div class="wp-block-columns has-2-columns">
	<div class="wp-block-column"><p>からむ1</p></div>
	<div class="wp-block-column"><p>からむ2</p></div>
</div>

ブロックを横に分割するカラムを作ります。その場合上記のようなタグが出来ます。カラムの詳細な設定はプラグイン側から行うようになっているので、特にこちらで設定することは無さそうです。

※gutenbergが用意しているカラムはレスポンシブしないので、テーマがレスポンシブ対応している場合は使わないほうが良いです。レスポンシブデザイン用にレイアウトをカスタマイズさせたい場合は、専用のテンプレートを用意して直接書くか、カスタムHTMLを使用して貼り付けるしか無い様です。

空白

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

divに直接styleで書いたものが貼り付けられます。

カスタムHTML

その他、自由に書く場合はこちらを使うことになります。ソースは見やすくなったのですが、プレビューにCSSが適用されないため今の所使い勝手は50%と言った感じです。

最後に

とりあえず、投稿画面で使用するHTMLとCSSはこのような感じになっています。 この様に見た目がわかりやすいエディタは入力になれていない人でもランディングページのようなしっかりブロック分けされたページの制作ができるようになります。何はともあれGutenbergは見やすいエディタなので、少しづつ使ってみてはいかがでしょうか。

まずは素の状態のGutenbergを見てみましたが、ここから更に自分用のブロックを作ったりすることになると思います。それらは後日まとめたいと思います。