Gutenbergのレイアウトのリスト（HTMLコード付き）

日にちがあきましたが第三段です。

WordPress 5.2.2搭載のGutenbergで確認しています（2019/8/30追記）

目次

• 一般ブロック
• フォーマット(整形)
• レイアウト要素
• ウィジェット
• 埋め込み（準備中）

今回はボタンなどよくつかうものが出てきます。

ボタン

デフォルト

<div class="wp-block-button">
<a class="wp-block-button__link" href="#">ボタンのテキストを入力</a>
</div>

左寄せ

<div class="wp-block-button alignleft">
<a class="wp-block-button__link" href="#">左寄せのボタン</a>
</div>

中央寄せ

<div class="wp-block-button aligncenter">
<a class="wp-block-button__link" href="#">中央寄せのボタン</a>
</div>

右寄せ

<div class="wp-block-button">
<a class="wp-block-button__link" href="#">右寄せのボタン</a>
</div>

背景色を変える

<div class="wp-block-button">
<a class="wp-block-button__link has-background has-pale-pink-background-color" href="#">背景色を設定</a>
</div>

テキスト色を変える

<div class="wp-block-button">
<a class="wp-block-button__link has-text-color has-luminous-vivid-orange-color" href="#">テキスト色を設定</a>
</div>

背景色・テキスト色にカスタムカラーを設定

<div class="wp-block-button">
<a class="wp-block-button__link has-text-color has-background" href="#" style="background-color:#90d300;color:#141a1d">カスタムカラーを設定</a>
</div>

.wp-block-button がついたdivの中にaタグがあるという構造は変わりません。

個人的に、左寄せとか右寄せとかするとフロートがかかって記事が入力しづらくなるのがなんとかならないかなと思っています。

カラム

デフォルト

<div class="wp-block-columns has-2-columns">
<div class="wp-block-column">
<p>カラムです。デフォルトは2カラムです。</p>
</div>
<div class="wp-block-column">
<p>カラムです。デフォルトは2カラムです。</p>
</div>
</div>

カラムの中にコンテンツを入れるとカラムが選択しづらい！
ブロックが選択しづらいときは、キーカーソルの↑を押してブロック選択を切り替えてますが、これなんとかならないかなあ。（2回目）

それから、flex-wrapは入っていないので自動で折り返したりはしません。
折り返したいときはまた新たにカラムをつくるのが推奨されます。

というか、CSSがたいそう難しい指定をされているので、極力マージンとか触りたくないですね・・・。

メディアと文章

デフォルト（幅広）

<div class="wp-block-media-text alignwide">
<figure class="wp-block-media-text__media">
<img src="/wp-content/uploads/2018/12/ff14_02.jpg" alt="" class="wp-image-1911" srcset="/wp-content/uploads/2018/12/ff14_02.jpg 768w, /wp-content/uploads/2018/12/ff14_02-644x362.jpg 644w, /wp-content/uploads/2018/12/ff14_02-640x360.jpg 640w, /wp-content/uploads/2018/12/ff14_02-64x36.jpg 64w" sizes="(max-width: 768px) 100vw, 768px">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">デフォルトです。</p>
<p>なぜか幅広が入っている。もうすぐFF14拡張が発売なのでそわそわしています。</p>
</div>
</div>

幅広なし

<div class="wp-block-media-text">
<figure class="wp-block-media-text__media">
<img src="/wp-content/uploads/2018/12/parfait_2018_01.jpg" alt="" class="wp-image-1899" srcset="/wp-content/uploads/2018/12/parfait_2018_01.jpg 605w, /wp-content/uploads/2018/12/parfait_2018_01-272x362.jpg 272w" sizes="(max-width: 605px) 100vw, 605px">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">ぱふぇたべたい</p>
</div>
</div>

全幅

<div class="wp-block-media-text alignfull">
<figure class="wp-block-media-text__media">
<img src="/wp-content/uploads/2019/02/jill_08.jpg" alt="" class="wp-image-1960" srcset="/wp-content/uploads/2019/02/jill_08.jpg 430w, /wp-content/uploads/2019/02/jill_08-202x362.jpg 202w" sizes="(max-width: 430px) 100vw, 430px">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">躍動感あふれるジル</p>
</div>
</div>

