Scripts

Sometimes, you just want to start building and not worry about setting up a development environment. Since version 1.3.0, Blockstudio includes a handy way to do just that, simply add the following line to your functions.php :

new Blockstudio\Scripts();

Since blocks are all-encompassing elements that are meant to function on their own, the function enqueues a JavaScript file (~60kb) which contains two modern libraries that support this component-first workflow:

Twind

Twind is a Tailwind-in-JS solution that is loaded as a shim in the Blockstudio library. This means that all Tailwind classes in your markup (frontend and editor) are automatically injected via JavaScript when used on any elements. Although using a purged Tailwind CSS file is always preferable in terms of speed and caching, Twind is fast and perfect for development or smaller production sites.

Alpine

Alpine.js brings the declarative nature of frameworks like React or Vue to any DOM using it's own syntax and is thus a perfect match for Twind.

In a nutshell:

  • Twind = styling (CSS)
  • Alpine = interactivity (JS)

Besides enqueuing the script, calling the Editor function will also remove the max-width from all ACF and MB blocks in the editor.