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

説明

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

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

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

フロントエンド側の画像ブロックは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関数を呼び出すしかなさそうだ。