WordPress.org
Get WordPress

Make WordPress Core

Ticket #40721: 40721.6.diff

File 40721.6.diff, 8.2 KB (added by ryelle, 8 years ago)

  • src/wp-admin/about.php

     
    4444                </h2>
    4545
    4646                <div class="feature-section one-col">
    47                         <h2><?php _e( 'An Update with You in Mind' ); ?></h2>
    48                         <p class="lead-description"><?php _e( 'WordPress 4.8 adds some great new features &mdash; gear up for a more intuitive WordPress!' ); ?></p>
    49                         <p><?php _e( 'Though some updates are tiny (TinyMCE, that is &mdash; see what we did there?) they&#8217;ve been developed by hundreds of Core Contributors and Committers with <em>you</em> in mind.' ); ?></p>
    50                         <p><?php _e( 'Get ready for new features you&#8217;ll welcome like an old friend: link improvements, <em>three</em> new media widgets covering images, audio, and video, an updated text widget that supports visual editing, and an upgraded news section in your dashboard which brings in nearby and upcoming WordPress events.' ); ?></p>
     47                        <div class="col">
     48                                <h2><?php _e( 'An Update with You in Mind' ); ?></h2>
     49                                <p class="lead-description"><?php _e( 'WordPress 4.8 adds some great new features &mdash; gear up for a more intuitive WordPress!' ); ?></p>
     50                                <p><?php _e( 'Though some updates are tiny (TinyMCE, that is &mdash; see what we did there?) they&#8217;ve been developed by hundreds of Core Contributors and Committers with <em>you</em> in mind.' ); ?></p>
     51                                <p><?php _e( 'Get ready for new features you&#8217;ll welcome like an old friend: link improvements, <em>three</em> new media widgets covering images, audio, and video, an updated text widget that supports visual editing, and an upgraded news section in your dashboard which brings in nearby and upcoming WordPress events.' ); ?></p>
     52                        </div>
    5153                </div>
    5254
    5355                <hr />
    5456
    5557                <h2><?php _e( 'Exciting Widget Updates' ); ?></h2>
     58
     59                <div class="headline-feature one-col">
     60                        <div class="col">
     61                                <picture>
     62                                        <!-- Large image -->
     63                                        <source media="(min-width: 1050px)" srcset="https://cldup.com/-951havc3C.png" />
     64                                        <!-- Medium image -->
     65                                        <source media="(min-width: 601px)" srcset="https://cldup.com/60ktdYzv0l.png" />
     66                                        <!-- Small image -->
     67                                        <img src="https://cldup.com/mwvU0Zi5wW.png" alt="" />
     68                                </picture>
     69                        </div>
     70                </div>
     71
    5672                <div class="feature-section two-col">
    5773                        <div class="col">
    58                                 <div style="height:254px;width:480px;background:black;"></div>
    5974                                <h3><?php _e( 'Image Widget' ); ?></h3>
    6075                                <p><?php _e( 'Adding an image to a widget is now a simple task that is achievable for any WordPress user without hiring a developer. (Don&#8217;t tell them we told you that.) Simply insert your image right within the widget settings &mdash; try adding a headshot and brief bio &mdash; and see it appear, automatically.' );?></p>
    6176                        </div>
    6277                        <div class="col">
    63                                 <div style="height:254px;width:480px;background:black;"></div>
    6478                                <h3><?php _e( 'Video Widget' ); ?></h3>
    6579                                <p><?php _e( 'A welcome video is a great way to humanize the branding of your website. It creates trust and empathy in your visitors. You can now add any video from your Media Library to a sidebar on your site with the new Video Widget. So, you, too, can be liked and trusted instantly.' ); ?></p>
    6680                        </div>
    67                 </div>
    68 
    69                 <div class="feature-section two-col">
    7081                        <div class="col">
    71                                 <div style="height:254px;width:480px;background:black;"></div>
    7282                                <h3><?php _e( 'Audio Widget' ); ?></h3>
    7383                                <p><?php _e( 'Are you a podcaster or musician? Adding a widget with your audio file has never been easier. Upload your audio file to the media library, go to the widget settings, select your file, and you&#8217;re done. This would be a great way to add a more intimate welcome message, too!' );?></p>
    7484                        </div>
    7585                        <div class="col">
    76                                 <div style="height:254px;width:480px;background:black;"></div>
    7786                                <h3><?php _e( 'Rich Text Widget' ); ?></h3>
    7887                                <p><?php _e( 'This feature deserves a ticker-tape parade down Main Street. Rich-text editing capabilities are now native for text widgets. Simply, add a widget anywhere and format away. Create lists, add emphasis with bold or italics, and easily insert links. Have fun with your new-found formatting powers, but try to use them for good!' ); ?></p>
    7988                        </div>
    … …  
    9099                                <?php
    91100                                echo wp_video_shortcode( array(
    92101                                        'mp4'      => 'https://s.w.org/images/core/4.7/starter-content-v1.mp4',
    93                                         'poster'   => 'https://s.w.org/images/core/4.7/starter-content.jpg?v2',
     102                                        'poster'   => 'https://cldup.com/ZS8FEi0AE9.png',
    94103                                        'width'    => 1140,
    95104                                        'height'   => 624,
    96105                                        // 'class'    => 'wp-video-shortcode feature-video',
    … …  
    102111                <hr />
    103112
    104113                <div class="feature-section two-col">
    105                         <div class="col" style="height:254px;width:480px;background:black;"></div>
    106114                        <div class="col">
    107115                                <h3><?php _e( 'Nearby WordPress Events' ); ?></h3>
    108116
    … …  
    110118
    111119                                <p><?php _e( 'Being part of the community can help you improve your WordPress skills and network with people you wouldn&#8217;t otherwise meet. Now you can easily find your local events just by logging in to your dashboard.' ); ?>
    112120                        </div>
     121                        <div class="col">
     122                                <img src="https://cldup.com/GuISab3_X1.png" alt="" />
     123                        </div>
    113124                </div>
    114125
    115126                <hr />
    … …  
    136147                                        <h3><a href="https://make.wordpress.org/core/2017/05/22/multisite-focused-changes-in-4-8/"><?php _e( 'Multisite Updates' ); ?></a></h3>
    137148                                        <p><?php _e( 'New capabilities checks have been added to 4.8 with an eye towards removing calls to <code>is_super_admin()</code>. Additionally, new hooks, network-specific site functions, and user count controls have been added.' ); ?></p>
    138149                                </div>
    139                         </div>
    140 
    141                         <div class="under-the-hood three-col">
    142150                                <div class="col">
    143151                                        <h3><a href="https://make.wordpress.org/core/2017/05/23/addition-of-tinymce-to-the-text-widget/"><?php _e( 'Text-Editor JavaScript API' ); ?></a></h3>
    144152                                        <p><?php _e( 'With the addition of TinyMCE to the text widget in 4.8 comes a new JavaScript API for instantiating the editor after page load. This can be used to add an editor instance to any textarea and customize it with buttons and functions.' ); ?></p>

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

     
    161161
    162162/* 1.2 - Structure */
    163163
    164 .about-wrap [class$=col] .col {
    165         float: left;
    166         position: relative;
     164.about-wrap [class$="-col"] {
     165        display: -ms-flexbox;
     166        display: -webkit-flex;
     167        display: flex;
     168        justify-content: space-between;
     169        align-items: center;
     170        flex-wrap: wrap;
    167171}
    168172
    169 .about-wrap .two-col .col {
    170         margin-right: 4.799999999%;
    171         width: 47.6%;
     173.about-wrap [class$="-col"] .col {
     174        -webkit-flex: 1;
     175        -ms-flex: 1;
     176        flex: 1;
    172177}
    173178
    174 .about-wrap .two-col img {
    175         margin-bottom: 1.5em;
     179.about-wrap .one-col:not(.headline-feature) .col {
     180        margin: 0 auto;
     181        max-width: 700px;
    176182}
    177183
    178 .about-wrap .feature-section.two-col .col {
    179         display: inline-block;
    180         float: none;
    181         margin-top: 1em;
    182         margin-right: 4.799999999%;
    183         width: -webkit-calc( 47.6% - 4px );
    184         width: calc( 47.6% - 4px );
    185         vertical-align: top;
     184.about-wrap .two-col .col {
     185        min-width: 47%;
     186        max-width: 47%;
    186187}
    187188
    188189.about-wrap .three-col .col {
    189         margin-right: 4.999999999%;
    190         width: 29.95%;
     190        align-self: flex-start;
     191        min-width: 31%;
     192        max-width: 31%;
    191193}
    192194
    193 .about-wrap .two-col .col:nth-of-type(2n),
    194 .about-wrap .three-col .col:nth-of-type(3n) {
    195         margin-right: 0;
     195.about-wrap .two-col img {
     196        margin-bottom: 1.5em;
    196197}
    197198
    198 .about-wrap .under-the-hood {
    199         clear: both;
    200         overflow: hidden;
    201 }
    202 
    203199.about-wrap .feature-video .mejs-controls {
    204200        display: none !important;
    205201}
    … …  
    298294        padding-top: 35px;
    299295}
    300296
    301 .about-wrap .headline-feature {
    302         margin: 0 auto;
    303         max-width: 80%;
     297.about-wrap .headline-feature img {
     298        border: none;
    304299}
    305300
    306301.about-wrap .feature-section .media-container {
    … …  
    446441                column-count: 1;
    447442        }
    448443
     444        .about-wrap .two-col .col,
     445        .about-wrap .three-col .col {
     446                min-width: 48% !important;
     447        }
     448
    449449        .about-wrap .three-col img {
    450450                display: block;
    451451                margin: 0 auto;
    … …  
    475475
    476476        .about-wrap .two-col .col,
    477477        .about-wrap .three-col .col {
    478                 width: 100% !important;
    479                 float: none !important;
     478                min-width: 100% !important;
    480479        }
    481480
    482481        .about-wrap .under-the-hood.three-col .col,