ska-blocks
Using AI
The Tailwind block allows communicating with a GPT to generate Tailwind HTML, which can then be converted to blocks. API key OpenRouter allows interacting with various GPTs via a single API. First, set up your OpenRouter.ai API key and model under ska-blocks -> Options -> AI: Models can be found at OpenRouter -> Models, for…
Attributes
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…
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…
Style rich text with Tailwind classes
Most WordPress blocks allow to enter rich text, which means you can make selected text bold, italic, add links or even inline images. This functionality can be leveraged to style parts of the text with Tailwind classes. Select some text and make it italic with the rich text formatting controls which appear on the right…
Dynamic links
The dynamic links interface will appear on the block toolbar when using Element or Text blocks with the HTML tag name <a>: Not to be confused with another “link” item on the toolbar that is used for adding a link to Rich Text (as in it will not add a link to the block’s root…
Dynamic content
ska-blocks -> Options -> Dynamic content option allows you to set up commonly used data so that it can be kept all in once place. You can set an e-mail, phone, social media addresses or other custom data: The values can then be referred to on other pages using [ska-*] shortcodes or, for links, using…
Query filters
The WordPress Query Loop block can be used to display posts in the Block Editor. It has settings for a post type, ordering, whether to include sticky posts or not and some filtering capabilities. ska-blocks plugin provides an API to create Query filters for overriding what posts a specific Query Loop block will render. By…
Selectors
Selectors are a novel method of applying Tailwind classes to deeply nested HTML markup using ska-blocks UI. Since ska-blocks provides a UI for managing Tailwind classes, it is possible to take advantage of the Tailwind’s capability of applying rules to nested elements. With Tailwind you can style direct child elements by using the [&>*] variant,…
Variations
Variations allow you to save the state of the current block (and its’ children) and make a new “Block” (Block variation) from it that you can insert like any other block. The functionality is very similar to the core WordPress Block patterns also known as Reusable blocks. Variations are an experimental feature that may become…
Presets
Presets can be used to reuse a set of Tailwind classes. To create a preset, add some Tailwind classes to a block and select Create preset from the paint brush icon: Then you can select which Tailwind features to include in the preset and also give it a name: Once created, you can reuse the…