Flexible Spacer Block

説明

フレキシブルスペーサーブロックは、デバイスの画面幅(ブレイクポイント)に応じてスペーサーの高さを切り替えます。
このブロックは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.

インストール

  1. flexible-spacer-block フォルダ全体を /wp-content/plugins/ ディレクトリにアップロードします。
  2. 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年4月23日
Thank you very much for creating this awesome plugin. Love the plugin’s simplicity and ease of use!
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.
8件のレビューをすべて表示

貢献者と開発者

Flexible Spacer Block はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Flexible Spacer Block” は1ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Flexible Spacer Block” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

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

  • 初回リリース