Both the Blocksy theme and the GreenShift block library offer incredible features to set global styles and reusable page templates, but taken together it can get quite confusing. In this article, we’ll explore how our approach to designing sites within our framework – leveraging the features of the Blocksy theme and the GreenShift block library – can inform new best practices for efficient and maintainable websites. My primary objective is to establish global styling to eliminate the necessity of duplicating element styles throughout the design phase, thereby ensuring a consistent and standardized website design. However, given the significant overlap between Blocksy and GreenShift features to do just that, I found it necessary to evaluate the strengths and weaknesses of each product’s solutions. Doing so enables me to discern the optimal scenarios for when and where to use each tool effectively. This analysis also serves as a reference to determine where something is most likely configured in Indigetal WebCraft client sites.
Both Blocksy and GreenShift include settings to configure your base colors and typography for the whole website. The Blocksy theme’s Customizer at first seems like the best approach to set the base colors and typography, while GreenShift’s “Stylebook” global elements may be seen as useful for creating “Presets” for alternative fonts, such as for an entirely different set of headings for big splashy hero sections that break from the sizing and spacing of header tags set in Blocksy’s Customizer. Blocksy also comes with 8 global colors and there is an option to create more, so GreenShift’s Color Presets again do not seem as necessary. GreenShift’s Gradient Presets on the other hand are still useful as Blocksy does not provide the ability to create Gradients in their Color settings.
However, when considering modern or more advanced coding strategies like 7-1 architecture, namespacing, scoping, and Saas-like improvements to CSS like variables, CSS Calc and nesting, the benefit of using GreenShift’s Stylebook over Blocksy’s Customizer immediately becomes more apparent.
GreenShift’s Stylebook provides for variables, global classes, and interaction layers and this is where GreenShift diverges from Blocksy and really shines. Variables, and local/global classes are great for organizing, maintaining, and strategically implementing your styles, while allowing you to use cutting-edge CSS properties well before they are available in WordPress. We can create variables with the latest CSS properties, such as fluid typography and space scales that will completely replace breakpoints on font size and space values, and oklch() for developing color schemes based entirely on harmony science and filters, with far more predictable results between browsers. These variables can then be assigned to global elements and color presets in GreenShift’s stylebook. Don’t worry though, these advanced CSS properties are pre-configured in Indigetal WebCraft client sites and are actually being developed for superior flexibility that will require far less manual tweaking and inconsistencies than current design strategies, for the benefit all client sites!
Another area with significant overlap between the two products is between Blocksy’s Content Blocks and WordPress block patterns. GreenShift surfaces the core block patterns to the WordPress backend in a settings page called “Reusable Templates,” that also enables the ability to import and export block patterns. GreenShift’s reusable templates settings page is a useful extension of core WordPress block patterns (I use the term “block patterns” and only ever use the term “Reusable Templates” when specifically referring to GreenShift’s settings page). Block patterns serve to create designs using blocks and then save and reuse them in the editor.
Page templates can be overridden in both Content Blocks and GreenShift’s “Reusable Templates” options in the editor. The difference is that GreenShift template overrides have comparatively less options than Blocksy Content Blocks in the area of template overrides. It provides the selection of the type of template and then a drop down menu to select the template. GreenShift template overrides will also show up under Patterns > “My Patterns” in the Gutenberg Editor, which is not exactly where you would expect to find template overrides and therefore clutters the block patterns library. Blocksy’s Content Blocks are far more versatile, offering many more conditions, the ability to set multiple conditions for template overrides, and other options, such as configuring the template’s page structure. Additionally, it is integrated with other features of the Blocksy theme, specifically the page hooks, pop ups, and menu system. These 4 areas: page hooks, pop ups, mega menus, and template overrides is where Blocksy’s content blocks excel over GreenShift’s reusable templates, while block patterns continue to serve their purpose for designing and reusing blocks in all other instances.
It is important to note that many of the features of Blocksy’s Content Blocks are similar to those being developed in Full Site Editing themes. While Blocksy retains elements of a classic theme, its robust feature set positions it as a hybrid between full site editing and classic themes. Its user-friendly features provides average users with access to powerful customizations typically reserved for developers.
Page template overrides in Gutenberg however don’t really go very far without the heavy use of dynamic blocks. Because of this, Blocksy Pro does come packaged with a Dynamic Data block, but GreenShift’s query blocks addon is far more powerful. Again, proving that the combination of Blocksy and GreenShift are perfectly suited for each other.
There are several enhancements I’d like to see to better facilitate the implementation of more advanced techniques and which could even enable the development of a GreenShift-based framework, particularly concerning the variables and class system. However, adhering to these best practices not only ensures cleaner, faster, and more maintainable websites, it also harnesses the robust features of Blocksy and GreenShift to establish a cohesive and adaptable methodology for designing WordPress websites with unparalleled efficiency, consistency, and maintainability.
Here’s a breakdown of the strategies for when and why to use one tool over the other in the discussed design areas:
- Global Styling (Base Colors and Typography):
- Both: Both Blocksy and GreenShift provide features that will prove useful in a comprehensive web design.
- Blocksy: Utilize Blocksy’s Customizer for quick and straightforward configuration of base colors and typography.
- GreenShift: Consider using GreenShift’s “Stylebook” for creating presets and alternative font configurations, particularly for unique design elements like hero sections.
- Modern Coding Strategies (Variables, Global Classes, and Interaction Layers):
- GreenShift: Opt for GreenShift’s Stylebook for advanced features, such as variables and global classes, enabling infinitely fine-grained control and the implementation of modern coding strategies that are not yet common in WordPress themes and plugins like fluid typography, space scales, and the oklch() property (to create color schemes based entirely on harmony science and filters, with far more predictable results between browsers). Note that GreenShift’s Stylebook with variables begins to edge out Blocksy for setting base colors and typography using more advanced strategies.
- Blocksy: While Blocksy provides some customization options, GreenShift’s capabilities are far more extensive in this regard.
- Page Template Overrides:
- Blocksy: Choose Blocksy’s Content Blocks for their versatility, offering numerous conditions and options for template overrides.
- GreenShift: While GreenShift also supports template overrides through “reusable templates,” Blocksy’s Content Blocks offer more options and flexibility, making them preferable in scenarios requiring intricate template customization. However, GreenShift’s query blocks are extremely useful when creating template overrides with Blocksy’s Content Blocks.
- Block Patterns and Reusable Designs:
- Both: Both Blocksy and GreenShift provide features for designing and reusing block patterns across the website.
- Blocksy: Provides seamless integration with other theme features such as template overrides, page hooks, pop-ups, and mega menus.
- GreenShift: Surfaces the core WordPress block patterns in a useful settings page with additional options for designing patterns. The query blocks are extremely powerful and useful in the development of dynamic content, especially in regards to template overrides.
Overall, the choice between Blocksy and GreenShift depends on the specific requirements of the design project and the level of customization and control needed in each area. While Blocksy excels in certain aspects like template overrides and integration with other theme features, GreenShift offers advanced CSS capabilities and seamless interaction with WordPress block patterns, making it suitable for modern coding strategies and intricate design customization.