Play Button Block User Guide

Overview #

The Play Button block is the primary control for podcast audio playback, providing an intuitive play/pause interface with comprehensive styling options. As the heart of the atomized audio player system, it coordinates with other audio blocks to create a seamless listening experience. This block features multiple icon styles, responsive design controls, and full accessibility support.

Key Features #

Audio Control #

• One-Click Playback: Simple play/pause functionality
• State Synchronization: Works with all audio blocks
• Loading States: Visual feedback during audio loading
• Error Recovery: Click to retry on loading failures

Icon Customization #

• Play Icons: Four styles (outline, solid, circle, circle-solid)
• Pause Icons: Four matching pause styles
• Size Control: Scalable from 12px to 64px
• Smooth Transitions: State changes with visual feedback

Responsive Design #

• Device-Specific Styling: Different looks per device
• Color Controls: Icon and background colors with hover states
• Spacing Options: Margin and padding per breakpoint
• Border & Shadow: Visual enhancement options

Display Features #

• Device Visibility: Show/hide on specific screens
• Sticky Positioning: Float button while scrolling
• Print Control: Manage print visibility
• Performance: Hidden buttons don’t affect layout

Understanding the Play Button #

How It Works #

The Play Button is the main control for your podcast player:

1. Episode Selection: Requires episode selection first
2. Audio Loading: Automatically loads episode audio
3. State Management: Coordinates with other blocks
4. Visual Feedback: Shows loading, playing, paused states

Audio States #

Stopped/Paused State #

• Shows selected play icon
• Ready to start playback
• Button enabled and clickable
• Default starting state

Playing State #

• Shows selected pause icon
• Audio actively playing
• Click to pause playback
• Synchronized across blocks

Loading State #

• Shows spinning loader
• Audio buffering/loading
• Button temporarily disabled
• Automatic when clicked

Error State #

• Shows error icon
• Audio failed to load
• Click to retry loading
• Clear error messaging

Using the Play Button Block #

Adding the Block #

1. Ensure an episode is selected via Episode Selector
2. Click the + button in the block editor
3. Search for “Play Button”
4. Click to insert the block
5. Block is ready to use immediately

Basic Configuration #

1. Choose Play Icon: Select from 4 styles
2. Choose Pause Icon: Match or contrast with play
3. Set Icon Size: Adjust for your design
4. Style the Button: Use responsive controls
5. Test Playback: Preview functionality

The Settings Panels #

Play Settings #

• Play Icon: Choose from 4 icon styles
• Play (outline triangle)
• Play Solid (filled triangle)
• Play Circle (circle with triangle)
• Play Circle Solid (filled circle)
• Pause Icon: Choose from 4 icon styles
• Pause (outline bars)
• Pause Solid (filled bars)
• Pause Circle (circle with bars)
• Pause Circle Solid (filled circle)
• Icon Size: 12px to 64px slider

Spacing #

• Margin: Outer spacing around button
• Padding: Inner spacing (button padding)
• Linked Sides: Toggle for uniform spacing
• Device-Specific: Different per breakpoint

Sizing #

• Width/Height: Button dimensions
• Min/Max Width: Boundary constraints
• Min/Max Height: Vertical constraints
• Auto Sizing: Leave empty for icon-based size

Colors #

• Background: Button background color
• Background Hover: Color on mouse over
• Icon: Icon color
• Icon Hover: Icon color on mouse over
• Theme Integration: Use site color palette

Border & Shadow #

• Applied to Button: Styles the button directly
• Border Options: Width, style, color, radius
• Shadow Effects: Elevation and depth
• Responsive Values: Per-device settings

Display #

• Visibility: Per-device show/hide
• Sticky: Fixed positioning options
• Z-index: Layer stacking order
• Performance: Hidden buttons don’t load

Common Use Cases #

Standard Player Button #

Icon: Play Circle Solid / Pause Circle Solid
Size: 48px
Background: Brand color
Icon Color: White
Border Radius: 50%
Padding: 12px
Shadow: Medium elevation

Minimal Play Control #

Icon: Play / Pause
Size: 24px
Background: Transparent
Icon Color: Text color
Border: None
Padding: 8px
Hover: Icon color change

Featured Episode Player #

Icon: Play Circle Solid / Pause Circle Solid
Size: 64px
Background: White
Icon Color: Brand color
Border: 2px solid brand
Padding: 16px
Shadow: Large elevation
Sticky: Optional

Inline Text Button #

Icon: Play Solid / Pause Solid
Size: 16px
Background: None
Icon Color: Link color
Padding: 4px
Margin: 0 4px
Vertical Align: Middle

Mobile Floating Button #

Icon: Play Circle / Pause Circle
Size: 56px
Background: Brand color
Icon Color: White
Position: Sticky bottom-right
Z-index: High
Shadow: Large elevation
Mobile Only: Show

Styling Best Practices #

Icon Selection #

