ska-blocks
Using AI
The Tailwind block of ska-blocks WordPress plugin allows communicating with a GPT to generate Tailwind HTML, which can then be converted to WordPress blocks. API key ska-blocks uses OpenRouter to facilitate interaction with multiple GPTs through a unified API. First, set up your OpenRouter.ai API key and a model to use under ska-blocks -> Options…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 moreVariables
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 moreStyle 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…Read moreDynamic 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…Read moreDynamic 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…Read moreQuery 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…Read moreSelectors
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,…Read moreVariations
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…Read morePresets
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…Read more