ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか

ブロックエディターを使ってサイトを作っています。
画像を挿入し、その画像にスタイルシートを付けたいと思っていますが上手く行きません。

画像を挿入した時は

-------------------------------------------------------------------------------------
<!-- wp:image {"id":11697,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://aaaaaaaa.jpg" alt="" class="wp-image-11697"/></figure>
<!-- /wp:image -->
-------------------------------------------------------------------------------------

と言うソースになるので
「img src」
の間の部分に
「 class="test" 」を追記して

-------------------------------------------------------------------------------------
<!-- wp:image {"id":11697,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img class="test" src="https://aaaaaaaa.jpg" alt="" class="wp-image-11697"/></figure>
<!-- /wp:image -->
-------------------------------------------------------------------------------------

にして保存しました。

そうすると実際のサイトを見るとスタイルシートが適用されるのですが
再度編集画面を見ると
「このブロックには、想定されていないか無効なコンテンツが含まれています。」
となってしまい、画像も薄くなっています。

「ブロックのリカバリーを施行」を押すと、元に戻るのですが
追記した「 class="test" 」のスタイルシートも消えてしまいます。

ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか？

No.1 回答者： wanderer1 回答日時： 2022/08/23 20:41

んー？

imgにはもともと

class="wp-image-11697"

ってのが付いてますよね。

class="wp-image-11697 test"

とスペース入れてtestを追記すれば解決するのでは？

この回答へのお礼

ご回答ありがとうございます。

確かにclassがありましたね！
と言う訳で
class="wp-image-11697 test"とやってみました。
そしたら、ちゃんとスタイルシートは適用されたのですが
未だに
「このブロックには、想定されていないか無効なコンテンツが含まれています。」
が出てしまします(´;ω;｀)

お礼日時：2022/08/24 20:41