WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
02/23/2016 04:43:41 PM (9 years ago)
Author:
swissspidy
Message:

Script Loader: Introduce wp_add_inline_script().

This new function can be used to add inline JavaScript before and after enqueued scripts, just like wp_add_inline_style() works for CSS.

Props atimmer, abiralneupane, ocean90, swissspidy.
Fixes #14853.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/tests/phpunit/tests/dependencies/scripts.php

    r36604 r36633  
    8787
    8888    /**
     89     * Test script concatenation.
     90     */
     91    public function test_script_concatenation() {
     92        global $wp_scripts;
     93
     94        $wp_scripts->do_concat = true;
     95        $wp_scripts->default_dirs = array( '/directory/' );
     96
     97        wp_enqueue_script( 'one', '/directory/script.js' );
     98        wp_enqueue_script( 'two', '/directory/script.js' );
     99        wp_enqueue_script( 'three', '/directory/script.js' );
     100
     101        wp_print_scripts();
     102        $print_scripts = get_echo( '_print_scripts' );
     103
     104        $ver = get_bloginfo( 'version' );
     105        $expected = "<script type='text/javascript' src='/wp-admin/load-scripts.php?c=0&amp;load%5B%5D=one,two,three&amp;ver={$ver}'></script>\n";
     106
     107        $this->assertEquals( $expected, $print_scripts );
     108    }
     109
     110    /**
    89111     * Testing `wp_script_add_data` with the data key.
    90112     * @ticket 16024
    … …  
    267289        $this->assertEquals( $expected_footer, $footer );
    268290    }
     291
     292    /**
     293     * @ticket 14853
     294     */
     295    function test_wp_add_inline_script_returns_bool() {
     296        $this->assertFalse( wp_add_inline_script( 'test-example', 'console.log("before");', 'before' ) );
     297        wp_enqueue_script( 'test-example', 'example.com', array(), null );
     298        $this->assertTrue( wp_add_inline_script( 'test-example', 'console.log("before");', 'before' ) );
     299    }
     300
     301    /**
     302     * @ticket 14853
     303     */
     304    function test_wp_add_inline_script_unknown_handle() {
     305        $this->assertFalse( wp_add_inline_script( 'test-invalid', 'console.log("before");', 'before' ) );
     306        $this->assertEquals( '', get_echo( 'wp_print_scripts' ) );
     307    }
     308
     309    /**
     310     * @ticket 14853
     311     */
     312    function test_wp_add_inline_script_before() {
     313        wp_enqueue_script( 'test-example', 'example.com', array(), null );
     314        wp_add_inline_script( 'test-example', 'console.log("before");', 'before' );
     315
     316        $expected  = "<script type='text/javascript'>\nconsole.log(\"before\");\n</script>\n";
     317        $expected .= "<script type='text/javascript' src='http://example.com'></script>\n";
     318
     319        $this->assertEquals( $expected, get_echo( 'wp_print_scripts' ) );
     320    }
     321
     322    /**
     323     * @ticket 14853
     324     */
     325    function test_wp_add_inline_script_after() {
     326        wp_enqueue_script( 'test-example', 'example.com', array(), null );
     327        wp_add_inline_script( 'test-example', 'console.log("after");' );
     328
     329        $expected  = "<script type='text/javascript' src='http://example.com'></script>\n";
     330        $expected .= "<script type='text/javascript'>\nconsole.log(\"after\");\n</script>\n";
     331
     332        $this->assertEquals( $expected, get_echo( 'wp_print_scripts' ) );
     333    }
     334
     335    /**
     336     * @ticket 14853
     337     */
     338    function test_wp_add_inline_script_before_and_after() {
     339        wp_enqueue_script( 'test-example', 'example.com', array(), null );
     340        wp_add_inline_script( 'test-example', 'console.log("before");', 'before' );
     341        wp_add_inline_script( 'test-example', 'console.log("after");' );
     342
     343        $expected  = "<script type='text/javascript'>\nconsole.log(\"before\");\n</script>\n";
     344        $expected .= "<script type='text/javascript' src='http://example.com'></script>\n";
     345        $expected .= "<script type='text/javascript'>\nconsole.log(\"after\");\n</script>\n";
     346
     347        $this->assertEquals( $expected, get_echo( 'wp_print_scripts' ) );
     348    }
     349
     350    /**
     351     * @ticket 14853
     352     */
     353    function test_wp_add_inline_script_multiple() {
     354        wp_enqueue_script( 'test-example', 'example.com', array(), null );
     355        wp_add_inline_script( 'test-example', 'console.log("before");', 'before' );
     356        wp_add_inline_script( 'test-example', 'console.log("before");', 'before' );
     357        wp_add_inline_script( 'test-example', 'console.log("after");' );
     358        wp_add_inline_script( 'test-example', 'console.log("after");' );
     359
     360        $expected  = "<script type='text/javascript'>\nconsole.log(\"before\");\nconsole.log(\"before\");\n</script>\n";
     361        $expected .= "<script type='text/javascript' src='http://example.com'></script>\n";
     362        $expected .= "<script type='text/javascript'>\nconsole.log(\"after\");\nconsole.log(\"after\");\n</script>\n";
     363
     364        $this->assertEquals( $expected, get_echo( 'wp_print_scripts' ) );
     365    }
     366
     367    /**
     368     * @ticket 14853
     369     */
     370    function test_wp_add_inline_script_localized_data_is_added_first() {
     371        wp_enqueue_script( 'test-example', 'example.com', array(), null );
     372        wp_localize_script( 'test-example', 'testExample', array( 'foo' => 'bar' ) );
     373        wp_add_inline_script( 'test-example', 'console.log("before");', 'before' );
     374        wp_add_inline_script( 'test-example', 'console.log("after");' );
     375
     376        $expected  = "<script type='text/javascript'>\n/* <![CDATA[ */\nvar testExample = {\"foo\":\"bar\"};\n/* ]]> */\n</script>\n";
     377        $expected .= "<script type='text/javascript'>\nconsole.log(\"before\");\n</script>\n";
     378        $expected .= "<script type='text/javascript' src='http://example.com'></script>\n";
     379        $expected .= "<script type='text/javascript'>\nconsole.log(\"after\");\n</script>\n";
     380
     381        $this->assertEquals( $expected, get_echo( 'wp_print_scripts' ) );
     382    }
     383
     384    /**
     385     * @ticket 14853-2
     386     */
     387    public function test_wp_add_inline_script_before_with_concat() {
     388        global $wp_scripts;
     389
     390        $wp_scripts->do_concat = true;
     391        $wp_scripts->default_dirs = array( '/directory/' );
     392
     393        wp_enqueue_script( 'one', '/directory/one.js' );
     394        wp_enqueue_script( 'two', '/directory/two.js' );
     395        wp_enqueue_script( 'three', '/directory/three.js' );
     396
     397        wp_add_inline_script( 'one', 'console.log("before one");', 'before' );
     398        wp_add_inline_script( 'two', 'console.log("before two");', 'before' );
     399
     400        wp_print_scripts();
     401        $print_scripts = get_echo( '_print_scripts' );
     402
     403        $ver = get_bloginfo( 'version' );
     404        $expected  = "<script type='text/javascript'>\nconsole.log(\"before one\");\n</script>\n";
     405        $expected .= "<script type='text/javascript'>\nconsole.log(\"before two\");\n</script>\n";
     406        $expected .= "<script type='text/javascript' src='/wp-admin/load-scripts.php?c=0&amp;load%5B%5D=one,two,three&amp;ver={$ver}'></script>\n";
     407
     408        $this->assertEquals( $expected, $print_scripts );
     409    }
     410
     411    /**
     412     * @ticket 14853
     413     */
     414    public function test_wp_add_inline_script_after_with_concat() {
     415        global $wp_scripts;
     416
     417        $wp_scripts->do_concat = true;
     418        $wp_scripts->default_dirs = array( '/directory/' );
     419
     420        wp_enqueue_script( 'one', '/directory/one.js' );
     421        wp_enqueue_script( 'two', '/directory/two.js' );
     422        wp_enqueue_script( 'three', '/directory/three.js' );
     423        wp_enqueue_script( 'four', '/directory/four.js' );
     424
     425        wp_add_inline_script( 'two', 'console.log("after two");' );
     426        wp_add_inline_script( 'three', 'console.log("after three");' );
     427
     428        wp_print_scripts();
     429        $print_scripts = get_echo( '_print_scripts' );
     430
     431        $ver = get_bloginfo( 'version' );
     432        $expected  = "<script type='text/javascript' src='/directory/two.js?ver={$ver}'></script>\n";
     433        $expected .= "<script type='text/javascript'>\nconsole.log(\"after two\");\n</script>\n";
     434        $expected .= "<script type='text/javascript' src='/directory/three.js?ver={$ver}'></script>\n";
     435        $expected .= "<script type='text/javascript'>\nconsole.log(\"after three\");\n</script>\n";
     436        $expected .= "<script type='text/javascript' src='/wp-admin/load-scripts.php?c=0&amp;load%5B%5D=one,four&amp;ver={$ver}'></script>\n";
     437
     438        $this->assertEquals( $expected, $print_scripts );
     439    }
     440
     441    /**
     442     * @ticket 14853
     443     */
     444    public function test_wp_add_inline_script_concat_with_conditional() {
     445        global $wp_scripts;
     446
     447        $wp_scripts->do_concat = true;
     448        $wp_scripts->default_dirs = array('/wp-admin/js/', '/wp-includes/js/'); // Default dirs as in wp-includes/script-loader.php
     449
     450        $expected_localized = "<!--[if gte IE 9]>\n";
     451        $expected_localized .= "<script type='text/javascript'>\n/* <![CDATA[ */\nvar testExample = {\"foo\":\"bar\"};\n/* ]]> */\n</script>\n";
     452        $expected_localized .= "<![endif]-->\n";
     453
     454        $expected  = "<!--[if gte IE 9]>\n";
     455        $expected .= "<script type='text/javascript'>\nconsole.log(\"before\");\n</script>\n";
     456        $expected .= "<script type='text/javascript' src='http://example.com'></script>\n";
     457        $expected .= "<script type='text/javascript'>\nconsole.log(\"after\");\n</script>\n";
     458        $expected .= "<![endif]-->\n";
     459
     460        wp_enqueue_script( 'test-example', 'example.com', array(), null );
     461        wp_localize_script( 'test-example', 'testExample', array( 'foo' => 'bar' ) );
     462        wp_add_inline_script( 'test-example', 'console.log("before");', 'before' );
     463        wp_add_inline_script( 'test-example', 'console.log("after");' );
     464        wp_script_add_data( 'test-example', 'conditional', 'gte IE 9' );
     465
     466        $this->assertEquals( $expected_localized, get_echo( 'wp_print_scripts' ) );
     467        $this->assertEquals( $expected, $wp_scripts->print_html_before );
     468        $this->assertEquals( '', $wp_scripts->print_html );
     469    }
     470
    269471}
Note: See TracChangeset for help on using the changeset viewer.