Container V3

Introduction

The Container Block is a powerful layout block that serves as the foundation for creating complex page layouts in WordPress. It goes beyond the standard Group block by offering advanced styling options, pre-built layout variations, background media support, and responsive controls. Use it to create sections, columns, grids, and sophisticated page structures with ease.

How to Add or Use the Block in the Gutenberg Editor

• Adding the Block
  • Click the “+” button in the editor to open the block inserter
  • Search for “Container” or navigate to the Spectra category
  • Click on the Container Block to add it

• Choosing a Layout Variation
  • Upon adding, you’ll see a variation picker with 12 pre-built layouts
  • Options include: 1-column, 2-column (50-50), 3-column, 4-column, and complex grids
  • Select a variation or start with a blank container
  • You can change the layout later using the toolbar
• Adding Content to Container
  • Click inside the container to add blocks
  • Use the “+” button to add any block type
  • Containers can be nested for complex layouts

Block Styling Options

Layout Settings

Option	Description	Available Settings
HTML Tag	Semantic HTML element	div, header, footer, main, article, section, aside, nav, figure, figcaption, summary, a (link)
Layout Type Flow	Flex	constrained
Direction	Flex direction (when using Flex)	Row, Column
Wrap	Allow items to wrap	On/Off toggle
Justify Content	Horizontal alignment	Start, Center, End, Space Between, Space Around
Align Items	Vertical alignment	Start, Center, End, Stretch
Gap	Space between child elements	0-100px with responsive controls
Allow Sizing on Children	Enable individual child sizing	On/Off toggle

Dimensions

Option	Description	Available Settings
Width	Container width	Auto, px, %, vw, em, rem (Responsive)
Height	Container height	Auto, px, %, vh, em, rem (Responsive)
Min Width	Minimum width constraint	px, %, vw, em, rem (Responsive)
Min Height	Minimum height constraint	px, %, vh, em, rem (Responsive)
Max Width	Maximum width constraint	px, %, vw, em, rem (Responsive)
Max Height	Maximum height constraint	px, %, vh, em, rem (Responsive)
Overflow	Content overflow behavior	Visible, Hidden, Auto

Background Options

Option	Description	Available Settings
Background Type	Type of background	Color, Gradient, Image, Video
Background Color	Solid color background	Color picker with opacity
Background Gradient	Gradient background	Linear/Radial gradient editor
Background Image	Image background	Media library upload
Background Video	Video background	Media library upload (MP4)
Background Position	Media position	Multiple position presets
Background Size	Media sizing	Cover, Contain, Auto
Background Repeat	Media repeat pattern	No-repeat, Repeat, Repeat-X, Repeat-Y
Background Overlay	Overlay on media	Color with opacity

Styling

Option	Description	Available Settings
Text Color	Default text color for content	Color picker
Link Color	Link color within container	Color picker
Border	Container border	Width, Style, Color, Radius (Responsive)
Box Shadow	Container shadow	Multiple shadow layers
Padding	Internal spacing	Top, Right, Bottom, Left (Responsive)
Margin	External spacing	Top, Right, Bottom, Left (Responsive)

Advanced Features

Option	Description	Available Settings
Make Container a Link	Entire container becomes clickable	URL, Target, Rel attributes
Hover States	Hover effects	Background color/gradient, Text color
Custom CSS Class	Additional CSS classes	Text field
Anchor	HTML anchor for linking	Text field

Available Variations

1. One Column – Full-width single column
2. Two Columns 50-50 – Equal width columns
3. Three Columns – Equal thirds
4. Four Columns – Equal quarters
5. Two Column Two Row – Grid with stacked columns
6. Four Columns 25-75 – Narrow left, wide right
7. Three Column Two Row – Complex grid layout
8. Four Columns 25-50-25 – Wide center with narrow sides
9. Four Columns 75-25 – Wide left, narrow right
10. Four Columns 75-25-25-75 – Alternating wide/narrow
11. Two Columns 50-50-100 – Two columns with full-width bottom
12. Four Columns 25-75-75-25 – Complex alternating layout

Device-Specific Settings

Setting	Desktop	Tablet	Mobile
Width/Height	✓	✓	✓
Min/Max Dimensions	✓	✓	✓
Padding	✓	✓	✓
Margin	✓	✓	✓
Gap	✓	✓	✓
Border	✓	✓	✓
Typography	✓	✓	✓

