[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:  has-patch dev-feedback  |     Focuses:
------------------------------------+------------------------

Comment (by bradyvercher):

 @davidakennedy @laurelfulford @joemcgill I see a few options for styling
 those without using JavaScript:

 **Filter the Strings**
 The strings can already be modified using the `header_video_settings`
 filter, so this would work similar to [comment:9 @laurelfulford's
 suggestion]:

 {{{
 add_filter( 'header_video_settings', function( $settings ) {
         $settings['l10n']['play'] = '<span>' . __( 'Play',
 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon'
 => 'play' ) );
         $settings['l10n']['pause'] = '<span>' . __( 'Pause',
 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon'
 => 'pause' ) );
         return $settings;
 } );
 }}}

 **SVG Backgrounds**
 If the color of the SVG icons doesn't need to be changed, they can be used
 as background images. I don't think the extra accessibility markup is
 needed since that's provided by the button text.

 **CSS Icons**
 Play and pause icons are simple enough that they can be created using CSS.
 Here's an example of how these would work: http://nicolasgallagher.com
 /pure-css-gui-icons/demo/

 **Icon Font**
 Many themes still use icon fonts and can use those to insert the icons
 with a little CSS.

 All of those methods should be available without using JS to inject extra
 markup, which I'd recommend avoiding if at all possible. If JS is
 absolutely necessary, we would probably need to trigger another event
 after the button is inserted and do some testing to make sure the icons
 persist after selective refresh.

 With any of these options, removing the extra span in the button in #38678
 is probably a good idea. I think pseudo-elements should provide enough
 styling hooks for the majority of cases and extra markup can be inserted
 using the filter if needed.

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