Status: This feature is Alpha now (5 Feb) - We need to setup Visual End2End tests to make sure it's stable for making it beta.
Currently, the WP Block Editor applies CSS styles as inline code on both the editor and the front end. This approach creates significant limitations for Blockera, notably:
CSS Specificity Issues: Inline styles have the highest priority, forcing us to use
!importantto override Blockera-generated styles.Code Cleanliness: The reliance on
!importantleads to messy code, which has attracted negative feedback from website designers—even though this limitation originates from the Block Editor, not Blockera.
Proposed Solution:
We propose a refactor of Blockera’s style generator engine to address these issues by:
Eliminating Inline CSS: Removing all inline CSS codes only for Blockera-customized blocks.
Consolidated Stylesheet: Adding the generated CSS into a single
<style>tag in the page header.
Benefits:
Improved Performance: Consolidating CSS can help pages load faster.
Clean, Maintainable Code: Blocks customized by Blockera will have cleaner code without the need for
!importantdeclarations.Selective Application: The refactoring will only affect blocks customized by Blockera, preserving the integrity of blocks not modified by our tool.
Rollout Plan:
Experimental Feature: This update will be released as an experimental feature within the new "Blockera Early Access Lab" panel.
User Control: Users will have the option to disable the feature if necessary, ensuring flexibility and minimizing potential disruptions.
Conclusion:
This feature aims to overcome the inherent limitations of the WP Block Editor's inline CSS by generating cleaner, more efficient code. The refactored style generator will enhance both performance and user satisfaction while maintaining compatibility with existing blocks.
We look forward to gathering feedback from our users during the experimental phase.
You can work the current and in development version of in the following PR in Github. It includes a Playground Demo link that you can use to create a live demo version in under 1 minute.
