WordPress.org
Get WordPress

Make WordPress Core

Ticket #36173: 36173.5.diff

File 36173.5.diff, 17.9 KB (added by ryelle, 9 years ago)

  • src/wp-admin/about.php

     
    3939        <div class="wrap about-wrap">
    4040                <h1><?php printf( __( 'Welcome to WordPress&nbsp;%s' ), $display_version ); ?></h1>
    4141
    42                 <div class="about-text"><?php printf( __( 'Thank you for updating! WordPress %s makes your site more connected and responsive.' ), $display_version ); ?></div>
     42                <div class="about-text"><?php printf( __( 'Thank you for updating! WordPress %s streamlines your workflow, whether you&#8217;re writing or building.' ), $display_version ); ?></div>
    4343                <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
    4444
    4545                <h2 class="nav-tab-wrapper wp-clearfix">
    … …  
    4848                        <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
    4949                </h2>
    5050
    51                 <div class="headline-feature feature-video">
    52                         <iframe width="1050" height="591" src="<?php echo esc_url( $video_url ); ?>" frameborder="0" allowfullscreen></iframe>
    53                         <script src="https://videopress.com/videopress-iframe.js"></script>
     51                <div class="headline-feature feature-video" style="background-color:#191E23;">
     52                        <p>Video Here</p>
    5453                </div>
    5554
    5655                <hr>
    5756
    58                 <div class="headline-feature feature-section one-col">
    59                         <h2><?php _e( 'Twenty Sixteen' ); ?></h2>
    60                         <div class="media-container">
    61                                 <img src="https://s.w.org/images/core/4.4/twenty-sixteen-white-fullsize-2x.png" alt="" srcset="https://s.w.org/images/core/4.4/twenty-sixteen-white-smartphone-1x.png 268w, https://s.w.org/images/core/4.4/twenty-sixteen-white-smartphone-2x.png 536w, https://s.w.org/images/core/4.4/twenty-sixteen-white-tablet-1x.png 558w, https://s.w.org/images/core/4.4/twenty-sixteen-white-desktop-1x.png 840w, https://s.w.org/images/core/4.4/twenty-sixteen-white-fullsize-1x.png 1086w, https://s.w.org/images/core/4.4/twenty-sixteen-white-tablet-2x.png 1116w, https://s.w.org/images/core/4.4/twenty-sixteen-white-desktop-2x.png 1680w, https://s.w.org/images/core/4.4/twenty-sixteen-white-fullsize-2x.png 2172w" sizes="(max-width: 500px) calc((100vw - 40px) * .8), (max-width: 782px) calc((100vw - 70px) * .8), (max-width: 960px) calc((100vw - 116px) * .8), (max-width: 1290px) calc((100vw - 240px) * .8), 840px" />
    62                         </div>
    63                         <div class="two-col">
    64                                 <div class="col">
    65                                         <h3><?php _e( 'Introducing Twenty Sixteen' ); ?></h3>
    66                                         <p><?php _e( 'Our newest default theme, Twenty Sixteen, is a modern take on a classic blog design.' ); ?></p>
    67                                         <p><?php _e( 'Twenty Sixteen was built to look great on any device. A fluid grid design, flexible header, fun color schemes, and more, will make your content shine.' ); ?></p>
    68                                         <div class="horizontal-image">
    69                                                 <div class="content">
    70                                                         <img class="feature-image horizontal-screen" src="https://s.w.org/images/core/4.4/twenty-sixteen-dark-fullsize-2x.png" alt=""  srcset="https://s.w.org/images/core/4.4/twenty-sixteen-dark-smartphone-1x.png 268w, https://s.w.org/images/core/4.4/twenty-sixteen-dark-smartphone-2x.png 535w, https://s.w.org/images/core/4.4/twenty-sixteen-dark-desktop-1x.png 558w, https://s.w.org/images/core/4.4/twenty-sixteen-dark-fullsize-1x.png 783w, https://s.w.org/images/core/4.4/twenty-sixteen-dark-desktop-2x.png 1116w, https://s.w.org/images/core/4.4/twenty-sixteen-dark-fullsize-2x.png 1566w" sizes="(max-width: 500px) calc((100vw - 40px) * .8), (max-width: 782px) calc((100vw - 70px) * .8), (max-width: 960px) calc((100vw - 116px) * .5216), (max-width: 1290px) calc((100vw - 240px) * .5216), 548px" />
    71                                                 </div>
    72                                         </div>
    73                                 </div>
    74                                 <div class="col feature-image">
    75                                         <img class="vertical-screen" src="https://s.w.org/images/core/4.4/twenty-sixteen-red-fullsize-2x.png" alt="" srcset="https://s.w.org/images/core/4.4/twenty-sixteen-red-smartphone-1x.png 107w, https://s.w.org/images/core/4.4/twenty-sixteen-red-smartphone-2x.png 214w, https://s.w.org/images/core/4.4/twenty-sixteen-red-desktop-1x.png 252w, https://s.w.org/images/core/4.4/twenty-sixteen-red-fullsize-1x.png 410w, https://s.w.org/images/core/4.4/twenty-sixteen-red-desktop-2x.png 504w, https://s.w.org/images/core/4.4/twenty-sixteen-red-fullsize-2x.png 820w" sizes="(max-width: 500px) calc((100vw - 40px) * .32), (max-width: 782px) calc((100vw - 70px) * .32), (max-width: 960px) calc((100vw - 116px) * .24), (max-width: 1290px) calc((100vw - 240px) * .24), 252px" />
    76                                 </div>
    77                         </div>
    78                 </div>
    79 
    80                 <hr />
    81 
    8257                <div class="feature-section two-col">
     58                        <h2><?php _e( 'Editing Improvements' ); ?></h2>
    8359                        <div class="col">
    84                                 <div class="media-container">
    85                                         <img src="https://s.w.org/images/core/4.4/responsive-devices-fullsize-2x.png" alt="" srcset="https://s.w.org/images/core/4.4/responsive-devices-smartphone-1x.png 335w, https://s.w.org/images/core/4.4/responsive-devices-desktop-1x.png 500w, https://s.w.org/images/core/4.4/responsive-devices-smartphone-2x.png 670w, https://s.w.org/images/core/4.4/responsive-devices-tablet-1x.png 698w, https://s.w.org/images/core/4.4/responsive-devices-desktop-2x.png 1000w, https://s.w.org/images/core/4.4/responsive-devices-fullsize-1x.png 1200w, https://s.w.org/images/core/4.4/responsive-devices-tablet-2x.png 1396w, https://s.w.org/images/core/4.4/responsive-devices-fullsize-2x.png 2400w" sizes="(max-width: 500px) calc(100vw - 40px), (max-width: 782px) calc(100vw - 70px), (max-width: 960px) calc((100vw - 116px) * .476), (max-width: 1290px) calc((100vw - 240px) * .476), 500px" />
    86                                 </div>
     60                                <img src="https://cldup.com/klO9vWGiT3.png" />
     61                                <h3><?php _e( 'Inline Linking' ); ?></h3>
     62                                <p><?php _e( 'Stay focused on your writing with a less distracting interface that keeps you in place and allows you to easily link to your content.' ); ?></p>
    8763                        </div>
    8864                        <div class="col">
    89                                 <h3><?php _e( 'Responsive images' ); ?></h3>
    90                                 <p><?php _e( 'WordPress now takes a smarter approach to displaying appropriate image sizes on any device, ensuring a perfect fit every time. You don&#8217;t need to do anything to your theme, it just works.' ); ?></p>
     65                                <img src="https://cldup.com/Zj3Sr7wekW.png" />
     66                                <h3><?php _e( 'Formatting Shortcuts' ); ?></h3>
     67                                <p><?php _e( 'Do you enjoy using formatting shortcuts for lists and headings? Now they&#8217;re even more useful, with horizontal lines and <code>&lt;code&gt;</code>.' ); ?></p>
    9168                        </div>
    9269                </div>
    9370
    … …  
    9471                <hr />
    9572
    9673                <div class="feature-section two-col">
     74                        <h2><?php _e( 'Customization Improvements' ); ?></h2>
    9775                        <div class="col">
    98                                 <div class="embed-container">
    99                                         <blockquote data-secret="OcUe7B6Edh" class="wp-embedded-content"><a href="https://wordpress.org/news/2015/12/clifford/">WordPress 4.4 &ldquo;Clifford&rdquo;</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;" src="https://wordpress.org/news/2015/12/clifford/embed/#?secret=OcUe7B6Edh" data-secret="OcUe7B6Edh" width="600" height="338" title="<?php esc_attr_e( 'Embedded WordPress Post' ); ?>" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    100                                 </div>
     76                                <img src="https://cldup.com/0iRJNVbt4G.png" />
     77                                <h3><?php _e( 'Live Responsive Previews' ); ?></h3>
     78                                <p><?php _e( 'Make sure your site looks great on all screens! Preview mobile, tablet, and desktop views directly from the customizer.' ); ?></p>
    10179                        </div>
    10280                        <div class="col">
    103                                 <h3><?php _e( 'Embed your WordPress content' ); ?></h3>
    104                                 <p><?php _e( 'Now you can embed your posts on other sites, even other WordPress sites. Simply drop a post URL into the editor and see an instant embed preview, complete with the title, excerpt, and featured image if you&#8217;ve set one. We&#8217;ll even include your site icon and links for comments and sharing.' ); ?></p>
     81                                <img src="https://cldup.com/HWDA8xR_8G.png" />
     82                                <h3><?php _e( 'Custom Logos' ); ?></h3>
     83                                <p><?php _e( 'Themes can now support logos for your business or brand. If you&#8217;re using Twenty Sixteen or Twenty Fifteen, you can check it out right now in the identity section of the customizer.' ); ?></p>
    10584                        </div>
    10685                </div>
    10786
    10887                <hr />
    10988
    110                 <div class="feature-section two-col">
    111                         <div class="col">
    112                                 <div class="embed-container embed-reverbnation">
    113                                         <iframe width="640" height="150" scrolling="no" frameborder="no" src="https://www.reverbnation.com/widget_code/html_widget/artist_607?widget_id=55&amp;pwc[song_ids]=3731874&amp;pwc[size]=small"></iframe>
    114                                 </div>
    115                         </div>
    116                         <div class="col">
    117                                 <h3><?php _e( 'Even more embed providers' ); ?></h3>
    118                                 <p><?php _e( 'In addition to post embeds, WordPress 4.4 also adds support for five new oEmbed providers: Cloudup, Reddit&nbsp;Comments, ReverbNation, Speaker&nbsp;Deck, and VideoPress.' ); ?></p>
    119                         </div>
    120                 </div>
    121 
    122                 <hr />
    123 
    12489                <div class="changelog">
    12590                        <h3><?php _e( 'Under the Hood' ); ?></h3>
    12691
    127                         <div class="feature-section under-the-hood one-col">
     92                        <div class="under-the-hood three-col">
    12893                                <div class="col">
    129                                         <h4><?php _e( 'REST API infrastructure' ); ?></h4>
    130                                         <div class="two-col-text">
    131                                                 <p><?php _e( 'Infrastructure for the REST API has been integrated into core, marking a new era in developing with WordPress. The REST API serves to provide developers with a path forward for building and extending RESTful APIs on top of WordPress.' ); ?></p>
    132                                                 <p><?php
    133                                                         if ( current_user_can( 'install_plugins' ) ) {
    134                                                                 $url_args = array(
    135                                                                         'tab'       => 'plugin-information',
    136                                                                         'plugin'    => 'rest-api',
    137                                                                         'TB_iframe' => true,
    138                                                                         'width'     => 600,
    139                                                                         'height'    => 550
    140                                                                 );
    141 
    142                                                                 $plugin_link = '<a href="' . esc_url( add_query_arg( $url_args, network_admin_url( 'plugin-install.php' ) ) ) . '" class="thickbox open-plugin-details-modal">WordPress REST API</a>';
    143                                                         } else {
    144                                                                 $plugin_link = '<a href="https://wordpress.org/plugins/rest-api">WordPress REST API</a>';
    145                                                         }
    146 
    147                                                         /* translators: WordPress REST API plugin link */
    148                                                         printf( __( 'Infrastructure is the first part of a multi-stage rollout for the REST API. Inclusion of core endpoints is targeted for an upcoming release. To get a sneak peek of the core endpoints, and for more information on extending the REST API, check out the official %s plugin.' ), $plugin_link );
    149                                                 ?></p>
    150                                         </div>
     94                                        <h4><?php _e( 'Smart Image Resizing' ); ?></h4>
     95                                        <p>Generated images now load up to 50&#37; faster with no noticeable quality loss. <a href="https://make.wordpress.org/core/2016/03/12/performance-improvements-for-images-in-wordpress-4-5/">It&#8217;s really cool</a>.</p>
    15196                                </div>
     97                                <div class="col">
     98                                        <h4><?php _e( 'Selective Refresh' ); ?></h4>
     99                                        <p>A <a href="https://make.wordpress.org/core/2016/02/16/selective-refresh-in-the-customizer/">comprehensive framework</a> for rendering parts of the customizer preview in real time.</p>
     100                                </div>
     101                                <div class="col">
     102                                        <h4><?php _e( 'JavaScript Library Updates' ); ?></h4>
     103                                        <p>Backbone and Underscore updated to <a href="https://make.wordpress.org/core/2016/02/17/backbone-and-underscore-updated-to-latest-versions/">latest versions</a>.</p>
     104                                </div>
    152105                        </div>
    153106
    154                         <div class="feature-section under-the-hood three-col">
     107                        <div class="feature-section under-the-hood two-col">
    155108                                <div class="col">
    156                                         <h4><?php _e( 'Term meta' ); ?></h4>
    157                                         <p><?php
    158                                                 /* translators: 1: add_term_meta() docs link, 2: get_term_meta() docs link, 3: update_term_meta() docs link */
    159                                                 printf( __( 'Terms now support metadata, just like posts. See %1$s, %2$s, and %3$s for more information.' ),
    160                                                         '<a href="https://developer.wordpress.org/reference/functions/add_term_meta"><code>add_term_meta()</code></a>',
    161                                                         '<a href="https://developer.wordpress.org/reference/functions/get_term_meta"><code>get_term_meta()</code></a>',
    162                                                         '<a href="https://developer.wordpress.org/reference/functions/update_term_meta"><code>update_term_meta()</code></a>'
    163                                          );
    164                                         ?></p>
     109                                        <h4><?php _e( 'Script Loader Improvements' ); ?></h4>
     110                                        <p>Inline JavaScript inclusion with <code>wp_add_inline_script()</code> and better support for script header/footer dependencies.</p>
    165111                                </div>
    166112                                <div class="col">
    167                                         <h4><?php _e( 'Comment query improvements' ); ?></h4>
    168                                         <p><?php
    169                                                 /* translators: WP_Comment_Query class name */
    170                                                 printf( __( 'Comment queries now have cache handling to improve performance. New arguments in %s make crafting robust comment queries simpler.' ), '<code>WP_Comment_Query</code>' );
    171                                         ?></p>
     113                                        <h4><?php _e( 'Better Embed Templates' ); ?></h4>
     114                                        <p>Embed templates have been split into parts and can be directly overridden by themes via the template hierarchy.</p>
    172115                                </div>
    173                                 <div class="col">
    174                                         <h4><?php _e( 'Term, comment, and network objects' ); ?></h4>
    175                                         <p><?php
    176                                                 /* translators: 1: WP_Term class name, WP_Comment class name, WP_Network class name */
    177                                                 printf( __( 'New %1$s, %2$s, and %3$s objects make interacting with terms, comments, and networks more predictable and intuitive in code.' ),
    178                                                         '<code>WP_Term</code>',
    179                                                         '<code>WP_Comment</code>',
    180                                                         '<code>WP_Network</code>'
    181                                                 );
    182                                         ?></p>
    183                                 </div>
    184116                        </div>
    185117
    186118                        <div class="return-to-dashboard">

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

     
    101101        font-weight: 400;
    102102}
    103103
     104.about-wrap h2 {
     105        margin: 40px 0 1em;
     106        font-size: 1.8em;
     107        line-height: 1.3;
     108        font-weight: 300;
     109        text-align: center;
     110}
     111
    104112.about-wrap h3 {
    105113        margin: 1.25em 0 .6em;
    106114        font-size: 1.25em;
    … …  
    107115        line-height: 1.5em;
    108116}
    109117
     118.about-wrap .changelog h3 {
     119        margin-top: 40px;
     120}
     121
    110122.about-wrap h4 {
    111123        color: #23282d;
    112124}
    … …  
    137149        float: left;
    138150        position: relative;
    139151}
     152
    140153.about-wrap .two-col .col {
    141154        margin-right: 4.799999999%;
    142155        width: 47.6%;
    143156}
     157
     158.about-wrap .two-col img {
     159        margin-bottom: 1.5em;
     160}
     161
    144162.about-wrap .feature-section.two-col .col {
    145163        display: inline-block;
    146164        float: none;
     165        margin-top: 1em;
    147166        margin-right: 4.799999999%;
    148167        width: -webkit-calc( 47.6% - 4px );
    149168        width: calc( 47.6% - 4px );
    150         vertical-align: middle;
     169        vertical-align: top;
    151170}
    152171
    153172.about-wrap .three-col .col {
    … …  
    160179        margin-right: 0;
    161180}
    162181
     182.about-wrap .under-the-hood {
     183        clear: both;
     184        overflow: hidden;
     185}
     186
     187.about-wrap .under-the-hood:nth-of-type(2n) {
     188        margin-top: 3em;
     189}
     190
    163191/* 1.3 - Point Releases */
    164192
    165193.about-wrap .point-releases {
    … …  
    198226        margin-top: 0;
    199227}
    200228
    201 .about-wrap .feature-list h2 {
    202         margin: 30px 0 15px;
    203         text-align: center;
    204 }
    205 
    206229.about-wrap .feature-section h4 {
    207230        margin: 1.4em 0 0.6em 0;
    208231        font-size: 1em;
    … …  
    263286        overflow: hidden;
    264287}
    265288
    266 .about-wrap .headline-feature .col {
    267         width: 65.2%;
    268 }
    269 
    270 .about-wrap .headline-feature .col.feature-image {
    271         width: 30%;
    272 }
    273 
    274 .about-wrap .headline-feature .vertical-screen {
    275         float: right;
    276         margin-left: 40px;
    277         max-width: 100%;
    278 }
    279 
    280 .about-wrap .headline-feature .horizontal-screen {
    281         margin-top: 20px;
    282         max-width: 100%;
    283 }
    284 
    285289.about-wrap .embed-container {
    286290        text-align: center;
    287291}
    … …  
    294298        max-width: 100%;
    295299}
    296300
    297 .about-wrap .feature-section:not(.under-the-hood) .col {
     301.about-wrap .feature-section .col {
    298302        margin-top: 40px;
    299303}
    300304
    … …  
    319323        padding: 0 5px;
    320324}
    321325
    322 .about-wrap .feature-list.finer-points h4,
    323 .about-wrap .feature-list.finer-points p {
    324         margin-left: 115px;
    325 }
    326 
    327326/*------------------------------------------------------------------------------
    328327  3.0 - Credits & Freedoms Pages
    329328------------------------------------------------------------------------------*/
    … …  
    416415------------------------------------------------------------------------------*/
    417416
    418417@media screen and ( max-width: 782px ) {
    419         .about-wrap .feature-section {
    420                 padding: 0;
    421                 border-bottom: none;
    422         }
    423 
    424         .about-wrap [class$=col] .col {
    425                 float: none;
    426                 width: 100%;
    427                 margin: 40px 0 0;
    428                 padding: 0 0 40px;
    429         }
    430 
    431         .about-wrap .headline-feature {
    432                 position: relative;
    433         }
    434 
    435         .about-wrap .headline-feature .col.feature-image {
    436                 position: absolute;
    437                 bottom: 0;
    438                 right: 0;
    439                 width: 40%;
    440         }
    441 
    442         .about-wrap .headline-feature .horizontal-image {
    443                 position: relative;
    444         }
    445 
    446         .about-wrap .headline-feature .horizontal-image:before {
    447                 display: block;
    448                 content: "";
    449                 width: 100%;
    450                 padding-top: 80%;
    451         }
    452 
    453         .about-wrap .headline-feature .horizontal-image > .content {
    454                 position: absolute;
    455                 top: 0;
    456                 left: 0;
    457                 right: 0;
    458                 bottom: 0;
    459         }
    460 
    461         .about-wrap .headline-feature .horizontal-image img {
    462                 position: absolute;
    463                 bottom: 0;
    464         }
    465 
    466418        .about-wrap .two-col-text {
    467419                -webkit-column-count: 1;
    468420                -moz-column-count: 1;
    … …  
    473425                display: block;
    474426                margin: 0 auto;
    475427        }
    476 
    477         .about-wrap .feature-list .col {
    478                 margin: 0;
    479                 padding: 0;
    480                 border-bottom: none;
    481         }
    482 
    483         .about-wrap .headline-feature .feature-section {
    484                 max-width: 100%;
    485         }
    486 
    487         .about-wrap .feature-list .feature-section {
    488                 padding: 0 0 40px;
    489         }
    490428}
    491429
    492430@media only screen and (max-width: 500px) {
    … …  
    510448                width: 100%;
    511449        }
    512450
    513         .about-wrap .feature-section.two-col .col,
    514         .about-wrap .three-col .col,
    515         .about-wrap .headline-feature .feature-section .col {
     451        .about-wrap .two-col .col,
     452        .about-wrap .three-col .col {
    516453                width: 100% !important;
    517454                float: none !important;
    518455        }
    519456
    520         .about-wrap .feature-section.two-col .col:last-of-type {
    521                 margin-top: 0;
    522         }
    523 
    524         .feature-section.under-the-hood.three-col .col,
    525         .feature-section.under-the-hood.one-col .col {
     457        .about-wrap .under-the-hood.three-col .col,
     458        .about-wrap .under-the-hood.two-col .col,
     459        .about-wrap .under-the-hood.one-col .col {
     460                margin-bottom: 2em;
    526461                padding-bottom: 0;
    527462        }
    528 }
    529 
    530 @media only screen and (max-width: 400px) {
    531         .about-wrap .feature-list svg {
    532                 margin-top: 15px;
    533                 height: 65px;
    534                 width: 65px;
     463       
     464        .about-wrap .under-the-hood:nth-of-type(2n) {
     465                margin-top: 0;
    535466        }
    536         .about-wrap .feature-list.finer-points h4,
    537         .about-wrap .feature-list.finer-points p {
    538                 margin-left: 80px;
     467       
     468        .about-wrap .under-the-hood:nth-of-type(2n) h4 {
     469                margin-top: 0;
    539470        }
    540471}