WordPress.org

Make WordPress Core


Ignore:
Timestamp:
05/12/2016 08:22:45 PM (4 years ago)
Author:
westonruter
Message:

Customize: Clean up media control CSS.

Removes unnecessary wrapper elements and refactors class names to eliminate duplication of rule selectors.

Props celloexpressions.
Fixes #30618.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/customize/class-wp-customize-media-control.php

    r37417 r37426  
    155155
    156156        <# if ( data.attachment && data.attachment.id ) { #>
    157             <div class="current">
    158                 <div class="container">
    159                     <div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }}">
    160                         <div class="thumbnail thumbnail-{{ data.attachment.type }}">
    161                             <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
    162                                 <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" alt="" />
    163                             <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
    164                                 <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" alt="" />
    165                             <# } else if ( 'audio' === data.attachment.type ) { #>
    166                                 <# if ( data.attachment.image && data.attachment.image.src && data.attachment.image.src !== data.attachment.icon ) { #>
    167                                     <img src="{{ data.attachment.image.src }}" class="thumbnail" draggable="false" alt="" />
    168                                 <# } else { #>
    169                                     <img src="{{ data.attachment.icon }}" class="attachment-thumb type-icon" draggable="false" alt="" />
    170                                 <# } #>
    171                                 <p class="attachment-meta attachment-meta-title">&#8220;{{ data.attachment.title }}&#8221;</p>
    172                                 <# if ( data.attachment.album || data.attachment.meta.album ) { #>
    173                                 <p class="attachment-meta"><em>{{ data.attachment.album || data.attachment.meta.album }}</em></p>
    174                                 <# } #>
    175                                 <# if ( data.attachment.artist || data.attachment.meta.artist ) { #>
    176                                 <p class="attachment-meta">{{ data.attachment.artist || data.attachment.meta.artist }}</p>
    177                                 <# } #>
    178                                 <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
    179                                     <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
    180                                 </audio>
    181                             <# } else if ( 'video' === data.attachment.type ) { #>
    182                                 <div class="wp-media-wrapper wp-video">
    183                                     <video controls="controls" class="wp-video-shortcode" preload="metadata"
    184                                         <# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
    185                                         <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
    186                                     </video>
    187                                 </div>
    188                             <# } else { #>
    189                                 <img class="attachment-thumb type-icon icon" src="{{ data.attachment.icon }}" draggable="false" alt="" />
    190                                 <p class="attachment-title">{{ data.attachment.title }}</p>
    191                             <# } #>
     157            <div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }}">
     158                <div class="thumbnail thumbnail-{{ data.attachment.type }}">
     159                    <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
     160                        <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" alt="" />
     161                    <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
     162                        <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" alt="" />
     163                    <# } else if ( 'audio' === data.attachment.type ) { #>
     164                        <# if ( data.attachment.image && data.attachment.image.src && data.attachment.image.src !== data.attachment.icon ) { #>
     165                            <img src="{{ data.attachment.image.src }}" class="thumbnail" draggable="false" alt="" />
     166                        <# } else { #>
     167                            <img src="{{ data.attachment.icon }}" class="attachment-thumb type-icon" draggable="false" alt="" />
     168                        <# } #>
     169                        <p class="attachment-meta attachment-meta-title">&#8220;{{ data.attachment.title }}&#8221;</p>
     170                        <# if ( data.attachment.album || data.attachment.meta.album ) { #>
     171                        <p class="attachment-meta"><em>{{ data.attachment.album || data.attachment.meta.album }}</em></p>
     172                        <# } #>
     173                        <# if ( data.attachment.artist || data.attachment.meta.artist ) { #>
     174                        <p class="attachment-meta">{{ data.attachment.artist || data.attachment.meta.artist }}</p>
     175                        <# } #>
     176                        <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
     177                            <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
     178                        </audio>
     179                    <# } else if ( 'video' === data.attachment.type ) { #>
     180                        <div class="wp-media-wrapper wp-video">
     181                            <video controls="controls" class="wp-video-shortcode" preload="metadata"
     182                                <# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
     183                                <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
     184                            </video>
    192185                        </div>
    193                     </div>
    194                 </div>
    195             </div>
    196             <div class="actions">
    197                 <# if ( data.canUpload ) { #>
    198                 <button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
    199                 <button type="button" class="button upload-button control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
    200                 <div style="clear:both"></div>
    201                 <# } #>
     186                    <# } else { #>
     187                        <img class="attachment-thumb type-icon icon" src="{{ data.attachment.icon }}" draggable="false" alt="" />
     188                        <p class="attachment-title">{{ data.attachment.title }}</p>
     189                    <# } #>
     190                </div>
     191                <div class="actions">
     192                    <# if ( data.canUpload ) { #>
     193                    <button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
     194                    <button type="button" class="button upload-button control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
     195                    <div style="clear:both"></div>
     196                    <# } #>
     197                </div>
    202198            </div>
    203199        <# } else { #>
    204             <div class="current">
    205                 <div class="container">
    206                     <div class="placeholder">
    207                         <div class="inner">
    208                             <span>
    209                                 {{ data.button_labels.placeholder }}
    210                             </span>
    211                         </div>
    212                     </div>
    213                 </div>
    214             </div>
    215             <div class="actions">
    216                 <# if ( data.defaultAttachment ) { #>
    217                     <button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
    218                 <# } #>
    219                 <# if ( data.canUpload ) { #>
    220                 <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button">{{ data.button_labels.select }}</button>
    221                 <# } #>
    222                 <div style="clear:both"></div>
     200            <div class="attachment-media-view">
     201                <div class="placeholder">
     202                        {{ data.button_labels.placeholder }}
     203                </div>
     204                <div class="actions">
     205                    <# if ( data.defaultAttachment ) { #>
     206                        <button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
     207                    <# } #>
     208                    <# if ( data.canUpload ) { #>
     209                    <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button">{{ data.button_labels.select }}</button>
     210                    <# } #>
     211                    <div style="clear:both"></div>
     212                </div>
    223213            </div>
    224214        <# } #>
Note: See TracChangeset for help on using the changeset viewer.