画像を右側に変更

<div class="wp-block-media-text has-media-on-the-right">
<figure class="wp-block-media-text__media">
<img src="/wp-content/uploads/2019/03/karikari_04.jpg" alt="" class="wp-image-2007" srcset="/wp-content/uploads/2019/03/karikari_04.jpg 806w, /wp-content/uploads/2019/03/karikari_04-482x362.jpg 482w, /wp-content/uploads/2019/03/karikari_04-768x576.jpg 768w" sizes="(max-width: 806px) 100vw, 806px">
</figure>
<div class="wp-block-media-text__content">
<p>ツールチップ的なところで、画像の左右が選択できます</p>
</div>
</div>

メディアと文章の設定

<div class="wp-block-media-text is-image-fill">
<figure class="wp-block-media-text__media" style="background-image:url(/wp-content/uploads/2018/12/ff14_eye-1024x538.jpg);background-position:50% 50%">
<img src="/wp-content/uploads/2018/12/ff14_eye-1024x538.jpg" alt="" class="wp-image-1915" srcset="/wp-content/uploads/2018/12/ff14_eye-1024x538.jpg 1024w, /wp-content/uploads/2018/12/ff14_eye-300x158.jpg 300w, /wp-content/uploads/2018/12/ff14_eye-690x362.jpg 690w, /wp-content/uploads/2018/12/ff14_eye-768x403.jpg 768w, /wp-content/uploads/2018/12/ff14_eye.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px">
</figure>
<div class="wp-block-media-text__content">
<p>カラムの幅に合わせて画像が切り抜かれます。</p>
</div>
</div>

幅の調整

<div class="wp-block-media-text alignwide" style="grid-template-columns:24% auto">
<figure class="wp-block-media-text__media">
<img src="/wp-content/uploads/2018/06/move-1024x538.jpg" alt="" class="wp-image-1214" srcset="/wp-content/uploads/2018/06/move-1024x538.jpg 1024w, /wp-content/uploads/2018/06/move-300x158.jpg 300w, /wp-content/uploads/2018/06/move-690x362.jpg 690w, /wp-content/uploads/2018/06/move-768x403.jpg 768w, /wp-content/uploads/2018/06/move.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px">
</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 has-very-light-gray-background-color">
<figure class="wp-block-media-text__media">
<img src="/wp-content/uploads/2019/02/gift_08.jpg" alt="" class="wp-image-1977" srcset="/wp-content/uploads/2019/02/gift_08.jpg 806w, /wp-content/uploads/2019/02/gift_08-482x362.jpg 482w, /wp-content/uploads/2019/02/gift_08-768x576.jpg 768w" sizes="(max-width: 806px) 100vw, 806px">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">すやすやジル</p>
</div>
</div>

メディアと画像はかなり使いやすいイメージです。（サンプルが多くて大変だった）

ただ、レイアウトにgridが使われているのでIE11で注意が必要です。
何をどう頑張っても崩れるので私はこのJSを突っ込みました。（style属性にgrid-template-columnsがつくのでどうやっても最優先にされてしまうのです）

$( function( ) {
	var gridContent = $( '.wp-block-media-text' );

	gridContent.each(function() {
		if ( $( this ).get( 0 ).style.gridTemplateColumns === undefined ) {
			// IEのみ
			var style = $( this ).attr( 'style' );
			var result = style.replace( 'grid-template-columns', '-ms-grid-columns' );
			$( this ).attr( 'style', result );
		}
	});
} );

区切り

デフォルト

---

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

幅広線

---

<hr class="wp-block-separator is-style-wide">

ドット

---

<hr class="wp-block-separator is-style-dots">

ドットのみbefore要素がつきます。

区切り

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

余白の設定でピクセル値での高さを指定できます。スマホとPCで分けたりとかはできません。

続きを見るとかページ区切りは割愛しました。
大体これで網羅できた気がするぞ・・・！