説明
フレキシブルスペーサーブロックは、デバイスの画面幅（ブレイクポイント）に応じてスペーサーの高さを切り替えます。
このブロックは2つの可変ブレークポイントを持っており、スマートフォン用、タブレット用、デスクトップ用にそれぞれスペーサーの高さを調整することができます。
スペーサーの高さは個別に変更することも、一括で変更することもできます。
また、通常のスペースの代わりに「マイナススペース（ネガティブマージン）」を設定することも可能です。
このブロックは、コアのスペーサーブロックとの相互変換にも対応しています。
マイナススペースについて
マイナススペースは、スペーサーの上下にあるブロックの余白を狭くし、ブロックを重ねることも可能です。
意図しない重なりが起こった場合は、前面に表示したいブロックに fsb-style-show-front という名前の CSS クラスを追加してください。
ブロックにCSSクラスを適用するには、WordPress のエディタでブロックをクリックし、右側のブロック設定の高度な設定にチェックを入れ、CSSクラスを入力します。
リソース
スクリーンショット用画像
ライセンス: CC0 Public Domain
ソース: https://pxhere.com/ja/photo/245
スクリーンショット
ブロックエディター 
設定ページ 
マイナススペースの例 
マイナススペースの例
ブロック
このプラグインは1個のブロックを提供します。
- Flexible Spacer Add white space between blocks and customize its height for each device.
インストール
flexible-spacer-blockフォルダ全体を/wp-content/plugins/ディレクトリにアップロードします。- WordPress のプラグインメニューからプラグインを有効化してください。
FAQ
-
どのようなフィルターを使用できますか？
-
利用可能なフィルターの一覧は、Github の readme にあります。
評価
2024年5月20日
It can set margins for each screen width that cannot be set with the default block. It also supports negative margins. Easy to use.
2022年10月19日
I wish more people would release single, useful blocks like this instead of all those copy cat collections. Who really needs 5 accordion blocks?
Only other thing I’d like to see in this is a way to set default initial heights like 75px desktop | 50px tablet | 25px phone etc.
I was actually looking for a way to set a default height for the core spacer block when I stumbled on this.
2022年7月29日
マイナススペースは、スペーサーの上下にあるブロックの余白を狭くし、ブロックを重ねることも可能
2022年4月23日
Thank you very much for creating this awesome plugin. Love the plugin’s simplicity and ease of use!
2022年2月14日
I use this plugin on every site I build! An easy drop-in replacement for the spacer block.
2021年7月20日
I had a problem with the standard Spacer Block, wherein it breaks the format in mobile in our website.
With Flexible Spacer, I can designate the size of the space per mobile device!
Awesome, thank you for developing this plugin.
貢献者と開発者
変更履歴
2.6.0
- WordPress 6.8で動作確認
- アクセシビリティ: CSS トランジションのユーザー設定を尊重する
- WordPress 6.5のサポートを停止
2.5.0
- WordPress 6.7で動作確認
- WordPress 6.4のサポートを停止
2.4.0
- WordPress 6.6で動作確認
- WordPress 6.3のサポートを停止
2.3.0
- WordPress 6.5で動作確認
- 機能改善: ブロックのスタイルの調整
- 機能改善: 設定画面のスタイルの調整
- 修正: 不要な CSS クラスを削除
- WordPress 6.2のサポートを停止
2.2.0
- WordPress 6.4で動作確認
- WordPress 6.0、6.1のサポートを停止
2.1.0
- WordPress 6.3で動作確認
- 追加: ユニットのサポート
- WordPress5.9のサポートを停止
- PHP7.3のサポートを停止
2.0.0
- WordPress 6.2で動作確認
- 機能: デフォルト値設定の追加
- 機能改善: 設定ページにおけるユニット要素のフォーカススタイルを削除
- 機能改善: 設定画面でのエラーメッセージの改善
- 修正: 特定の操作でレスポンシブ設定の値が空になる
- 修正: 設定ページの文法
1.4.1
- 整理: リリースに不要なファイルを削除
1.4.0
- WordPress 6.1で動作確認
- WordPress 5.6から5.8のサポートを停止
- 修正: コアのスペーサーブロックから正しく変換されない
- 機能改善: 設定画面のスタイルの調整
1.3.0
- WordPress 6.0で動作確認
- 更新: インラインスタイルの最小化
- 追加: フィルターフック
- 更新: ブロックアイコン
- 更新: 作者名のアップデート
- 修正: WordPress 6.0の iframe エディターで CSS ファイルが読み込まれない
1.2.3
- 変更: ブロックの最小の高さを確保
- 変更: スペーサーの最小値
- 修正: WordPress 5.9.1でスペーサーの高さを変更できない
1.2.2
- 整理: リリースに含まれる不要なファイルの削除
1.2.1
- 修正: 誤ったテキストドメイン
1.2.0
- WordPress 5.9で動作確認
- 追加: レスポンシブビューを切り替えるブロックコントロール
- 変更: スクリプトのハンドル名
- 変更: ダッシュアイコンを @wordpress/icons に
- 削除: load_plugin_textdomain 関数
1.1.9
- 整理: npm パッケージのアップデートと構文チェックの実行
1.1.8
- 整理: npmパッケージのアップデート
- 削除: バンドルされた言語ファイル
1.1.7
- WordPress 5.8で動作確認
- 整理: npmパッケージのアップデート
1.1.6
- 修正: ビルドスクリプトエラー
- 修正: README.md のスクリーンショット
1.1.5
- WordPress 5.7で動作確認
- 整理: デプロイ手順のアップデート (github actions)
- 整理: npm パッケージの更新と開発環境の整理
1.1.4
- PHP 8 でテスト済み
1.1.3
- 修正: アンインストール時にプラグインの設定値が削除されない問題
1.1.2
- 修正: PHP 8でのアンインストールエラーに関する問題
1.1.1
- 追加: マイナススペースに関する説明文
1.1.0
- 追加: マイナススペースの設定
1.0.0
- 初回リリース