この記事は最後に更新してから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


お勧め

標準で組み込まれたclipboard.jsを使ってみた(2019年5月15日 更新)

5.2の新機能「サイトヘルス情報」では、現状のサイト情報をクリップボードにコピーする機能がある。この機能の実装方法を調べてみると、clipboard.jsが利用されていた。

delete_term_meta(2018年5月27日 更新)

bool delete_term_meta( int $term_id, string $meta_key [ , mixed $meta_value = '' ] )
タームのメタ情報を削除する。

the_post(2018年5月27日 更新)

void the_post( )
投稿データをグローバル変数$postにロードし、関連するグローバル変数を設定する。

get_lastpostdate(2020年8月28日 更新)

string get_lastpostdate( [ string $timezone = 'server' [ , string $post_type = 'any' ] ] )
投稿記事の最終投稿日時を取得する。

is_customize_preview(2020年6月1日 更新)

bool is_customize_preview()
テーマカスタマイザーのプレビューか調べる。