Docs

Appearance

Container ​

Overview ​

The Container block is the foundation of advanced layouts in PodcasterPlus Blocks. It's a powerful, flexible wrapper that allows you to organize and style your podcast content with professional precision. Think of it as an intelligent box that can hold any other blocks while providing comprehensive responsive controls for layout, spacing, colors, and more.

What Makes the Container Block Special ​

Unlike standard WordPress group or column blocks, the PodcasterPlus Container block offers:

  • True Responsive Control: Different settings for desktop, tablet, and mobile
  • Advanced Flexbox Layout: Modern CSS flexbox with visual controls
  • Comprehensive Styling: All styling options in one organized interface
  • Smart Inheritance: Settings cascade intelligently across devices
  • Performance Optimized: Efficient CSS custom properties system

Key Features ​

Layout System ​

  • Display Modes: Traditional block or modern flexbox layouts
  • Flex Direction: Arrange content in rows, columns, or reversed
  • Alignment: Control how items align on both axes
  • Spacing: Consistent gaps between child elements

Responsive Design ​

  • Three Breakpoints: Desktop (≥1024px), Tablet (768-1023px), Mobile (≤767px)
  • Visual Inheritance: See which device values are inherited
  • Device Preview: Switch between devices in the editor
  • Smart Cascading: Desktop → Tablet → Mobile inheritance

Styling Options ​

  • Colors: Background and text colors per device
  • Borders: Width, style, color, and radius controls
  • Shadows: Elevation effects with full customization
  • Spacing: Margin and padding with linked/unlinked sides
  • Sizing: Width, height, and min/max constraints

Display Control ​

  • Visibility: Show/hide on specific devices
  • Sticky Position: Fixed positioning while scrolling
  • Z-index: Layer stacking control
  • Performance: Hidden blocks don't render

Using the Container Block ​

Adding a Container ​

  1. Click the + button in the block inserter
  2. Search for "Container" in the PodcasterPlus category
  3. Click to add the container to your page
  4. Start adding blocks inside the container

Basic Setup ​

  1. Add Content: Insert any blocks inside the container
  2. Choose Display: Select Block or Flex mode
  3. Set Layout: Configure direction and alignment (Flex mode)
  4. Apply Styling: Use the settings panels for customization

The Settings Interface ​

The Container block organizes settings into logical panels:

  1. Layout: Display mode and flexbox controls
  2. Spacing: Margin and padding settings
  3. Sizing: Dimensions and constraints
  4. Colors: Background and text colors
  5. Border: Border properties and radius
  6. Shadow: Box shadow effects
  7. Display: Visibility and sticky positioning

Layout Settings Deep Dive ​

Display Mode ​

  • Block: Traditional stacked layout (default)
  • Flex: Modern flexible box layout
  • Note: Display mode applies to all devices (not responsive)

Flexbox Controls (When Display = Flex) ​

Direction ​

Controls how items flow:

  • Row: Side by side (→)
  • Column: Stacked vertically (↓)
  • Row Reverse: Side by side, reversed (←)
  • Column Reverse: Stacked, reversed (↑)

Align Items (Cross Axis) ​

How items align perpendicular to direction:

  • Stretch: Fill container height/width
  • Start: Align to beginning
  • Center: Center alignment
  • End: Align to end
  • Baseline: Align text baselines

Justify Content (Main Axis) ​

How items distribute along the direction:

  • Start: Pack at beginning
  • Center: Center all items
  • End: Pack at end
  • Space Between: Equal space between items
  • Space Around: Equal space around items
  • Space Evenly: Equal space everywhere

Gap ​

Consistent spacing between items:

  • Set once, applies to all gaps
  • Better than individual margins
  • Responsive per device

Common Use Cases ​

Hero Section ​

Display: Flex
Direction: Column
Align: Center
Justify: Center
Min Height: 100vh (desktop), 80vh (mobile)
Padding: 60px (desktop), 30px (mobile)
Background: Brand color or gradient

Two-Column Layout ​

Display: Flex
Direction: Row (desktop), Column (mobile)
Gap: 40px (desktop), 20px (mobile)
Align: Stretch
Child 1: 60% width
Child 2: 40% width

Card Container ​

Display: Block
Padding: 30px
Background: Light gray
Border: 1px solid with 8px radius
Shadow: Medium preset
Margin Bottom: 30px

Centered Content ​

Display: Block
Max Width: 1200px
Margin: 0 auto (centers horizontally)
Padding: 0 20px (edge spacing)
Display: Flex
Direction: Row
Main Content: 70% width
Sidebar: 30% width, sticky position
Sticky Offset: 80px (for header)
Gap: 40px

