Spacer Block

The Spacer Block is a simple yet essential layout tool that allows you to add precise vertical spacing between other blocks on your WordPress pages. This block provides responsive height controls and advanced visibility options, making it perfect for creating consistent spacing throughout your design while maintaining complete control over how content appears across different devices.

Key Features

The Spacer Block includes a comprehensive set of features for precise layout control:

Responsive Height Control: Set different spacing heights for desktop, tablet, and mobile devices

Visual Editor Indicator: Clear visual representation in the block editor with a distinctive spacer icon

Visibility Controls: Hide the spacer on specific devices when needed

HTML Anchor Support: Create linkable sections with custom anchor IDs

Custom CSS Classes: Add additional CSS classes for advanced styling

Minimal Performance Impact: Lightweight implementation with no external dependencies

Flexible Spacing Range: Heights from 1px to 500px with precise 1px increments

Adding the Spacer Block

To add a Spacer Block to your page:

Click the “+” icon to open the block inserter
Search for “Spacer” or navigate to the “DigiBlocks” category
Click on the “Spacer” block to add it to your page
The block will appear with a default height and visual indicator

The spacer will display as a gray area with a spacer icon in the editor, making it easy to identify and adjust while editing your content.

Height Configuration

Responsive Height Control

The primary function of the Spacer Block is controlling vertical spacing through height adjustments. The block features responsive controls allowing you to set different heights for various screen sizes:

Desktop Height: Default spacing for screens 992px and wider (default: 80px)

Tablet Height: Spacing for screens between 768px and 991px (default: 60px)

Mobile Height: Spacing for screens 767px and smaller (default: 40px)

Setting Heights

To adjust the spacer height:

Select the Spacer Block
In the block inspector, locate the “Height” control under the “Options” tab
Use the range slider or input field to set the desired height
Switch between device views to set responsive heights
Heights can range from 1px to 500px in 1px increments

Responsive Behavior

The Spacer Block automatically applies the appropriate height based on the user’s screen size:

Desktop users see the desktop height setting
Tablet users see the tablet height setting, or desktop height if tablet isn’t set
Mobile users see the mobile height setting, or the next available size up

This ensures optimal spacing across all devices without requiring separate blocks for different screen sizes.

Advanced Features

Visibility Controls

The Spacer Block includes device-specific visibility controls, allowing you to hide spacing on certain screen sizes when needed.

Available Options:

Hide on Desktop: Removes spacing on desktop screens (992px and wider)
Hide on Tablet: Removes spacing on tablet screens (768px to 991px)
Hide on Mobile: Removes spacing on mobile screens (767px and smaller)

Editor Behavior: Hidden spacers appear with reduced opacity (50%) in the editor, making them visible for editing while indicating they’re hidden on the frontend.

Use Cases for Visibility Controls:

Remove excessive spacing on mobile devices for better content density
Hide desktop-specific spacing that isn’t needed on smaller screens
Create device-specific layout adjustments without duplicate content

HTML Anchor

The HTML anchor feature allows you to create direct links to specific sections of your page:

Setting an Anchor:

Navigate to the “Advanced” tab in the block inspector
Enter a unique anchor name in the “HTML anchor” field
Use words without spaces (e.g., “section-break”, “content-divider”)

Using Anchors:

Link directly to the section: yoursite.com/page#section-break
Create table of contents links
Enable smooth scrolling navigation
Support accessibility tools that rely on page structure

Additional CSS Classes

Add custom CSS classes for advanced styling or theme integration:

Adding Classes:

Go to the “Advanced” tab in the block inspector
Enter class names in the “Additional CSS class(es)” field
Separate multiple classes with spaces

Common Use Cases:

Theme-specific styling integration
Custom animations or transitions
Third-party plugin compatibility
Advanced layout control

Block Inspector Overview

The Spacer Block inspector is organized into two main tabs:

Options Tab

Height Control: Responsive range slider for setting spacer heights across devices

This tab focuses on the core functionality of creating and adjusting vertical spacing.

Advanced Tab

Visibility Settings: Device-specific hide controls with editor preview

HTML Anchor: Field for creating linkable page sections

Additional CSS Classes: Input for custom CSS class integration

The advanced tab provides additional functionality for complex layouts and technical implementations.

Best Practices

Spacing Consistency

Use Consistent Increments: Stick to multiples of 10px or 20px for visual consistency

Create a Spacing System: Establish standard spacing values (e.g., 20px, 40px, 60px, 80px)

Document Your System: Keep track of spacing standards for your site or client projects

Test Across Devices: Always preview spacing adjustments on different screen sizes

Performance Considerations

Minimize Overuse: While lightweight, excessive spacers can make content management complex

Combine with Padding: Consider using block padding settings instead of spacers when appropriate

Group Related Content: Use spacers to separate content sections rather than individual elements

Responsive Design

Mobile-First Approach: Start with mobile spacing and adjust upward for larger screens

Content Density: Use smaller spacing on mobile to maximize content visibility

Visual Hierarchy: Larger spacing can emphasize section breaks on desktop

Touch Targets: Ensure adequate spacing around interactive elements on mobile

Common Use Cases

Content Section Separation

Use spacers to create clear breaks between different content sections:

Between hero sections and main content
Separating testimonials from service descriptions
Creating breathing room around call-to-action sections

Layout Rhythm

Establish consistent vertical rhythm throughout your pages:

Uniform spacing between similar content blocks
Proportional spacing that scales with content importance
Visual balance in multi-column layouts

Design System Integration

Integrate spacers with your overall design system:

Match spacing to your typography scale
Coordinate with grid systems
Maintain consistency across different page types

Responsive Layout Adjustments

Handle layout differences across devices:

Reduce spacing on mobile for content density
Increase spacing on desktop for visual breathing room
Hide unnecessary spacing on specific devices

Technical Considerations

CSS Generation

The Spacer Block generates minimal, efficient CSS:

Only height and visibility styles are output
Responsive media queries are automatically handled
No external dependencies or large CSS files

Accessibility

The spacer maintains accessibility standards:

Proper semantic structure
Screen reader compatibility
Keyboard navigation support
ARIA compliance

Theme Compatibility

The Spacer Block works with any WordPress theme:

No theme-specific dependencies
Respects theme spacing conventions
Integrates with existing CSS frameworks
Supports custom theme styles

Troubleshooting

Spacing Not Visible

If spacing doesn’t appear as expected:

Check that the height value is set above 0px
Verify the block isn’t hidden on the current device
Ensure other blocks aren’t using negative margins that overlap the spacer
Check for theme CSS that might be overriding spacer styles

Responsive Issues

If responsive spacing isn’t working correctly:

Confirm you’ve set heights for all desired device sizes
Test on actual devices or browser developer tools
Check for theme CSS that might interfere with responsive behavior
Verify viewport meta tag is present in your theme

Editor Display Problems

If the spacer doesn’t display properly in the editor:

Check for theme editor styles that might conflict
Try deactivating other plugins temporarily
Clear browser cache and refresh the editor
Ensure you’re using a supported browser version

The Spacer Block provides essential layout control with minimal complexity, making it an indispensable tool for creating well-designed, responsive WordPress pages with proper spacing and visual hierarchy.