Docs
Loader
The ska-theme’s “Loading” preset can be applied to produce an overlay with a loading spinner. Loading preset is globally loaded on the front end and applied to the following CSS selectors by default: Additional custom selectors can be added using the following filter: The loading spinner appearance can be customized with Tailwind classes by editing…Read moreDivider
Dividers can be used to visually segment content into groups. In the WordPress Block Editor you can use the Separator block to create dividers with different styles or with ska-blocks and Tailwind you can create custom <hr> elements or use the divide-* classes to create divisions. WordPress dividers Default separator Wide line separator Three dots…Read moreCustom fonts
Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…Read moreFiltering options
The ska_plugin_get_options_{slug} filter can be used to filter plugin and theme options: Note that the filter will also apply on the admin settings page, so with the styleCacheMode being set to off, the next time you edit and save settings the value will be written to the database – this is why the code also…Read moreGetting started
ska-theme is a WordPress theme designed to be used in combination with the ska-blocks plugin. The theme disables most of the conventional WordPress functionality for styling blocks. Templates, template parts and patterns that come with the theme all use Tailwind classes. You should have: 1. Installing the theme 2. First steps Configure the theme Theme…Read moreGetting started
ska-blocks is a free WordPress plugin that adds the ability to add Tailwind CSS classes to all Block Editor blocks. Basics The plugin will add an input field to the block inspector controls sidebar: Using the input field Tailwind classes can be added directly, by inputting, for example, m-4 and pressing enter. The value will…Read moreElement block
The Element block is a block that can contain other blocks. By default the HTML tag name div is used, but it can be changed using the Element type block controls: The block also supports receiving any custom attributes: As with most blocks, the block also accepts Tailwind classes. In combination with a custom tag…Read moreText block
The Text block is a block that can contain Rich Text. By default the HTML tag name span is used, but it can be changed using the Element type block controls: The block is very basic and similar to the core/paragraph block except you can customize the tag name and attributes. Use it whenever the…Read moreTailwind block
The Tailwind block in the ska-blocks plugin allows to enter HTML with Tailwind classes and compile it to include the Tailwind CSS on the front end as well. The block itself has multiple features and can serve many different purposes, such as rendering any custom HTML, converting Tailwind HTML to blocks, adding scripts or styles,…Read moreImage block
The Image block can be used to display different types of media. This documentation gives an overview of the modes that the Image block can operate in and provides copy-pastable examples of images styled in different ways. Modes The image block comes with multiple different modes of operation: Mode – File Choose an image file…Read more