Allow to choose which next-gen images should be generated in UI

[piotrbak]

Is your feature request related to a problem? Please describe. We'll introduce new UI to allow choosing between the options.

Additional context Epic Card and requirements are here.

[Miraeld]

Scope a solution

To add the UI to the setting page, we can include it after this line. To include it, we could create a new function called something like field_stylised_radio_list here. This new function can look like:

public function field_stylised_radio_list( $args ) {  
  $args = array_merge( [  
  'option_name' => '',  
       'values' => [],  
       'attributes' => [],  
       'current_value' => null,  
    ], $args );  

    if ( ! $args['option_name'] || ! $args['values'] ) {  
  return;  
    }  

  if ( is_numeric( $args['current_value'] ) || is_string( $args['current_value'] ) ) {  
  $current_value = $args['current_value'];  
    } else {  
  $current_value = $this->options->get( $args['option_name'] );  
    }  

  $option_name_class = sanitize_html_class( $args['option_name'] );  
    $attributes        = [  
  'name' => $this->option_name . '[' . $args['option_name'] . ']',  
       'id' => 'imagify_' . $option_name_class . '_%s',  
       'class' => 'imagify-row-radio',  
    ];  

    $id_attribute = $attributes['id'];  
    unset( $attributes['id'] );  
    $args['attributes'] = self::build_attributes( $attributes );  
    ?>  
  <div class="imagify-setting-optim-level">  
  <p class="imagify-inline-options">  
  <?php  
 foreach ( $args['values'] as $value => $label ) {  
  $input_id = sprintf( $id_attribute, sanitize_html_class( $value ) );  
             ?>  
  <input type="radio" value="<?php echo esc_attr( $value ); ?>" id="<?php echo $input_id; ?>"<?php echo $args['attributes']; ?> <?php checked( $current_value, $value ); ?>/>  
 <label for="<?php echo $input_id; ?>" onclick=""><?php echo $label; ?></label>  
  <?php  
  }  
  ?>  
  </p>  
  </div>  
  <?php  
}

and use it within https://github.com/wp-media/imagify-plugin/blob/5684433e2a7d126b312de47ed05d21022483374c/views/part-settings-webp.php like:

    $settings->field_stylised_radio_list( [
        'option_name'   => 'optimization_level',
        'values'        => [
            '0' => 'NONE',
            '1' => 'WEBP',
            '2' => 'AVIF',
        ],
        'attributes'    => [
            'aria-describedby' => 'imagify-optimization-level-label',
        ],
        // Replace '2' with the actual current value.
        'current_value' => '2',
    ] );

We also need to delete this part https://github.com/wp-media/imagify-plugin/blob/5684433e2a7d126b312de47ed05d21022483374c/views/part-settings-webp.php#L13-L27 as we'll enable avif/webp in a different way.

Then while submitting the setting page, we need to enable either WebP / AVIF conversion or none of them. For this, we would need to re-introduce the option convert_to_webp, and modify this function https://github.com/wp-media/imagify-plugin/blob/3b16931ce8c291d1838c0ec76727c76017eaad76/classes/Bulk/Bulk.php#L588 & https://github.com/wp-media/imagify-plugin/blob/5684433e2a7d126b312de47ed05d21022483374c/inc/common/attachments.php#L77

Finally, to comply with this scenario we would need to add a check within field_stylised_radio_list function created previously to either display an error message as well as greying out the switcher.

Effort estimation:

M

Can be peer-coded: Yes/No Is a refactor needed in that part of the codebase?

No

[Tabrisrp]

We'll need to introduce a new option optimization_format, to replace the convert_to_avif option.

If we detect the filter has a callback added, we will display the information message under the new field.

During update to 2.2.2, we'll need to handle the conversion of old convert_to_webp/convert_to_avif options to new option value. If updating from version before 2.2, we'll set it to webp by default.

Usage of convert_to_avif option throughout the plugin needs to be updated to use the new option instead.