Changeset 50478 for trunk/src/wp-admin/about.php
- Timestamp:
- 03/02/2021 07:48:41 PM (4 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/about.php
r50430 r50478 10 10 require_once __DIR__ . '/admin.php'; 11 11 12 wp_enqueue_script( 'wp-components' ); 13 wp_enqueue_style( 'wp-components' ); 14 12 15 /* translators: Page title of the About WordPress page in the admin. */ 13 16 $title = _x( 'About', 'page title' ); … … 91 94 <div class="column about__image"> 92 95 <video controls> 93 <source src="https://make.wordpress.org/core/files/2021/02/about-57-drag-drop-image.mp4" type="video/mp4" /> 96 <source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/mp4" /> 97 <source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/webm" /> 94 98 </video> 95 99 </div> … … 113 117 <p> 114 118 <?php 115 _e( '<strong>Social Icons block:</strong> you can now change the size of the icons in the Social Icons block.' );119 _e( '<strong>Social Icons block:</strong> now you can change the size of the icons.' ); 116 120 ?> 117 121 </p> 118 122 </div> 119 123 <div class="column about__image"> 120 <img src="https:// make.wordpress.org/core/files/2021/02/about-57-cover-1.jpg" alt="" />124 <img src="https://s.w.org/images/core/5.7/about-57-cover.jpg" alt="" /> 121 125 </div> 122 126 </div> … … 131 135 132 136 <div class="about__section has-subtle-background-color"> 133 <div class="column about__image"> 134 <div class="about__image-comparison"> 137 <figure class="column about__image" id="about-image-comparison"> 138 <div class="about__image-comparison no-js"> 139 <img src="https://s.w.org/images/core/5.7/about-57-color-old.png" alt="<?php esc_attr_e( 'Dashboard with old color scheme.' ); ?>" /> 135 140 <div class="about__image-comparison-resize"> 136 <img src="https:// make.wordpress.org/core/files/2021/02/about-57-color-new.png" />141 <img src="https://s.w.org/images/core/5.7/about-57-color-new.png" alt="<?php esc_attr_e( 'Dashboard with new color scheme.' ); ?>" /> 137 142 </div> 138 <img src="https://make.wordpress.org/core/files/2021/02/about-57-color-old.png" />139 143 </div> 140 </div> 144 <figcaption><?php _e( 'Above, the Dashboard before and after the color update in 5.7.' ); ?></figcaption> 145 </figure> 141 146 </div> 142 147 … … 194 199 <p> 195 200 <?php 196 _e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the directive <code>max-image-preview: large</code> by default. That means search engines can show bigger image previews (unless the blog is marked as not public), which can boost your traffic.' )201 _e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the <code>max-image-preview: large</code> directive by default. That means search engines can show bigger image previews, which can boost your traffic (unless the site is marked <em>not-public</em>).' ); 197 202 ?> 198 203 </p> … … 201 206 <h3><?php _e( 'Ongoing cleanup after update to jQuery 3.5.1' ); ?></h3> 202 207 <p><?php _e( 'For years jQuery helped make things move on the screen in ways the basic tools couldn’t—but that keeps changing, and so does jQuery.' ); ?></p> 203 <p><?php _e( ' One side effect: it generated a set of cryptic messages on the dashboard that informed only developers. In 5.7, you will get far fewer of those messages, and they will be in plain language.' ); ?></p>208 <p><?php _e( 'In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.' ); ?></p> 204 209 <h3><?php _e( 'Lazy-load your iframes' ); ?></h3> 205 210 <p><?php _e( 'Now it’s simple to let iframes lazy-load. Just add the <code>loading="lazy"</code> attribute to iframe tags on the front end.' ); ?></p> … … 235 240 </div> 236 241 </div> 242 243 <?php require_once ABSPATH . 'wp-admin/admin-footer.php'; ?> 244 245 <script> 246 wp.domReady( function() { 247 var createElement = wp.element.createElement; 248 var Fragment = wp.element.Fragment; 249 var render = wp.element.render; 250 var useState = wp.element.useState; 251 var ResizableBox = wp.components.ResizableBox; 252 253 var container = document.getElementById( 'about-image-comparison' ); 254 var images = container ? container.querySelectorAll( 'img' ) : []; 255 if ( ! images.length ) { 256 // Something's wrong, return early. 257 return; 258 } 259 260 var beforeImage = images.item( 0 ); 261 var afterImage = images.item( 1 ); 262 var caption = container.querySelector( 'figcaption' ).innerText; 263 264 function ImageComparison( props ) { 265 var stateHelper = useState( props.width ); 266 var width = stateHelper[0]; 267 var setWidth = stateHelper[1]; 268 269 return createElement( 270 'div', 271 { 272 className: 'about__image-comparison' 273 }, 274 createElement( 'img', { src: beforeImage.src, alt: beforeImage.alt } ), 275 createElement( 276 ResizableBox, 277 { 278 size: { 279 width: width, 280 height: props.height 281 }, 282 onResizeStop: function( event, direction, elt, delta ) { 283 setWidth( parseInt( width + delta.width, 10 ) ); 284 }, 285 showHandle: true, 286 enable: { 287 top: false, 288 right: ! wp.i18n.isRTL(), 289 bottom: false, 290 left: wp.i18n.isRTL(), 291 }, 292 className: 'about__image-comparison-resize' 293 }, 294 createElement( 295 'div', 296 { 297 style: { width: '100%', height: '100%', overflow: 'hidden' } 298 }, 299 createElement('img', { src: afterImage.src, alt: afterImage.alt } ) 300 ) 301 ) 302 ); 303 } 304 305 render( 306 createElement( 307 Fragment, 308 {}, 309 createElement( 310 ImageComparison, 311 { 312 width: beforeImage.clientWidth / 2, 313 height: beforeImage.clientHeight 314 } 315 ), 316 createElement( 'figcaption', {}, caption ) 317 ), 318 container 319 ); 320 } ); 321 </script> 237 322 <?php 238 239 require_once ABSPATH . 'wp-admin/admin-footer.php';240 323 241 324 // These are strings we may use to describe maintenance/security releases, where we aim for no new strings.
Note: See TracChangeset
for help on using the changeset viewer.