Docs

Appearance

Play Button ​

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
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:

css
.custom-play-button {
  --pp-play-button-color-icon-desktop: #ff6b6b;
  --pp-play-button-color-icon-hover-desktop: #ff5252;
}

Animated Hover Effects ​

With custom CSS:

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. Browse the other blocks
  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!

Was this page helpful?