[wp-trac] [WordPress Trac] #55326: Conditional classes directives in formatting

[WordPress Trac]

#55326: Conditional classes directives in formatting
------------------------------+-----------------------------
 Reporter:  vijayhardaha      |      Owner:  (none)
     Type:  feature request   |     Status:  new
 Priority:  normal            |  Milestone:  Awaiting Review
Component:  Formatting        |    Version:  5.9.1
 Severity:  normal            |   Keywords:
  Focuses:  coding-standards  |
------------------------------+-----------------------------
 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
 <?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
 <?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
 <?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
 <?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
 <?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,

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55326>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform