WordPress.org
Get WordPress

Make WordPress Core

Changeset 35763


Ignore:
Timestamp:
12/04/2015 12:23:24 PM (9 years ago)
Author:
DrewAPicture
Message:

First pass of the 4.4 about page. Adds strings (not yet translatable) and screen shots (not CDN).

Props wonderboymusic, markjaquith, helen, nacin, liljimmi, mordauk, melchoyce, ryelle, ocean90, DrewAPicture
See #34663.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/about.php

    r35611 r35763  
    1717) );
    1818
     19if ( current_user_can( 'install_plugins' ) ) {
     20    add_thickbox();
     21    wp_enqueue_script( 'plugin-install' );
     22}
     23
     24
     25wp_oembed_add_host_js();
     26
    1927$title = __( 'About' );
    2028
    … …  
    2230
    2331include( ABSPATH . 'wp-admin/admin-header.php' );
    24 
    25 $video_url = 'https://videopress.com/embed/T54Iy7Tw';
    26 $locale    = str_replace( '_', '-', get_locale() );
    27 if ( 'en-AU' !== $locale ) {
    28     list( $locale ) = explode( '-', $locale );
    29 }
    30 if ( 'en' !== $locale ) {
    31     $video_url = add_query_arg( 'defaultLangCode', $locale, $video_url );
    32 }
    33 
    34 $major_features = array(
    35     array(
    36         'src'         => array(
    37             'mp4'  => '//s.w.org/images/core/4.3/formatting.mp4',
    38             'ogv'  => '//s.w.org/images/core/4.3/formatting.ogv',
    39             'webm' => '//s.w.org/images/core/4.3/formatting.webm',
    40         ),
    41         'heading'     => __( 'Formatting Shortcuts' ),
    42         /* Translators: 1: asterisks; 2: number sign; */
    43         'description' => sprintf( __( 'Your writing flow just got faster with new formatting shortcuts in WordPress 4.3. Use asterisks to create lists and number signs to make a heading. No more breaking your flow; your text looks great with a %1$s and a %2$s.' ), '<code>*</code>', '<code>#</code>' ),
    44     ),
    45     array(
    46         'src'         => '//s.w.org/images/core/4.3/menu-customizer.png',
    47         'heading'     => __( 'Menus in the Customizer' ),
    48         'description' => __( 'Create your menu, update it, and assign it, all while live-previewing in the customizer. The streamlined customizer design provides a mobile-friendly and accessible interface. With every release, it becomes easier and faster to make your site just the way you want it.' ),
    49     ),
    50     array(
    51         'src'         => '//s.w.org/images/core/4.3/better-passwords.png',
    52         'heading'     => __( 'Better Passwords' ),
    53         'description' => __( 'Keep your site more secure with WordPress&#8217; improved approach to passwords. Instead of receiving passwords via email, you&#8217;ll get a password reset link. When you add new users to your site or edit a user profile, WordPress will automatically generate a secure password.' ),
    54     ),
    55     array(
    56         'src'         => '//s.w.org/images/core/4.3/site-icon-customizer.png',
    57         'heading'     => __( 'Site Icons' ),
    58         'description' => __( 'Site icons represent your site in browser tabs, bookmark menus, and on the home screen of mobile devices. Add your unique site icon in the customizer; it will even stay in place when you switch themes. Make your whole site reflect your brand.' ),
    59     ),
    60 );
    61 shuffle( $major_features );
    62 
    63 $minor_features = array(
    64     array(
    65         'src'         => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj48cGF0aCBmaWxsPSIjMDBhMGQyIiBkPSJNNTAgMjE1aDI0MHYzMEg1MHpNNTAgMjc1aDI0MHYzMEg1MHpNNTAgMTU1aDI0MHYzMEg1MHpNNTAgOTVoMjQwdjMwSDUwek0zMTAuMSA5NWwxOS45IDMwIDIwLjEtMzAiLz48L3N2Zz4=',
    66         'heading'     => __( 'A smoother admin experience' ),
    67         'description' => __( 'Refinements to the list view across the admin make your WordPress more accessible and easier to work with on any device.' ),
    68     ),
    69     array(
    70         'src'         => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzAwYTBkMiIgZD0iTTUgMmgxMHEuODIgMCAxLjQxLjU5VDE3IDR2OHEwIC44Mi0uNTkgMS40MVQxNSAxNGgtMmwtNSA1di01SDVxLS44MiAwLTEuNDEtLjU5VDMgMTJWNHEwLS44Mi41OS0xLjQxVDUgMnptOC41IDguNUwxMSA4bDIuNS0yLjUtMS0xTDEwIDcgNy41IDQuNWwtMSAxTDkgOGwtMi41IDIuNSAxIDFMMTAgOWwyLjUgMi41eiIvPjwvc3ZnPg==',
    71         'heading'     => __( 'Comments turned off on pages' ),
    72         'description' => __( 'All new pages that you create will have comments turned off. Keep discussions to your blog, right where they&#8217;re supposed to happen.' ),
    73     ),
    74     array(
    75         'src'         => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwYTBkMiIgZD0iTTI5LjMyOCA1LjcxMnEuMDQ4LS4xNDQuMDk2LS4zODR0LS4wNjQtLjgxNi0uNTI4LS45NzZxLS4zODQtLjM2OC0uODcyLS40NjR0LS43OTIgMGwtLjI4OC4wOHEtMS40NTYuNzItNS44OCAzLjczNnQtNi4zOTIgNS4xNzZxLS43MzYuODMyLTEuNDA4IDIuMzJ0LS44OCAzIC41NDQgMi4zOTJxLjgzMi43MzYgMi4zNDQuNTc2dDMuMDcyLS44MjQgMi4yNDgtMS4zNTJxMi4xNDQtMi4xNDQgNS4xNjgtNi42NTZ0My42MzItNS44MDh6TTIuMjQgMjguMjRxMS4wNTYtLjY4OCAxLjcxMi0xLjUyOHQuOTUyLTEuNjE2LjU0NC0xLjUyLjcyLTEuNDggMS4yNC0xLjI4cTEuMDg4LS44IDIuNTA0LS43MDR0Mi40MjQgMS4xNjhxLjgxNi44OC44MjQgMi42NHQtMS4wOCAyLjg5NnEtMS4yMTYgMS4xMi0yLjkwNCAxLjYyNHQtMy40MjQuNDI0LTMuNTEyLS42MjR6Ii8+PC9zdmc+',
    76         'heading'     => __( 'Customize your site quickly' ),
    77         'description' => __( 'Wherever you are on the front-end, you can click the customize link in the toolbar to swiftly make changes to your site.' ),
    78     ),
    79 );
    80 
    81 $tech_features = array(
    82     array(
    83         'heading'     => __( 'Taxonomy Roadmap' ),
    84         'description' => __( 'Terms shared across multiple taxonomies are now split into separate terms.' ),
    85     ),
    86     array(
    87         'heading'     => __( 'Template Hierarchy' ),
    88         /* Translators: 1: singular.php; 2: single.php; 3:page.php */
    89         'description' => sprintf( __( 'Added %1$s as a fallback for %2$s and %3$s' ), '<code>singular.php</code>', '<code>single.php</code>', '<code>page.php</code>' ),
    90     ),
    91     array(
    92         'heading'     => '<code>WP_List_Table</code>',
    93         'description' => __( 'List tables can and should designate a primary column.' ),
    94     ),
    95 );
    96 
    9732?>
    9833    <div class="wrap about-wrap">
    … …  
    10843        </h2>
    10944
    110         <div class="headline-feature feature-video">
    111             <iframe width="1050" height="591" src="<?php echo esc_url( $video_url ); ?>" frameborder="0" allowfullscreen></iframe>
    112             <script src="https://videopress.com/videopress-iframe.js"></script>
    113         </div>
    114 
    115         <hr/>
     45        <div class="headline-feature feature-section one-col">
     46            <h2><?php echo ( 'Twenty Sixteen' ); ?></h2>
     47            <div class="media-container">
     48                <img src="https://cldup.com/K6k4JfS2nW.png" alt="" />
     49            </div>
     50            <div class="two-col">
     51                <div class="col">
     52                    <h3><?php echo ( 'Introducing Twenty Sixteen' ); ?></h3>
     53                    <p><?php echo ( 'Our newest default theme, Twenty Sixteen, is a modern take on a classic blog design.' ); ?></p>
     54                    <p><?php echo ( 'Twenty Sixteen was built with a mobile-first approach, ensuring your site will look great on any device. A harmonious fluid grid, fun color schemes, flexible mast head, and more make this a great addition to the default theme family.' ); ?></p>
     55                    <div class="horizontal-image">
     56                        <div class="content">
     57                            <img class="feature-image horizontal-screen" src="https://cldup.com/J-zxmMqkXs.png" alt="" />
     58                        </div>
     59                    </div>
     60                </div>
     61                <div class="col feature-image">
     62                    <img class="vertical-screen" src="https://cldup.com/M8i_6X5LUL.png" alt="" />
     63                </div>
     64            </div>
     65        </div>
     66
     67        <hr />
    11668
    11769        <div class="feature-section two-col">
    118             <?php foreach ( $major_features as $feature ) : ?>
    11970            <div class="col">
    12071                <div class="media-container">
    121                     <?php
    122                     // Video.
    123                     if ( is_array( $feature['src'] ) ) :
    124                         echo wp_video_shortcode( array(
    125                             'mp4'      => $feature['src']['mp4'],
    126                             'ogv'      => $feature['src']['ogv'],
    127                             'webm'     => $feature['src']['webm'],
    128                             'loop'     => true,
    129                             'autoplay' => true,
    130                             'width'    => 500,
    131                             'height'   => 284
    132                         ) );
    133 
    134                     // Image.
    135                     else:
    136                     ?>
    137                     <img src="<?php echo esc_url( $feature['src'] ); ?>" alt="" />
    138                     <?php endif; ?>
    139                 </div>
    140                 <h3><?php echo $feature['heading']; ?></h3>
    141                 <p><?php echo $feature['description']; ?></p>
    142             </div>
    143             <?php endforeach; ?>
    144         </div>
    145 
    146         <div class="feature-section three-col">
    147             <?php foreach ( $minor_features as $feature ) : ?>
    148             <div class="col">
    149                 <div class="svg-container">
    150                     <img src="<?php echo esc_attr( $feature['src'] ); ?>" alt="" />
    151                 </div>
    152                 <h3><?php echo $feature['heading']; ?></h3>
    153                 <p><?php echo $feature['description']; ?></p>
    154             </div>
    155             <?php endforeach; ?>
    156         </div>
     72                    <img src="https://cldup.com/av6MH44-Au.png" alt="" />
     73                </div>
     74            </div>
     75            <div class="col">
     76                <h3><?php echo ( 'Responsive images' ); ?></h3>
     77                <p><?php echo ( 'WordPress now takes a smarter approach to displaying device-appropriate image sizes, ensuring a perfect fit every time. You don&#8217;t need to do anything to your theme, it just works.' ); ?></p>
     78            </div>
     79        </div>
     80
     81        <hr />
     82
     83        <div class="feature-section two-col">
     84            <div class="col">
     85                <div class="embed-container">
     86                    <?php echo wp_oembed_get( 'https://make.wordpress.org/core/2015/10/28/new-embeds-feature-in-wordpress-4-4/' ); ?>
     87                </div>
     88                <h3><?php echo ( 'Embeddable WordPress content' ); ?></h3>
     89                <p><?php echo ( 'Now you can embed WordPress content inside of other WordPress content. Simply drop a post URL into the editor and see an instant embed preview, complete with title, excerpt, comment and sharing links, even your site icon.' ); ?></p>
     90            </div>
     91            <div class="col">
     92                <div class="embed-container">
     93                    <?php echo wp_oembed_get( '' ); ?>
     94                </div>
     95                <h3><?php echo ( 'More third-party embeds' ); ?></h3>
     96                <p><?php echo ( 'If the addition of post embeds weren’t enough, WordPress 4.4 also adds support for five new oEmbed providers: Cloudup, ReverbNation, Reddit Comments, VideoPress, and Speaker Deck.' ); ?></p>
     97            </div>
     98        </div>
     99
     100        <hr />
    157101
    158102        <div class="changelog">
    159103            <h3><?php _e( 'Under the Hood' ); ?></h3>
    160104
     105            <div class="feature-section under-the-hood one-col">
     106                <div class="col">
     107                    <h4><?php echo ( 'REST API infrastructure' ); ?></h4>
     108                    <div class="two-col-text">
     109                        <p><?php echo ( 'WordPress 4.4 marks the beginning of a new era with integration of infrastructure for the new REST API. The REST API serves to provide developers with a robust path forward for building and extending RESTful APIs on top of WordPress.' ); ?></p>
     110                        <p><?php
     111                            if ( current_user_can( 'install_plugins' ) ) {
     112                                $plugin_link = '<a href="' . esc_url( network_admin_url( 'plugin-install.php?tab=plugin-information&plugin=rest-api' .
     113                                        '&TB_iframe=true&width=600&height=550' ) ) . '" class="thickbox">WordPress REST API</a>';
     114                            } else {
     115                                $plugin_link = '<a href="https://wordpress.org/plugins/rest-api">WordPress REST API</a>';
     116                            }
     117
     118                            /* translators: WordPress REST API plugin link */
     119                            printf( ( 'Infrastructure is the first part of a multi-stage rollout for the REST API, which also targets inclusion of core endpoints in an upcoming release. To get a sneak peek of the core endpoints, and for more on extending the REST API, check out the official %s plugin.' ),
     120                                $plugin_link
     121                            );
     122                        ?></p>
     123                    </div>
     124                </div>
     125            </div>
     126
    161127            <div class="feature-section under-the-hood three-col">
    162                 <?php foreach ( $tech_features as $feature ) : ?>
    163                 <div class="col">
    164                     <h4><?php echo $feature['heading']; ?></h4>
    165                     <p><?php echo $feature['description']; ?></p>
    166                 </div>
    167                 <?php endforeach; ?>
     128                <div class="col">
     129                    <h4><?php echo ( 'Term meta' ); ?></h4>
     130                    <p><?php
     131                        /* translators: 1: add_term_meta() docs link, 2: get_term_meta() docs link, 3: update_term_meta() docs link */
     132                        printf( ( 'Terms now now support metadata, just like posts. See %1$s, %2$s, and %3$s for more information.' ),
     133                            '<a href="https://developer.wordpress.org/reference/functions/add_term_meta"><code>add_term_meta()</code></a>',
     134                            '<a href="https://developer.wordpress.org/reference/functions/get_term_meta"><code>get_term_meta()</code></a>',
     135                            '<a href="https://developer.wordpress.org/reference/functions/update_term_meta"><code>update_term_meta()</code></a>'
     136                         );
     137                    ?></p>
     138                </div>
     139                <div class="col">
     140                    <h4><?php echo ( 'Comment query improvements' ); ?></h4>
     141                    <p><?php
     142                        /* translators: WP_Comment_Query class name */
     143                        printf( ( 'Comment queries now have improved cache handling and performance. New arguments in %s making crafting robust comment queries simpler.' ), '<code>WP_Comment_Query</code>' );
     144                    ?></p>
     145                </div>
     146                <div class="col">
     147                    <h4><?php echo ( 'Term, comment, and network objects' ); ?></h4>
     148                    <p><?php
     149                        /* translators: 1: WP_Term class name, WP_Comment class name, WP_Network class name */
     150                        printf( ( 'New %1$s, %2$s, and %3$s objects make interacting with terms, comments, and networks more predictable and intuitive in code.' ),
     151                            '<code>WP_Term</code>',
     152                            '<code>WP_Comment</code>',
     153                            '<code>WP_Network</code>'
     154                        );
     155                    ?></p>
     156                </div>
    168157            </div>
    169158

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

    r35673 r35763  
    179179    font-weight: 300;
    180180    line-height: 1.3;
     181    text-align: center;
     182}
     183
     184.about-wrap .headline-feature h3 {
     185    margin-top: 0;
    181186    text-align: left;
    182 }
    183 
    184 .about-wrap .headline-feature h3 {
    185     margin-top: 30px;
    186     text-align: center;
    187187}
    188188
    … …  
    199199.about-wrap .feature-section p {
    200200    margin-top: 0.6em;
     201}
     202
     203.about-wrap .two-col-text {
     204    -webkit-column-count: 2;
     205    -moz-column-count: 2;
     206    column-count: 2;
     207    -webkit-column-gap: 40px;
     208    -moz-column-gap: 40px;
     209    column-gap: 40px;
     210}
     211
     212.about-wrap .two-col-text p:first-of-type {
     213    margin-top: 0;
    201214}
    202215
    … …  
    227240    overflow: hidden;
    228241    padding: 0 0 40px;
    229     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    230 }
    231 
    232 .about-wrap .headline-feature .feature-section {
     242}
     243
     244.about-wrap .headline-feature {
    233245    margin: 0 auto;
    234     max-width: 95%;
     246    max-width: 80%;
    235247}
    236248
    237249.about-wrap .feature-section .media-container {
    238     border: 1px solid #ddd;
    239250    overflow: hidden;
    240251}
    241252
    242 .about-wrap .feature-section .svg-container {
    243     padding: 50px 0;
     253.about-wrap .headline-feature .col {
     254    width: 65.2%;
     255}
     256
     257.about-wrap .headline-feature .col.feature-image {
     258    width: 30%;
     259}
     260
     261.about-wrap .headline-feature .vertical-screen {
     262    float: right;
     263    margin-left: 40px;
     264    max-width: 100%;
     265}
     266
     267.about-wrap .headline-feature .horizontal-screen {
     268    margin-top: 20px;
     269    max-width: 100%;
     270}
     271
     272.about-wrap .embed-container {
    244273    text-align: center;
    245     background-color: #e1e1e3;
    246 }
    247 
    248 .about-wrap .feature-section .svg-container img {
    249     max-width: 150px;
     274}
     275
     276.about-wrap .embed-cloudup iframe {
     277    height: 299px;
     278}
     279
     280.about-wrap .embed-container iframe {
     281    max-width: 100%;
     282}
     283
     284.about-wrap .wp-embedded-content {
     285    max-width: 100%;
    250286}
    251287
    … …  
    379415        margin: 40px 0 0;
    380416        padding: 0 0 40px;
    381         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     417    }
     418
     419    .about-wrap .headline-feature {
     420        position: relative;
     421    }
     422
     423    .about-wrap .headline-feature .col.feature-image {
     424        position: absolute;
     425        bottom: 0;
     426        right: 0;
     427        width: 40%;
     428    }
     429
     430    .about-wrap .headline-feature .horizontal-image {
     431        position: relative;
     432    }
     433
     434    .about-wrap .headline-feature .horizontal-image:before {
     435        display: block;
     436        content: "";
     437        width: 100%;
     438        padding-top: 80%;
     439    }
     440
     441    .about-wrap .headline-feature .horizontal-image > .content {
     442        position: absolute;
     443        top: 0;
     444        left: 0;
     445        right: 0;
     446        bottom: 0;
     447    }
     448
     449    .about-wrap .headline-feature .horizontal-image img {
     450        position: absolute;
     451        bottom: 0;
     452    }
     453
     454    .about-wrap .two-col-text {
     455        -webkit-column-count: 1;
     456        -moz-column-count: 1;
     457        column-count: 1;
    382458    }
    383459
    … …  
    421497        margin-bottom: 1.5em;
    422498        width: 100%;
    423     }
    424 
    425     .about-wrap .feature-section .svg-container {
    426         padding-top: 20px;
    427         padding-bottom: 20px;
    428499    }
    429500

  • trunk/src/wp-admin/css/common.css

    r35721 r35763  
    27212721
    27222722/* Thickbox for Plugin Install screen */
     2723body.about-php #TB_window,
    27232724body.plugin-install-php #TB_window,
    27242725body.import-php #TB_window,
    … …  
    27302731
    27312732/* IE 8 needs a change in the pseudo element content */
     2733.ie8 body.about-php #TB_window:before,
    27322734.ie8 body.plugin-install-php #TB_window:before,
    27332735.ie8 body.import-php #TB_window:before,
    … …  
    27392741}
    27402742
     2743body.about-php #TB_window.thickbox-loading:before,
    27412744body.plugin-install-php #TB_window.thickbox-loading:before,
    27422745body.import-php #TB_window.thickbox-loading:before,
    … …  
    27642767    (min-resolution: 120dpi) {
    27652768
     2769    body.about-php #TB_window.thickbox-loading:before,
    27662770    body.plugin-install-php #TB_window.thickbox-loading:before,
    27672771    body.import-php #TB_window.thickbox-loading:before,
    … …  
    27732777}
    27742778
     2779body.about-php #TB_title,
    27752780body.plugin-install-php #TB_title,
    27762781body.import-php #TB_title,
    … …  
    27822787}
    27832788
     2789body.about-php #TB_ajaxWindowTitle,
    27842790body.plugin-install-php #TB_ajaxWindowTitle,
    27852791body.import-php #TB_ajaxWindowTitle,
    … …  
    27902796}
    27912797
     2798body.about-php .tb-close-icon,
    27922799body.plugin-install-php .tb-close-icon,
    27932800body.import-php .tb-close-icon,
    … …  
    28022809}
    28032810
     2811body.about-php #TB_closeWindowButton:focus,
     2812body.about-php #TB_closeWindowButton:focus .tb-close-icon,
     2813body.about-php .tb-close-icon:focus,
     2814body.about-php .tb-close-icon:hover,
    28042815body.plugin-install-php #TB_closeWindowButton:focus,
    28052816body.plugin-install-php #TB_closeWindowButton:focus .tb-close-icon,
    … …  
    28282839}
    28292840
     2841body.about-php .tb-close-icon:before,
    28302842body.plugin-install-php .tb-close-icon:before,
    28312843body.import-php .tb-close-icon:before,
    … …  
    28392851/* move plugin install close icon to top on narrow screens */
    28402852@media screen and ( max-width: 830px ) {
     2853    body.about-php .tb-close-icon,
    28412854    body.plugin-install-php .tb-close-icon,
    28422855    body.import-php .tb-close-icon,
Note: See TracChangeset for help on using the changeset viewer.