WP5.3で検証

メディアと文章

テキスト側のカラムは、好きなブロックを追加できる。
幅広か全幅のクラスが付く。
モバイルで重ねた場合は、左カラムが上に来る。

デフォルト表示

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

<div class="wp-block-media-text alignwide">
	<figure class="wp-block-media-text__media">
		<img src="example.jpg" alt="" class="wp-image-{ID}">
	</figure>
	<div class="wp-block-media-text__content">
		<p class="has-large-font-size">テキスト</p>
	</div>
</div>

自動で幅広になる
文字サイズ「大」がデフォルト

左右入れ替え

左右入れ替えはツールバーから行う。

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

<div class="wp-block-media-text alignwide has-media-on-the-right">
	<figure class="wp-block-media-text__media">
		<img src="example.jpg" alt="" class="wp-image-{ID}">
	</figure>
	<div class="wp-block-media-text__content">
		<p class="has-large-font-size">テキスト</p>
	</div>
</div>

ブロック設定パネル

メディアと文章の設定
モバイルで重ねる(.is-stacked-on-mobile)
カラム全体を塗りつぶすように画像を切り抜く(.is-image-fill)

色設定
色設定は背景色のみ

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

垂直配置を変更
カラムのツールーバーから変更

縦位置を上に.is-vertically-aligned-top
縦位置を中央に.is-vertically-aligned-center
縦位置を下に.is-vertically-aligned-bottom
<div class="wp-block-media-text alignwide is-vertically-aligned-top">

スタイル設定

標準スタイル

.wp-block-media-text {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 50% 1fr;
    grid-template-columns:50% 1fr
}

.wp-block-media-text .has-media-on-the-right {
    -ms-grid-columns: 1fr 50%;
    grid-template-columns:1fr 50%
}

.wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media {
    -ms-grid-row-align: start;
    align-self:start
}

.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media, .wp-block-media-text .wp-block-media-text__content, .wp-block-media-text .wp-block-media-text__media {
    -ms-grid-row-align: center;
    align-self:center
}

.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media {
    -ms-grid-row-align: end;
    align-self:end
}

.wp-block-media-text .wp-block-media-text__media {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
    margin:0
}

.wp-block-media-text .wp-block-media-text__content {
    word-break: break-word;
    padding:0 8%
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media, .wp-block-media-text .wp-block-media-text__content {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row:1
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row:1
}

.wp-block-media-text > figure > img, .wp-block-media-text > figure > video {
    max-width: unset;
    width: 100%;
    vertical-align:middle
}

.wp-block-media-text.is-image-fill figure {
    height: 100%;
    min-height: 250px;
    background-size:cover
}

.wp-block-media-text.is-image-fill figure > img {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border:0
}

@media (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile {
        -ms-grid-columns: 100% !important;
        grid-template-columns:100% !important
    }

    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 1;
        grid-row:1
    }

    .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media, .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 2;
        grid-row:2
    }

    .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 1;
        grid-row:1
    }
}

ブロック制御コメント

<!-- wp:media-text {"mediaId":232,"mediaType":"image"} -->
<!-- /wp:media-text -->

<!-- wp:media-text {"mediaPosition":"right","mediaId":227,"mediaType":"image"} -->
<!-- /wp:media-text -->

<!-- wp:media-text {"backgroundColor":"very-light-gray","mediaId":234,"mediaType":"image","isStackedOnMobile":true,"imageFill":true} -->
<!-- /wp:media-text -->