pods-framework / pods

The Pods Framework is a Content Development Framework for WordPress - It lets you create and extend content types that can be used for any project. Add fields of various types we've built in, or add your own with custom inputs, you have total control.
https://pods.io/
GNU General Public License v2.0
1.07k stars 265 forks source link

White space character deleted in each loop in pods template #5668

Closed pieterhertogs closed 4 years ago

pieterhertogs commented 4 years ago

Issue Overview

Each loop white space character is deleted in Pods template

Expected Behavior

Each loop with white space character in Pods template should be outputted: [each custom_taxonomy]{@slug} [/each] -> term1 term2 term3

Current Behavior

Each loop white space character is deleted in Pods template, for example: [each custom_taxonomy]{@slug} [/each] outputs term1term2term3 instead of term1 term2 term3

Steps to Reproduce (for bugs)

  1. Make Pods template
  2. Put each loop in Pods template with white space
  3. Check css output

WordPress Environment

Debug Information WordPress Version: 5.4 PHP Version: 7.3.16 MySQL Version: 5.6.40 Server Software: Apache Your User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36 Session Save Path: /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: Yes Redis: No WPDB Prefix: wp_ WP Multisite Mode: No WP Memory Limit: 40M Current Memory Usage: 14.745M Current Memory Usage (real): 16.000M Pods Network-Wide Activated: No Pods Install Location: /home/dennisde/public_html/wp-content/plugins/pods/ Pods Tableless Mode Activated: No Pods Light Mode Activated: No Currently Active Theme: Beaver Builder Child Theme Currently Active Plugins: Admin Columns: 4.0.3 Beaver Builder Plugin (Pro Version): 2.3.2.5 Beaver Themer: 1.3.0.2 Category Order and Taxonomy Terms Order: 1.5.7.1 Classic Editor: 1.5 Imagify: 1.9.9 iOS Images Fixer: 1.2.4 Pods - Custom Content Types and Fields: 2.7.16.2 Pods Beaver Themer Add-On: 1.3.3 Post Types Order: 1.9.4.2 Regenerate Thumbnails: 3.1.3 Show Current Template: 0.3.3 User Switching: 1.5.4 Wordfence Security: 7.4.6 WordPress Importer: 0.7 WP Media folder: 5.0.1 WP Retina 2x: 5.6.0 WP Rocket: 3.5.2 WP Rollback: 1.7.0 Yoast SEO: 13.4.1

Pods Package Export (helpful!)

