画像ブロックに効果を追加した時にハマった

説明

画像ブロックに対して見た目が変わる効果を追加しようと思い機能拡張してみた。その際、いくつかの効果は問題なかったのだが、1つの効果だけその画像を選択したときのみ効果が消える不具合が発生。対処内容はシンプルなものだが、忘れないようにメモっとく。

ドロップシャドウは問題なかった

画像ブロックの表現を増やそうと思いいくつかの効果を付与するボタンを追加した。

画像ブロックのツールバーに4つのボタンを追加した

フロントエンド側の画像ブロックはimg要素を内包するfigure要素になり、上記のボタンで指定されるクラス属性はfigure要素に適用される。ドロップシャドウ効果のクラス名はdrop-shadowとし、そのスタイルはフロントエンドとブロックエディタ向けのどちらも以下のようにした。

.drop-shadow {
	box-shadow: 6px 6px 30px -4px rgba( 0, 0, 0, 0.75 );
}

これでフロントエンドとブロックエディタとも問題なく効果が適用できた。

画像ブロックにドロップシャドウ効果を適用

境界をぼかす効果でちょっとハマる

同じような感じで他の効果を追加していくなか、境界をぼかす効果がうまく適用できなかった。そのクラス名はblurringとし、そのスタイルは以下のようにした。

:root {
	--blurring-color: var( --wp--preset--color--base, #ffffff );
}

.blurring {
	position: relative;
}
.blurring::after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: inset 0 0 20px 20px var( --blurring-color ),
		inset 0 0 4px 4px var( --blurring-color );
}

これでおおむね問題なかったのだが、画像ブロックをフォーカスした時だけ効果が消えるようになってしまった(右側)。

画像ブロックに境界をぼかす効果を適用したところ、フォーカス時のみ効果が消えてしまう

どうやらブロックエディタ向けのスタイルはこのままではダメらしい。ここであらためてブロックエディタの画像ブロックのHTMLソースコードを見てみると、figure要素 > div要素 > img要素というフロントエンド側とは異なる構成になっていた。div要素はリサイズなどの機能向けのようだが、この要素が影響している可能性がありそうだ。

ここでブロックエディタ側のスタイルを次のように変更した。

.blurring > div {
	position: relative;
}
.blurring > div::after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: inset 0 0 20px 20px var( --blurring-color ),
		inset 0 0 4px 4px var( --blurring-color );
}

投稿編集ページをリロードし、画像ブロックをフォーカスしてみる。

画像ブロックのフォーカス時でもぼかし効果が消えなくなった

予想は的中したようで、これでブロックエディタの不具合を解消できた。フロントエンド側とブロックエディタ向けのスタイルは別になってしまったため、効果を調整する際はどちらかの更新漏れがないように注意しなければならない。


今月は次バージョンの6.2 Betaが公開され、ブロックエディタがiframe要素内に生成されるように変わった。この変更に伴い、admin_headやadmin_footerアクションで直接スタイルを出力してもブロックエディタには影響を与えられなくなった。今後は基本にのっとりenqueue_block_editor_assetsアクションのコールバック関数で wp_enqueue_script関数や wp_enqueue_style関数を呼び出すしかなさそうだ。


最終更新 : 2023年02月18日 10:04


お勧め

wp_authenticate(2022年1月31日 更新)

WP_User | WP_Error wp_authenticate( string $username, string $password )
ユーザー認証を行う。

wp_send_json_success(2020年12月10日 更新)

void wp_send_json_success( [ mixed $response = null [ , int $status_code = null [ , int $options = 0 ] ] ] )
AJAXリクエストの成功レスポンスとしてJSON情報を返す。

wp_oembed_get(2014年11月16日 更新)

mixed wp_oembed_get( string $url [ , mixed $args = '' ] )
oEmbedに対応したページの埋め込み用コンテンツを取得する。

setup_postdata(2014年11月16日 更新)

bool setup_postdata( stdClass $post )
投稿記事に関連するグローバル変数を設定する。

the_permalink(2018年5月27日 更新)

void the_permalink( [ mixed $post = 0 ] )
現在の投稿データのパーマリンクを表示する。