WordPress.org

Make WordPress Core

Ticket #51754: 51754.9.diff

File 51754.9.diff, 4.0 KB (added by sabernhardt, 3 months ago)

adding media-item-wrapper container for CSS grid

  • src/wp-admin/async-upload.php

     
    4949        switch ( $_REQUEST['fetch'] ) {
    5050                case 3:
    5151                        ?>
    52                         <div class="attachment-details">
    53                                 <?php
    54                                 $thumb_url = wp_get_attachment_image_src( $id, 'thumbnail', true );
    55                                 if ( $thumb_url ) {
    56                                         echo '<img class="pinkynail" src="' . esc_url( $thumb_url[0] ) . '" alt="" />';
    57                                 }
     52                        <div class="media-item-wrapper">
     53                                <div class="attachment-details">
     54                                        <?php
     55                                        $thumb_url = wp_get_attachment_image_src( $id, 'thumbnail', true );
     56                                        if ( $thumb_url ) {
     57                                                echo '<img class="pinkynail" src="' . esc_url( $thumb_url[0] ) . '" alt="" />';
     58                                        }
    5859
    59                                 // Title shouldn't ever be empty, but use filename just in case.
    60                                 $file     = get_attached_file( $post->ID );
    61                                 $file_url = wp_get_attachment_url( $post->ID );
    62                                 $title    = $post->post_title ? $post->post_title : wp_basename( $file );
    63                                 ?>
    64                                 <div class="filename new">
    65                                         <span class="media-list-title"><strong><?php echo esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ); ?></strong></span>
    66                                         <span class="media-list-subtitle"><?php echo wp_basename( $file ); ?></span>
     60                                        // Title shouldn't ever be empty, but use filename just in case.
     61                                        $file     = get_attached_file( $post->ID );
     62                                        $file_url = wp_get_attachment_url( $post->ID );
     63                                        $title    = $post->post_title ? $post->post_title : wp_basename( $file );
     64                                        ?>
     65                                        <div class="filename new">
     66                                                <span class="media-list-title"><strong><?php echo esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ); ?></strong></span>
     67                                                <span class="media-list-subtitle"><?php echo wp_basename( $file ); ?></span>
     68                                        </div>
    6769                                </div>
     70                                <div class="attachment-tools">
     71                                        <span class="media-item-copy-container copy-to-clipboard-container edit-attachment">
     72                                                <button type="button" class="button button-small copy-attachment-url" data-clipboard-text="<?php echo $file_url; ?>"><?php _e( 'Copy URL to clipboard' ); ?></button>
     73                                                <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
     74                                        </span>
     75                                        <?php
     76                                        if ( current_user_can( 'edit_post', $id ) ) {
     77                                                echo '<a class="edit-attachment" href="' . esc_url( get_edit_post_link( $id ) ) . '" target="_blank">' . _x( 'Edit', 'media item' ) . '</a>';
     78                                        } else {
     79                                                echo '<span class="edit-attachment">' . _x( 'Success', 'media item' ) . '</span>';
     80                                        }
     81                                        ?>
     82                                </div>
    6883                        </div>
    69                         <div class="attachment-tools">
    70                                 <span class="media-item-copy-container copy-to-clipboard-container edit-attachment">
    71                                         <button type="button" class="button button-small copy-attachment-url" data-clipboard-text="<?php echo $file_url; ?>"><?php _e( 'Copy URL to clipboard' ); ?></button>
    72                                         <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
    73                                 </span>
    74                                 <?php
    75                                 if ( current_user_can( 'edit_post', $id ) ) {
    76                                         echo '<a class="edit-attachment" href="' . esc_url( get_edit_post_link( $id ) ) . '" target="_blank">' . _x( 'Edit', 'media item' ) . '</a>';
    77                                 } else {
    78                                         echo '<span class="edit-attachment">' . _x( 'Success', 'media item' ) . '</span>';
    79                                 }
    80                                 ?>
    81                         </div>
    8284                        <?php
    8385                        break;
    8486                case 2:
  • src/wp-admin/css/media.css

     
    112112        margin-right: 10px;
    113113}
    114114
    115 .media-item {
     115.media-item-wrapper {
    116116        display: grid;
    117         grid-template-columns: repeat( 2, 1fr );
     117        grid-template-columns: 1fr 1fr;
    118118}
    119119
    120120.media-item .attachment-tools {
     
    253253
    254254.media-upload-form .media-item .error {
    255255        padding: 10px 0 10px 14px;
     256        min-height: 50px;
    256257}
    257258
    258259.media-item .error-div button.dismiss {
     
    12871288        }
    12881289}
    12891290
     1291@media only screen and (max-width: 600px) {
     1292        .media-item-wrapper {
     1293                grid-template-columns: 1fr;
     1294        }
     1295}
     1296
    12901297/**
    12911298 * Media queries for media grid.
    12921299 */