Introduction

Version 2.0 introduces a new and exciting way to organize and group your block markup and assets. This method is especially useful if you have dedicated stylesheets and script files for your blocks and wish to organize those in a single place.

Setup

Instead of a single file, create a folder with the block name and create a new file named index inside of it. (.php or .twig)

The block folder needs to reside in your blockstudio directory.

<?php // my-block/index.php /* Title: My Block Category: blockstudio Icon: lightbulb */ ?> <h1 class="my-h1">I am a folder component!</h1>

Blockstudio automatically registers every file named index as a folder component and will use the parent folder name as the block ID. Please note that this is purely an organizational choice, for example, it is still possible to do the following:

  • my-block/index.php
  • my-block/alternative.php
  • my-block/style.css
  • my-block/script.js

This would register blocks with the IDs of my-block, my-block-alternative and enqueue both CSS and JS files when the blocks are present.

Naming collisions

Blockstudio automatically gives your blocks unique IDs depending on their prefix, file name and how deeply they are nested. Since no files can be named the same in a file system, no two block IDs will ever be the same.

However, with the introduction of folders, there is now a possibility of two blocks having the same ID. Let's imagine this theoretical setup inside a theme:

  • /blockstudio/my-block/index.php
  • /blockstudio/my-block.php

Both blocks would have the same my-block ID and thus won't be initialised. To prevent this, simply make sure that each block has a unique name within a folder.