Title: Flexible Spacer Block
Author: Aki Hamano
Published: <strong>28 ianuarie 2021</strong>
Last modified: 3 martie 2026

---

Caută module

![](https://ps.w.org/flexible-spacer-block/assets/banner-772x250.png?rev=2658109)

![](https://ps.w.org/flexible-spacer-block/assets/icon-256x256.png?rev=2658109)

# Flexible Spacer Block

 De [Aki Hamano](https://profiles.wordpress.org/wildworks/)

[Descarcă](https://downloads.wordpress.org/plugin/flexible-spacer-block.2.8.0.zip)

[Previzualizează live](https://ro.wordpress.org/plugins/flexible-spacer-block/?preview=1)

 * [Detalii](https://ro.wordpress.org/plugins/flexible-spacer-block/#description)
 * [Recenzii](https://ro.wordpress.org/plugins/flexible-spacer-block/#reviews)
 *  [Instalare](https://ro.wordpress.org/plugins/flexible-spacer-block/#installation)
 * [Dezvoltare](https://ro.wordpress.org/plugins/flexible-spacer-block/#developers)

 [Suport](https://wordpress.org/support/plugin/flexible-spacer-block/)

## Descriere

Flexible Spacer Block switches the height of the spacer according to the device 
screen width (breakpoints).
 This block has two variable breakpoints, and you can
adjust the height of the spacer for smartphones, tablets, and desktops respectively.
The height of the spacers can be changed individually or in batches. Also available
to set „negative space (negative margin)” instead of the normal space. And this 
block supports transform from and to core spacer block.

### About negative space

„**Negative space**” narrows the margins both blocks above and below the spacer,
and it is also possible to overlap the blocks.
 If unintended overlap occurs, add
a CSS class named „**fsb-style-show-front**” to the block you want to show in the
front. To apply the CSS class to the block, click on the block on WordPress editor,
and check the block settings on the right for the Advanced setting ,then enter the
CSS class.

### Resources

#### Image for screenshot

License: CC0 Public Domain
 Source: https://pxhere.com/ja/photo/245

## Capturi ecran

 * [[
 * On Block Editor
 * [[
 * Setting page
 * [[
 * Negative space example
 * [[
 * Negative space example

## Blocuri

Acest modul oferă 1 bloc.

 *   Flexible Spacer Add white space between blocks and customize its height for
   each device.

## Instalare

 1. Upload the `flexible-spacer-block` folder to the `/wp-content/plugins/` directory.
 2. Activate the plugin through the \’Plugins\’ menu in WordPress.

## Întrebări frecvente

### What filters can I use?

You can find a list of the available filters in the [Github readme](https://github.com/t-hamano/flexible-spacer-block#filters).

## Recenzii

![](https://secure.gravatar.com/avatar/b8e2aa21c51a17fe1ba602fe5f95168dd113645fb5e86388550a1d98dd8e6352?
s=60&d=retro&r=g)

### 󠀁[it is necessary for FES](https://wordpress.org/support/topic/it-is-necessary-for-fes/)󠁿

 [megane9988](https://profiles.wordpress.org/megane9988/) 20 mai 2024

It can set margins for each screen width that cannot be set with the default block.
It also supports negative margins. Easy to use.

![](https://secure.gravatar.com/avatar/dde0f642e99597f93d76ca69479f5f881e8a90bec27fbeb7dd3c59aa7bfa9b27?
s=60&d=retro&r=g)

### 󠀁[Very nice](https://wordpress.org/support/topic/very-nice-1825/)󠁿

 [jhnpldng](https://profiles.wordpress.org/jhnpldng/) 19 octombrie 2022

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.

![](https://secure.gravatar.com/avatar/c29a29ad4ebd68eb76991cb066ad387a9be1185e775ebcef13dff161ebe1b9f6?
s=60&d=retro&r=g)

### 󠀁[マイナススペースは便利！](https://wordpress.org/support/topic/%e3%83%9e%e3%82%a4%e3%83%8a%e3%82%b9%e3%82%b9%e3%83%9a%e3%83%bc%e3%82%b9%e3%81%af%e4%be%bf%e5%88%a9%ef%bc%81/)󠁿

 [kh777](https://profiles.wordpress.org/kh777/) 29 iulie 2022

マイナススペースは、スペーサーの上下にあるブロックの余白を狭くし、ブロックを重ねる
ことも可能

![](https://secure.gravatar.com/avatar/6fbb8454fb8c9dbc8dd849faa7f1f854a6b55bdadfc662a93d80d683893f6e58?
s=60&d=retro&r=g)

### 󠀁[Amazing!](https://wordpress.org/support/topic/amazing-3455/)󠁿

 [Jan Pencik](https://profiles.wordpress.org/janpencik/) 23 aprilie 2022

Thank you very much for creating this awesome plugin. Love the plugin’s simplicity
and ease of use!

![](https://secure.gravatar.com/avatar/c946ead5be748a2361948be569877a172434feb05b1c035dbe36213b46e8278e?
s=60&d=retro&r=g)

### 󠀁[Those responsive features core forgot!](https://wordpress.org/support/topic/those-responsive-features-core-forgot/)󠁿

 [philhoyt](https://profiles.wordpress.org/philhoyt/) 14 februarie 2022

I use this plugin on every site I build! An easy drop-in replacement for the spacer
block.

![](https://secure.gravatar.com/avatar/c6e2227fcee2e1c4532f3ab70e266945bd7d157ef823c59810c94805df7c833e?
s=60&d=retro&r=g)

### 󠀁[Fix My Problem with Mobile View](https://wordpress.org/support/topic/fix-my-problem-with-mobile-view/)󠁿

 [A1234578](https://profiles.wordpress.org/e5223959880/) 20 iulie 2021

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.

 [ Citește toate cele 8 recenzii ](https://wordpress.org/support/plugin/flexible-spacer-block/reviews/)

## Contributori și dezvoltatori

„Flexible Spacer Block” este un software open-source. La acest modul au contribuit
următoarele persoane.

Contributori

 *   [ Aki Hamano ](https://profiles.wordpress.org/wildworks/)

„Flexible Spacer Block” a fost tradus în 1 locală. Mulțumim [traducătorilor](https://translate.wordpress.org/projects/wp-plugins/flexible-spacer-block/contributors)
pentru contribuția lor.

[Tradu „Flexible Spacer Block” în limba ta.](https://translate.wordpress.org/projects/wp-plugins/flexible-spacer-block)

### Te interesează dezvoltarea?

[Răsfoiește codul](https://plugins.trac.wordpress.org/browser/flexible-spacer-block/),
vezi [depozitarul SVN](https://plugins.svn.wordpress.org/flexible-spacer-block/),
sau abonează-te la [jurnalul de dezvoltare](https://plugins.trac.wordpress.org/log/flexible-spacer-block/)
prin [RSS](https://plugins.trac.wordpress.org/log/flexible-spacer-block/?limit=100&mode=stop_on_copy&format=rss).

## Istoric modificări

#### 2.8.0

 * Tested to WordPress 7.0
 * Drop support for WordPress 6.8
 * Enhancement: Polish settings page style

#### 2.7.0

 * Tested to WordPress 6.9
 * Drop support for WordPress 6.6 and 6.7
 * Update: block icon and toolbar icon
 * Enhancement: Polish settings sidebar layout
 * Enhancement: Highlight active spacer
 * Accessibility: Add aria-label to controls

#### 2.6.0

 * Tested to WordPress 6.8
 * Accessibility: Respect user preference for CSS transitions
 * Drop support for WordPress 6.5

#### 2.5.0

 * Tested to WordPress 6.7
 * Drop support for WordPress 6.4

#### 2.4.0

 * Tested to WordPress 6.6
 * Drop support for WordPress 6.3

#### 2.3.0

 * Tested to WordPress 6.5
 * Enhancement: Polish block style
 * Enhancement: Polish settings page style
 * Fix: Remove unnecessary CSS class
 * Drop support for WordPress 6.2

#### 2.2.0

 * Tested to WordPress 6.4
 * Drop support for WordPress 6.0, 6.1

#### 2.1.0

 * Tested to WordPress 6.3
 * Add: unit support
 * Drop support for WordPress5.9
 * Drop support for PHP7.3

#### 2.0.0

 * Tested to WordPress 6.2
 * Feature: Add default values setting
 * Enhancement: Remove focus style for unit elements on the setting page
 * Enhancement: Improve error messages on the setting page
 * Fix: Responsive Setting value is empty for certain operations
 * Fix: grammer in the setting page

#### 1.4.1

 * Clean: Remove files not needed for the release

#### 1.4.0

 * Tested to WordPress 6.1
 * Drop support for WordPress 5.6 through 5.8
 * Fix: Not converting correctly from core spacer block
 * Enhancement: Polish style in the setting page

#### 1.3.0

 * Tested to WordPress 6.0
 * Update: Minify inline styles
 * Add: filter hooks
 * Update: block icon
 * Update: author name
 * Fix: CSS files are not loaded in the iframe editor on WordPress 6.0

#### 1.2.3

 * Change: Ensure minimum height of the block
 * Change: Minimum value of the spacer
 * Fix: Unable to change the height of spacer in WordPress 5.9.1

#### 1.2.2

 * Clean: Remove unnecessary file included in the release

#### 1.2.1

 * Fix: Wrong text domain

#### 1.2.0

 * Tested to WordPress 5.9
 * Add: Block control to change responsive view
 * Change: Scripts handle name
 * Change: dashicons to @wordpress/icons
 * Remove: load_plugin_textdomain function

#### 1.1.9

 * Clean: Update npm packages and run a lint check

#### 1.1.8

 * Clean: Update npm packages
 * Remove: Bundled language files

#### 1.1.7

 * Tested to WordPress 5.8
 * Clean: Update npm packages

#### 1.1.6

 * Fix: build script error
 * Fix: README.md screenshot

#### 1.1.5

 * Tested to WordPress 5.7
 * Clean: Update deploy flow (github actions)
 * Clean: Update npm packages and organize development env

#### 1.1.4

 * Tested to PHP 8

#### 1.1.3

 * Fix: Problem about plugin configuration values are not deleted upon uninstallation

#### 1.1.2

 * Fix: Problem about uninstallation error in PHP 8

#### 1.1.1

 * Add: Description about negative space

#### 1.1.0

 * Add: Negative space setting

#### 1.0.0

 * Initial release

## Meta

 *  Versiunea **2.8.0**
 *  Ultima actualizare **Acum 3 luni**
 *  Instalări active: **4.000+**
 *  Versiune WordPress ** 6.9 sau mai recentă **
 *  Testat până la **7.0**
 *  Versiune PHP ** 8.0 sau mai recentă **
 *  Limbi
 * [English (US)](https://wordpress.org/plugins/flexible-spacer-block/) și [Japanese](https://ja.wordpress.org/plugins/flexible-spacer-block/).
 *  [Tradu în limba ta](https://translate.wordpress.org/projects/wp-plugins/flexible-spacer-block)
 * Etichete
 * [block](https://ro.wordpress.org/plugins/tags/block/)[gutenberg](https://ro.wordpress.org/plugins/tags/gutenberg/)
   [responsive](https://ro.wordpress.org/plugins/tags/responsive/)[spacer](https://ro.wordpress.org/plugins/tags/spacer/)
 *  [Vizualizare avansată](https://ro.wordpress.org/plugins/flexible-spacer-block/advanced/)

## Evaluări

 5 din 5 stele.

 *  [  8 5 – recenzii (stele)     ](https://wordpress.org/support/plugin/flexible-spacer-block/reviews/?filter=5)
 *  [  0 4 – recenzii (stele)     ](https://wordpress.org/support/plugin/flexible-spacer-block/reviews/?filter=4)
 *  [  0 3 – recenzii (stele)     ](https://wordpress.org/support/plugin/flexible-spacer-block/reviews/?filter=3)
 *  [  0 2 – recenzii (stele)     ](https://wordpress.org/support/plugin/flexible-spacer-block/reviews/?filter=2)
 *  [  0 1 – recenzii (stele)     ](https://wordpress.org/support/plugin/flexible-spacer-block/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/flexible-spacer-block/reviews/#new-post)

[Vezi toate recenziile](https://wordpress.org/support/plugin/flexible-spacer-block/reviews/)

## Contributori

 *   [ Aki Hamano ](https://profiles.wordpress.org/wildworks/)

## Suport

Ai ceva de zis? Ai nevoie de ajutor?

 [Vezi forumul pentru suport](https://wordpress.org/support/plugin/flexible-spacer-block/)

## Donează

Vrei să sprijini dezvoltarea acestui modul?

 [ Donează pentru acest modul ](https://www.paypal.me/thamanoJP)