WordPress.org
Get WordPress

Make WordPress Core

Changeset 40849


Ignore:
Timestamp:
05/27/2017 03:03:08 PM (8 years ago)
Author:
melchoyce
Message:

About: Introduce design and add link to Media Widgets API dev note.

Props: ryelle rclations melchoyce westonruter.
See #40721.

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

Legend:

Unmodified
Added
Removed

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

    r40841 r40849  
    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
    … …  
    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">
    70             <div class="col">
    71                 <div style="height:254px;width:480px;background:black;"></div>
     81            <div class="col">
    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>
    … …  
    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,
    … …  
    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>
    … …  
    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.' ); ?>
     120            </div>
     121            <div class="col">
     122                <img src="https://cldup.com/GuISab3_X1.png" alt="" />
    112123            </div>
    113124        </div>
    … …  
    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>
    … …  
    145153                </div>
    146154                <div class="col">
    147                     <h3><?php _e( 'Media Widgets API' ); ?></h3>
     155                    <h3><a href="https://make.wordpress.org/core/2017/05/26/media-widgets-for-images-video-and-audio/"><?php _e( 'Media Widgets API' ); ?></a></h3>
    148156                    <p><?php _e( 'The introduction of a new base media widget REST API schema to 4.8 opens up possibilities for more media widgets (such as galleries or playlists) in the future. The three new media widgets are powered by a shared base class that covers most of the interactions with the media modal. That class also makes it easier to create new media widgets and paves the way for more to come.' ); ?></p>
    149157                </div>

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

    r39512 r40849  
    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;
     171}
     172
     173.about-wrap .feature-section.one-col {
     174    margin: 0 auto;
     175    max-width: 700px;
     176}
     177
     178.about-wrap [class$="-col"] .col {
     179    -webkit-flex: 1;
     180    -ms-flex: 1;
     181    flex: 1;
    167182}
    168183
    169184.about-wrap .two-col .col {
    170     margin-right: 4.799999999%;
    171     width: 47.6%;
     185    min-width: 47%;
     186    max-width: 47%;
     187}
     188
     189.about-wrap .three-col .col {
     190    align-self: flex-start;
     191    min-width: 31%;
     192    max-width: 31%;
    172193}
    173194
    174195.about-wrap .two-col img {
    175196    margin-bottom: 1.5em;
    176 }
    177 
    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;
    186 }
    187 
    188 .about-wrap .three-col .col {
    189     margin-right: 4.999999999%;
    190     width: 29.95%;
    191 }
    192 
    193 .about-wrap .two-col .col:nth-of-type(2n),
    194 .about-wrap .three-col .col:nth-of-type(3n) {
    195     margin-right: 0;
    196 }
    197 
    198 .about-wrap .under-the-hood {
    199     clear: both;
    200     overflow: hidden;
    201197}
    202198
    … …  
    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
    … …  
    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;
    … …  
    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
Note: See TracChangeset for help on using the changeset viewer.