HTML Syntax in "List View"

[EthanPhoenix]

Issue Overview

"List View" options list ignores any HTML syntax. However, the syntax is being applied to the selected option(s).

Expected Behavior

The HTML syntax and images should be displayed both in the options list and the selected option(s).

Current Behavior

As it currently stands, I can have the HTML syntax and image display only in the options list entries OR on the selected options (by using esc_html) but not both.

Steps to Reproduce (for bugs)

To make it convenient, below is the code as a test plugin.

<?php
/*
Plugin Name: List View Test
Plugin URI: 
Description: 
Version: 0.0.0
Author: Ethan Phoenix
Author URI: http://www.ethanphoenix.tk
*/

// don't call the file directly
if ( !defined( 'ABSPATH' ) ) exit;

add_action( 'plugins_loaded', 'ethansAddon_extend_safe_activate');
function ethansAddon_extend_safe_activate() {
    if ( defined( 'PODS_VERSION' ) ) {

    // MANIPULATING FIELD DISPLAY 
        add_filter('pods_field_dfv_data', 'combobox_display_data', 1, 6);
        function combobox_display_data($data, $args, $attributes){
            switch ($data['fieldConfig']['name']) {
                case 'country':
                    foreach ($data['fieldItemData'] as $i=>$val) {
                        $dataid = $data['fieldItemData'][$i]['id'];
                        $countryName = pods_field_display('country', $dataid, 'name', true);
                        $flags = pods_field('country', $dataid, 'flag', false);
                        if ( !empty($flags) ){
        // THE FOLLOWING WILL SHOW THE IMAGE AND APPLY ANY OTHER HTML SYNTAX ONCE A SELECTION HAS BEEN MADE
                            $value = pods_image( $flags['guid'], array(20,20), 0, '', true );
        // BY ESCAPING IT, AS SHOWN BELOW, THE IMAGE WILL BE DISPLAYED AND APPLY ANY OTHER HTML SYNTAX TO THE OPTIONS LIST ONLY
                            $value = esc_html($value);
                            $value .= ' '.$countryName;
                        } else {
        // SAME GOES HERE, THE TEXT WILL BE RED ON THE SELECTED OPTION(S) BUT NOT IN THE DROP-DOWN OPTIONS LIST (UNLESS I'LL ESCAPE IT AND THEN IT'S THE OPPOSITE)
                            $value = '<font color="red"><i> - No File Assigned - </i></font>';
                        }
                        $data['fieldItemData'][$i]['name'] = $value;
                    }
                break;
            };
            return $data;
        }
    }
}

As the default:

and once I use $value = esc_html($value);:

Possible Solution

When using HTML syntax to format the field data, it should be consistant on both the options list and the selected option(s). So an image will be shown in both cases or a bolded text (<b></b>) will be bolded in both cases etc.

WordPress Environment

``` Debug Information WordPress Version: 4.9.8 PHP Version: 7.0.31 MySQL Version: 5.7.23 Server Software: Apache Your User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0 Session Save Path: C:/Bitnami/WORDPR~1.8-0/php/tmp Session Save Path Exists: Yes Session Save Path Writeable: Yes Session Max Lifetime: 1440 Opcode Cache: Apc: No Memcached: No OPcache: Yes Redis: No Object Cache: APC: No APCu: No Memcache: No Memcached: No Redis: No WPDB Prefix: wp_ WP Multisite Mode: No WP Memory Limit: 40M Pods Network-Wide Activated: No Pods Install Location: C:\Bitnami\wordpress-4.9.8-0\apps\wordpress\htdocs\wp-content\plugins\pods/ Pods Tableless Mode Activated: No Pods Light Mode Activated: No Currently Active Theme: Twenty Seventeen Currently Active Plugins: List View Test: 0.0.0 Pods - Custom Content Types and Fields: 2.7.8 ```

Pods Package Export (helpful!)

