We're excited to announce the release of Blockstudio 5.6! Building on the robust foundation of previous updates, version 5.6 introduces even more enhancements and features that were directly influenced by your feedback. Thank you for helping us shape Blockstudio; your insights make all the difference as we continue to evolve together. Let's dive into what’s new and improved in this release! 🚀

Breaking

Deprecation of Builder

In our ongoing effort to streamline Blockstudio and enhance its versatility, we are announcing the deprecation of the "Builder Elements". Originally designed as a set of Tailwind-based page builder blocks for Gutenberg, we've found that they conflicted with our core philosophy of providing a flexible, file-based approach to block creation. However, this change isn't about taking away functionality. Instead, we've distilled the essence of Builder Elements into two powerful new features: the Class Field and the Data Attribute Field. These refinements ensure that you retain the most valuable aspects of the Builder Elements while benefiting from a more cohesive and adaptable toolset.

Deprecation of preloading

We're also announcing the deprecation of the Preloading feature in Blockstudio 5.6. Initially introduced in version 5.4.8, this feature aimed to preload block templates to improve performance. However, through extensive testing and valuable user feedback, we've found that it does not effectively serve most use cases, particularly for dynamic blocks such as those containing InnerBlocks, which require client-side fetching regardless of preloading. As we strive to optimize Blockstudio, removing this feature will allow us to focus on more impactful enhancements that consistently benefit all users.

New fields

Classes

A key enhancement in Blockstudio 5.6 is the Class Field—a powerful feature extracted from the deprecated Builder Elements. This field allows you to dynamically assign CSS classes to your custom blocks directly within the Gutenberg editor. The interface for adding classes is straightforward, ensuring ease of use while styling your blocks with precision. Furthermore, we’ve introduced a new setting that permits the inclusion of multiple custom stylesheets. The CSS classes defined in these stylesheets will be available for autocompletion, streamlining your workflow and reducing errors. This capability enables you to effortlessly apply and manage your unique styling preferences across various design projects, fully leveraging the flexibility of your CSS toolkit in the Gutenberg editor.

                      {
    "name": "blockstudio/classes",
    "title": "Classes",
    "description": "Classes field",
    "blockstudio": {
      "attributes": [
        {
          "id": "classes",
          "type": "classes",
          "label": "Classes",
          "default": "my-class another-class",
          "tailwind": true
        }
      ]
    }
  }

      
Copy

Attributes

Extracted from the previously introduced Builder Elements, the new Data Attribute Field in Blockstudio 5.6 significantly enhances the framework. This feature allows you to add custom data attributes directly to your blocks within the Gutenberg editor. It's specifically designed to facilitate more complex interactions and enable dynamic content handling, providing developers with the essential tools for data-driven designs. This addition bolsters the framework’s flexibility, making it easier to create responsive and interactive blocks tailored to specific functionalities.

                      {
    "name": "blockstudio/attributes",
    "title": "Attributes",
    "description": "Attributes field",
    "blockstudio": {
      "attributes": [
        {
          "id": "attributes",
          "type": "attributes",
          "label": "Attributes",
          "default": "my-class another-class"
        }
      ]
    }
  }

      
Copy

Extensions

Extensions in Blockstudio have been significantly enhanced to offer more control and flexibility:

Sortable by Priority

We've enhanced the Extensions feature to allow for precise ordering of sidebar fields. By utilizing the priority object key in your JSON configuration files, you can define the sequence in which extended fields appear. This functionality provides the flexibility to organize the editing interface according to the specific demands of your projects, enhancing usability and efficiency for all users.

            {
      "name": "core/heading",
      "blockstudio": {
        "extend": {
          "priority": 10
        }
      }
    }

      
Copy

More Flexible Set Values

Building on our enhancements, you can now set extension values on any attribute or data attribute—not just style or class. This broadens the scope of customization, enabling developers to apply extensions across various block properties. Adjust accessibility attributes, data bindings, or other characteristics with ease, providing the tools to tailor blocks to your specific needs and ensure greater control and versatility in block development.

Attribute assistance in Editor

We've upgraded the built-in code editor in the WordPress admin to include a powerful new feature: the @attribute: syntax. This enhancement streamlines your development workflow by automatically providing a list of available attributes for any block you're editing. It goes a step further by inserting the necessary template code tailored to your coding environment, whether PHP or Twig. This means loops for arrays and other structures are effortlessly integrated based on your selected template language, enhancing productivity and ensuring precision in your block development.

CSS Variables autocompletion

Blockstudio's settings panel now includes a new feature that allows you to add a list of stylesheets registered in WordPress. This integration enhances the existing code editor field by enabling autocomplete for all CSS variables found within those stylesheets. This functionality not only streamlines the styling process but also ensures that developers can leverage the full potential of CSS customizations, with quick access to variables directly within the editor, enhancing both productivity and consistency across projects.

CSS and JS processing filters

Blockstudio's latest update brings enhanced flexibility to the way SCSS and JavaScript are handled on the PHP server. We have introduced two new filters that allow you to adjust the content of each SCSS and JS file before it is compiled. These filters provide developers with the ability to fine-tune and modify the code, ensuring that the final output aligns perfectly with specific project requirements. This feature is crucial for those who need to implement custom behaviors or styling adjustments dynamically before the compilation process.

That concludes the rundown of the fantastic new features in Blockstudio 5.6! Be sure to check the changelog for a detailed overview of all the updates and bug fixes. We can’t wait to see what you create with these enhancements. Happy building! 🚀