Overview #
The Skip Forward and Skip Backward blocks provide essential navigation controls for podcast playback, allowing listeners to quickly jump to different parts of an episode. These companion blocks share identical settings and work together to create a complete seeking experience.
Both Skip Control blocks offer:
- Configurable skip duration (5, 10, 15, or 30 seconds)
- Customizable icons with outline or solid styles
- Responsive design with device-specific controls
- Comprehensive styling options
- Accessibility features with keyboard support
- Seamless synchronization with other audio blocks
Getting Started #
Adding Skip Controls #
- Click the + button in the WordPress editor
- Search for “Skip Forward” or “Skip Backward” in the PodcasterPlus category
- Click to insert the desired block
- The blocks will automatically connect to your selected episode
Basic Configuration #
When first added:
- Skip Forward: 10-second skip with left-positioned icon
- Skip Backward: 10-second skip with right-positioned icon
- Both use 24px outline icons by default
- Styling matches your theme automatically
Settings Panels #
Both blocks share identical settings panels with the same options.
Skip Settings #
Skip Duration #
Skip Seconds (Default: 10)
- 5 seconds: Quick micro-adjustments
- 10 seconds: Standard skip length
- 15 seconds: Medium jumps
- 30 seconds: Large navigation jumps
Choose based on your content type:
- Interviews/conversations: 10-15 seconds
- Educational content: 15-30 seconds
- Music podcasts: 5-10 seconds
Icon Configuration #
Icon Style (Default: Outline)
- Outline: Clean, modern line icon
- Solid: Filled icon for more visual weight
Both styles are optimized for clarity at all sizes.
Icon Size (Default: 24px)
- Range: 12px to 64px
- Larger sizes better for mobile
- Consider your overall player design
Icon Position (Default varies)
- Skip Forward: Icon on left by default
- Skip Backward: Icon on right by default
- Options: left, right, top, bottom
- Position relative to any text label
Color Settings (Responsive) #
All colors support device-specific values:
Button Colors #
Background
- Button background color
- Default: Transparent
- Add color for more prominent buttons
Background Hover
- Button color on hover/focus
- Default: Slight transparency
- Provides interaction feedback
Icon Colors #
Icon
- Color of the skip icon
- Default: Theme text color
- Ensure good contrast
Icon Hover
- Icon color on hover/focus
- Default: Slightly darker
- Enhances interactivity
Spacing Settings (Responsive) #
Control internal and external spacing:
Padding #
Internal Spacing
- Space inside the button
- Set per side (top, right, bottom, left)
- Affects click/touch target size
- Minimum 44px total for accessibility
Margin #
External Spacing
- Space around the button
- Set per side or use presets
- Controls placement in layouts
- Consider spacing between skip controls
Sizing Settings (Responsive) #
Control button dimensions:
Width & Height
- Set explicit dimensions
- Auto by default
- Useful for uniform button sizes
Min/Max Constraints
- Set minimum sizes for touch targets
- Set maximum to prevent oversizing
- Helps maintain consistent layouts
Border Settings (Responsive) #
Customize button borders:
Border Width
- Thickness of button border
- Can set individual sides
- 0 for no border (default)
Border Style
- Solid, dashed, dotted, etc.
- Uniform or per-side options
- Matches your design system
Border Color
- Any color value
- Theme colors available
- Should complement button style
Border Radius
- Rounded corners (0-50px)
- Use % for pill-shaped buttons
- Consistent with other controls
Shadow Settings (Responsive) #
Add depth with shadows:
Box Shadow
- X/Y offset, blur, spread, color
- Multiple shadows supported
- Subtle shadows for depth
- More prominent for emphasis
Display Settings (Responsive) #
Visibility #
Show on Desktop/Tablet/Mobile
- Control visibility per device
- Hide on specific screen sizes
- Optimize for different layouts
Sticky Positioning #
Enable Sticky
- Keep controls visible while scrolling
- Useful for long transcripts
- Maintains easy access
Position & Offset
- Top or bottom positioning
- Custom offset values
- Z-index for layering
Common Use Cases #
Standard Player Configuration #
Classic setup with both controls:
- Skip Backward: 10 seconds, right icon
- Play button in center
- Skip Forward: 10 seconds, left icon
- Consistent 24px icons throughout
Mobile-Optimized Controls #
Touch-friendly configuration:
- Increase icon size to 32-36px
- Add 8-12px padding
- Use 15-second skip duration
- Consider bottom-positioned sticky
Minimal Controls #
Space-saving setup:
- Reduce icon size to 20px
- Use 5-second durations
- Minimal padding (4-6px)
- No borders or shadows
Accessible Controls #
Maximum usability:
- 44x44px minimum touch targets
- High contrast colors
- Clear hover states
- 15-30 second durations
Layout Patterns #
Horizontal Layout #
Most common arrangement:
[⏮ 10s] [▶️ Play] [10s ⏭]- Consistent spacing between controls
- Aligned centers
- Uniform icon sizes
Vertical Layout #
For narrow spaces:
[10s ⏭]
[▶️ Play]
[⏮ 10s]- Stack controls vertically
- Consider icon position (top/bottom)
- Maintain touch targets
Split Layout #
Separated controls:
[⏮ 10s] -------- [Progress Bar] -------- [10s ⏭]- Place at opposite ends
- Use with progress bar
- Good for wide players
Grouped Layout #
Combined with play button:
[⏮ 15s|▶️ Play|15s ⏭]- Minimal spacing
- Visual grouping
- Shared background/border
Best Practices #
Consistency #
- Matching Durations
- Use same duration for both blocks
- Unless content requires asymmetry
- User expectation is symmetry
- Visual Harmony
- Same icon size for both
- Matching colors and styles
- Consistent padding/margins
- Predictable Behavior
- Standard durations (10/15/30)
- Clear visual feedback
- Consistent across your site
Accessibility #
- Touch Targets
- Minimum 44x44px areas
- Adequate spacing between
- Consider thumb reach
- Keyboard Support
- Tab navigation works
- Enter/Space activates
- Clear focus indicators
- Screen Readers
- Descriptive labels included
- Duration announced
- State changes communicated
Responsive Design #
- Mobile First
- Design for touch first
- Test one-handed use
- Consider thumb zones
- Progressive Enhancement
- Basic function on all devices
- Enhanced features for larger screens
- Graceful degradation
- Breakpoint Testing
- Check all device sizes
- Verify touch targets
- Ensure visibility
Integration Tips #
With Other Blocks #
Skip controls work seamlessly with:
- Play Button: Natural grouping
- Progress Bar: Visual coordination
- Volume/Speed: Consistent styling
- Episode Info: Contextual placement
Custom Styling #
Apply custom CSS for unique designs:
/* Grouped skip controls */
.wp-block-podcaster-plus-skip-forward,
.wp-block-podcaster-plus-skip-backward {
--icon-size: 28px;
padding: 8px 12px;
border-radius: 20px;
}
/* Mobile optimizations */
@media (max-width: 767px) {
.wp-block-podcaster-plus-skip-forward,
.wp-block-podcaster-plus-skip-backward {
--icon-size: 32px;
padding: 10px;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.podcaster-plus-skip-forward,
.podcaster-plus-skip-backward {
border: 2px solid currentColor;
}
}JavaScript Enhancement #
Extend functionality with custom code:
// Add keyboard shortcuts
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
// Trigger skip backward
}
if (e.key === 'ArrowRight') {
// Trigger skip forward
}
});Troubleshooting #
Controls Not Working #
Check these items:
- Episode is properly selected
- Audio file is loaded
- No JavaScript errors
- Browser supports audio
Inconsistent Styling #
Common causes:
- Theme CSS conflicts
- Missing responsive settings
- Inheritance issues
- Cache problems
Touch Issues on Mobile #
Solutions:
- Increase touch targets
- Add padding not margin
- Test on real devices
- Check z-index conflicts
Keyboard Navigation Problems #
Verify:
- Proper tab order
- Focus indicators visible
- No trapped focus
- ARIA labels present
Frequently Asked Questions #
Q: Can I use different durations for each block?
A: Yes, each block’s duration is independent. However, matching durations usually provides better UX.
Q: How do I hide the text and show only icons?
A: The blocks show only icons by default. Text labels can be added with custom development.
Q: Can I change icons beyond outline/solid?
A: The two built-in options cover most needs. Custom icons require development work.
Q: Do the controls work with keyboard shortcuts?
A: The blocks support standard keyboard navigation. Custom shortcuts can be added with JavaScript.
Q: Can I make skip duration dynamic?
A: The duration is fixed per block. Variable skipping would require custom development.
Q: How do I group the controls visually?
A: Use a Container block or apply custom CSS to create visual grouping.
Q: Are the controls RTL compatible?
A: Yes, the blocks work properly in right-to-left languages with appropriate styling.
Advanced Features #
Custom Duration Options #
Developers can modify available durations:
- Edit the block registration
- Add new duration options
- Implement variable skipping
- Create smart skip logic
Enhanced Interactions #
Possible enhancements:
- Long press for continuous seeking
- Swipe gestures on mobile
- Visual feedback animations
- Progress preview on hover
Conditional Display #
Advanced visibility control:
- Show based on episode length
- Hide for short content
- Display for logged-in users only
- Time-based appearance
Summary #
The Skip Forward and Skip Backward blocks are essential navigation tools that give listeners control over their playback experience. With identical settings and complementary functions, they work together to provide intuitive seeking controls. Their responsive design system, accessibility features, and extensive customization options ensure they can be adapted to any podcast player design while maintaining usability standards.
Remember to maintain consistency between the two blocks, test thoroughly on different devices, and prioritize touch-friendly designs for mobile users. When used effectively, these controls significantly enhance the podcast listening experience by making content navigation quick and effortless.
