この記事は最後に更新してから1年以上経過しています。

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

説明

画像ブロックに対して見た目が変わる効果を追加しようと思い機能拡張してみた。その際、いくつかの効果は問題なかったのだが、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年03月30日 12:40


お勧め

wp_suspend_cache_addition(2023年6月8日 更新)

bool wp_suspend_cache_addition( [ bool $suspend = null ] )
キャッシュの追加を一時的に停止する。

wp_json_file_decode(2022年1月26日 更新)

mixed wp_json_file_decode( string $filename [ , array $options = array() ] )
JSONファイルをデコードする。

get_metadata_by_mid(2018年12月14日 更新)

object|bool get_metadata_by_mid( string $meta_type, int $meta_id )
IDを指定してメタデータを取得する。

human_time_diff(2019年11月18日 更新)

string human_time_diff( int $from [ , int $to = '' ] )
時間差を'5分'や'2日'のような感覚的な表現で取得する。

get_current_user_id(2013年9月18日 更新)

int get_current_user_id()
現在のログイン済みユーザーのIDを取得抽出する。