• Consistency: Use matching play/pause styles
• Context: Solid for emphasis, outline for subtle
• Size: Larger for primary controls
• Contrast: Ensure icon visibility

Color Combinations #

• High Contrast: Icon vs background
• Hover States: Clear interaction feedback
• Brand Colors: Maintain consistency
• Accessibility: WCAG compliance

Responsive Sizing #

• Mobile: Minimum 44px touch target
• Tablet: Can be slightly smaller
• Desktop: Can use smaller sizes
• Thumb-Friendly: Consider mobile reach

Visual Hierarchy #

• Primary Button: Largest, most prominent
• Secondary: Smaller, less emphasis
• Inline: Minimal, text-sized
• Floating: High contrast, elevated

Advanced Techniques #

Custom Icon Colors #

Using CSS classes:

.custom-play-button {
  --pp-play-button-color-icon-desktop: #FF6B6B;
  --pp-play-button-color-icon-hover-desktop: #FF5252;
}

Animated Hover Effects #

With custom CSS:

.podcaster-plus-button {
  transition: transform 0.2s ease;
}
.podcaster-plus-button:hover {
  transform: scale(1.1);
}

Conditional Display #

Show different buttons per device:

Desktop: Small inline button
Tablet: Medium corner button
Mobile: Large floating button

Integration Patterns #

• With Progress Bar: Visual playback status
• With Volume: Full audio control
• With Skip Buttons: Navigation controls
• With Time Display: Current/total time

Accessibility Features #

Built-in Support #

• Screen Reader Text: Clear play/pause labels
• ARIA Labels: Dynamic state announcements
• Keyboard Navigation: Full keyboard support
• Focus Indicators: Visible focus states

State Announcements #

• “Play” when stopped
• “Pause” when playing
• “Loading audio…” during load
• “Error loading audio. Click to retry” on error

Best Practices #

• Touch Targets: Minimum 44x44px on mobile
• Color Contrast: 4.5:1 minimum ratio
• Focus Visible: Clear keyboard focus
• State Clarity: Obvious visual states

Troubleshooting #

Button Not Working #

Check these issues:

1. Episode Selected: Use Episode Selector first
2. Audio URL: Verify episode has audio
3. Browser Support: Modern browser required
4. JavaScript: Must be enabled

Audio Won’t Play #

Common causes:

1. Network Issues: Check connection
2. CORS: Audio must be accessible
3. Format: MP3/M4A supported
4. Cache: Clear browser cache

Visual Issues #

Solutions:

1. Icon Size: Adjust in settings
2. Colors: Check contrast ratios
3. Spacing: Review responsive settings
4. Z-index: Adjust for overlaps

State Problems #

Fixes:

1. Stuck Loading: Click to retry
2. Wrong Icon: Check icon settings
3. No Hover: Verify hover colors set
4. Sync Issues: Refresh page

Performance Tips #

Optimization #

• Icon Size: Use appropriate sizes
• Shadow Effects: Limit on mobile
• Transitions: Keep animations smooth
• Sticky: Use sparingly

Mobile Considerations #

• Touch Targets: Generous sizing
• Data Usage: Audio preload settings
• Battery: Minimize animations
• Layout: Avoid reflows

Frequently Asked Questions #

Q: Can I have multiple play buttons?
A: The block is set to single instance to ensure proper audio control coordination.

Q: How do I change button shape?
A: Use border radius settings. Set to 50% for circular buttons.

Q: Can buttons be different per page?
A: Yes, each page/post can have unique button styling.

Q: What audio formats are supported?
A: MP3 and M4A are universally supported. Other formats depend on browser.

Q: How do I make a text-only button?
A: This block is icon-based. Consider using a Button block with onclick for text.

Q: Can I use custom icons?
A: Currently limited to the 8 provided icon options.

Q: Why is my button not sticky on mobile?
A: Check mobile-specific sticky settings and z-index values.

Q: How do I track play analytics?
A: Integrate with analytics plugins using WordPress hooks.

Integration Examples #

Basic Player Layout #

Container (flex row)
├── Play Button (48px)
├── Progress Bar (flex: 1)
└── Volume Control

Mobile Player #

Container (flex column)
├── Episode Image
├── Episode Title
├── Play Button (centered, 64px)
└── Progress Bar (full width)

Inline Player #

Paragraph with [Play Button (16px)] inline

Best Practices Summary #

1. Choose Appropriate Icons: Match your design style
2. Size for Context: Larger for primary controls
3. Test All States: Loading, playing, paused, error
4. Ensure Accessibility: Proper contrast and sizing
5. Consider Mobile: Touch-friendly sizing
6. Style Consistently: Match other audio blocks
7. Optimize Performance: Limit heavy effects

Getting Help #

If you need assistance with the Play Button block:

1. Review this guide for common solutions
2. Check other Audio Block Guides
3. Visit our support forum
4. Contact support with specific questions

Remember: The Play Button block is the heart of your podcast player. Make it prominent, accessible, and delightful to use!