Background Media

Using Image Backgrounds

1. Select the Container Block
2. In Background settings, choose “Image”
3. Upload or select an image from Media Library
4. Adjust position, size, and repeat settings
5. Add overlay color if needed for text readability

Using Video Backgrounds

1. Select the Container Block
2. In Background settings, choose “Video”
3. Upload MP4 video (recommended: <10MB, no audio)
4. Video will autoplay and loop
5. Add overlay for better text visibility

Important Settings

Critical Configuration

1. HTML Tag Selection – Choose semantic tags for better SEO and accessibility
2. Overflow Control – Set to “Hidden” when using border radius with backgrounds
3. Responsive Dimensions – Always check mobile appearance
4. Background Performance – Optimize images/videos before upload
5. Accessibility – Ensure sufficient contrast with background media

Tips and Best Practices

• Consistent Spacing: Use the same padding/margin values across similar containers
• Mobile-First: Design for mobile and enhance for larger screens
• Performance: Compress background media, use WebP for images
• Semantic HTML: Use appropriate tags (header, main, footer, section)
• Accessibility: Test color contrast when using background images

Common Use Cases

1. Hero Sections: Full-width container with video background
2. Content Sections: Centered container with max-width
3. Multi-Column Layouts: Services, features, testimonials
4. Call-to-Action Blocks: Container as link with hover effects
5. Image/Text Combinations: Two-column layouts with media

Block Toolbar Options

• Change Layout: Switch between layout variations
• Transform: Convert to Group or other compatible blocks
• Alignment: Wide, Full width options
• Drag Handle: Reposition the container
• Options Menu: Additional settings and actions

Troubleshooting

Common Issues

Background video not playing?

• Check file format (MP4 recommended)
• Ensure file size is reasonable (<10MB)
• Verify browser supports video autoplay

Border radius not working with backgrounds?

• Set Overflow to “Hidden” in container settings
• This clips the background to the border shape

Content overflowing container?

• Check Overflow setting (set to Auto for scrollbars)
• Verify height constraints aren’t too restrictive
• Review responsive settings for mobile

Nested containers not working?

• Ensure parent container has proper layout settings
• Check that child containers have appropriate dimensions
• Verify flex/grid settings allow for nesting

Advanced Features

Container as Link

1. Change HTML tag to “a” (link)
2. Enter URL in the link field
3. Set target (new tab) and rel attributes
4. Entire container becomes clickable
5. Add hover effects for better UX

Link Attributes

• URL: Full URL or relative path
• Target: _blank for new tab, _self for same window
• Rel: nofollow, noopener, noreferrer, sponsored for SEO/security
• Hover States: Background and text color changes on hover
• Accessibility: Proper ARIA attributes automatically added

Hover Effects

Configure different styles for hover state:

• Background color/gradient change
• Text color change
• Smooth transitions
• Works with container links

Available Extensions

Animation Extension

The Container Block supports all Spectra animations:

• Fade effects
• Slide animations
• Zoom effects
• Custom timing and delays

Frequently Asked Questions

Q: What’s the difference between Container and Group blocks? 
A: Container offers advanced features like video backgrounds, layout variations, hover states, dimension controls, and can act as a link.

Q: Can I nest containers? 
A: Yes! Containers can be nested to create complex layouts. Each container maintains its own settings.

Q: How do I make a full-height section? 
A: Set Height to 100vh in the dimension settings. Consider using Min Height for better mobile experience.

Q: Can I use Container for headers/footers? 
A: Absolutely! Change the HTML tag to ‘header’ or ‘footer’ for semantic correctness.

Q: Why isn’t my background video showing on mobile? 
A: Many mobile browsers restrict video autoplay. Consider using a fallback image.

Compatibility and Requirements

System Requirements

• WordPress: 6.6.0 or higher
• PHP: 8.1 or higher
• Browser: Modern browsers with CSS Grid/Flexbox support

Performance Tips

• Optimize background images (use WebP format)
• Keep video backgrounds under 10MB
• Use lazy loading for off-screen containers
• Minimize nesting depth for better performance
• Enable background overlay conditionally to reduce CSS output
• Consider using CSS Grid over complex nested Flex layouts for better performance