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);
?>
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 );
?>