Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#55326 new feature request

Conditional classes directives in formatting

Reported by: vijayhardaha's profile vijayhardaha 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,

Change History (2)

#1 follow-up: @SergeyBiryukov
2 years ago

Hi there, welcome back to WordPress Trac! Thanks for the ticket.

Just linking to a related ticket here: #50867.

#2 in reply to: ↑ 1 @vijayhardaha
2 years ago

Replying to SergeyBiryukov:

Hi there, welcome back to WordPress Trac! Thanks for the ticket.

Just linking to a related ticket here: #50867.

Thanks.

Note: See TracTickets for help on using tickets.