Assets

Assets refer to scripts and styles that need to be sent to the browser.

Styles

Styles can be created using the Style class:

use RebelCode\WpSdk\Wp\Style;

$style = new Style(
    // The ID
    'my-style',
    // The URL
    'path/to/style.css',
    // The version
    '1.2.3',
    // An array of dependencies
    ['jquery-ui']
);

Scripts

Scripts can be created using the Script class:

use RebelCode\WpSdk\Wp\Script;
use RebelCode\WpSdk\Wp\ScriptL10n;

$script = new Script(
    // The ID
    'my-script',
    // The URL
    'path/to/script.css',
    // The version
    '1.2.3',
    // An array of dependencies
    ['jquery'],
    // Optional localization
    new ScriptL10n('MyL10nData', [
        'adminUrl' => admin_url(),
    ])
);

Usage

Both Style and Script extend the abstract Asset class, and provide methods to register and enqueue the asset.

use RebelCode\WpSdk\Wp\Asset;

$asset->register();
$asset->enqueue();

Note that enqueuing an asset will automatically register it if necessary.

Script Localization

Scripts can have data be automatically localized alongside them when they are enqueued. This is done by passing a ScriptL10n instance to the script's constructor.

use RebelCode\WpSdk\Wp\Script;
use RebelCode\WpSdk\Wp\ScriptL10n;

$l10n = new ScriptL10n('MyL10nData', [
    'adminUrl' => admin_url(),
]);

$script = new Script('my-script', '/path/to/script.js', '1.0', [], $l10n);

$script->enqueue(); // Will localize the script

The ScriptL10n instances can be standalone and shared between scripts. You can also localize them manually using the localize() method.

$l10n->localizeFor('my-script');
$l10n->localizeFor('my-other-script');

Services

Factories for assets can be easily created using the static factory methods that the Style and Script classes provide.

The signatures of the factory methods are similar to their corresponding constructors, except for the Script::factory() method. It's last argument, for localization, accepts a service ID string rather than a ScriptL10n instance.

use RebelCode\WpSdk\Module;
use RebelCode\WpSdk\Wp\Style;
use RebelCode\WpSdk\Wp\Script;
use RebelCode\WpSdk\Wp\ScriptL10n;
use Dhii\Services\Factory;

class MyModule extends Module
{
    public function getFactories(): array
    {
        return [
            'my_style' => Asset::styleFactory(
                'my-style',
                'url/to/style.css',
                '1.2.3',
                ['chosen-css']
            ),

            'my_script' => Script::factory(
                'my-script',
                'url/to/script.js',
                '1.2.3',
                ['chosen-js'],
                'my_script/l10n'
            ),

            'my_script/l10n' => new Factory([], function () {
                return new ScriptL10n('MyL10nData', [
                    'adminUrl' => admin_url(),
                ]);
            }),
        ];
    }
}

You can easily enqueue your asset services by adding handlers to your module's hooks:

use RebelCode\WpSdk\Module;
use RebelCode\WpSdk\Handler;
use RebelCode\WpSdk\Wp\Asset;

class MyModule extends Module
{
    public function getHooks() : array{
        return [
            'wp_enqueue_scripts' => new Handler(
                ['my_script', 'my_style'],
                function (Asset $script, Asset $style) {
                    $script->enqueue();
                    $style->enqueue();
                }
            ),
        ];
    }
}

A note on script localization factories

The ScriptL10n class also provides a static factory method:

ScriptL10n::factory('MyL10nData', [
    'adminUrl' => admin_url(),
]);

However, bear in mind that this will load your localization data immediately, which may not be desirable. This is especially true if your data needs to call a function or has other dependencies.

It is usually better to use a service Factory instead, to ensure that your localization data is loaded only when it is needed, rather than on every request made to WordPress.