{"meta":{"version":"2.7.8","build":1533681038},"pods":{"5":{"id":5,"name":"country","label":"Countries","description":"","type":"pod","storage":"table","object":"","alias":"","fields":{"name":{"id":6,"name":"name","label":"Name","description":"","help":"","class":"","type":"text","weight":0,"pick_object":"","pick_val":"","sister_id":"","required":"1","unique":"0","text_repeatable":"0","text_allowed_html_tags":"strong em a ul ol li b i","text_max_length":"255","text_placeholder":""},"flag":{"id":7,"name":"flag","label":"Flag","description":"","help":"","class":"","type":"file","weight":1,"pick_object":"custom-simple","pick_val":"","sister_id":"","required":"0","unique":"0","file_format_type":"single","file_uploader":"plupload","file_attachment_tab":"upload","file_edit_title":"1","file_show_edit_link":"1","file_linked":"1","file_limit":"0","file_restrict_filesize":"10MB","file_type":"images","file_field_template":"rows","file_add_button":"Add File","file_modal_title":"Attach a file","file_modal_add_button":"Add File","file_wp_gallery_output":"0","file_wp_gallery_link":"post","file_wp_gallery_columns":"1","file_wp_gallery_random_sort":"0","file_wp_gallery_size":"thumbnail","pick_post_status":["publish"],"admin_only":"0","restrict_role":"0","restrict_capability":"0","hidden":"0","read_only":"0","roles_allowed":["administrator"],"file_allowed_extensions":""}},"show_in_menu":"1","label_singular":"Country","pod_index":"name","hierarchical":"0","ui_style":"post_type","ui_actions_enabled":["add","edit","duplicate","delete"],"ui_reorder_field":"menu_order","ui_fields_manage":{"0":"name","2":"modified"}},"8":{"id":8,"name":"event","label":"Events","description":"","type":"pod","storage":"table","object":"","alias":"","fields":{"name":{"id":9,"name":"name","label":"Name","description":"","help":"","class":"","type":"text","weight":0,"pick_object":"","pick_val":"","sister_id":"","required":"1","unique":"0","text_repeatable":"0","text_allowed_html_tags":"strong em a ul ol li b i","text_max_length":"255","text_placeholder":""},"country":{"id":10,"name":"country","label":"Country","description":"","help":"","class":"","type":"pick","weight":1,"pick_object":"pod","pick_val":"country","sister_id":"","required":"1","unique":"0","pick_format_type":"single","pick_format_single":"list","pick_format_multi":"checkbox","pick_allow_add_new":"1","pick_taggable":"0","pick_show_icon":"0","pick_show_edit_link":"1","pick_show_view_link":"0","pick_limit":"0","pick_user_role":[],"pick_post_status":["publish"],"admin_only":"0","restrict_role":"0","restrict_capability":"0","hidden":"0","read_only":"0","roles_allowed":["administrator"],"pick_select_text":"","pick_table_id":"","pick_table_index":"","pick_display":"","pick_where":"","pick_orderby":"","pick_groupby":""}},"show_in_menu":"1","label_singular":"Event","pod_index":"name","hierarchical":"0","ui_style":"post_type","ui_actions_enabled":["add","edit","duplicate","delete"],"ui_reorder_field":"menu_order","ui_fields_manage":{"0":"name","2":"modified"}}}}

Workaround or Alternate Solution Until Bug is Addressed

Related Issues and/or PRs

[pglewis]

I haven't forgotten this, it deserves a block of time where I can give it proper focus.

I can't say whether it's a bug or usage issue without setting up your filter function locally and testing it out. I can say that I want customizations like this to be as painless as possible. The dynamic fields for the dropdowns are still in their infancy and we're going to be sawing and hammering in that area a lot in the coming months as part of 2.8. This is precisely the sort of thing migrating to dynamic fields is meant to facilitate in the long term, so I'll make sure what you're trying to do is doable, and with the least amount of sweat possible.

[EthanPhoenix]

Thanks for taking a look at this, I appreciate it a lot. I am not sure what will be the dynamic fields but it sounds pretty good to me. If there is anything else that is needed from my end please let me know.

[pglewis]

I am not sure what will be the dynamic fields but it sounds pretty good to me.

Our relationship fields (and file upload) are built dynamically on the client-side in order to support adding new records in a modal window and updating the view. Although I haven't set things up locally to test it's possible this could be the issue... our fields views will destroy the underlying DOM and re-render themselves on various changes.

[pglewis]

I've taken a look at this and have an idea of what you're attempting to do. Trying to insert markup into the control via the value is going to be a fragile approach. I think what is needed is a way for you to specify a DOM fragment in some form to be used as part of or a replacement for each list item element. (Also, I believe we exposed the pods_field_dfv_data filter prematurely as the details of the data structure there are subject to change).

I'm looking at a couple more recent use cases that overlap this somewhat then I'll see if it's not to hard to provide a better way to do this that will be future-proof as well.

[pglewis]

I believe we exposed the pods_field_dfv_data filter prematurely as the details of the data structure there are subject to change

To clear things up a little bit on the pods_field_dfv_data filter: I think it will be a good go-to for inspecting or modifying the field's configuration or HTML attributes, just not the actual data. I'll get a new filter or two in place officially sanctioned for getting at the the data and document all this in the pods_field_dfv_data filter inline docs.

[EthanPhoenix]

Hi! I was wondering if there are any updates about this? or perhaps a workaround?