画像 – Block Editor 検証

Contents

デフォルト表示
画像ツールバー
ブロック設定パネル
スタイル設定
- 標準スタイル
- 例）追加スタイルサンプル
ブロック制御コメント

デフォルト表示

<figure class="wp-block-image size-large">
	<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
	<figcaption>キャプション</figcaption>
</figure>

幅広

<figure class="wp-block-image alignwide size-large">
	<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
	<figcaption>キャプション</figcaption>
</figure>

全幅

<figure class="wp-block-image alignfull size-large">
	<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
	<figcaption>キャプション</figcaption>
</figure>

左揃え

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

<div class="entry-content">
	<div class="wp-block-image">
		<figure class="alignleft size-thumbnail">
			<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
			<figcaption>左揃え</figcaption>
		</figure>
	</div>
	<p>あのイーハトーヴォの〜〜〜〜</p>
</div>

中央揃え

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

<div class="entry-content">
	<div class="wp-block-image">
		<figure class="aligncenter size-medium">
			<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
			<figcaption>中央揃え</figcaption>
		</figure>
	</div>
	<p>あのイーハトーヴォの〜〜〜〜</p>
</div>

右揃え

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

<div class="entry-content">
	<div class="wp-block-image">
		<figure class="alignright size-thumbnail">
			<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
			<figcaption>左揃え</figcaption>
		</figure>
	</div>
	<p>あのイーハトーヴォの〜〜〜〜</p>
</div>

画像ツールバー

リンク（URL指定 / メディアファイル / 添付ファイルのページ）
添付ファイルのページは、attachment.phpが読み込まれる。
添付ファイルのページでは、メディア管理のタイトルがページタイトル（H1）に表示され、説明がに入る。

ブロック設定パネル

高度な設定

スタイル設定

指定なし	（なし）
デフォルト	.is-style-default
丸型	.is-style-circle-mask

高度な設定にクラス名入る

<figure class="wp-block-image size-thumbnail is-style-circle-mask">
	<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
</figure>

画像設定
Altテキスト(代替テキスト)
画像サイズ（クラスは別表）
画像の寸法　（幅と高さのpx指定 / 25%,50%,75%,100%）

画像サイズ	figureに付くクラス名
サムネイル	.size-thumbnail
中	.size-medium
大	.size-large
フルサイズ	.size-full

スタイル設定

標準スタイル

.wp-block-image {
    max-width: 100%;
    margin-bottom:1em
}

.wp-block-image img {
    max-width:100%
}

.wp-block-image.aligncenter {
    text-align:center
}

.wp-block-image.alignfull img, .wp-block-image.alignwide img {
    width:100%
}

.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
    display: table;
    margin-left: 0;
    margin-right:0
}

.wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image.is-resized > figcaption {
    display: table-caption;
    caption-side:bottom
}

.wp-block-image .alignleft {
    float: left;
    margin-right:1em
}

.wp-block-image .alignright {
    float: right;
    margin-left:1em
}

.wp-block-image .aligncenter {
    margin-left: auto;
    margin-right:auto
}

.wp-block-image figcaption {
    margin-top: .5em;
    margin-bottom:1em
}

.is-style-circle-mask img {
    border-radius:9999px
}

.blocks-gallery-caption, .wp-block-embed figcaption, .wp-block-image figcaption {
    color: #555d66;
    font-size: 13px;
    text-align:center
}

例）追加スタイルサンプル

幅広(.alignwide)と全幅(.alignfull)のクラスは準備されてないため、自前で用意する。
全幅は、複数カラムある場合要注意。
幅広は、ガターのスペースに注意。
このCSS指定では、メディアと文章ブロックなどにも影響するため、
.wp-block-image.alignwide を指定したほうが良い。

.alignwide,
.alignfull {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
}
@media screen and (min-width: 768px) {
	.alignwide {
		left: 0;
		width: auto;
		max-width: calc( 100vw - 160px);
		margin: 16px -50px 0 -50px;
	}
 	.alignfull {
		margin-left: calc( 50% - 50vw) ;
		/* サイトによって最後の84pxの所で微調整
		margin: 0 calc( ( 50% - 50vw ) - 84px ) ;
		*/
	}
}

ブロック制御コメント

<!-- wp:image {"id":227,"sizeSlug":"large"} -->
<!-- /wp:image -->

<!-- wp:image {"align":"wide","id":230,"sizeSlug":"large"} -->
<!-- /wp:image -->

<!-- wp:image {"align":"full","id":235,"sizeSlug":"large"} -->
<!-- /wp:image -->

<!-- wp:image {"align":"left","id":223,"sizeSlug":"thumbnail"} -->
<!-- /wp:image -->

<!-- wp:image {"align":"center","id":233,"width":300,"height":200,"sizeSlug":"medium"} -->
<!-- /wp:image -->

<!-- wp:image {"align":"right","id":224,"sizeSlug":"thumbnail"} -->
<!-- /wp:image -->

<!-- wp:image {"id":223,"sizeSlug":"medium","className":"is-style-circle-mask"} -->
<!-- /wp:image -->