[wp-trac] [WordPress Trac] #38697: Twenty Seventeen: Video header pause button design

[WordPress Trac]

#38697: Twenty Seventeen: Video header pause button design
---------------------------+------------------------
 Reporter:  melchoyce      |       Owner:  joemcgill
     Type:  enhancement    |      Status:  assigned
 Priority:  normal         |   Milestone:  4.7
Component:  Bundled Theme  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:
---------------------------+------------------------

Comment (by laurelfulford):

 Styling this button was trickier than expected (even with the span), so
 this is a bit hacky.

 [attachment:38697.1.diff]  uses JavaScript to insert the SVG play/pause
 icons. I've wrapped the existing button in a div, and included the SVGs
 next to that - otherwise, the JS used to toggle the button text removes
 the SVGs with it.

 The icons are switched using sibling CSS selectors; the original button is
 transparent and layered over the play/pause icon.

 Needs to be used with the latest patch from #38678.

 I think the easiest way to customize this button from a theme perspective
 would be to allow customizable strings for the play/pause button -
 something like:

 {{{
 the_custom_header_markup( array(
         'play' => '<span>' . __( 'Play', 'twentyseventeen' ) . '</span>' .
 twentyseventeen_get_svg( array( 'icon' => 'play' ) ),
         'pause' => '<span>' . __( 'Pause', 'twentyseventeen' ) . '</span>'
 . twentyseventeen_get_svg( array( 'icon' => 'pause' ) ),
 ) );
 }}}

 I totally understand that this could be tricky to add from a code
 perspective, though.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38697#comment:9>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform