Docs
Variables
Variables allow creating arbitrary Tailwind classes that create CSS variables, such as [–var:value]. Adding a value prefixed with — to the Tailwind input allows to create a “variable”: A variable value can be a raw value or a value of a specific type: Variable name can also contain variants, such as sm:–var, which would create…Read moreCookie consent notice
From ska-theme -> General -> Cookie notice option it’s possible to enable displaying a dialog that notifies users about cookies. The contents of the notice can be changed by editing the Appearance -> Editor -> Patterns -> General -> Consent dialog template part. By default the notice integrates with WP Consent API and Google Site…Read moreLanding page
To create a landing page, you’ll want to add a new WordPress page and assign the Full width template for it (a template that comes with ska-theme). Template can be changed from the right sidebar when editing a page: Choose Swap template and pick the Full width template. Once created, you can make the page…Read moreAlpine.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…Read moreAttributes
ska-blocks blocks, such as Element and Text, have the ability to accept custom HTML attributes: This allows to add things that the block editor may not support at the time, such as specifying aria- values, adding data- values, integrating with Alpine.js, adding schema markup and more. Since attribute values can get long and it’s a…Read moreCode block
The code block is an alternative for the WordPress code block with the addition of syntax highlighting, indenting and copy function. The Code block uses the “Code block” preset for its’ appearance by default. Basic code block Code block with a header Code block can have a header that can contain a short description of…Read moreDialog
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=”skaDialog” do an element will locate a button and a dialog from its’…Read moreLanguage switcher block
The Language switcher block can display a placeholder language switcher when a multilingual plugin isn’t installed yet, but will switch to using languages from WPML or Polylang once detected. Block options Mode The block can be in “List” mode to render a basic <ul> > <li> of the languages, or in “Dropdown” mode which utilizes…Read moreCart dialog block
The Cart dialog block can display a button that opens the WooCommerce mini cart widget in a Dialog, which is a light-weight alternative for the WC “Mini-cart” block. Example mini cart icon for header: When WooCommerce isn’t activated the block renders nothing. The inner block for the Cart dialog block is a button that will…Read moreToast
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 -> General -> Toasts. The template part is set up to use the skaToast Alpine.js module. Adding a toast Ensure that rendering of the template…Read more