Dynamic CSS Generation

How Styble turns block attributes into CSS on the server, caches it per post, and ships global settings styles.

Most Styble styling is generated from attributes, not hard-coded. A central generator dispatches to per-block style classes, which build CSS strings with a shared helper library. The result is cached per post so it is computed once rather than on every page load.

The pieces

Component	File	Role
DynamicCssGenerator	blocks/Includes/Utils/DynamicCssGenerator.php	Orchestrator — picks the right style class for a block and returns its CSS.
Per-block style classes	blocks/Includes/Styles/<BlockName>.php	Build the CSS for one block from its attributes.
Css_Helpers	blocks/Includes/Utils/Css_Helpers.php	Reusable CSS-building utilities.
Block_Dynamic_Style	blocks/Includes/Utils/Block_Dynamic_Style.php	Collects blocks on a post, runs the generator, and caches the output.
Transient_Registry	blocks/Includes/Utils/Transient_Registry.php	Tracks per-post transients for cache clearing.

DynamicCssGenerator

DynamicCssGenerator (namespace ShapedPlugin\StyblePro\Includes\Utils) is constructed with a block's attributes and exposes generate_dynamic_css(). It reads blockName from the attributes and dispatches to the matching style class:

public function generate_dynamic_css() {
	$block_name = $this->attributes['blockName'] ?? '';
	$css_object = array();
	$shared_css = new StybleSharedCss( $this->attributes );

	switch ( $block_name ) {
		case 'animated-heading':
			$animated_heading = new AnimatedHeading( $this->attributes );
			$css_object       = $animated_heading->styble_animated_heading_css();
			break;
		case 'advanced-text':
			$advanced_text = new AdvancedText( $this->attributes );
			$css_object    = $advanced_text->get_css();
			break;
		// … one case per block (post-grid, container, column, separator, info-box, …)
	}
	// … returns the assembled CSS
}

StybleSharedCss contributes CSS common to all blocks (the Advanced-tab styling), and each block's own class adds the block-specific rules.

Registering a new block's styles

When you add a block that needs dynamic CSS, create a style class in blocks/Includes/Styles/, use it at the top of DynamicCssGenerator.php, and add a case for your block's slug in generate_dynamic_css().

Per-block style classes

Each style class lives in blocks/Includes/Styles/ under the namespace ShapedPlugin\StyblePro\Includes\Styles. A typical class takes the attributes in its constructor and exposes a get_css() (or block-specific) method:

<?php
namespace ShapedPlugin\StyblePro\Includes\Styles;

use ShapedPlugin\StyblePro\Includes\Utils\Css_Helpers;

class MyCustomBlock {

	public $attributes = array();

	public function __construct( $attributes ) {
		$this->attributes = $attributes;
	}

	public function get_css() {
		// Build and return CSS, typically using Css_Helpers utilities.
	}
}

Css_Helpers

Css_Helpers (blocks/Includes/Utils/Css_Helpers.php) is a static utility class used by every style class to keep output consistent. Among its methods:

Method	Purpose
object_to_css_string()	Convert a CSS array/object into a CSS string.
filter_responsive_dynamic_css()	Assemble responsive (desktop/tablet/mobile) CSS with breakpoints.
generate_typography_css() / generate_typo_responsive()	Typography rules from typography attributes.
spacing_generate() / get_spacing_css()	Padding/margin from spacing attributes.
box_shadow_css() / box_css()	Box-shadow output.
get_border_styles()	Border + border-width rules.
sp_background_control() / sp_bg_image_css_settings()	Background color/gradient/image.
get_visibility_css()	Responsive visibility (hide on desktop/tablet/mobile).
block_advanced_panel_shared_css()	The shared Advanced-tab CSS.
hex_to_rgba()	Color conversion helper.

Using these helpers means a block author rarely writes raw CSS strings — they map attributes to helper calls.

Per-post caching

Block_Dynamic_Style (blocks/Includes/Utils/Block_Dynamic_Style.php) drives generation for a rendered page. It collects the Styble blocks present (including reusable blocks and saved templates), runs each through DynamicCssGenerator, and caches the combined CSS for that post.

The cache is keyed per post and tracked through Transient_Registry (blocks/Includes/Utils/Transient_Registry.php), which records which transients belong to which post via track_for_post(). When a post is saved or deleted, Block_Init::clear_cache() calls Transient_Registry::clear_post_transients() to purge them:

// blocks/Block_Init.php
add_action( 'save_post', array( $this, 'clear_cache' ), 10, 1 );
add_action( 'deleted_post', array( $this, 'clear_cache' ), 10, 1 );

public function clear_cache( $post_id ) {
	if ( wp_is_post_autosave( $post_id ) || wp_is_post_revision( $post_id ) ) {
		return;
	}
	Transient_Registry::clear_post_transients( (int) $post_id );
}

The same registry/clearing approach is used for query result caches — see Query & AJAX.

Global settings CSS

Site-wide design tokens (colors, typography, spacing presets) are enqueued separately from block CSS. AssetManager::enqueue_global_settings_css() is hooked on wp_enqueue_scripts and registers an inline stylesheet handle (sp-styble-global-root) carrying the global settings as CSS variables, so every block can reference them. This is wired in Block_Init::init_styble_blocks():

add_action( 'wp_enqueue_scripts', array( $asset_manager, 'enqueue_global_settings_css' ), 15 );

For the editor/admin experience of these tokens, see Global Settings.

Related

• Attributes System — the input to CSS generation.
• Build & Assets — how AssetManager enqueues styles.
• Creating a Custom Block — where the style class fits in.