WordPress.org

Make WordPress Core

Changeset 26107


Ignore:
Timestamp:
11/12/2013 09:18:45 PM (7 years ago)
Author:
nacin
Message:

Use CSSJanus via a Grunt task to generate right-to-left CSS.

RTL files are now created on build for core CSS files. These files replace the LTR file completely, rather than being in addition to the existing LTR file.

Benefits:

  • For the user: less CSS is served in RTL, less HTTP requests on the frontend, and less work for the browser.
  • For the core developer: Let the tools do the work.

Notes for core development:

  • The file generation task is grunt rtl.
  • grunt watch now handles generating RTL files in /build when a CSS file in /src is saved.
  • /src is now locked to LTR. RTL testing must occur via /build. When attempting to run an RTL text direction with /src, an admin notice will display.

Expect RTL bugs. Please report them.

props yoavf.
see #24977.

Location:
trunk
Files:
7 deleted
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/Gruntfile.js

    r26066 r26107  
    8989                    '!wp-admin/css/farbtastic.css'
    9090                ]
     91            },
     92            rtl: {
     93                expand: true,
     94                cwd: BUILD_DIR,
     95                dest: BUILD_DIR,
     96                ext: '.min.css',
     97                src: [
     98                    'wp-admin/css/*-rtl.css',
     99                    'wp-includes/css/*-rtl.css'
     100                ]
     101            }
     102        },
     103        cssjanus: {
     104            core: {
     105                expand: true,
     106                cwd: SOURCE_DIR,
     107                dest: BUILD_DIR,
     108                ext: '-rtl.css',
     109                src: [
     110                    'wp-admin/css/*.css',
     111                    'wp-includes/css/*.css',
     112                    // Temporary exceptions while .rtl body classes are in use
     113                    '!wp-admin/css/colors-fresh.css',
     114                    '!wp-admin/css/install.css',
     115                    '!wp-includes/css/editor.css',
     116                    '!wp-includes/css/wp-pointer.css',
     117                    // Farbtastic is deprecated, uses .rtl classes.
     118                    '!wp-admin/css/farbtastic.css'
     119                ]
     120            },
     121            dynamic: {
     122                expand: true,
     123                cwd: SOURCE_DIR,
     124                dest: BUILD_DIR,
     125                ext: '-rtl.css',
     126                src: []
    91127            }
    92128        },
     
    258294                }
    259295            },
     296            rtl: {
     297                files: [
     298                    SOURCE_DIR + 'wp-admin/css/*.css',
     299                    SOURCE_DIR + 'wp-includes/css/*.css'
     300                ],
     301                tasks: ['cssjanus:dynamic'],
     302                options: {
     303                    spawn: false,
     304                    interval: 2000
     305                }
     306            },
    260307            test: {
    261308                files: ['tests/qunit/**'],
     
    269316    // Copy task.
    270317    grunt.registerTask('copy:all', ['copy:files', 'copy:version']);
    271    
     318
     319    // RTL task.
     320    grunt.registerTask('rtl', ['cssjanus:core']);
     321
    272322    // Build task.
    273     grunt.registerTask('build', ['clean:all', 'copy:all', 'cssmin:core', 'uglify:core',
    274         'uglify:tinymce', 'concat:tinymce', 'compress:tinymce', 'clean:tinymce']);
     323    grunt.registerTask('build', ['clean:all', 'copy:all', 'rtl', 'cssmin:core', 'cssmin:rtl',
     324        'uglify:core', 'uglify:tinymce', 'concat:tinymce', 'compress:tinymce', 'clean:tinymce']);
    275325
    276326    // Testing tasks.
     
    294344    // On `watch:all`, automatically updates the `copy:dynamic` and `clean:dynamic`
    295345    // configurations so that only the changed files are updated.
     346    // On `watch:rtl`, automatically updates the `cssjanus:dynamic` configuration.
    296347    grunt.event.on('watch', function( action, filepath, target ) {
    297         if ( target !== 'all' ) {
     348        if ( target !== 'all' && target !== 'rtl' ) {
    298349            return;
    299350        }
     
    305356        grunt.config(['clean', 'dynamic', 'src'], cleanSrc);
    306357        grunt.config(['copy', 'dynamic', 'src'], copySrc);
     358        grunt.config(['cssjanus', 'dynamic', 'src'], copySrc);
    307359    });
    308360};
  • trunk/package.json

    r25960 r26107  
    2020    "grunt-contrib-concat": "~0.3.0",
    2121    "grunt-contrib-jshint": "~0.7.0",
     22    "grunt-cssjanus": "~0.1.0",
    2223    "matchdep": "~0.1.2"
    2324  }
  • trunk/src/wp-admin/css/wp-admin.css

    r26085 r26107  
    35113511}
    35123512
    3513 .rtl #lost-connection-notice .spinner {
    3514     float: right;
    3515     margin: 0 0 0 5px;
    3516 }
    3517 
    35183513#titlediv {
    35193514    position: relative;
     
    81828177}
    81838178
    8184 .rtl #dashboard_right_now p.musub {
    8185     padding-left: 0;
    8186     padding-right: 16px;
    8187 }
    8188 
    81898179#dashboard_right_now td.b a.musublink {
    81908180    font-size: 16px;
  • trunk/src/wp-includes/class.wp-styles.php

    r25786 r26107  
    6666        $title = isset($obj->extra['title']) ? "title='" . esc_attr( $obj->extra['title'] ) . "'" : '';
    6767
    68         $end_cond = $tag = '';
    69         if ( isset($obj->extra['conditional']) && $obj->extra['conditional'] ) {
    70             $tag .= "<!--[if {$obj->extra['conditional']}]>\n";
    71             $end_cond = "<![endif]-->\n";
    72         }
    73 
    74         $tag .= apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle );
     68        $tag = apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle );
    7569        if ( 'rtl' === $this->text_direction && isset($obj->extra['rtl']) && $obj->extra['rtl'] ) {
    76             if ( is_bool( $obj->extra['rtl'] ) ) {
     70            if ( is_bool( $obj->extra['rtl'] ) || 'replace' === $obj->extra['rtl'] ) {
    7771                $suffix = isset( $obj->extra['suffix'] ) ? $obj->extra['suffix'] : '';
    7872                $rtl_href = str_replace( "{$suffix}.css", "-rtl{$suffix}.css", $this->_css_href( $obj->src , $ver, "$handle-rtl" ));
     
    8175            }
    8276
    83             $tag .= apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-rtl-css' $title href='$rtl_href' type='text/css' media='$media' />\n", $handle );
     77            $rtl_tag = apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-rtl-css' $title href='$rtl_href' type='text/css' media='$media' />\n", $handle );
     78
     79            if ( $obj->extra['rtl'] === 'replace' ) {
     80                $tag = $rtl_tag;
     81            } else {
     82                $tag .= $rtl_tag;
     83            }
    8484        }
    8585
    86         $tag .= $end_cond;
     86        if ( isset($obj->extra['conditional']) && $obj->extra['conditional'] ) {
     87            $tag = "<!--[if {$obj->extra['conditional']}]>\n" . $tag . "<![endif]-->\n";
     88        }
    8789
    8890        if ( $this->do_concat ) {
  • trunk/src/wp-includes/locale.php

    r24971 r26107  
    184184        elseif ( 'rtl' == _x( 'ltr', 'text direction' ) )
    185185            $this->text_direction = 'rtl';
     186
     187        if ( 'rtl' === $this->text_direction && strpos( $GLOBALS['wp_version'], '-src' ) ) {
     188            $this->text_direction = 'ltr';
     189            add_action( 'all_admin_notices', array( $this, 'rtl_src_admin_notice' ) );
     190        }
     191    }
     192
     193    function rtl_src_admin_notice() {
     194        echo '<div class="error"><p>' . 'The <code>build</code> directory of the develop repository must be used for RTL.' . '</p></div>';
    186195    }
    187196
  • trunk/src/wp-includes/script-loader.php

    r26072 r26107  
    553553
    554554    $rtl_styles = array( 'wp-admin', 'ie', 'media', 'admin-bar', 'customize-controls', 'media-views', 'wp-color-picker' );
    555     // Any rtl stylesheets that don't have a .min version
    556     $no_suffix = array( 'farbtastic' );
    557555
    558556    $styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array( 'open-sans', 'dashicons' ) );
     
    593591
    594592    foreach ( $rtl_styles as $rtl_style ) {
    595         $styles->add_data( $rtl_style, 'rtl', true );
    596         if ( $suffix && ! in_array( $rtl_style, $no_suffix ) )
    597             $styles->add_data( $rtl_style, 'suffix', $suffix );
     593        $styles->add_data( $rtl_style, 'rtl', 'replace' );
    598594    }
    599595}
Note: See TracChangeset for help on using the changeset viewer.