これは、テンプレート側のスクリプトを利用しないと、基本的にはできないが。

なんとかブロックエディタ上で行うことはできないだろうか。ショートコードなら、アイキャッチを取得して背景にすることはできても、背景上におくコンテンツの編集が難しい。

bg-surf, bg-midori は、クラス名対応のスタイルで、スタイルシートに書いてある。クラシックロックか、カスタムHTMLを使えば指定できるが、ビジュアルには編集できないかも知れない。

ここはクラシックブロック。クラシックブロックには、高度な設定の入力フォームが存在しない。したがって、ブロック自体にクラスは付与できない。ｈｔｍｌ編集に切り替えて、現在の段落に全幅用のクラスを指定してみた。フロント画面では、全幅に広がるが、エディタ内では、当然だがひろがらない。datasetプロパティを付与しても、ブロックエディタ上のブロックでは無いので、スタイルは適用されないと思う。見づらいので、クラスは外した。

カバーなら、画像を全画面表示できるが、これは背景画像では無く、前景画像の上にコンテツを重ねている。前景画像のアタッチメントを固定にすることは出来ないのだろうか。

スティッキーを使って似たような効果を出すことはテストではできているが。ワードプレス上で使えるか。どうか。スティッキーでは、画像や、オーバーレイ、コンテナーサイズに自由度が無い。やはり背景で何とかする方法を。

以下は、カラムズに画像を二枚。wp-block-columns の中に、wp-block-columnが２つある。どちらもtransform:translate(x,y)で動かせる。実際には、columnsにクラスを指定して、最初の子を右上に、次の子を左下に動かすようなスタイルを書いておくことが必要になる。htmlタグに直接書き込むなら、クラシックブロックかカスタムHTMLを使うことになる。

更に、移動させる方向に十分なマージンをセットしておくことも必要になると思える。代表的なパターンを２、３種類スタイルで用意しておくのが、一番かも知れない。そうすれば、スペーサーを使うことも無い。

ただし、画面幅に応じて、一列になった時のスタイルをどうするか考えて置かなければならない。ブレークポイントで、元に戻す。？