ARTICLES

Retrieve Defined But Unused CSS Classes In Bricks Builder

This is not a tutorial, decided to record some important notes and tag these as Dev Logs.

Problem

In Bricks Builder, we can create CSS classes easily and assign it to any elements in the builder itself. However, the CSS will not be generated or printed in frontend if the defined CSS classes not being used in any element in a particular page. This might be causing some issues if you plan to use or assign a class after the page load or during some interactions via JavaScript.

Solution

Some useful functions we can reuse from Bricks Theme.

\Bricks\Database::$global_data['globalClasses'] to retrieve all defined classes in the builder.

<?php

// Get all defined CSS Classes in Array
$global_classes = \Bricks\Database::$global_data['globalClasses'];

// Find whether the class we need actually exists
$my_class_name = 'itchy-custom-class';
$index = array_search( $my_class_name , array_column( $global_classes, 'name' ) );
if( $index !== false ) {
	// From here, we can access the CSS settings for the class
	$settings = $global_classes[$global_class_index]['settings'];
	// Then do your magic here...
}


?>

\Bricks\Assets::generate_inline_css_from_element() to generate the CSS string

<?php

/**
 * From Bricks source code:
 * $element Array containing all element data (to retrieve element settings and name).
 * $controls Array containing all element controls (to retrieve CSS selectors and properties).
 * $css_type String global/page/header/content/footer/mobile
 */
\Bricks\Assets::generate_inline_css_from_element( $element, $controls, $css_type );


// So we can use like this once we got the CSS class settings
$inline_css = \Bricks\Assets::generate_inline_css_from_element(
	[
		'name'            => 'container',
		'settings'        => ! empty( $global_classes[$global_class_index]['settings'] ) ? $global_classes[$global_class_index]['settings'] : [],
		'_cssGlobalClass' => $my_class_name,
	],
	$element_controls,
	'global'
);

// Try to check the generated CSS string
var_dump($inline_css);


?>
Generated CSS String for my popup-active class
Generated CSS String for my popup-active class

Important Notes

Once got the generated CSS strings, to print it or enqueue is really tricky. Need to very clear the priority, order, and specificity of CSS. We can use wp_add_inline_style('handler', $inline_css) to print to a stylesheet handler, or a normal echo '<style>'.$inline_css.'</style>'. The action hooks to print out the CSS is important too. Decision made on a case-by-case basis.

If using bricks_template shortcode, I can get and use my Bricks classes even if it is not using in that template.

<?php

$template_id = 379;
echo do_shortcode( "[bricks_template id='{$template_id}']" );

// Then use the same code in previous section to get the $inline_css
// Add inline style into the correct handler

wp_add_inline_style( "bricks-shortcode-template-{$template_id}", $inline_css );

?>
  • About Author

    I like to solve problems by coding. I like websites, web applications and everything viewable from browser. Knowledge sharing can grows my confidence. A simple "thank you" will make my day :)
    More about me

Subscribe For Notification

Get notification whenever new article published.

Discussion

COMMENT

Be the first to drop a comment.