{"id":14,"date":"2025-09-26T08:50:43","date_gmt":"2025-09-26T08:50:43","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/toast\/"},"modified":"2025-09-26T09:43:15","modified_gmt":"2025-09-26T09:43:15","slug":"toast","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/toast\/","title":{"rendered":"Toast"},"content":{"rendered":"\n<p class=\"lead\">Display notifications that appear on the front end to provide feedback or information to the user.<\/p>\n\n\n\n<p>ska-theme includes a template part for rendering Toasts, which can be enabled from <strong>ska-theme -&gt; General -&gt; Toasts<\/strong>. The template part is set up to use the <code>skaToast<\/code> Alpine.js module.<\/p>\n\n\n\n<div x-data=\"\" class=\"flex flex-row flex-wrap gap-4 mb-8 not-prose wp-block-ska-element\">\n<button x-on:click=\"$dispatch('ska-toast', 'Test toast, please ignore.')\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button\">Default toast<\/button>\n\n\n\n<button x-data=\"{facts:['<strong&gt;Honey Never Spoils<\/strong&gt;: Edible for 3,000 years.', '<strong&gt;Bananas Are Berries<\/strong&gt;: Botanically true.', '<strong&gt;Hot Water Freezes Faster<\/strong&gt;: Known as the Mpemba effect.', '<strong&gt;Octopuses Have Three Hearts<\/strong&gt;: Two for gills, one for body.', '<strong&gt;Human Nose Detects Trillions<\/strong&gt;: Over a trillion different odors.']}\" x-on:click=\"$dispatch('ska-toast', {content: facts[Math.floor(Math.random() * 5)], type: 'info'})\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">Info<\/button>\n\n\n\n<button x-on:click=\"$dispatch('ska-toast', {content: 'Operation completed successfully!', type: 'success'})\" class=\"text-site-inverted hover:text-site-inverted active:text-site-inverted bg-positive\/90 hover:bg-positive\/95 active:bg-positive\/100 border-positive hover:border-positive\/75 focus:border-positive\/50 active:border-positive\/50 focus:ring-positive\/50 wp-block-ska-text ska-text ska-preset--ska-theme--button\">Success<\/button>\n\n\n\n<button x-on:click=\"$dispatch('ska-toast', {content: 'Please be cautious with <a href=&quot;#&quot; x-on:click.prevent=&quot;clearTimeout(window._warnt); document.querySelector(\\'[x-data*=skaToast]\\').style.transform = \\'perspective(500px) rotateX(15deg) translateZ(-160px) translateY(-30px)\\'; $dispatch(\\'ska-toast\\', \\'You were warned.\\'); window._warnt = setTimeout(() =&gt; { document.querySelector(\\'[x-data*=skaToast]\\').style.transform = \\'\\' }, 7500)&quot;&gt;this<\/a&gt; action.', type: 'warning'})\" class=\"text-site-inverted hover:text-site-inverted active:text-site-inverted bg-warning\/90 hover:bg-warning\/95 active:bg-warning\/100 border-warning hover:border-warning\/75 focus:border-warning\/50 active:border-warning\/50 focus:ring-warning\/50 wp-block-ska-text ska-text ska-preset--ska-theme--button\">Warning<\/button>\n\n\n\n<button x-on:click=\"$dispatch('ska-toast', {content: 'An error has occurred. <a href=&quot;#&quot; x-on:click.prevent=&quot;$dispatch(\\'ska-toast\\', {content: \\'Nope, still not working.\\', type: \\'error\\'})&quot;&gt;Click here<\/a&gt; to try again.', type: 'error'})\" class=\"text-site-inverted hover:text-site-inverted active:text-site-inverted bg-negative\/90 hover:bg-negative\/95 active:bg-negative\/100 border-negative hover:border-negative\/75 focus:border-negative\/50 active:border-negative\/50 focus:ring-negative\/50 wp-block-ska-text ska-text ska-preset--ska-theme--button\">Error<\/button>\n\n\n\n<button x-on:click=\"$dispatch('ska-toast', {content: 'Only 1 instance of this toast can be visible at once because it has an <code&gt;ID<\/code&gt; specified.', type: 'info', id: 'test-toast'})\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--outline-button\">Toast with an ID<\/button>\n\n\n\n<button x-on:click=\"$dispatch('ska-hide-toast', 'test-toast')\" class=\"p-[0.75em_1.25em] hover:text-site-inverted active:text-site-inverted focus:text-site-inverted bg-transparent hover:bg-secondary-light active:bg-secondary-light focus:bg-secondary-light border-0 ring-2 ring-inset focus:ring-2 ring-secondary hover:ring-secondary-light focus:ring-secondary-light focus:ring-offset-0 wp-block-ska-text ska-text ska-preset--ska-theme--button\">Hide toast with an ID<\/button>\n\n\n\n<button x-on:click=\"$dispatch('ska-clear-toasts')\" class=\"text-site-inverted hover:text-site-inverted active:text-site-inverted bg-secondary\/90 hover:bg-secondary\/95 active:bg-secondary\/100 border-secondary hover:border-secondary\/75 focus:border-secondary\/50 active:border-secondary\/50 focus:ring-secondary\/50 wp-block-ska-text ska-text ska-preset--ska-theme--button\">Clear all toasts<\/button>\n<\/div>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Module specification<\/span><span class=\"label language-typescript\">TypeScript<\/span><\/header><div class=\"content\"><pre class=\"code typescript language-typescript\"><code class=\"language-typescript\">\/\/ Available configuration when using `x-data=\"skaToast\"` on an element.\ninterface ToastConfig {\n\t\/** Maximum amount of Toasts visible at once. *\/\n\tmax?: number\n}\n\n\/\/ Toast structure.\ninterface Toast {\n\tid?: string | number\n\tcontent: string\n\ttype?: 'default' | 'info' | 'success' | 'warning' | 'error' | string\n}\n\n\/\/ Properties available when using `x-data=\"skaToast\"` on an element.\ninterface ToastModule {\n\t\/** Add and show a toast. *\/\n\tadd: (toast: Toast | Toast&#91;'content']) => void\n\t\/** Show a toast. *\/\n\tshow: (id: Toast&#91;'id']) => void\n\t\/** Hide a toast. *\/\n\thide: (id: Toast&#91;'id']) => void\n\t\/** Remove all toasts. *\/\n\tclear: () => void\n}<\/code><\/pre><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a toast<\/h2>\n\n\n\n<p>Ensure that rendering of the template part that handles showing toasts is enabled from <strong>ska-theme -&gt; General -&gt; Toast<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript<\/h3>\n\n\n\n<p>The global <code>window.ska_theme<\/code> object includes a function for adding a toast. The function can accept a string with toast content or an object with the <code>content<\/code> property and additional details about the toast, such as <code>type<\/code> or <code>id<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Adding a toast with JavaScript<\/span><span class=\"label language-javascript\">JavaScript<\/span><\/header><div class=\"content\"><pre class=\"code javascript language-javascript\"><code class=\"language-javascript\">\/\/ Using the global function\nwindow.ska_theme.toast('Toast content.')\n\n\/\/ With additional details\nwindow.ska_theme.toast({\n\tcontent: 'Toast content.',\n\ttype: 'info',\n})\n\n\/\/ Dispatching the event manually\nwindow.dispatchEvent(new CustomEvent('ska-toast', {\n\tdetail: {\n\t\tcontent: 'Toast content.',\n\t},\n}))\n\n\/\/ Toast with details\nwindow.ska_theme.toast({\n\tid: 'toast-1',\n\tcontent: 'Toast content.',\n\ttype: 'info',\n})\n\/\/ Hide toast by ID\nwindow.ska_theme.hideToast('toast-1')\n\/\/ Hide all toasts\nwindow.ska_theme.clearToasts()<\/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<h3 class=\"wp-block-heading\">Alpine.js<\/h3>\n\n\n\n<p>In the block editor it&#8217;s easiest to add toasts by adding <a href=\"https:\/\/ska-blocks.com\/docs\/ska-blocks\/attributes\/\" data-type=\"post\" data-id=\"862\">HTML attributes<\/a> to blocks. A toast can be triggered by using the <code>ska_theme.toast<\/code> function from earlier or by using Alpine&#8217;s <code>$dispatch<\/code> magic.<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Adding a toast with Alpine.js<\/span><\/header><div class=\"content\"><pre class=\"code html language-html\"><code class=\"language-html\">\/** Using the global function *\/\n&lt;button x-data x-on:click=\"ska_theme.toast('Toast content.')\">Show toast&lt;\/button>\n\n\/\/ Add toast\nska_theme.toast({id: 'toast-1',\tcontent: 'Toast content.', type: 'info'})\n\n\/\/ Hide toast\nska_theme.hideToast('toast-1')\n\n\/\/ Hide all toasts\nska_theme.clearToasts()\n\n\/** Using Alpine.js $dispatch *\/\n&lt;button x-data x-on:click=\"$dispatch('ska-toast', 'Toast content.')\">Show toast&lt;\/button>\n\n\/\/ Add toast\n$dispatch('ska-toast', {content: 'Toast content.', type: 'success', id: 'toast-id'})\n\n\/\/ Hide toast\n$dispatch('ska-hide-toast', 'toast-id')\n\n\/\/ Hide all toasts\n$dispatch('ska-clear-toasts')<\/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<h3 class=\"wp-block-heading\">PHP<\/h3>\n\n\n\n<p>A toast can also be added with PHP to leave users some feedback when something was done server-side.<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Adding a toast with PHP<\/span><span class=\"label language-php\">PHP<\/span><\/header><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">ska_theme()->get('toast')->add('Toast content.');\n\nska_theme()->get('toast')->add(&#91;\n\t'content' => 'Invalid nonce.', \n\t'type' => 'error',\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<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">PHP example<\/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_body_open', function() {\n\n\tif(!isset($_POST&#91;'email'])) {\n\t\treturn;\n\t}\n\n\tif(subscribe_to_newsletter(sanitize_email(wp_unslash($_POST&#91;'email'])))) {\n\t\tska_theme()->get('toast')->add(&#91;\n\t\t\t'content' => esc_html__('You have subscribed to the newsletter!', 'your-textdomain'),\n\t\t\t'type' => 'success',\n\t\t]);\n\t} else {\n\t\tska_theme()->get('toast')->add(&#91;\n\t\t\t'content' => sprintf(\n\t\t\t\tesc_html__('Something went %1$shorribly%2$s wrong.', 'your-textdomain'),\n\t\t\t\t'&lt;strong>',\n\t\t\t\t'&lt;\/strong>'\n\t\t\t),\n\t\t\t'type' => 'error',\n\t\t]);\n\t}\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<h2 class=\"wp-block-heading\">Examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Default toast<\/h3>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<button x-data=\"\" x-on:click=\"$dispatch('ska-toast', 'Toast content.')\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button\">Default toast<\/button>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1744868963},&quot;skaBlocksAs&quot;:{&quot;customElement&quot;:&quot;&quot;,&quot;element&quot;:&quot;button&quot;},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:{&quot;x-data&quot;:&quot;&quot;,&quot;x-on:click&quot;:&quot;$dispatch(&#039;ska-toast&#039;, &#039;Toast content.&#039;)&quot;}},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;} --&gt;\n&lt;button x-data=&quot;&quot; x-on:click=&quot;$dispatch(&#039;ska-toast&#039;, &#039;Toast content.&#039;)&quot; class=&quot;wp-block-ska-text ska-text&quot;&gt;Default toast&lt;\/button&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Detailed toast<\/h3>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<button x-data=\"\" x-on:click=\"$dispatch('ska-toast', {id: 'toast', content: 'Toast content.', type: 'info'})\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button\">Detailed toast<\/button>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1744868963},&quot;skaBlocksAs&quot;:{&quot;customElement&quot;:&quot;&quot;,&quot;element&quot;:&quot;button&quot;},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:{&quot;x-data&quot;:&quot;&quot;,&quot;x-on:click&quot;:&quot;$dispatch(&#039;ska-toast&#039;, {id: &#039;toast&#039;, content: &#039;Toast content.&#039;, type: &#039;info&#039;})&quot;}},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;} --&gt;\n&lt;button x-data=&quot;&quot; x-on:click=&quot;$dispatch(&#039;ska-toast&#039;, {id: &#039;toast&#039;, content: &#039;Toast content.&#039;, type: &#039;info&#039;})&quot; class=&quot;wp-block-ska-text ska-text&quot;&gt;Detailed toast&lt;\/button&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Remote request<\/h3>\n\n\n\n<p>A button that attempts to fetch data from a REST endpoint and displays a success toast with the result or an error toast on failure (includes a <code>setTimeout<\/code> for demo purposes only).<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<button x-data=\"{loading: false}\" x-on:fetch=\"fetch('\/docs\/wp-json\/wp\/v2\/posts?per_page=1').then(r =&gt; r.json()).then(p =&gt; p[0].title.rendered).then(title =&gt; $dispatch('success', title)).catch(e =&gt; $dispatch('error')).finally(() =&gt; loading = false)\" x-on:success=\"$dispatch('ska-toast', {content: `The latest post on this site is titled: <strong&gt;${$event.detail}<\/strong&gt;`, type: 'success'})\" x-on:error=\"$dispatch('ska-toast', {content: `Failed fetching the latest post.`, type: 'error'})\" x-on:click=\"loading = true; setTimeout(() =&gt; $dispatch('fetch'), 2000)\" :class=\"{loading}\" :disabled=\"loading\" class=\"gap-2.5 wp-block-ska-element loading ska-preset--ska-theme--button\">\n<span class=\"wp-block-ska-text ska-text\">Fetch the latest post title<\/span>\n\n\n\n<svg aria-hidden=\"true\" class=\"w-4 h-auto text-current wp-block-ska-image image\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 6.4.2 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d=\"M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z\"><\/path><\/svg>\n<\/button>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;gap-2.5&quot;,&quot;css&quot;:&quot;.gap-2\\u005c.5{gap:var(--spacing-2_5)}&quot;,&quot;t&quot;:1744868963,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;customElement&quot;:&quot;&quot;,&quot;element&quot;:&quot;button&quot;},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:{&quot;x-data&quot;:&quot;{loading: false}&quot;,&quot;x-on:fetch&quot;:&quot;fetch(&#039;\/docs\/wp-json\/wp\/v2\/posts?per_page=1&#039;).then(r =\\u003e r.json()).then(p =\\u003e p[0].title.rendered).then(title =\\u003e $dispatch(&#039;success&#039;, title)).catch(e =\\u003e $dispatch(&#039;error&#039;)).finally(() =\\u003e loading = false)&quot;,&quot;x-on:success&quot;:&quot;$dispatch(&#039;ska-toast&#039;, {content: `The latest post on this site is titled: \\u003cstrong\\u003e${$event.detail}\\u003c\/strong\\u003e`, type: &#039;success&#039;})&quot;,&quot;x-on:error&quot;:&quot;$dispatch(&#039;ska-toast&#039;, {content: `Failed fetching the latest post.`, type: &#039;error&#039;})&quot;,&quot;x-on:click&quot;:&quot;loading = true; setTimeout(() =\\u003e $dispatch(&#039;fetch&#039;), 2000)&quot;,&quot;:class&quot;:&quot;{loading}&quot;,&quot;:disabled&quot;:&quot;loading&quot;}},&quot;skaBlocksSelectors&quot;:[],&quot;skaBlocksVariation&quot;:&quot;ska-theme--icon-button&quot;,&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2.5&quot;}}},&quot;className&quot;:&quot;loading&quot;} --&gt;\n&lt;button x-data=&quot;{loading: false}&quot; x-on:fetch=&quot;fetch(&#039;\/docs\/wp-json\/wp\/v2\/posts?per_page=1&#039;).then(r =&gt; r.json()).then(p =&gt; p[0].title.rendered).then(title =&gt; $dispatch(&#039;success&#039;, title)).catch(e =&gt; $dispatch(&#039;error&#039;)).finally(() =&gt; loading = false)&quot; x-on:success=&quot;$dispatch(&#039;ska-toast&#039;, {content: `The latest post on this site is titled: &lt;strong&gt;${$event.detail}&lt;\/strong&gt;`, type: &#039;success&#039;})&quot; x-on:error=&quot;$dispatch(&#039;ska-toast&#039;, {content: `Failed fetching the latest post.`, type: &#039;error&#039;})&quot; x-on:click=&quot;loading = true; setTimeout(() =&gt; $dispatch(&#039;fetch&#039;), 2000)&quot; :class=&quot;{loading}&quot; :disabled=&quot;loading&quot; class=&quot;gap-2.5 wp-block-ska-element loading&quot;&gt;\n&lt;!-- wp:ska\/text --&gt;\n&lt;span class=&quot;wp-block-ska-text ska-text&quot;&gt;Fetch the latest post title&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;svg&quot;,&quot;svg&quot;:&quot;\\u003csvg fill=\\u0022currentColor\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022 viewBox=\\u00220 0 512 512\\u0022\\u003e\\u003c!--! Font Awesome Free 6.4.2 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --\\u003e\\u003cpath d=\\u0022M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z\\u0022\/\\u003e\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;font-awesome-6&quot;,&quot;icon&quot;:&quot;solid\/angles-right&quot;,&quot;wrap&quot;:false,&quot;sanitize&quot;:false,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;w-4 h-auto text-current&quot;,&quot;css&quot;:&quot;.w-4{width:var(--spacing-4)}.h-auto{height:auto}.text-current{color:currentColor}&quot;,&quot;t&quot;:1744868963},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;4&quot;}}},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;current&quot;}}}} --&gt;\n&lt;svg aria-hidden=&quot;true&quot; class=&quot;w-4 h-auto text-current wp-block-ska-image&quot; fill=&quot;currentColor&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;!--! Font Awesome Free 6.4.2 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --&gt;&lt;path d=&quot;M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;\/button&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Alpine.js attributes that the button uses<\/span><span class=\"label language-html\">HTML<\/span><\/header><div class=\"content\"><pre class=\"code html language-html\"><code class=\"language-html\">&lt;button \n\tx-data=\"{loading: false}\" \n\tx-on:fetch=\"fetch('\/docs\/wp-json\/wp\/v2\/posts?per_page=1')\n\t\t.then(response => response.json())\n\t\t.then(post => post&#91;0].title.rendered)\n\t\t.then(title => $dispatch('success', title))\n\t\t.catch(e => $dispatch('error'))\n\t\t.finally(() => loading = false)\" \n\tx-on:success=\"$dispatch('ska-toast', {content: `The latest post on this site is titled: &lt;strong>${$event.detail}&lt;\/strong>`, type: 'success'})\" \n\tx-on:error=\"$dispatch('ska-toast', {content: `Failed fetching the latest post.`, type: 'error'})\" \n\tx-on:click=\"loading = true; $dispatch('fetch')\" \n\t:class=\"{loading}\" \n\t:disabled=\"loading\"\n>\n\t...\n&lt;\/button><\/code><\/pre><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>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&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":[7],"class_list":["post-14","post","type-post","status-publish","format-standard","hentry","category-ska-theme","tag-alpine-js"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/14","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=14"}],"version-history":[{"count":1,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/14\/revisions\/224"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}