WordPress.org
Get WordPress

Make WordPress Core

Ticket #43151: 43151.diff

File 43151.diff, 6.3 KB (added by ramonopoly, 7 years ago)

Implementing a placeholder add media button similar to Gutenberg design

  • src/wp-admin/css/customize-controls.css 

    diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 7c7c121b67..c3bcee249b 100644
    a b p.customize-section-description { 
    13761376}
    13771377
    13781378.customize-control .attachment-media-view .placeholder,
     1379.customize-control .attachment-media-view .placeholder-button,
    13791380.customize-control-header .placeholder {
    13801381        width: 100%;
    13811382        position: relative;
    … … p.customize-section-description { 
    13871388        line-height: 20px;
    13881389}
    13891390
     1391.customize-control .attachment-media-view .placeholder-button {
     1392        cursor: pointer;
     1393        background-color: #edeff0;
     1394}
     1395
     1396.customize-control .attachment-media-view .placeholder-button:hover {
     1397        background-color: #f8f9f9;
     1398}
     1399
    13901400.customize-control-header .inner {
    13911401        display: none;
    13921402        position: absolute;

  • src/wp-admin/css/widgets.css 

    diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index b503a084c5..95acaf6e37 100644
    a b  
    8484        margin-right: 8px;
    8585}
    8686
     87.media-widget-control .attachment-media-view .placeholder-button,
    8788.media-widget-control .placeholder {
    8889        border: 1px dashed #b4b9be;
    8990        box-sizing: border-box;
    … …  
    9596        width: 100%;
    9697}
    9798
     99.media-widget-control .attachment-media-view .placeholder-button {
     100        cursor: pointer;
     101        background-color: #edeff0;
     102}
     103
     104.media-widget-control .attachment-media-view .placeholder-button:hover {
     105        background-color: #f8f9f9;
     106}
     107
    98108.media-widget-control .media-widget-preview {
    99109        background: transparent;
    100110        text-align: center;

  • src/wp-includes/customize/class-wp-customize-media-control.php 

    diff --git a/src/wp-includes/customize/class-wp-customize-media-control.php b/src/wp-includes/customize/class-wp-customize-media-control.php
index 338324fd36..56a3aa25b7 100644
    a b class WP_Customize_Media_Control extends WP_Customize_Control { 
    188188                        </div>
    189189                <# } else { #>
    190190                        <div class="attachment-media-view">
    191                                 <div class="placeholder">
    192                                                 {{ data.button_labels.placeholder }}
    193                                 </div>
     191                                <# if ( data.canUpload ) { #>
     192                                <button type="button" class="upload-button placeholder-button" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
     193                                <# } #>
    194194                                <div class="actions">
    195195                                        <# if ( data.defaultAttachment ) { #>
    196                                                 <button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
    197                                         <# } #>
    198                                         <# if ( data.canUpload ) { #>
    199                                         <button type="button" class="button upload-button" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
     196                                        <button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
    200197                                        <# } #>
    201198                                </div>
    202199                        </div>

  • src/wp-includes/customize/class-wp-customize-site-icon-control.php 

    diff --git a/src/wp-includes/customize/class-wp-customize-site-icon-control.php b/src/wp-includes/customize/class-wp-customize-site-icon-control.php
index 4d7bcf525a..1238fc5774 100644
    a b class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control 
    8080                        </div>
    8181                <# } else { #>
    8282                        <div class="attachment-media-view">
    83                                 <div class="placeholder">
    84                                         <?php echo $this->button_labels['placeholder']; ?>
    85                                 </div>
     83                                <# if ( data.canUpload ) { #>
     84                                        <button type="button" class="upload-button placeholder-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
     85                                <# } #>
    8686                                <div class="actions">
    8787                                        <# if ( data.defaultAttachment ) { #>
    8888                                                <button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
    8989                                        <# } #>
    90                                         <# if ( data.canUpload ) { #>
    91                                                 <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
    92                                         <# } #>
    9390                                </div>
    9491                        </div>
    9592                <# } #>

  • src/wp-includes/widgets/class-wp-widget-media-gallery.php 

    diff --git a/src/wp-includes/widgets/class-wp-widget-media-gallery.php b/src/wp-includes/widgets/class-wp-widget-media-gallery.php
index 652d8d0723..0f8030e1ea 100644
    a b class WP_Widget_Media_Gallery extends WP_Widget_Media { 
    175175                parent::render_control_template_scripts();
    176176                ?>
    177177                <script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
    178                         <# var describedById = 'describedBy-' + String( Math.random() ); #>
    179178                        <# if ( data.ids.length ) { #>
    180179                                <div class="gallery media-widget-gallery-preview">
    181180                                        <# _.each( data.ids, function( id, index ) { #>
    … … class WP_Widget_Media_Gallery extends WP_Widget_Media { 
    205204                                </div>
    206205                        <# } else { #>
    207206                                <div class="attachment-media-view">
    208                                         <p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>
     207                                        <button type="button" class="placeholder placeholder-button"><?php echo esc_html( $this->l10n['add_media'] ); ?></button>
    209208                                </div>
    210209                        <# } #>
    211210                </script>

  • src/wp-includes/widgets/class-wp-widget-media.php 

    diff --git a/src/wp-includes/widgets/class-wp-widget-media.php b/src/wp-includes/widgets/class-wp-widget-media.php
index 0c3b599e54..3912b79e37 100644
    a b abstract class WP_Widget_Media extends WP_Widget { 
    411411                        </p>
    412412                        <div class="media-widget-preview <?php echo esc_attr( $this->id_base ); ?>">
    413413                                <div class="attachment-media-view">
    414                                         <div class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></div>
     414                                        <button type="button" class="select-media placeholder-button not-selected">
     415                                                <?php echo esc_html( $this->l10n['add_media'] ); ?>
     416                                        </button>
    415417                                </div>
    416418                        </div>
    417419                        <p class="media-widget-buttons">
    … … abstract class WP_Widget_Media extends WP_Widget { 
    423425                                        <?php echo esc_html( $this->l10n['replace_media'] ); ?>
    424426                                </button>
    425427                        <?php endif; ?>
    426                                 <button type="button" class="button select-media not-selected">
    427                                         <?php echo esc_html( $this->l10n['add_media'] ); ?>
    428                                 </button>
    429428                        </p>
    430429                        <div class="media-widget-fields">
    431430                        </div>