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 #

1. Click the + button in the WordPress editor
2. Search for “Skip Forward” or “Skip Backward” in the PodcasterPlus category
3. Click to insert the desired block
4. 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:

1. Skip Backward: 10 seconds, right icon
2. Play button in center
3. Skip Forward: 10 seconds, left icon
4. Consistent 24px icons throughout

Mobile-Optimized Controls #

Touch-friendly configuration:

1. Increase icon size to 32-36px
2. Add 8-12px padding
3. Use 15-second skip duration
4. Consider bottom-positioned sticky

Minimal Controls #

Space-saving setup:

1. Reduce icon size to 20px
2. Use 5-second durations
3. Minimal padding (4-6px)
4. No borders or shadows

Accessible Controls #

Maximum usability:

1. 44x44px minimum touch targets
2. High contrast colors
3. Clear hover states
4. 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 #

1. Matching Durations

• Use same duration for both blocks
• Unless content requires asymmetry
• User expectation is symmetry

1. Visual Harmony

• Same icon size for both
• Matching colors and styles
• Consistent padding/margins

1. Predictable Behavior

• Standard durations (10/15/30)
• Clear visual feedback
• Consistent across your site

Accessibility #

1. Touch Targets

• Minimum 44x44px areas
• Adequate spacing between
• Consider thumb reach

1. Keyboard Support

• Tab navigation works
• Enter/Space activates
• Clear focus indicators

1. Screen Readers

• Descriptive labels included
• Duration announced
• State changes communicated

Responsive Design #

1. Mobile First

• Design for touch first
• Test one-handed use
• Consider thumb zones

1. Progressive Enhancement

• Basic function on all devices
• Enhanced features for larger screens
• Graceful degradation

1. 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.