Responsive Strategies ​

Mobile-First Approach ​

  1. Start with mobile layout (usually column)
  2. Enhance for tablet (maybe 2 columns)
  3. Optimize for desktop (full layout)
  4. Test at each breakpoint

Desktop-First Approach ​

  1. Design full desktop experience
  2. Simplify for tablet
  3. Stack for mobile
  4. Verify all content accessible

Inheritance Best Practices ​

  • Set base styles on desktop
  • Override only what changes
  • Let values cascade down
  • Clear to restore inheritance

Advanced Techniques ​

Nested Containers ​

Create complex layouts:

  1. Outer container for page structure
  2. Inner containers for sections
  3. Nested flex for fine control
  4. Different directions at each level

Responsive Visibility ​

Show different layouts per device:

  1. Desktop container with 3 columns
  2. Tablet container with 2 columns
  3. Mobile container with accordion
  4. Use display settings to show/hide

Performance Optimization ​

  • Hide unnecessary elements on mobile
  • Reduce shadows and effects on small screens
  • Simplify layouts for better performance
  • Test on real devices

Accessibility Patterns ​

  • Maintain logical content order
  • Ensure sufficient color contrast
  • Test keyboard navigation
  • Provide adequate touch targets

Styling Best Practices ​

Color Usage ​

  • Use theme colors for consistency
  • Test contrast ratios
  • Consider dark mode
  • Different backgrounds per device OK

Border Design ​

  • Subtle borders often work best
  • Match radius to design system
  • Thicker borders on mobile for clarity
  • Consistent styles across site

Shadow Effects ​

  • Use sparingly for performance
  • Lighter shadows on mobile
  • Consistent elevation system
  • Remove on very small screens

Spacing Systems ​

  • Use consistent scale (8px, 16px, 24px, etc.)
  • More padding on desktop, less on mobile
  • Account for touch targets
  • Test with real content

Troubleshooting Common Issues ​

Layout Not Working ​

  1. Check display mode is set to Flex
  2. Verify direction is correct
  3. Look for conflicting child styles
  4. Test in different browsers

Content Overflowing ​

  1. Check sizing constraints
  2. Review padding values
  3. Consider overflow settings
  4. Test with various content

Responsive Issues ​

  1. Clear device-specific values
  2. Check inheritance chain
  3. Use browser dev tools
  4. Test at exact breakpoints

Performance Problems ​

  1. Reduce nested containers
  2. Simplify shadow effects
  3. Optimize images inside
  4. Check for layout thrashing

Integration Tips ​

With Audio Blocks ​

The Container is perfect for player layouts:

  • Group related controls
  • Create custom players
  • Responsive player designs
  • Consistent styling

With Episode Blocks ​

Organize episode information:

  • Image and title side by side
  • Description below
  • Player controls grouped
  • Responsive adjustments

With WordPress Blocks ​

Works with any blocks:

  • Headings and paragraphs
  • Images and galleries
  • Buttons and CTAs
  • Custom HTML

Frequently Asked Questions ​

Q: What's the difference between Container and Group blocks?
A: Container offers full responsive controls, advanced flexbox options, and comprehensive styling that Group blocks lack.

Q: Can I nest Container blocks?
A: Yes, nesting is fully supported and recommended for complex layouts.

Q: Why isn't my flex layout working?
A: Ensure Display is set to Flex and check that child blocks don't have conflicting styles.

Q: How do I center content horizontally?
A: For block display: set max-width and margin: 0 auto. For flex: use justify-content: center.

Q: Can I save Container layouts as patterns?
A: Yes, create reusable patterns with your configured containers.

Q: Do hidden elements affect performance?
A: No, elements hidden via display settings don't render and don't impact performance.

Q: How do I make equal-height columns?
A: Use flex display with align-items: stretch (the default).

Best Practices Summary ​

  1. Plan Your Layout: Sketch responsive behavior before building
  2. Start Simple: Add complexity gradually
  3. Test Frequently: Check all breakpoints
  4. Use Semantic Structure: Maintain logical content order
  5. Optimize Performance: Simpler layouts on mobile
  6. Ensure Accessibility: Test with keyboard and screen readers
  7. Document Patterns: Save common layouts as reusable patterns

Getting Help ​

If you need assistance with the Container block:

  1. Check this guide for common patterns
  2. Review Styling and Components for detailed control information
  3. Visit our support forum
  4. Share your specific layout challenge

Remember: The Container block is your foundation for creating professional, responsive layouts. Master it, and you can build anything!

Was this page helpful?