Features Widget: Add optional flexible container sizing mode

[Misplon]

Problem Description

A user reported issues with the Features widget's icon container sizing system that required custom CSS overrides to fix. The current implementation has several limitations:

Current Issues

1. Fixed height tied to container size: The icon container height is always set to @container_size, preventing independent height control via the icon_size setting
2. Inflexible flex property: Using flex: 0 0 @container_size makes containers non-responsive and forces fixed width
3. Icon size setting doesn't affect container dimensions: The icon_size setting only affects background-size when use_icon_size is true, but doesn't impact the actual container height

User Feedback

From a support request:

"It doesn't take the setup of the icon size for height. Also, the flex setting, even if I adjust the height, is not responsive."

The user had to override with custom CSS setting all dimensions to 659px to achieve their desired layout:

.so-widget-sow-features-default-9a209ec6d922 .sow-features-list .sow-features-feature .sow-icon-container {
    font-size: 659px;
    height: 659px;
    text-decoration: none;
    width: 659px;
    flex: 0 0 659px;
}

Proposed Solution

Implement a backwards-compatible approach that maintains existing behavior while providing flexibility for users who need it.

Recommended Approach: Feature Flag with Progressive Enhancement

Add new optional settings that default to current behavior:

1. New Settings in features.php:

   • responsive_container (checkbox, default: false) - "Use flexible container sizing"
   • container_height (measurement, optional) - "Icon container height" (only shows when responsive_container is true)

2. LESS/CSS Changes:

   • When responsive_container is false (default): Current behavior maintained
   • When responsive_container is true:
     • Use flex: 0 1 @container_size (flexible width)
     • Allow independent height control
     • Better responsive behavior

Implementation Example

PHP (features.php):

// New widget settings
'responsive_container' => array(
    'type' => 'checkbox',
    'label' => __( 'Use flexible container sizing', 'so-widgets-bundle' ),
    'default' => false,
    'description' => __( 'Makes icon containers responsive and allows independent height control', 'so-widgets-bundle' ),
),

'container_height' => array(
    'type' => 'measurement',
    'label' => __( 'Icon container height', 'so-widgets-bundle' ),
    'default' => '',
    'description' => __( 'Leave empty to match container size', 'so-widgets-bundle' ),
    'state_handler' => array(
        'responsive_container[true]' => array('show'),
        'responsive_container[false]' => array('hide'),
    ),
),

LESS (default.less):

@responsive_container: false;
@container_height: @container_size;

.sow-icon-container {
    font-size: @container_size;
    width: @container_size;
    text-decoration: none;
    
    // Legacy behavior (default)
    & when (@responsive_container = false) {
        height: @container_size;
        flex: 0 0 @container_size;
    }
    
    // New flexible behavior (opt-in)
    & when (@responsive_container = true) {
        height: @container_height;
        flex: 0 1 @container_size;
        min-width: @container_size;
    }
}

Benefits

1. Zero impact on existing users - Default behavior unchanged
2. Opt-in flexibility - Users experiencing issues can enable new settings
3. Better responsive design - Flexible containers adapt to content and screen size
4. Independent dimension control - Height can be set separately from width

Alternative Approaches Considered

1. Smart Detection: Auto-apply flexible sizing when certain thresholds are met (less predictable)
2. Versioned Behavior: New instances get new defaults (more complex to maintain)
3. Breaking Change: Fix the issues directly (would affect all existing sites)

Testing Requirements

• Verify existing Features widgets maintain identical appearance with default settings
• Test new settings provide expected flexibility
• Ensure responsive breakpoints work correctly with both modes
• Test with various icon types (font icons, custom images)
• Verify no regression in existing functionality

Related Files

• /widgets/features/features.php - Widget settings and configuration
• /widgets/features/styles/default.less - Widget styling
• /widgets/features/tpl/default.php - Widget template

This approach provides the flexibility users need while ensuring complete backwards compatibility.

[Misplon]

User to update: https://secure.helpscout.net/conversation/3057856295/91614?viewId=472475.