パターンの表示にかかる問題について

以下のコードをpatternsフォルダに配置したところ、外観→エディタで認識は確認できたもののプレビュー画像で「想定されていない無効なコンテンツが含まれています。」とエラーが出ます。パターン一覧だけでなく固定ページや個別投稿の編集画面から追加する際の画像も同様です。エディタに挿入したところ「復旧」のダイアログが表示され、「復旧を試みる」を押せばフロントエンドで正常に表示されるものの実用性に乏しい状態です。

<?php

/**

 * Title: ヒーローセクション（フルスクリーン背景）

 * Slug: my-theme/hero-section

 * Categories: hero

 * Viewport Width: 1200

 * Block Types: core/group

 * Keywords: ヒーロー, フルスクリーン, キャッチコピー

 * Description: フルスクリーンの背景画像を使用したヒーローセクション

 */

?>

<!-- wp:group {"align":"full","style":{"color":{"background":"#000000"},"spacing":{"padding":{"top":"120px","bottom":"120px"}}},"className":"hero-section","layout":{"type":"constrained"}} -->

<div class="wp-block-group alignfull hero-section" style="background:#000000;padding-top:120px;padding-bottom:120px">

<!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->

<figure class="wp-block-image size-full">

    <img src="http://localhost:10090/wp-content/uploads/2013/03/featured-image-horizontal.jpg" alt="ヒーロー背景"/>

</figure>

<!-- /wp:image -->

    <!-- wp:group {"className":"hero-content","layout":{"type":"constrained"}} -->

    <div class="wp-block-group hero-content">

        <!-- wp:heading {"level":1,"style":{"color":{"text":"#ffffff"}}} -->

        <h1 style="color:#ffffff">魅力的なキャッチコピーをここに</h1>

        <!-- /wp:heading -->

        <!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}}} -->

        <p style="color:#ffffff">ここに短い説明を入れます。ユーザーを惹きつけるフレーズを加えると効果的です。</p>

        <!-- /wp:paragraph -->

        <!-- wp:buttons -->

        <div class="wp-block-buttons">

            <!-- wp:button {"backgroundColor":"primary","textColor":"white"} -->

            <div class="wp-block-button"><a class="wp-block-button__link has-white-color has-primary-background-color has-text-color has-background">今すぐ始める</a></div>

            <!-- /wp:button -->

        </div>

        <!-- /wp:buttons -->

    </div>

    <!-- /wp:group -->

</div>

<!-- /wp:group -->

以下の画像のように「復旧を試みる」と同時に現れるメニューボタンをクリックすると現在および変換後のhtmlが表示されますが、修正方法はわかりません。

———————————————————–

現在

<div class="wp-block-group alignfull hero-section" style="background:#000000;padding-top:120px;padding-bottom:120px"> </div>

変換後

<div class="wp-block-group alignfull hero-section" style="background:#000000;padding-top:120px;padding-bottom:120px"> </div>

動作自体は問題ないことからプレビュー画像のみフロントエンドのスクリーンショットに差し替えようとしましたが、functions.phptheme.jsonにimage-previewプロパティを設定してもうまくいきません。検証ツールで確認するとiframeで読み込まれており、コードが機能しない原因なのかと考えています。pattern内のphpファイルやfunctions.phpに記述することで画像を変更可能な方法を探しています。

まとめると質問事項は以下の2つです。

・ヒーローセクションのパターンをエディタで追加した際「想定していない無効なコンテンツが含まれています」のエラーを消す方法

・プレビュー画像を実装時のスクリーンショットに変更する方法

どなたかご教示いただければ幸いです。宜しくお願いいたします。