Alpine.js

ska-theme comes equipped with Alpine.js, its’ plugins “collapse”, “focus” and “intersect”, as well as some custom components listed below.

Alpine.js pairs well with ska-blocks plugin because the blocks have an ability to accept custom HTML attributes, making it easy to add Alpine.js directives in the editor.

The Alpine.js instance can be accessed on the front end from the window object:

window.ska_theme.Alpine

Bundled plugins

• @alpinejs/collapse
• @alpinejs/focus
• @alpinejs/intersect
• alpinejs-swipe

Extending Alpine.js

To add re-usable Alpine.data contexts the implementation should be provided before the alpine:init JS event fires, therefore adding an inline script before ska-theme’s main public script is a good place to do it:

add_action('wp_head', function() {
	wp_add_inline_script(ska_theme()->get_script_handle('public'), <<<JS
		document.addEventListener('alpine:init', () => {
			ska_theme.Alpine.data('customData', () => ({
				open: false,
				toggle() {
					this.open = !this.open
				},
			}))
		})
	JS, 'before');
});

After adding the custom Alpine data, it can be used anywhere on the front-end by adding the x-data attribute to HTML (or a block):

<div x-data="customData">...</div>

Alternatively, if you don’t want to write JavaScript in PHP files, enqueueing a JS file before ska-theme’s main public script is enqueued (wp_enqueue_scripts at priority 9) should also work:

add_action('wp_enqueue_scripts', function() {
	wp_enqueue_script(
		'custom', 
		get_stylesheet_directory_uri() . '/custom.js', // File that listens for `alpine:init` event and extends `window.ska_theme.Alpine` object.
		[],
		'1.0.0' // Use `time()` during development for cache-busting.
	);
}, 8);

Custom components