I came up with this code snippet to get the true-global generated CSS for a global class.
- This works regardless of class chaining being on or off.
- This works regardless of if an element on the page is using the class or not.
My questions to anyone interested are,
- will this easily break with future Bricks updates?
- is there a more official way of getting the css for a global class in php?
Motivation:
I was creating a custom bricks element (but same use case if creating a shortcode), and wanted to be able to drop a global class onto an HTMLElement within the custom bricks element.
The issue is that unless 1. class chaining is turned off AND 2. the class is being used elsewhere on the page, the CSS for the global class is not available.
So this function allows me to output a tag with whichever global class CSS I need.
Currently I’m doing this site-wide for the most used global classes, but it’s possible to use this on a per-element basis too. Just have to watch out for duplicate CSS outputs as this method does not account for that.
Any thoughts/answers to questions would be much appreciated.
function get_inline_css_from_global_class( $global_class ) {
$global_class = trim( $global_class );
$global_classes = \Bricks\Database::$global_data['globalClasses'];
$global_class_index = array_search( $global_class, array_column( $global_classes, 'name' ) );
if ( $global_class_index === false ) {
return '';
}
$global_class_data = $global_classes[ $global_class_index ];
if ( empty( $global_class_data['settings'] ) ) {
return '';
}
$settings = $global_class_data['settings'];
$element_name = 'div';
$element_controls = \Bricks\Elements::get_element( [ 'name' => $element_name ], 'controls' );
$css = \Bricks\Assets::generate_inline_css_from_element(
[
'name' => $element_name,
'settings' => $settings,
'_cssGlobalClass' => $global_class,
],
$element_controls,
'global_classes'
);
return str_replace( '.brxe-div', '', $css );
}