[FEATURE REQUEST] - Class Groups

[scottsawyer]

Predefined widget class groups / radio buttons.

I have a set of classes that affect different CSS properties, and would like them to be grouped since they are mutually exclusive:
Group 1 ( text color )

• text-color--gray
• text-color--white
• text-color--black

Group 2 ( background color )

• background-color--gray
• background-color--white
• background-color--black

Group 3 ( text alignment )

• align--left
• align--right
• align--center

It would be great to have 2 additional features with predefined classes:

1. Specify Groups
2. Specify radio buttons ( or select )

If I could define Groups in my $theme_classes array like so:

add_filter( 'widget_css_classes_set_settings', 'mytheme_css_classes_default_settings' );
function mytheme_css_classes_default_settings( $settings ) {
    $theme_classes = [
        'group_1' => [
      	  'background-color--gray', 
    	  'background-color--white',
    	  'background-color--black',
        ],
      'group_2' => [
    	'text-color--gray',
    	'text-color--white',
    	'text-color--black', 
      ],
      'group_3' => [
    	'align--left', 
    	'align--right', 
    	'align--center'
      ],
    ];

    // Append your classes.
    $settings['defined_classes'] = array_merge( $settings['defined_classes'], $theme_classes );

    // Or Prepend your classes.
    $settings['defined_classes'] = array_merge( $theme_classes, $settings['defined_classes'] );

    // Allways remove possible duplicates
    $settings['defined_classes'] = array_unique( $settings['defined_classes'] );

    // And return modified settings array
    return $settings;
}

Then on the Widget form, the options within each group would be converted to an array of radio buttons ( or select options ). This would help prevent users from setting more than one background color, etc. They would be able to set 1 background color, 1 text color, 1 alignment, and not have to worry about setting conflicting styles ( which could have unpredictable results ).

A further enhancement could be to add titles to each group:

    $theme_classes = [
        'group_1' => [
          'title' => "Background Color",
          "styles" => [
        	  'background-color--gray', 
        	  'background-color--white',
                  'background-color--black',
           ],
        ],
     ];

And to make it even nicer for users, the classes themselves could be given labels:

    $theme_classes = [
        'group_1' => [
          'title' => "Background Color",
          "styles" => [
        	  'background-color--gray' => 'Gray', 
        	  'background-color--white' => 'White,
                  'background-color--black' => 'Black',
           ],
        ],
     ];

I think this would be a kick ass addition. This feature could even be exposed in the UI.

[JoryHogeveen]

Hi @scottsawyer,
Your idea looks cool! What is your idea on management UI?
I'm not sure when I'd have the time to look at this closely so feel free to make a start if you want to!

[scottsawyer]

@JoryHogeveen ,

Thanks for the response. I haven't looked over the code, but I think it could introduce a "group" type of abstraction, each group represents a set of css classes.

group[] = [
 'id' => $group_id,
 'label' => __( 'My styling group label' )
];

class[] = [
  'group' => $group_id,
  'classes' => ['background-blue', 'background-red',]
];

So, the UI would show a field to create a group (text input). Then you edit the group to add classes.

Group Name: [ enter group name ] (add classes)

So, I could then have a series of inputs on the widgets screen:

Background Colors

• backgroud-blue
• background-red

Text Colors

• text-red
• text-blue

Title Align

• title-center
• title-right
• title-left

Unfortunately, I don't have time to work on this for my current project, but I like the plug-in, and I will likely use it for future projects, so if you haven't started anything by that time, maybe I can contribute more.