{"meta":{"version":"2.7.16.2","build":1586042171},"pods":{"2580":{"id":2580,"name":"page","label":"Page","description":"","type":"post_type","storage":"meta","object":"page","alias":"","fields":[],"show_in_menu":1,"pfat_enable":"0","pfat_run_outside_loop":"0","pfat_single":"project","pfat_append_single":"append","pfat_filter_single":"the_content","pfat_append_archive":"append","pfat_filter_archive":"the_content","rest_enable":"0","read_all":"0","write_all":"0"},"358":{"id":358,"name":"project_category","label":"Project categories","description":"","type":"taxonomy","storage":"meta","object":"","alias":"","fields":[],"show_in_menu":"1","label_singular":"Project category","public":"1","show_ui":"1","hierarchical":"1","rewrite":"1","rewrite_with_front":"1","rewrite_hierarchical":"1","capability_type":"default","capability_type_custom":"project_category","query_var":"0","sort":"0","built_in_post_types_custom_css":"0","built_in_post_types_customize_changeset":"0","built_in_post_types_fl-builder-template":"0","built_in_post_types_fl-theme-layout":"0","built_in_post_types_oembed_cache":"0","built_in_post_types_page":"0","built_in_post_types_post":"0","built_in_post_types_project":"1","built_in_post_types_user_request":"0","built_in_post_types_attachment":"0","menu_location":"default","show_in_nav_menus":"1","show_tagcloud":"1","show_tagcloud_in_edit":"1","show_in_quick_edit":"1","show_admin_column":"0","pfat_enable":"0","pfat_run_outside_loop":"0","pfat_append_archive":"append","rest_enable":"0","read_all":"0","write_all":"0","rewrite_custom_slug":"projecten"},"238":{"id":238,"name":"project","label":"Projects","description":"","type":"post_type","storage":"meta","object":"","alias":"","fields":{"project_subtitle":{"id":354,"name":"project_subtitle","label":"Subtitle","description":"","help":"","class":"","type":"text","weight":0,"pick_object":"","pick_val":"","sister_id":"","required":"0","text_allow_shortcode":"0","text_allow_html":"0","text_allowed_html_tags":"strong em a ul ol li b i","text_max_length":"255","oembed_enabled_providers_collegehumorcom":"0","oembed_enabled_providers_funnyordiecom":"0","oembed_enabled_providers_photobucketcom":"0","oembed_enabled_providers_polldaddycom":"0","pick_post_status":["publish"],"admin_only":"0","restrict_role":"0","restrict_capability":"0","hidden":"0","read_only":"0","roles_allowed":["administrator"],"rest_read":"0","rest_write":"0","rest_pick_response":"array","rest_pick_depth":"2","unique":"0","text_repeatable":"0","text_placeholder":""},"project_photos":{"id":356,"name":"project_photos","label":"Photos","description":"","help":"","class":"","type":"file","weight":1,"pick_object":"custom-simple","pick_val":"","sister_id":"","required":"0","file_format_type":"multi","file_uploader":"attachment","file_attachment_tab":"upload","file_edit_title":"0","file_show_edit_link":"1","file_linked":"0","file_limit":"0","file_restrict_filesize":"10MB","file_type":"images","file_field_template":"tiles","file_add_button":"Add Photo","file_modal_title":"Attach a photo","file_modal_add_button":"Add Photo","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","oembed_enabled_providers_collegehumorcom":"0","oembed_enabled_providers_funnyordiecom":"0","oembed_enabled_providers_photobucketcom":"0","oembed_enabled_providers_polldaddycom":"0","pick_post_status":["publish"],"admin_only":"0","restrict_role":"0","restrict_capability":"0","hidden":"0","read_only":"0","roles_allowed":["administrator"],"rest_read":"0","rest_write":"0","rest_pick_response":"array","rest_pick_depth":"2","unique":"0","file_allowed_extensions":""}},"show_in_menu":"1","label_singular":"Project","public":"1","show_ui":"1","supports_title":"1","supports_editor":"1","publicly_queryable":"1","exclude_from_search":"0","capability_type":"post","capability_type_custom":"work","capability_type_extra":"1","has_archive":"1","hierarchical":"0","rewrite":"1","rewrite_with_front":"1","rewrite_feeds":"0","rewrite_pages":"1","query_var":"1","can_export":"1","default_status":"draft","supports_author":"0","supports_thumbnail":"1","supports_excerpt":"0","supports_trackbacks":"0","supports_custom_fields":"0","supports_comments":"0","supports_revisions":"0","supports_page_attributes":"0","supports_post_formats":"0","built_in_taxonomies_category":"0","built_in_taxonomies_fl-builder-template-category":"0","built_in_taxonomies_fl-builder-template-type":"0","built_in_taxonomies_link_category":"0","built_in_taxonomies_post_tag":"0","show_in_nav_menus":"1","show_in_admin_bar":"1","pfat_enable":"0","pfat_run_outside_loop":"0","pfat_single":"project","pfat_append_single":"append","pfat_filter_single":"the_content","pfat_append_archive":"append","pfat_filter_archive":"the_content","rest_enable":"0","read_all":"0","write_all":"0","built_in_taxonomies_project_category":"1","built_in_taxonomies_wpmf-category":"0"},"2491":{"id":2491,"name":"selected","label":"Selected","description":"","type":"settings","storage":"none","object":"","alias":"","fields":{"selected_photos":{"id":2492,"name":"selected_photos","label":"Photos","description":"","help":"","class":"min-vh-100","type":"file","weight":0,"pick_object":"","pick_val":"","sister_id":"","required":"0","file_format_type":"multi","file_uploader":"attachment","file_attachment_tab":"upload","file_edit_title":"0","file_show_edit_link":"1","file_linked":"0","file_limit":"0","file_restrict_filesize":"10MB","file_type":"images","file_field_template":"tiles","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","oembed_enabled_providers_collegehumorcom":"0","oembed_enabled_providers_funnyordiecom":"0","oembed_enabled_providers_photobucketcom":"0","oembed_enabled_providers_polldaddycom":"0","pick_post_status":["publish"],"admin_only":"0","restrict_role":"0","restrict_capability":"0","hidden":"0","read_only":"0","roles_allowed":["administrator"],"unique":"0","file_allowed_extensions":""}},"show_in_menu":1,"menu_name":"Selected","menu_location":"top","ui_style":"post_type","menu_position":"0"}},"templates":{"subpages_menu":{"id":2582,"name":"subpages_menu","code":"<li><a href=\"{@permalink}\">{@title}<\/a><\/li>","type":"template","slug":"subpages_menu","options":{"_edit_last":"1","_edit_lock":"1543487859:1","admin_only":"","restrict_capability":"","capability_allowed":"","pod_reference":"a:1:{s:3:\"pod\";s:0:\"\";}"}},"project":{"id":2071,"name":"project","code":"<h1 class=\"project__title\">{@title}<span>{@project_subtitle}<\/span><\/h1>\r\n{@content}\r\n[if project_photos]\r\n\t<div class=\"grid grid-photos\">\r\n\t\t <div class=\"grid-sizer\"><\/div>\r\n\t\t[each project_photos]\r\n\t\t\t<div class=\"grid-item\">\r\n\t\t\t\t<a href=\"{@_src.full}\" data-fancybox=\"gallery\">\r\n\t\t\t\t\t{@_img.medium}\r\n\t\t\t\t<\/a>\r\n\t\t\t<\/div>\r\n\t\t[\/each]\r\n\t<\/div>\r\n[\/if]","type":"template","slug":"project","options":{"_edit_last":"1","_edit_lock":"1585297310:1","admin_only":"","restrict_capability":"","capability_allowed":"","pod_reference":"a:1:{s:3:\"pod\";s:7:\"project\";}"}},"grid_project":{"id":2094,"name":"grid_project","code":"<div class=\"grid-item [each project_category]{@slug} [\/each]  project\">\r\n\t<a href=\"{@permalink}\">\r\n\t\t<h2 class=\"project__title\">{@title}\r\n\t\t\t[if project_subtitle]<span>{@project_subtitle} <\/span>[\/if]\r\n\t\t<\/h2>\r\n\t\t{@post_thumbnail.medium}\r\n\t<\/a>\r\n<\/div>","type":"template","slug":"grid_project","options":{"_edit_last":"1","_edit_lock":"1586017061:1","admin_only":"","restrict_capability":"","capability_allowed":"","pod_reference":"a:1:{s:3:\"pod\";s:16:\"project_category\";}"}},"categories_menu":{"id":360,"name":"categories_menu","code":"<li><button data-filter=\".{@slug}\">{@name}<\/button><\/li>\r\n","type":"template","slug":"categories_menu","options":{"_edit_last":"1","_edit_lock":"1563205652:1","admin_only":"","restrict_capability":"","capability_allowed":"","pod_reference":"a:1:{s:3:\"pod\";s:0:\"\";}"}},"grid_selected":{"id":2505,"name":"grid_selected","code":"[each selected_photos]\r\n<div class=\"grid-item\">\r\n\t<a href=\"{@_src.full}\" data-fancybox=\"gallery\">\r\n\t\t{@_img.medium}\r\n\t<\/a>\r\n<\/div>\r\n[\/each]\r\n","type":"template","slug":"grid_selected","options":{"_edit_last":"1","_edit_lock":"1555060123:1","admin_only":"","restrict_capability":"","capability_allowed":"","pod_reference":"a:1:{s:3:\"pod\";s:0:\"\";}"}}}}
JoryHogeveen commented 4 years ago

