WordPress.org
Get WordPress

Make WordPress Core

Changeset 33466


Ignore:
Timestamp:
07/28/2015 09:22:23 PM (8 years ago)
Author:
obenland
Message:

About: First pass at WordPress 4.3 About page.

Still missing images and some string revisions.

See #32929.

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

Legend:

Unmodified
Added
Removed

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

    r33065 r33466  
    2222
    2323include( ABSPATH . 'wp-admin/admin-header.php' );
     24
     25$major_features = array(
     26    array(
     27        'src'         => '',
     28        'heading'     => __( 'Formatting Shortcuts' ),
     29        'description' => __( '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 <code>*</code> and a <code>#</code>.' ),
     30    ),
     31    array(
     32        'src'         => '',
     33        'heading'     => __( 'Menus in the Customizer' ),
     34        'description' => __( 'Create your menu, update it, and preview it in the customizer, before sharing it with the world. With every release, it becomes easier and faster to build your site from the front-end. And a streamlined customizer design mean a mobile-first, accessibility ready interface.' ),
     35    ),
     36    array(
     37        'src'         => '',
     38        'heading'     => __( 'Better Passwords' ),
     39        'description' => __( 'Keep your site more secure with WordPress’ improved approach to passwords. Instead of receiving passwords via email, you’ll get a password reset link. When you add new users to your site, WordPress will automatically generate a secure password.' ),
     40    ),
     41    array(
     42        'src'         => '',
     43        'heading'     => __( 'Site Icons' ),
     44        '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.' ),
     45    ),
     46);
     47shuffle( $major_features );
     48
     49$minor_features = array(
     50    array(
     51        'src'         => '',
     52        'heading'     => __( 'A smoother admin experience' ),
     53        'description' => __( 'Refinements to the list view across the admin make your WordPress more accessible and easier to work with on any device.' ),
     54    ),
     55    array(
     56        'src'         => '',
     57        'heading'     => __( 'Comments turned off on pages' ),
     58        'description' => __( 'All new pages that you create will have comments turned off. Keep discussions to your blog, right where they’re supposed to happen.' ),
     59    ),
     60    array(
     61        'src'         => '',
     62        'heading'     => __( 'Customize your site quickly' ),
     63        'description' => __( 'Wherever you are on the front-end, you can click the customize button in the toolbar to swiftly make changes to your site.' ),
     64    ),
     65);
     66
     67$tech_features = array(
     68    array(
     69        'heading'     => __( 'Taxonomy Roadmap' ),
     70        'description' => __( 'Terms shared across multiple taxonomies are now split into separate terms.' ),
     71    ),
     72    array(
     73        'heading'     => __( 'Template Hierarchy' ),
     74        'description' => __( 'Added <code>singular.php</code> as a fallback for <code>single.php</code> and <code>page.php</code>.' ),
     75    ),
     76    array(
     77        'heading'     => __( 'List table' ),
     78        'description' => __( 'List tables now can (and often should) have a primary column defined.' ),
     79    ),
     80);
     81
    2482?>
    25 <div class="wrap about-wrap">
     83    <div class="wrap about-wrap">
     84        <h1><?php printf( __( 'Welcome to WordPress&nbsp;%s' ), $display_version ); ?></h1>
    2685
    27 <h1><?php printf( __( 'Welcome to WordPress&nbsp;%s' ), $display_version ); ?></h1>
     86        <div class="about-text"><?php /* @TODO Fun tag line. */ printf( __( 'Thank you for updating to WordPress %s!' ), $display_version ); ?></div>
     87        <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
    2888
    29 <div class="about-text"><?php printf( __( 'Thank you for updating! WordPress %s helps you communicate and share, globally.' ), $display_version ); ?></div>
     89        <h2 class="nav-tab-wrapper">
     90            <a href="about.php" class="nav-tab nav-tab-active"><?php _e( 'What&#8217;s New' ); ?></a>
     91            <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
     92            <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
     93        </h2>
    3094
    31 <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
     95        <div class="headline-feature feature-video">
     96            <!-- [4.3 video] -->
     97        </div>
    3298
    33 <h2 class="nav-tab-wrapper">
    34     <a href="about.php" class="nav-tab nav-tab-active">
    35         <?php _e( 'What&#8217;s New' ); ?>
    36     </a><a href="credits.php" class="nav-tab">
    37         <?php _e( 'Credits' ); ?>
    38     </a><a href="freedoms.php" class="nav-tab">
    39         <?php _e( 'Freedoms' ); ?>
    40     </a>
    41 </h2>
     99        <hr/>
    42100
    43 <div class="headline-feature feature-video">
    44 <embed type="application/x-shockwave-flash" src="https://v0.wordpress.com/player.swf?v=1.04" width="1000" height="560" wmode="direct" seamlesstabbing="true" allowfullscreen="true" allowscriptaccess="always" overstretch="true" flashvars="guid=e9kH4FzP&amp;isDynamicSeeking=true"></embed>
    45 </div>
     101        <div class="feature-section two-col">
     102            <?php foreach ( $major_features as $feature ) : ?>
     103            <div class="col">
     104                <img src="<?php echo esc_url( $feature['src'] ); ?>" />
     105                <h3><?php echo $feature['heading']; ?></h3>
     106                <p><?php echo $feature['description']; ?></p>
     107            </div>
     108            <?php endforeach; ?>
     109        </div>
    46110
    47 <hr />
     111        <div class="feature-section three-col">
     112            <?php foreach ( $minor_features as $feature ) : ?>
     113            <div class="col">
     114                <img src="<?php echo esc_url( $feature['src'] ); ?>" />
     115                <h3><?php echo $feature['heading']; ?></h3>
     116                <p><?php echo $feature['description']; ?></p>
     117            </div>
     118            <?php endforeach; ?>
     119        </div>
    48120
    49 <div class="feature-section two-col">
    50     <div class="col">
    51         <h3><?php _e( 'An easier way to share content' ); ?></h3>
    52         <p><?php printf( __( 'Clip it, edit it, publish it. Get familiar with the new and improved Press This. From the <a href="%s">Tools</a> menu, add Press This to your browser bookmark bar or your mobile device home screen. Once installed you can share your content with lightning speed. Sharing your favorite videos, images, and content has never been this fast or this easy.' ), admin_url( 'tools.php' ) ); ?></p>
    53         <p><?php _e( 'Drag the bookmarklet below to your bookmarks bar. Then, when you&#8217;re on a page you want to share, simply &#8220;press&#8221; it.' ); ?></p>
     121        <div class="changelog">
     122            <h3><?php _e( 'Under the Hood' ); ?></h3>
    54123
    55         <p class="pressthis-bookmarklet-demo">
    56             <a class="pressthis-bookmarklet" onclick="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This' ); ?></span></a>
    57         </p>
    58     </div>
     124            <div class="feature-section under-the-hood three-col">
     125                <?php foreach ( $tech_features as $feature ) : ?>
     126                <div class="col">
     127                    <h3><?php echo $feature['heading']; ?></h3>
     128                    <p><?php echo $feature['description']; ?></p>
     129                </div>
     130                <?php endforeach; ?>
     131            </div>
    59132
    60     <div class="col">
    61         <img src="//s.w.org/images/core/4.2/press-this.jpg" />
    62     </div>
    63 </div>
     133            <div class="return-to-dashboard">
     134                <?php if ( current_user_can( 'update_core' ) && isset( $_GET['updated'] ) ) : ?>
     135                    <a href="<?php echo esc_url( self_admin_url( 'update-core.php' ) ); ?>">
     136                        <?php is_multisite() ? _e( 'Return to Updates' ) : _e( 'Return to Dashboard &rarr; Updates' ); ?>
     137                    </a> |
     138                <?php endif; ?>
     139                <a href="<?php echo esc_url( self_admin_url() ); ?>"><?php is_blog_admin() ? _e( 'Go to Dashboard &rarr; Home' ) : _e( 'Go to Dashboard' ); ?></a>
     140            </div>
    64141
    65 <div class="feature-section two-col">
    66     <div class="col">
    67         <img src="//s.w.org/images/core/4.2/unicode.png" />
    68     </div>
    69     <div class="col">
    70         <h3><?php _e( 'Extended character support' ); ?></h3>
    71         <p><?php _e( 'Writing in WordPress, whatever your language, just got better. WordPress 4.2 supports a host of new characters out-of-the-box, including native Chinese, Japanese, and Korean characters, musical and mathematical symbols, and hieroglyphs.' ); ?></p>
    72         <p><?php
    73             /* translators: 1: heart emoji, 2: frog face emoji, 3, monkey emoji, 4: pizza emoji, 5: Emoji Codex link */
    74             printf( __( 'Don&#8217;t use any of those characters? You can still have fun &mdash; emoji are now available in WordPress! Get creative and decorate your content with %1$s, %2$s, %3$s, %4$s, and all the many other <a href="%5$s">emoji</a>.' ), '&#x1F499', '&#x1F438', '&#x1F412', '&#x1F355', __( 'https://codex.wordpress.org/Emoji' ) );
    75         ?></p>
    76     </div>
    77 </div>
    78 
    79 <div class="changelog feature-section three-col">
    80     <div>
    81         <img src="//s.w.org/images/core/4.2/theme-switcher.png" />
    82         <h3><?php _e( 'Switch themes in the Customizer' ); ?></h3>
    83         <p><?php _e( 'Browse and preview your installed themes from the Customizer. Make sure the theme looks great with <em>your</em> content, before it debuts on your site. ' ); ?></p>
    84     </div>
    85     <div>
    86         <img src="//s.w.org/images/core/4.2/embeds.png" />
    87         <h3><?php _e( 'Even more embeds' ); ?></h3>
    88         <p><?php _e( 'Paste links from Tumblr.com and Kickstarter and watch them magically appear right in the editor. With every release, your publishing and editing experience get closer together.' ); ?></p>
    89     </div>
    90     <div class="last-feature">
    91         <img src="//s.w.org/images/core/4.2/plugins.png" />
    92         <h3><?php _e( 'Streamlined plugin updates' ); ?></h3>
    93         <p><?php _e( 'Goodbye boring loading screen, hello smooth and simple plugin updates. Click <em>Update&nbsp;Now</em> and watch the magic happen.' ); ?></p>
    94     </div>
    95 </div>
    96 
    97 <div class="changelog under-the-hood feature-list">
    98     <h3><?php _e( 'Under the Hood' ); ?></h3>
    99 
    100     <div class="feature-section col two-col">
    101         <div>
    102             <h4><?php _e( 'utf8mb4 support' ); ?></h4>
    103             <p><?php _e( 'Database character encoding has changed from utf8 to utf8mb4, which adds support for a whole range of new 4-byte characters.' ); ?></p>
    104 
    105             <h4><?php _e( 'JavaScript accessibility' ); ?></h4>
    106             <p><?php
    107                 /* translators: %s wp.a11y.speak() */
    108                 printf( __( 'You can now send audible notifications to screen readers in JavaScript with %s. Pass it a string, and an update will be sent to a dedicated ARIA live notifications area.' ), '<code>wp.a11y.speak()</code>' );
    109             ?></p>
    110         </div>
    111         <div class="last-feature">
    112             <h4><?php _e( 'Shared term splitting' ); ?></h4>
    113             <p><?php
    114                 /* translators: 1: Term splitting guide link */
    115                 printf( __( 'Terms shared across multiple taxonomies will be split when one of them is updated. Find out more in the <a href="%1$s">Plugin Developer Handbook</a>.' ), 'https://developer.wordpress.org/plugins/taxonomy/working-with-split-terms-in-wp-4-2/' );
    116             ?></p>
    117 
    118             <h4><?php _e( 'Complex query ordering' ); ?></h4>
    119             <p><?php
    120                 /* translators: 1: WP_Query, 2: WP_Comment_Query, 3: WP_User_Query */
    121                 printf( __( '%1$s, %2$s, and %3$s now support complex ordering with named meta query clauses.' ), '<code>WP_Query</code>', '<code>WP_Comment_Query</code>', '<code>WP_User_Query</code>' );
    122             ?></p>
    123142        </div>
    124143    </div>
    125 
    126     <div class="return-to-dashboard">
    127         <?php if ( current_user_can( 'update_core' ) && isset( $_GET['updated'] ) ) : ?>
    128         <a href="<?php echo esc_url( self_admin_url( 'update-core.php' ) ); ?>"><?php
    129             is_multisite() ? _e( 'Return to Updates' ) : _e( 'Return to Dashboard &rarr; Updates' );
    130         ?></a> |
    131         <?php endif; ?>
    132         <a href="<?php echo esc_url( self_admin_url() ); ?>"><?php
    133             is_blog_admin() ? _e( 'Go to Dashboard &rarr; Home' ) : _e( 'Go to Dashboard' ); ?></a>
    134     </div>
    135 
    136 </div>
    137144<?php
    138145

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

    r33113 r33466  
    136136/* 1.2 - Structure */
    137137
    138 .about-wrap .two-col > div {
     138.about-wrap [class$=col] .col {
     139    float: left;
    139140    position: relative;
     141}
     142.about-wrap .two-col .col {
     143    margin-right: 4.799999999%;
    140144    width: 47.6%;
    141     margin-right: 4.799999999%;
    142     float: left;
    143 }
    144 
    145 .about-wrap .three-col > div {
    146     position: relative;
     145}
     146
     147.about-wrap .three-col .col {
     148    margin-right: 4.999999999%;
    147149    width: 29.95%;
    148     margin-right: 4.999999999%;
    149     float: left;
    150 }
    151 
    152 .about-wrap [class$=col] .last-feature {
     150}
     151
     152.about-wrap .two-col .col:nth-of-type(2n),
     153.about-wrap .three-col .col:nth-of-type(3n) {
    153154    margin-right: 0;
    154155}
    … …  
    207208    position: relative;
    208209    margin: 40px 0;
    209     padding-bottom: 56.25%; /* video is 1280 x 720 */
     210    /*padding-bottom: 56.25%; /* video is 1280 x 720 */
    210211    width: 100%;
    211212    height: 0;
    … …  
    236237}
    237238
    238 .about-wrap .feature-section .col:nth-of-type(odd) {
    239     float: left;
    240     margin: 40px 5% 0 0;
    241     width: 48%;
    242 }
    243 
    244 .about-wrap .feature-section .col:nth-of-type(even) {
    245     float: right;
    246     margin: 40px 0 0;
    247     width: 46%;
     239.about-wrap .feature-section:not(.under-the-hood) .col {
     240    margin-top: 40px;
    248241}
    249242
    … …  
    252245}
    253246
    254 .about-wrap .changelog.feature-section > div {
     247.about-wrap .changelog.feature-section .col {
    255248    margin-top: 40px;
    256249}
    … …  
    367360    }
    368361
    369     .about-wrap .one-col > div,
    370     .about-wrap .two-col > div,
    371     .about-wrap .three-col > div,
    372     .about-wrap .two-col .col:nth-of-type(n) {
     362    .about-wrap [class$=col] .col {
     363        float: none;
    373364        width: 100%;
    374365        margin: 40px 0 0;
    … …  
    386377    }
    387378
    388     .about-wrap .feature-list div {
     379    .about-wrap .feature-list .col {
    389380        margin: 0;
    390381        padding: 0;
    … …  
    433424    }
    434425
    435     .about-wrap .three-col div,
    436     .about-wrap .headline-feature .feature-section div {
     426    .about-wrap .three-col .col,
     427    .about-wrap .headline-feature .feature-section .col {
    437428        width: 100% !important;
    438429        float: none !important;
Note: See TracChangeset for help on using the changeset viewer.