{"id":20,"date":"2025-09-26T08:50:45","date_gmt":"2025-09-26T08:50:45","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/alpine-js\/"},"modified":"2025-10-21T11:53:54","modified_gmt":"2025-10-21T11:53:54","slug":"alpine-js","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/alpine-js\/","title":{"rendered":"Alpine.js"},"content":{"rendered":"\n<p class=\"lead\">ska-theme comes equipped with <a href=\"https:\/\/alpinejs.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Alpine.js<\/a>, its&#8217; plugins &#8220;collapse&#8221;, &#8220;focus&#8221; and &#8220;intersect&#8221;, as well as some custom components listed below.<\/p>\n\n\n\n<p>Alpine.js pairs well with ska-blocks plugin because the blocks have an ability to accept custom HTML <a href=\"https:\/\/ska-blocks.com\/docs\/ska-blocks\/attributes\/\" data-type=\"post\" data-id=\"862\">attributes<\/a>, making it easy to add Alpine.js directives in the editor.<\/p>\n\n\n\n<p>The Alpine.js instance can be accessed on the front end from the <code>window<\/code> object:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">window.ska_theme.Alpine<\/code><\/pre><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Bundled plugins<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alpinejs.dev\/plugins\/collapse\" target=\"_blank\" rel=\"noreferrer noopener\">@alpinejs\/collapse<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alpinejs.dev\/plugins\/focus\" target=\"_blank\" rel=\"noreferrer noopener\">@alpinejs\/focus<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alpinejs.dev\/plugins\/intersect\" target=\"_blank\" rel=\"noreferrer noopener\">@alpinejs\/intersect<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/iagobruno\/alpinejs-swipe\" target=\"_blank\" rel=\"noreferrer noopener\">alpinejs-swipe<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Extending Alpine.js<\/h2>\n\n\n\n<p>To add re-usable <code>Alpine.data<\/code> contexts the implementation should be provided before the <code>alpine:init<\/code> JS event fires, therefore adding an inline script <em>before<\/em> ska-theme&#8217;s main public script is a good place to do it:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Child theme&#8217;s functions.php<\/span><span class=\"label language-php\">PHP<\/span><\/header><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">add_action('wp_head', function() {\n\twp_add_inline_script(ska_theme()->get_script_handle('public'), &lt;&lt;&lt;JS\n\t\tdocument.addEventListener('alpine:init', () => {\n\t\t\tska_theme.Alpine.data('customData', () => ({\n\t\t\t\topen: false,\n\t\t\t\ttoggle() {\n\t\t\t\t\tthis.open = !this.open\n\t\t\t\t},\n\t\t\t}))\n\t\t})\n\tJS, 'before');\n});<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>After adding the custom Alpine data, it can be used anywhere on the front-end by adding the <code>x-data<\/code> attribute to HTML (or a block):<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code html language-html\"><code class=\"language-html\">&lt;div x-data=\"customData\">...&lt;\/div><\/code><\/pre><\/div><\/div>\n\n\n\n<p>Alternatively, if you don&#8217;t want to write JavaScript in PHP files, enqueueing a JS file before ska-theme&#8217;s main public script is enqueued (<code>wp_enqueue_scripts<\/code> at priority <code>9<\/code>) should also work:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Child theme&#8217;s functions.php<\/span><span class=\"label language-php\">PHP<\/span><\/header><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_script(\n\t\t'custom', \n\t\tget_stylesheet_directory_uri() . '\/custom.js', \/\/ File that listens for `alpine:init` event and extends `window.ska_theme.Alpine` object.\n\t\t&#91;],\n\t\t'1.0.0' \/\/ Use `time()` during development for cache-busting.\n\t);\n}, 8);<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>It is also possible to define Alpine.js custom code on a specific page as a script using the <a href=\"https:\/\/ska-blocks.com\/docs\/tailwind-block\/\" data-type=\"post\" data-id=\"55\">Tailwind block<\/a> (or Custom HTML block, but that doesn&#8217;t provide a good editing experience, such as indenting or syntax highlighting):<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">A custom script used in Tailwind block<\/span><span class=\"label language-html\">HTML<\/span><\/header><div class=\"content\"><pre class=\"code html language-html\"><code class=\"language-html\">&lt;script>\ndocument.addEventListener('alpine:init', () => {\n\tska_theme.Alpine.data('customData', () => ({\n\t\topen: false,\n\t\ttoggle() {\n\t\t\tthis.open = !this.open\n\t\t},\n\t}))\n})\n&lt;\/script><\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Custom components<\/h2>\n\n\n\n<div class=\"mt-6 sm:mt-8 first:mt-0 not-prose wp-block-query not-links is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow flex flex-col [&amp;&gt;*:not(:last-child)]:pb-8! [&amp;&gt;*:not(:last-child)]:mb-8! divide-y\"><li class=\"wp-block-post post-36 post type-post status-publish format-standard hentry category-ska-theme tag-alpine-js\">\n\n<div class=\"flex flex-col sm:flex-row gap-4 justify-start items-stretch wp-block-ska-element\">\n\n\n<div class=\"flex relative basis-3\/4 flex-col grow justify-start items-stretch wp-block-ska-element\">\n<div class=\"flex flex-row gap-2 items-center wp-block-ska-element\">\n<div class=\"flex flex-row gap-4 items-center *:text-base *:font-bold *:text-primary *:hover:text-link-hover wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/category\/ska-theme\/\" data-taxonomy=\"category\" data-term=\"ska-theme\">ska-theme<\/a><\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-post-title -mt-1 mb-2 text-2xl sm:text-3xl [&amp;&gt;*]:text-site-heading\"><a href=\"https:\/\/ska-blocks.com\/docs\/accordion\/\" target=\"_self\" >Accordion<\/a><\/h3>\n\n<div class=\"wp-block-post-excerpt flex flex-col grow gap-2 justify-between [&amp;_.wp-block-post-excerpt\\_\\_more-link]:text-base\/none [&amp;_.wp-block-post-excerpt\\_\\_more-link]:font-semibold [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:line-clamp-3 [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:text-site\/75\"><p class=\"wp-block-post-excerpt__excerpt\">ska-theme includes an Alpine.js component for creating an accordion. For creating an accordion, add the x-data=&#8221;skaAccordion&#8221; attribute to the root element.All direct children of that element should have the attribute x-bind=&#8221;item&#8221;.The item elements should have 2 child elements, one with x-bind=&#8221;toggle&#8221; and another with x-bind=&#8221;content&#8221;. There is 1 argument available for the skaAccordion component: exclusive.<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/ska-blocks.com\/docs\/accordion\/\">Read more<\/a><\/p><\/div>\n\n\n<div class=\"flex sm:absolute right-0 bottom-0 flex-row flex-wrap gap-1.5 *:px-1.5 *:py-0.5 mt-2.5 *:text-xs\/snug *:font-semibold *:text-site-inverted *:hover:text-site-inverted\/100 *:bg-primary *:hover:bg-primary-dark *:rounded wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/tag\/alpine-js\/\" data-taxonomy=\"post_tag\" data-term=\"alpine-js\">Alpine.js<\/a><\/div>\n<\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-34 post type-post status-publish format-standard hentry category-ska-theme tag-alpine-js\">\n\n<div class=\"flex flex-col sm:flex-row gap-4 justify-start items-stretch wp-block-ska-element\">\n\n\n<div class=\"flex relative basis-3\/4 flex-col grow justify-start items-stretch wp-block-ska-element\">\n<div class=\"flex flex-row gap-2 items-center wp-block-ska-element\">\n<div class=\"flex flex-row gap-4 items-center *:text-base *:font-bold *:text-primary *:hover:text-link-hover wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/category\/ska-theme\/\" data-taxonomy=\"category\" data-term=\"ska-theme\">ska-theme<\/a><\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-post-title -mt-1 mb-2 text-2xl sm:text-3xl [&amp;&gt;*]:text-site-heading\"><a href=\"https:\/\/ska-blocks.com\/docs\/dropdown\/\" target=\"_self\" >Dropdown<\/a><\/h3>\n\n<div class=\"wp-block-post-excerpt flex flex-col grow gap-2 justify-between [&amp;_.wp-block-post-excerpt\\_\\_more-link]:text-base\/none [&amp;_.wp-block-post-excerpt\\_\\_more-link]:font-semibold [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:line-clamp-3 [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:text-site\/75\"><p class=\"wp-block-post-excerpt__excerpt\">ska-theme includes an Alpine.js component for creating dropdowns. For creating a dropdown, add the x-data=&#8221;skaDropdown&#8221; attribute to the root element that contains one or many elements that trigger a dropdown as well as the dropdown elements.The button or another element that triggers a dropdown should have a wrapper with the x-bind=&#8221;item(&#8216;dropdownId&#8217;)&#8221; attribute. The element that<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/ska-blocks.com\/docs\/dropdown\/\">Read more<\/a><\/p><\/div>\n\n\n<div class=\"flex sm:absolute right-0 bottom-0 flex-row flex-wrap gap-1.5 *:px-1.5 *:py-0.5 mt-2.5 *:text-xs\/snug *:font-semibold *:text-site-inverted *:hover:text-site-inverted\/100 *:bg-primary *:hover:bg-primary-dark *:rounded wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/tag\/alpine-js\/\" data-taxonomy=\"post_tag\" data-term=\"alpine-js\">Alpine.js<\/a><\/div>\n<\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-35 post type-post status-publish format-standard hentry category-ska-theme tag-alpine-js\">\n\n<div class=\"flex flex-col sm:flex-row gap-4 justify-start items-stretch wp-block-ska-element\">\n\n\n<div class=\"flex relative basis-3\/4 flex-col grow justify-start items-stretch wp-block-ska-element\">\n<div class=\"flex flex-row gap-2 items-center wp-block-ska-element\">\n<div class=\"flex flex-row gap-4 items-center *:text-base *:font-bold *:text-primary *:hover:text-link-hover wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/category\/ska-theme\/\" data-taxonomy=\"category\" data-term=\"ska-theme\">ska-theme<\/a><\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-post-title -mt-1 mb-2 text-2xl sm:text-3xl [&amp;&gt;*]:text-site-heading\"><a href=\"https:\/\/ska-blocks.com\/docs\/tabs\/\" target=\"_self\" >Tabs<\/a><\/h3>\n\n<div class=\"wp-block-post-excerpt flex flex-col grow gap-2 justify-between [&amp;_.wp-block-post-excerpt\\_\\_more-link]:text-base\/none [&amp;_.wp-block-post-excerpt\\_\\_more-link]:font-semibold [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:line-clamp-3 [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:text-site\/75\"><p class=\"wp-block-post-excerpt__excerpt\">ska-theme includes an Alpine.js component for creating tabs. For creating tabs, add the x-data=&#8221;skaTabs&#8221; attribute to the root element.The element that contains the buttons that change tabs should have the x-bind=&#8221;tablist&#8221; attribute and individual buttons that allow to select a tab should have the x-bind=&#8221;tabItem(&#8216;tabId&#8217;)&#8221; attribute with a unique ID that matches the content.Content elements<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/ska-blocks.com\/docs\/tabs\/\">Read more<\/a><\/p><\/div>\n\n\n<div class=\"flex sm:absolute right-0 bottom-0 flex-row flex-wrap gap-1.5 *:px-1.5 *:py-0.5 mt-2.5 *:text-xs\/snug *:font-semibold *:text-site-inverted *:hover:text-site-inverted\/100 *:bg-primary *:hover:bg-primary-dark *:rounded wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/tag\/alpine-js\/\" data-taxonomy=\"post_tag\" data-term=\"alpine-js\">Alpine.js<\/a><\/div>\n<\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-30 post type-post status-publish format-standard hentry category-ska-theme tag-alpine-js\">\n\n<div class=\"flex flex-col sm:flex-row gap-4 justify-start items-stretch wp-block-ska-element\">\n\n\n<div class=\"flex relative basis-3\/4 flex-col grow justify-start items-stretch wp-block-ska-element\">\n<div class=\"flex flex-row gap-2 items-center wp-block-ska-element\">\n<div class=\"flex flex-row gap-4 items-center *:text-base *:font-bold *:text-primary *:hover:text-link-hover wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/category\/ska-theme\/\" data-taxonomy=\"category\" data-term=\"ska-theme\">ska-theme<\/a><\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-post-title -mt-1 mb-2 text-2xl sm:text-3xl [&amp;&gt;*]:text-site-heading\"><a href=\"https:\/\/ska-blocks.com\/docs\/sticky\/\" target=\"_self\" >Sticky<\/a><\/h3>\n\n<div class=\"wp-block-post-excerpt flex flex-col grow gap-2 justify-between [&amp;_.wp-block-post-excerpt\\_\\_more-link]:text-base\/none [&amp;_.wp-block-post-excerpt\\_\\_more-link]:font-semibold [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:line-clamp-3 [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:text-site\/75\"><p class=\"wp-block-post-excerpt__excerpt\">ska-theme includes an Alpine.js component for creating a sticky header. For creating a sticky header, add the x-data=&#8221;skaSticky&#8221; attribute to the element that should stick. That element will receive the .is-sticky class when it is sticky. Arguments can be specified like this: x-data=&#8221;skaSticky({offset: 128})&#8221;, x-data=&#8221;skaSticky({trigger: &#8216;.ska-menu&#8217;, offset: -10})&#8221; When making a sticky header, it&#8217;s a<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/ska-blocks.com\/docs\/sticky\/\">Read more<\/a><\/p><\/div>\n\n\n<div class=\"flex sm:absolute right-0 bottom-0 flex-row flex-wrap gap-1.5 *:px-1.5 *:py-0.5 mt-2.5 *:text-xs\/snug *:font-semibold *:text-site-inverted *:hover:text-site-inverted\/100 *:bg-primary *:hover:bg-primary-dark *:rounded wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/tag\/alpine-js\/\" data-taxonomy=\"post_tag\" data-term=\"alpine-js\">Alpine.js<\/a><\/div>\n<\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-17 post type-post status-publish format-standard hentry category-ska-theme tag-alpine-js\">\n\n<div class=\"flex flex-col sm:flex-row gap-4 justify-start items-stretch wp-block-ska-element\">\n\n\n<div class=\"flex relative basis-3\/4 flex-col grow justify-start items-stretch wp-block-ska-element\">\n<div class=\"flex flex-row gap-2 items-center wp-block-ska-element\">\n<div class=\"flex flex-row gap-4 items-center *:text-base *:font-bold *:text-primary *:hover:text-link-hover wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/category\/ska-theme\/\" data-taxonomy=\"category\" data-term=\"ska-theme\">ska-theme<\/a><\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-post-title -mt-1 mb-2 text-2xl sm:text-3xl [&amp;&gt;*]:text-site-heading\"><a href=\"https:\/\/ska-blocks.com\/docs\/dialog\/\" target=\"_self\" >Dialog<\/a><\/h3>\n\n<div class=\"wp-block-post-excerpt flex flex-col grow gap-2 justify-between [&amp;_.wp-block-post-excerpt\\_\\_more-link]:text-base\/none [&amp;_.wp-block-post-excerpt\\_\\_more-link]:font-semibold [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:line-clamp-3 [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:text-site\/75\"><p class=\"wp-block-post-excerpt__excerpt\">ska-theme includes a custom Alpine.js component for handling HTML dialog elements. The module abstracts away calling the native .showModal(), .close() functions, adds x-transition to the dialog and enables closing of the modal by clicking away from the modal. Creating a dialog Adding x-data=&#8221;skaDialog&#8221; do an element will locate a button and a dialog from its&#8217;<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/ska-blocks.com\/docs\/dialog\/\">Read more<\/a><\/p><\/div>\n\n\n<div class=\"flex sm:absolute right-0 bottom-0 flex-row flex-wrap gap-1.5 *:px-1.5 *:py-0.5 mt-2.5 *:text-xs\/snug *:font-semibold *:text-site-inverted *:hover:text-site-inverted\/100 *:bg-primary *:hover:bg-primary-dark *:rounded wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/tag\/alpine-js\/\" data-taxonomy=\"post_tag\" data-term=\"alpine-js\">Alpine.js<\/a><\/div>\n<\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-14 post type-post status-publish format-standard hentry category-ska-theme tag-alpine-js\">\n\n<div class=\"flex flex-col sm:flex-row gap-4 justify-start items-stretch wp-block-ska-element\">\n\n\n<div class=\"flex relative basis-3\/4 flex-col grow justify-start items-stretch wp-block-ska-element\">\n<div class=\"flex flex-row gap-2 items-center wp-block-ska-element\">\n<div class=\"flex flex-row gap-4 items-center *:text-base *:font-bold *:text-primary *:hover:text-link-hover wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/category\/ska-theme\/\" data-taxonomy=\"category\" data-term=\"ska-theme\">ska-theme<\/a><\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-post-title -mt-1 mb-2 text-2xl sm:text-3xl [&amp;&gt;*]:text-site-heading\"><a href=\"https:\/\/ska-blocks.com\/docs\/toast\/\" target=\"_self\" >Toast<\/a><\/h3>\n\n<div class=\"wp-block-post-excerpt flex flex-col grow gap-2 justify-between [&amp;_.wp-block-post-excerpt\\_\\_more-link]:text-base\/none [&amp;_.wp-block-post-excerpt\\_\\_more-link]:font-semibold [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:line-clamp-3 [&amp;_.wp-block-post-excerpt\\_\\_excerpt]:text-site\/75\"><p class=\"wp-block-post-excerpt__excerpt\">Display notifications that appear on the front end to provide feedback or information to the user. ska-theme includes a template part for rendering Toasts, which can be enabled from ska-theme -&gt; General -&gt; Toasts. The template part is set up to use the skaToast Alpine.js module. Adding a toast Ensure that rendering of the template<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/ska-blocks.com\/docs\/toast\/\">Read more<\/a><\/p><\/div>\n\n\n<div class=\"flex sm:absolute right-0 bottom-0 flex-row flex-wrap gap-1.5 *:px-1.5 *:py-0.5 mt-2.5 *:text-xs\/snug *:font-semibold *:text-site-inverted *:hover:text-site-inverted\/100 *:bg-primary *:hover:bg-primary-dark *:rounded wp-block-ska-post-data\"><a href=\"https:\/\/ska-blocks.com\/docs\/tag\/alpine-js\/\" data-taxonomy=\"post_tag\" data-term=\"alpine-js\">Alpine.js<\/a><\/div>\n<\/div>\n<\/div>\n\n<\/li><\/ul><\/div>\n","protected":false},"excerpt":{"rendered":"<p>ska-theme comes equipped with Alpine.js, its&#8217; plugins &#8220;collapse&#8221;, &#8220;focus&#8221; and &#8220;intersect&#8221;, 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&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":2,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":471,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/20\/revisions\/471"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}