WordPress.org

Make WordPress Core

Changeset 33498


Ignore:
Timestamp:
07/29/2015 07:57:00 PM (6 years ago)
Author:
obenland
Message:

About: Second pass at 4.3 about page.

Adds images and videos for major and minor features.
Restores a mangled placeholder in Formatting Shortcuts description.

Assets still need to be moved to the .org CDN once deemed final.

Props ryelle, melchoyce, helen.
See #32929.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/about.php

    r33467 r33498  
    2525$major_features = array(
    2626    array(
    27         'src'         => '',
     27        'src'         => array(
     28            'mp4'  => 'https://cldup.com/2k26HVNP6P.mp4',
     29            'ogv'  => '',
     30            'webm' => '',
     31        ),
    2832        'heading'     => 'Formatting Shortcuts',
    2933
    3034        /* Translators: 1: asterisks; 2: number sign; */
    31         '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$.', '<code>*</code>', '<code>#</code>' ),
    32     ),
    33     array(
    34         'src'         => '',
     35        '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>' ),
     36    ),
     37    array(
     38        'src'         => 'https://cldup.com/k23oK-g_v1.jpg',
    3539        'heading'     => 'Menus in the Customizer',
    3640        '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.',
    3741    ),
    3842    array(
    39         'src'         => '',
     43        'src'         => 'https://cldup.com/t1HCztI0PR.jpg',
    4044        'heading'     => 'Better Passwords',
    4145        '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.',
    4246    ),
    4347    array(
    44         'src'         => '',
     48        'src'         => 'https://cldup.com/8LxuMwmsvE.jpg',
    4549        'heading'     => 'Site Icons',
    4650        '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.',
     
    5155$minor_features = array(
    5256    array(
    53         'src'         => '',
     57        'src'         => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj48cGF0aCBmaWxsPSIjMDBhMGQyIiBkPSJNNTAgMjE1aDI0MHYzMEg1MHpNNTAgMjc1aDI0MHYzMEg1MHpNNTAgMTU1aDI0MHYzMEg1MHpNNTAgOTVoMjQwdjMwSDUwek0zMTAuMSA5NWwxOS45IDMwIDIwLjEtMzAiLz48L3N2Zz4=',
    5458        'heading'     => 'A smoother admin experience',
    5559        'description' => 'Refinements to the list view across the admin make your WordPress more accessible and easier to work with on any device.',
    5660    ),
    5761    array(
    58         'src'         => '',
     62        'src'         => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzAwYTBkMiIgZD0iTTUgMmgxMHEuODIgMCAxLjQxLjU5VDE3IDR2OHEwIC44Mi0uNTkgMS40MVQxNSAxNGgtMmwtNSA1di01SDVxLS44MiAwLTEuNDEtLjU5VDMgMTJWNHEwLS44Mi41OS0xLjQxVDUgMnptOC41IDguNUwxMSA4bDIuNS0yLjUtMS0xTDEwIDcgNy41IDQuNWwtMSAxTDkgOGwtMi41IDIuNSAxIDFMMTAgOWwyLjUgMi41eiIvPjwvc3ZnPg==',
    5963        'heading'     => 'Comments turned off on pages',
    6064        'description' => 'All new pages that you create will have comments turned off. Keep discussions to your blog, right where they’re supposed to happen.',
    6165    ),
    6266    array(
    63         'src'         => '',
     67        'src'         => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwYTBkMiIgZD0iTTI5LjMyOCA1LjcxMnEuMDQ4LS4xNDQuMDk2LS4zODR0LS4wNjQtLjgxNi0uNTI4LS45NzZxLS4zODQtLjM2OC0uODcyLS40NjR0LS43OTIgMGwtLjI4OC4wOHEtMS40NTYuNzItNS44OCAzLjczNnQtNi4zOTIgNS4xNzZxLS43MzYuODMyLTEuNDA4IDIuMzJ0LS44OCAzIC41NDQgMi4zOTJxLjgzMi43MzYgMi4zNDQuNTc2dDMuMDcyLS44MjQgMi4yNDgtMS4zNTJxMi4xNDQtMi4xNDQgNS4xNjgtNi42NTZ0My42MzItNS44MDh6TTIuMjQgMjguMjRxMS4wNTYtLjY4OCAxLjcxMi0xLjUyOHQuOTUyLTEuNjE2LjU0NC0xLjUyLjcyLTEuNDggMS4yNC0xLjI4cTEuMDg4LS44IDIuNTA0LS43MDR0Mi40MjQgMS4xNjhxLjgxNi44OC44MjQgMi42NHQtMS4wOCAyLjg5NnEtMS4yMTYgMS4xMi0yLjkwNCAxLjYyNHQtMy40MjQuNDI0LTMuNTEyLS42MjR6Ii8+PC9zdmc+',
    6468        'heading'     => 'Customize your site quickly' ,
    6569        'description' => 'Wherever you are on the front-end, you can click the customize button in the toolbar to swiftly make changes to your site.',
     
    8892        <h1><?php printf( __( 'Welcome to WordPress&nbsp;%s' ), $display_version ); ?></h1>
    8993
    90         <div class="about-text"><?php /* @TODO Fun tag line. */ printf( 'Thank you for updating to WordPress %s!', $display_version ); ?></div>
     94        <div class="about-text"><?php printf( 'Thank you for updating! WordPress %s: faster workflow, easier customization, strong by default.', $display_version ); ?></div>
    9195        <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
    9296
     
    106110            <?php foreach ( $major_features as $feature ) : ?>
    107111            <div class="col">
    108                 <img src="<?php echo esc_url( $feature['src'] ); ?>" />
     112                <div class="media-container">
     113                    <?php
     114                    // Video.
     115                    if ( is_array( $feature['src'] ) ) :
     116                        echo wp_video_shortcode( array(
     117                            'mp4'      => $feature['src']['mp4'],
     118                            'ogv'      => $feature['src']['ogv'],
     119                            'webm'     => $feature['src']['webm'],
     120                            'loop'     => true,
     121                            'autoplay' => true,
     122                            'width'    => 500,
     123                            'height'   => 284
     124                        ) );
     125
     126                    // Image.
     127                    else:
     128                    ?>
     129                    <img src="<?php echo esc_url( $feature['src'] ); ?>" />
     130                    <?php endif; ?>
     131                </div>
    109132                <h3><?php echo $feature['heading']; ?></h3>
    110133                <p><?php echo $feature['description']; ?></p>
     
    116139            <?php foreach ( $minor_features as $feature ) : ?>
    117140            <div class="col">
    118                 <img src="<?php echo esc_url( $feature['src'] ); ?>" />
     141                <div class="svg-container">
     142                    <img src="<?php echo esc_attr( $feature['src'] ); ?>" />
     143                </div>
    119144                <h3><?php echo $feature['heading']; ?></h3>
    120145                <p><?php echo $feature['description']; ?></p>
     
    129154                <?php foreach ( $tech_features as $feature ) : ?>
    130155                <div class="col">
    131                     <h3><?php echo $feature['heading']; ?></h3>
     156                    <h4><?php echo $feature['heading']; ?></h4>
    132157                    <p><?php echo $feature['description']; ?></p>
    133158                </div>
  • trunk/src/wp-admin/css/about.css

    r33466 r33498  
    237237}
    238238
     239.about-wrap .feature-section .media-container {
     240    border: 1px solid #ddd;
     241    overflow: hidden;
     242}
     243
     244.about-wrap .feature-section .svg-container {
     245    padding: 50px 0;
     246    text-align: center;
     247    background-color: #e1e1e3;
     248}
     249
     250.about-wrap .feature-section .svg-container img {
     251    max-width: 150px;
     252}
     253
    239254.about-wrap .feature-section:not(.under-the-hood) .col {
    240255    margin-top: 40px;
     
    368383    }
    369384
    370     .about-wrap .two-col .col h3 {
    371         margin-top: 0;
    372     }
    373 
    374385    .about-wrap .three-col img {
    375386        display: block;
     
    424435    }
    425436
     437    .about-wrap .feature-section .svg-container {
     438        padding-top: 20px;
     439        padding-bottom: 20px;
     440    }
     441
    426442    .about-wrap .three-col .col,
    427443    .about-wrap .headline-feature .feature-section .col {
    428444        width: 100% !important;
    429445        float: none !important;
    430     }
    431 
    432     .about-wrap .dfw p {
    433         max-width: 90%;
    434446    }
    435447}
Note: See TracChangeset for help on using the changeset viewer.