説明
ReformBox は WordPress の Lightbox 機能を画像ブロック以外にも拡張します。現在、グループブロック、段落ブロック、ポスター画像を設定した動画ブロックに対応しています。画像ブロックの Lightbox はクリックで拡大 とサイドバーの切り替えが同期されます。
対応ブロック:
- 画像ブロック – WordPress コアの Lightbox を使用(ReformBox は
クリックで拡大を切り替え) - 動画ブロック – ポスター画像を設定すると Lightbox で表示(ポスター画像をクリック)
- グループブロック – 「
同一」モード(プレビューとモーダルで同じ内容を表示)と「分割」モード(プレビューとモーダルの表示を分ける)に対応 - 段落ブロック – クリックで Lightbox 表示
特徴:
- ブロックエディターの操作だけで Lightbox を使用可能
- 画像ブロック Lightbox 連携(
クリックで拡大) - Lightbox のコア準拠オーバーレイ構造
- Core-aligned zoom animation
- ESC キーやオーバーレイクリックで閉じる
- アクセシビリティ対応(ARIA 属性、フォーカス管理、キーボード操作)
- プレビュー / モーダルの個別管理によるグループ分割モード
- 安全な分割フォールバック: モーダルが未設定の場合はプレビューの内容を使用
- 必要なときのみ CSS / JS を読み込む(遅延読み込み)
- 動画の Lightbox は開くまで preload / autoplay を遅延
- コアの Lightbox の描画を上書きせずに統合
- 「設定 > ReformBox」で、オーバーレイの背景色と不透明度を全体設定できます
- プラグイン一覧の行に「設定」リンクが表示され、すぐにアクセスできます
- 軽量で高パフォーマンス
インストール
- WordPress 管理画面で「プラグイン > 新規追加」を開く
- 「
ReformBox」を検索 - 「
今すぐインストール」をクリックし、その後「有効化」をクリック - ブロックエディターを開き、対応しているブロックを選択
- ブロック設定パネルで ReformBox を有効(画像ブロックの場合は「
クリックで拡大」を使用)
動画ブロックでは、ReformBox を有効にする前にブロック設定でポスター画像を追加してください。
FAQ
-
ReformBox はコアの画像ブロックの Lightbox を置き換えますか ?
-
いいえ。
クリックで拡大の動作は WordPress コアの Lightbox に委ねられます。ReformBox はコアの Lightbox を拡張して、テキスト、動画、他コンテンツを共通の仕様のように扱えるようにします。画像ブロックの場合、ReformBox のサイドバーの切り替えは
クリックで拡大設定を更新します。クリック動作やオーバーレイの描画は引き続き WordPress コアが処理します。 -
なぜ動画ブロックの Lightbox にはポスター画像が必要ですか ?
-
動画ブロックでは、ポスター画像をページ上のクリックトリガーとして使用し、動画本体はオーバーレイ内で読み込まれます。ポスター画像が設定されていない場合、ReformBox は動画 Lightbox の切り替えを無効のままにします。
-
グループの分割モードはどのように動作しますか ?
-
グループブロックで ReformBox を有効にし、「
表示モード」を「分割」に切り替えます。その親グループ内で、直下の子グループブロックを「プレビュー」「モーダル」「プレビューとモーダル(両方)」に設定します。Preview content is rendered in-page, Modal content is rendered inside the lightbox overlay, and unassigned child Groups (none) are rendered in both. If modal content is still empty, ReformBox automatically falls back to Preview content.
Slot Type controls are shown only on direct child Group blocks of the split parent. -
ReformBox のオーバーレイの見た目はどこで変更できますか ?
-
Open
Settings > ReformBoxin WordPress Admin. You can set the ReformBox overlay background color and opacity there.
The same settings screen is also linked from the plugin row action (Plugins > ReformBox > Settings).
貢献者と開発者
変更履歴
0.3.5
- Preserved
inertattributes owned by themes, WordPress core, or other plugins when a ReformBox lightbox closes - Expanded the focus trap to media controls, iframes, summary elements, and editable content while excluding disabled, hidden, inert, and negative-tabindex elements
- Updated development dependencies to reduce known build-tool vulnerabilities; the distributed WordPress plugin continues to have no runtime npm dependencies
0.3.4
- Verified against WordPress 7.1 and updated the tested-up-to version
- Made the page behind an open lightbox inert, so screen readers and keyboard focus stay inside the dialog (same approach as the core image lightbox)
- Fixed the overlay opacity setting being ignored on pages that also load core’s image lightbox styles; video overlays could turn fully opaque there
- Fixed lightbox dialogs being nearly edge-to-edge on phone widths; the gutter is now a consistent 16px at every viewport width
- Fixed short content collapsing into a very narrow dialog box
- Added WordPress 7.1’s
wp-lightbox-close-buttonclass to the close button so it keeps matching the core lightbox design
0.3.3
- Unified ReformBox overlay controls into a single background color + opacity setting
- Improved consistency of overlay background rendering across ReformBox lightboxes
- Kept WordPress core lightbox appearance override separate from ReformBox overlay controls
0.3.2
- Improved overlay styling and close behavior to avoid unintended interactions with page content and WordPress core lightbox instances
0.3.1
- Clarified Image and Video lightbox behavior in the plugin documentation
0.3.0
- Improved internal code quality and release preparation for the plugin
0.2.0
- Added Group split mode and refined lightbox behavior for content and media blocks
0.1.0
- Initial release
- Group block as lightbox container
- Image/Video block self-lightbox
- Paragraph block as self-lightbox
- Core-aligned zoom animation
- Keyboard and accessibility support