Hi @pieterhertogs This is because we trim all templates. You could try adding &nbsp; instead of a single space. Let me know!

pieterhertogs commented 4 years ago

Hi @JoryHogeveen With &nbsp; this is result in css: https://d.pr/i/YnNeSM

JoryHogeveen commented 4 years ago

Ah, the output is for CSS, didn't know that. Since this is an edge case then I'll have to think about how to solve this.

pieterhertogs commented 4 years ago

The terms are CSS classes in HTML

Maybe good to know: this worked fine for year untill update 2.7.17 (since that update white space in each loop disappears)

JoryHogeveen commented 4 years ago

Yeah, It seems this might have been a bug that is fixed here: https://github.com/pods-framework/pods/pull/5641

While I understand this is inconvenient for you, it actually was a bug that this was possible since all output should be sanitized (and therefore trimmed).

I have been looking at the code and the magic tags do support a before/after tag as well. Format: {@name,callback,before,after}

Callback: a function/method to run the value through. Before/After: Content to put before or after the value.

So in your case this should work: {@field,,, }. I know, it looks terrible but the 3 comma's will make sure the space is passed as the correct parameter.

pieterhertogs commented 4 years ago

Thank you, that makes sense why it stopped working :-) I added the comma's and space, but without luck. Maybe I can add a function that adds a white space charactere before and after the value. But how does that work? Where do I put the function?

JoryHogeveen commented 4 years ago

Hi @pieterhertogs

I've did some tests and all output is sanitized, even with a plugin. This means that you cannot use the [each] loop for this. You'll need to pass everyting into a function that outputs the classes.

Example:

function term_slug_css_classes( $values ) {
    $values = wp_list_pluck( $v, 'slug' );
    return implode( ' ', $values );
}

You can use this function like so: {@custom_taxonomy,term_slug_css_classes} (without the wrapping [each].

You can add functions in a custom plugin or in your theme. When using your theme always make sure it's a child theme (unless you have a custom theme). Closing this here!

Cheers, Jory

jimtrue commented 4 years ago

@JoryHogeveen @sc0ttkclark Trying to get the logic on why we would trim spaces out of an each loop, considering everything being output within the each loop is a template to be replicated exactly, spaces included.

To me this is a breaking bug.

shapeyourbits commented 4 years ago

This is 100% a breaking bug, and using each for CSS is far from an edge case. The Each output shouldn't be sanitised for white-space. Perhaps it would benefit from a whitespace="false" setting, but changing the default on this to be true is a change not a bug.

We wrote a walk through on how to use this in exactly this way, and it received a surprising amount of traffic. The change just broke a client site after they did a minor version update.

https://www.shapeyourbits.co.uk/2019/10/22/front-end-filtering-of-custom-post-types-using-wordpress-taxonomies-and-the-pods-plugin/

Templates keeps pods within reach for a lot of people that couldn't otherwise go out and write custom plugins. Don't break that!

Rolled back to a previous version for now, in the hope you guys fix this.