Opened 3 years ago
Last modified 3 years ago
#55326 new feature request
Conditional classes directives in formatting
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | 5.9.1 |
Component: | Formatting | Keywords: | |
Focuses: | coding-standards | Cc: |
Description
Hey people,
I am here with a suggestion and core feature request for conditional classes directive for HTML class attribute. Similar to [Laraval conditional-classes](https://laravel.com/docs/9.x/blade#conditional-classes)
If this function is already available in WP then please let me know about it, I wasn't able to find a similar function.
There are many cases in development where we're creating a $clasess
array variable and then with if-else or using conditional statements adding classes into it.
While working with PHP code the code/file format in files look good and it's easy to manage but sometimes with HTML and PHP combination writing inline if-else make the code/file format ugly. and we also have to repeat the escape and echo things again n again if we have a couple of conditional CSS to write.
I have created this custom code to use in my custom development, which allows passing set or array or single sting or strings with comma/space and then it conditional validate and output the string.
<?php /** * Returns/echo Conditional HTML Classes. * * @param array|string $classes Array of classes, single string or strings with comma. * @param bool $echo If true then echo the output otherwise return it. * @return string HTML classes string. */ function html_class( $classes = array(), $echo = true ) { // Define default output. $output = ''; // Make a type and empty check validation. if ( ( is_array( $classes ) || is_string( $classes ) ) && ! empty( $classes ) ) { /** * If string then parse it comman and space. * otherwise keep the array. */ $classes = is_string( $classes ) ? wp_parse_list( $classes ) : (array) $classes; // Do an empty check. if ( ! empty( $classes ) ) { // Storing var for valid classess. $class_set = array(); // Loop through all classes. foreach ( $classes as $key => $class_name ) { // Check if array has integer key, which means no conditions // are set for this class, if class is not empty then keep it. if ( is_int( $key ) && is_string( $class_name ) && ! empty( $class_name ) ) { $class_set[] = trim( $class_name ); } elseif ( ! empty( $class_name ) && ! empty( $key ) ) { $class_set[] = trim( $key ); } } /** * Filter array with empty values. * Make array unique. * Sanitize class name. * Implode by space. */ $output = implode( ' ', array_map( 'sanitize_html_class', array_unique( array_filter( $class_set ) ) ) ); } } if ( $echo ) { echo esc_attr( $output ); } else { return esc_attr( $output ); } }
so using this function we could save time to not write a few lines of if-else and keep the code look clean and simple as well, e.g.
<?php $classes = array(); $classes[] = array( 'post-title' ); if ( has_post_thumbnail() ) { $classes[] = 'has-thumbnail'; } if ( has_term( 'featured', 'category' ) ) { $classes[] = 'is-featured'; } echo '<div class="' . esc_attr( join( ' ', $classes ) ) . '">';
this will convert into this.
<?php $classes = array( array( 'post-title', 'has-thumbnail' => has_post_thumbnail(), 'is-featured' => has_term( 'featured', 'category' ), ), ); echo '<div class="' . html_class( $classes, false ).'">; // false is for returning the values.
however, it does not save too many lines but we are repeating things less and I feel it looks clean in code reading. :)
But this function can be very useful while writing mixed HTML and php.
<?php <div class="col-12 <?php if ( is_sidebar_active( 'right-sidebar' ) && is_sidebar_active( 'righleft-sidebar' ) ) { echo 'col-md-6'; } elseif ( ! is_sidebar_active( 'right-sidebar' ) && is_sidebar_active( 'left-sidebar' ) ) { echo 'col-md-8'; } elseif ( is_sidebar_active( 'right-sidebar' ) && ! is_sidebar_active( 'left-sidebar' ) ) { echo 'col-md-8 md-offset-4'; } else { echo 'col-md-8 md-offset-2'; } ?> "></div>
<?php $clasess = array( 'col-12', 'col-md-6' => is_sidebar_active( 'right-sidebar' ) && is_sidebar_active( 'righleft-sidebar' ), 'col-md-8' => ! is_sidebar_active( 'right-sidebar' ) && is_sidebar_active( 'righleft-sidebar' ), 'col-md-8 md-offset-4' => is_sidebar_active( 'right-sidebar' ) && ! is_sidebar_active( 'righleft-sidebar' ), 'col-md-8 md-offset-2' => ! ( is_sidebar_active( 'right-sidebar' ) && is_sidebar_active( 'righleft-sidebar' ) ), ); ?> <div class="<?php html_class( $clasess ); ?>"></div>
Please let me know what you people think about having a directive function for classes.
Thanks,
Hi there, welcome back to WordPress Trac! Thanks for the ticket.
Just linking to a related ticket here: #50867.