モバイル時に要素の並び順を変更したい（グリッドレイアウト使用？）

一応できるっちゃできるのですが、Snow Monkey Blocks のグリッドブロックは現状タブレット・スマホで設定を変えられないので、結局 CSS は書かなければいけなくなり、それならば、スライダーを2個入れておいて、Snow Monkey Editor のウィンドウサイズによるブロックの表示・非表示機能で適宜表示状態を設定したほうが簡単な気はします。

一応グリッドでブロックで試してみたので記録として残しておきます。

### ブロック

<!-- wp:snow-monkey-blocks/grid {"columnsOption":"columns","columns":2,"rowsOption":"free","gridTemplateRows":"auto 1fr","style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"className":"hogehoge"} -->
<div class="wp-block-snow-monkey-blocks-grid smb-grid smb-grid--columns:columns smb-grid--rows:free hogehoge" style="--smb-grid--gap:var(--wp--preset--spacing--40);--smb-grid--columns:2;--smb-grid--grid-template-rows:auto 1fr"><!-- wp:image {"id":2846,"sizeSlug":"full","linkDestination":"none","smb":{"gridColumn":"1 / 2","gridRow":"1 / -1"}} -->
<figure class="wp-block-image size-full"><img src="http://localhost:8888/wp-content/uploads/2023/07/image.jpeg" alt="" class="wp-image-2846"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">タイトル</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"constrained"},"smb":{"alignSelf":"start"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>ジョバンニは、いつか町はずれのポプラの木が幾本も幾本も四方へ出るのでした。そしてそのこどもの肩のあたりが、どうも済みませんでしたから、とてもみんなは乗り切らないのです。</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">ボタン</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:snow-monkey-blocks/grid -->

### CSS

@media (max-width: 600px) {
    .hogehoge {
        --smb-grid--columns: 1 !important;
    }

    .wp-block-image {
        --smb--grid-row:2 / 3 !important;
    }

    .hogehoge h2 {
        --smb--grid-row:1 / 2 !important;
    }
}

ちなみに、Snow Monkey Blocks v20.5.1 現在、--smb--grid-row、--smb--grid-column がエディター上でしか反映されない不具合があったのですぐに修正入れます…！

♥ 1

いいねをした人:

ただ、いただいたコードをカスタムHTMLに貼り付け表示を見つつ、

カスタム HTML ブロックではなくて、ブロックエディター自体をコードエディターに切り替えて（画面の一番右上の点が縦に3つ並んでいるところから切り替えられます）、貼り付け、ビジュアルエディターに戻すと、グリッドブロックとして認識されます！

のような流れであっていますでしょうか？

そこまではあっているのですが、スライダー（僕の例でいうと画像ブロック）にグリッドアイテムとしての位置設定をする必要があります。画像ブロックを選択して、設定パネルを「スタイル」タブに切り替えると設定 UI が表示されます。

カラム数を2にしているために左、右、左（2列目）…といった順で要素が並んでしまい、最初の要素のみ左に配置し、それ以外を右側に配置するといPC表示時の見た目を作ることもできませんでした。

カラム数は2なんですけど、"gridTemplateRows":"auto 1fr"なので、グリッドとしては

という感じになります。

で、画像が gridColumn":"1 / 2","gridRow":"1 / -1 なので、上の表でいうと、 A と B のエリアに配置されます。

♥ 1

いいねをした人: