WordPress.org

Make WordPress Core

Ticket #44427: lazy-load-theme-screenshots.patch

File lazy-load-theme-screenshots.patch, 4.6 KB (added by pierlo, 11 months ago)
  • package.json

    diff --git package.json package.json
    index 7d8d8d7df9..1025c0771c 100644
     
    112112                "jquery-form": "4.2.1",
    113113                "jquery-hoverintent": "1.8.3",
    114114                "jquery-ui": "github:jquery/jquery-ui#1.11.4",
     115                "lazysizes": "5.1.1",
    115116                "lodash": "4.17.11",
    116117                "masonry-layout": "3.3.2",
    117118                "moment": "2.22.2",
  • src/wp-admin/theme-install.php

    diff --git src/wp-admin/theme-install.php src/wp-admin/theme-install.php
    index 9c718de133..a01e267b64 100644
    wp_localize_script( 
    7474        )
    7575);
    7676
     77// Enqueue lazysizes first to load theme screenshots
     78wp_enqueue_script( 'lazysizes-native' );
    7779wp_enqueue_script( 'theme' );
    7880wp_enqueue_script( 'updates' );
    7981
    if ( $tab ) { 
    261263<script id="tmpl-theme" type="text/template">
    262264        <# if ( data.screenshot_url ) { #>
    263265                <div class="theme-screenshot">
    264                         <img src="{{ data.screenshot_url }}" alt="" />
     266                        <img data-src="{{ data.screenshot_url }}" class="lazyload" alt="" />
    265267                </div>
    266268        <# } else { #>
    267269                <div class="theme-screenshot blank"></div>
  • src/wp-admin/themes.php

    diff --git src/wp-admin/themes.php src/wp-admin/themes.php
    index 6aa36a8054..8e612b0039 100644
    wp_localize_script( 
    174174);
    175175
    176176add_thickbox();
     177
     178// Enqueue lazysizes first to load theme screenshots
     179wp_enqueue_script( 'lazysizes-native' );
    177180wp_enqueue_script( 'theme' );
    178181wp_enqueue_script( 'updates' );
    179182
    if ( ! is_multisite() && current_user_can( 'edit_themes' ) && $broken_themes ) { 
    474477<script id="tmpl-theme" type="text/template">
    475478        <# if ( data.screenshot[0] ) { #>
    476479                <div class="theme-screenshot">
    477                         <img src="{{ data.screenshot[0] }}" alt="" />
     480                        <img data-src="{{ data.screenshot[0] }}" class="lazyload" alt="" />
    478481                </div>
    479482        <# } else { #>
    480483                <div class="theme-screenshot blank"></div>
  • src/wp-includes/script-loader.php

    diff --git src/wp-includes/script-loader.php src/wp-includes/script-loader.php
    index c06680c678..95431bd2b2 100644
    function wp_default_packages_vendor( &$scripts ) { 
    7979        $suffix = wp_scripts_get_suffix();
    8080
    8181        $vendor_scripts = array(
    82                 'react'     => array( 'wp-polyfill' ),
    83                 'react-dom' => array( 'react' ),
     82                'react'            => array( 'wp-polyfill' ),
     83                'react-dom'        => array( 'react' ),
    8484                'moment',
     85                'lazysizes',
     86                'lazysizes-native' => array( 'lazysizes' ),
    8587                'lodash',
    8688                'wp-polyfill-fetch',
    8789                'wp-polyfill-formdata',
    function wp_default_packages_vendor( &$scripts ) { 
    9496                'react'                       => '16.8.4',
    9597                'react-dom'                   => '16.8.4',
    9698                'moment'                      => '2.22.2',
     99                'lazysizes'                   => '5.1.1',
     100                'lazysizes-native'            => '5.1.1',
    97101                'lodash'                      => '4.17.11',
    98102                'wp-polyfill-fetch'           => '3.0.0',
    99103                'wp-polyfill-formdata'        => '3.0.12',
    function wp_default_packages_vendor( &$scripts ) { 
    128132                )
    129133        );
    130134
     135        did_action( 'init' ) && $scripts->add_inline_script(
     136                'lazysizes-native',
     137                implode(
     138                        "\n",
     139                        array(
     140                                'lazySizes.cfg.nativeLoading = {',
     141                                '       setLoadingAttribute: true,',
     142                                '       disableListeners: {',
     143                                '               scroll: true,',
     144                                '       },',
     145                                '};',
     146                        )
     147                )
     148        );
     149
    131150        did_action( 'init' ) && $scripts->add_inline_script( 'lodash', 'window.lodash = _.noConflict();' );
    132151
    133152        did_action( 'init' ) && $scripts->add_inline_script(
  • tools/webpack/packages.js

    diff --git tools/webpack/packages.js tools/webpack/packages.js
    index d040f0701f..d8b36e2444 100644
    module.exports = function( env = { environment: 'production', watch: false, buil 
    9898        ];
    9999
    100100        const vendors = {
     101                'lazysizes.js': 'lazysizes/lazysizes.js',
     102                'lazysizes-native.js': 'lazysizes/plugins/native-loading/ls.native-loading.js',
    101103                'lodash.js': 'lodash/lodash.js',
    102104                'wp-polyfill.js': '@babel/polyfill/dist/polyfill.js',
    103105                'wp-polyfill-fetch.js': 'whatwg-fetch/dist/fetch.umd.js',
    module.exports = function( env = { environment: 'production', watch: false, buil 
    110112        };
    111113
    112114        const minifiedVendors = {
     115                'lazysizes.min.js': 'lazysizes/lazysizes.min.js',
     116                'lazysizes-native.min.js': 'lazysizes/plugins/native-loading/ls.native-loading.min.js',
    113117                'lodash.min.js': 'lodash/lodash.min.js',
    114118                'wp-polyfill.min.js': '@babel/polyfill/dist/polyfill.min.js',
    115119                'wp-polyfill-formdata.min.js': 'formdata-polyfill/formdata.min.js',
    module.exports = function( env = { environment: 'production', watch: false, buil 
    146150                jquery: 'jQuery',
    147151                lodash: 'lodash',
    148152                'lodash-es': 'lodash',
     153                lazysizes: 'lazysizes',
    149154        };
    150155
    151156        packages.forEach( ( name ) => {