The Views field Global > Custom text is escaping HTML despite the fact that the description of the field says

You may include HTML or Twig

If you enter the value:

<a href="http://example.com">Example</a>

It will be rendered as:

&lt;a href="http://example.com"&gt;Example&lt;/a&gt;

This is a regression caused by:
#2348729: Convert theme_views_view_field to twig
https://www.drupal.org/node/2348729#comment-10358601

A temporary workaround is in comment #4

CommentFileSizeAuthor
#13 views-2584655-double-escape-13.patch367 bytessamuel.mortenson
#5 output-view.png93.4 KBcharlieweb82

Comments

charlieweb82 created an issue. See original summary.

dawehner’s picture

dawehner
Primary language German
commented

What have you chosen as input for this field? I think in general providing an export of the configured view could be really helpful.

heykarthikwithu’s picture

heykarthikwithu
Primary language English
Location Bengaluru 🌍
commented

"Global: Custom text" is the input field chosen, have a look at the exported view, may get an clue.

uuid: 618909dc-91ea-4bdc-9928-40d17b045052
langcode: en
status: true
dependencies:
  module:
    - node
    - user
id: global123
label: Global123
module: views
description: ''
tag: ''
base_table: node_field_data
base_field: nid
core: 8.x
display:
  default:
    display_plugin: default
    id: default
    display_title: Master
    position: 0
    display_options:
      access:
        type: perm
        options:
          perm: 'access content'
      cache:
        type: tag
        options: {  }
      query:
        type: views_query
        options:
          disable_sql_rewrite: false
          distinct: false
          replica: false
          query_comment: ''
          query_tags: {  }
      exposed_form:
        type: basic
        options:
          submit_button: Apply
          reset_button: false
          reset_button_label: Reset
          exposed_sorts_label: 'Sort by'
          expose_sort_order: true
          sort_asc_label: Asc
          sort_desc_label: Desc
      pager:
        type: full
        options:
          items_per_page: 10
          offset: 0
          id: 0
          total_pages: null
          expose:
            items_per_page: false
            items_per_page_label: 'Items per page'
            items_per_page_options: '5, 10, 25, 50'
            items_per_page_options_all: false
            items_per_page_options_all_label: '- All -'
            offset: false
            offset_label: Offset
          tags:
            previous: '‹ Previous'
            next: 'Next ›'
            first: '« First'
            last: 'Last »'
          quantity: 9
      style:
        type: default
      row:
        type: fields
      fields:
        title:
          id: title
          table: node_field_data
          field: title
          entity_type: node
          entity_field: title
          label: ''
          alter:
            alter_text: false
            make_link: false
            absolute: false
            trim: false
            word_boundary: false
            ellipsis: false
            strip_tags: false
            html: false
          hide_empty: false
          empty_zero: false
          settings:
            link_to_entity: true
          plugin_id: field
          relationship: none
          group_type: group
          admin_label: ''
          exclude: false
          element_type: ''
          element_class: ''
          element_label_type: ''
          element_label_class: ''
          element_label_colon: true
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_alter_empty: true
          click_sort_column: value
          type: string
          group_column: value
          group_columns: {  }
          group_rows: true
          delta_limit: 0
          delta_offset: 0
          delta_reversed: false
          delta_first_last: false
          multi_type: separator
          separator: ', '
          field_api_classes: false
        nothing:
          id: nothing
          table: views
          field: nothing
          relationship: none
          group_type: group
          admin_label: ''
          label: ''
          exclude: false
          alter:
            alter_text: true
            text: '<div>Karthik</div>'
            make_link: false
            path: ''
            absolute: false
            external: false
            replace_spaces: false
            path_case: none
            trim_whitespace: false
            alt: ''
            rel: ''
            link_class: ''
            prefix: ''
            suffix: ''
            target: ''
            nl2br: false
            max_length: 0
            word_boundary: true
            ellipsis: true
            more_link: false
            more_link_text: ''
            more_link_path: ''
            strip_tags: false
            trim: false
            preserve_tags: ''
            html: false
          element_type: ''
          element_class: ''
          element_label_type: ''
          element_label_class: ''
          element_label_colon: false
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: false
          plugin_id: custom
      filters:
        status:
          value: true
          table: node_field_data
          field: status
          plugin_id: boolean
          entity_type: node
          entity_field: status
          id: status
          expose:
            operator: ''
          group: 1
      sorts:
        created:
          id: created
          table: node_field_data
          field: created
          order: DESC
          entity_type: node
          entity_field: created
          plugin_id: date
          relationship: none
          group_type: group
          admin_label: ''
          exposed: false
          expose:
            label: ''
          granularity: second
      title: Global123
      header: {  }
      footer: {  }
      empty: {  }
      relationships: {  }
      arguments: {  }
      display_extenders: {  }
    cache_metadata:
      max-age: -1
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - url.query_args
        - 'user.node_grants:view'
        - user.permissions
      tags: {  }
  page_1:
    display_plugin: page
    id: page_1
    display_title: Page
    position: 1
    display_options:
      display_extenders: {  }
      path: global123
    cache_metadata:
      max-age: -1
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - url.query_args
        - 'user.node_grants:view'
        - user.permissions
      tags: {  }
turegjorup’s picture

turegjorup commented

I'm seeing this as well after upgrading to RC1. Didn't experience the issue with beta16. Copying the core views-view-field-html.twig template to my theme and adding the raw filter eg. {{ output | raw }} fixes it.

Checking the diff for the core template between beta16 and RC1 is that {{ output }} has been changed to {{ output -}}. However removing the "-" isn't enough to fix it that requires the raw filter. So I'm thinking there must be some other change the rendering of "Custom text" in views between beta16 and RC1.

charlieweb82’s picture

charlieweb82 commented
StatusFileSize
new output-view.png93.4 KB

Yes is correct in beta16 work fine, only in the RC1 is the issues here the view and a screenshot of the output
output-view

uuid: 620f21c2-99ea-4979-8800-eaae3fc5b10b
langcode: en
status: true
dependencies:
  config:
    - field.storage.node.field_link
    - field.storage.node.field_project_description
    - field.storage.node.field_project_thumbnail
    - node.type.portfolio
  module:
    - image
    - link
    - node
    - text
    - user
id: porftolio_block
label: 'porftolio Block'
module: views
description: ''
tag: ''
base_table: node_field_data
base_field: nid
core: 8.x
display:
  default:
    display_plugin: default
    id: default
    display_title: Master
    position: 0
    display_options:
      access:
        type: perm
        options:
          perm: 'access content'
      cache:
        type: tag
        options: {  }
      query:
        type: views_query
        options:
          disable_sql_rewrite: false
          distinct: false
          replica: false
          query_comment: ''
          query_tags: {  }
      exposed_form:
        type: basic
        options:
          submit_button: Apply
          reset_button: false
          reset_button_label: Reset
          exposed_sorts_label: 'Sort by'
          expose_sort_order: true
          sort_asc_label: Asc
          sort_desc_label: Desc
      pager:
        type: some
        options:
          items_per_page: 6
          offset: 0
      style:
        type: html_list
        options:
          grouping: {  }
          row_class: 'small-12 medium-6 large-6 columns wow zoomIn'
          default_row_class: false
          type: ul
          wrapper_class: ''
          class: cs-style-3
      row:
        type: fields
        options:
          default_field_elements: true
          inline: {  }
          separator: ''
          hide_empty: false
      fields:
        field_project_thumbnail:
          id: field_project_thumbnail
          table: node__field_project_thumbnail
          field: field_project_thumbnail
          relationship: none
          group_type: group
          admin_label: ''
          label: ''
          exclude: true
          alter:
            alter_text: false
            text: ''
            make_link: false
            path: ''
            absolute: false
            external: false
            replace_spaces: false
            path_case: none
            trim_whitespace: false
            alt: ''
            rel: ''
            link_class: ''
            prefix: ''
            suffix: ''
            target: ''
            nl2br: false
            max_length: 0
            word_boundary: true
            ellipsis: true
            more_link: false
            more_link_text: ''
            more_link_path: ''
            strip_tags: false
            trim: false
            preserve_tags: ''
            html: false
          element_type: '0'
          element_class: ''
          element_label_type: '0'
          element_label_class: ''
          element_label_colon: false
          element_wrapper_type: '0'
          element_wrapper_class: ''
          element_default_classes: false
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          click_sort_column: target_id
          type: image
          settings:
            image_style: portfolio_image_400x300_
            image_link: ''
          group_column: ''
          group_columns: {  }
          group_rows: true
          delta_limit: 0
          delta_offset: 0
          delta_reversed: false
          delta_first_last: false
          multi_type: separator
          separator: ', '
          field_api_classes: false
          plugin_id: field
        title:
          id: title
          table: node_field_data
          field: title
          relationship: none
          group_type: group
          admin_label: ''
          label: ''
          exclude: true
          alter:
            alter_text: false
            text: ''
            make_link: false
            path: ''
            absolute: false
            external: false
            replace_spaces: false
            path_case: none
            trim_whitespace: false
            alt: ''
            rel: ''
            link_class: ''
            prefix: ''
            suffix: ''
            target: ''
            nl2br: false
            max_length: 0
            word_boundary: true
            ellipsis: true
            more_link: false
            more_link_text: ''
            more_link_path: ''
            strip_tags: false
            trim: false
            preserve_tags: ''
            html: false
          element_type: h3
          element_class: ''
          element_label_type: ''
          element_label_class: ''
          element_label_colon: false
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          click_sort_column: value
          type: string
          settings:
            link_to_entity: false
          group_column: value
          group_columns: {  }
          group_rows: true
          delta_limit: 0
          delta_offset: 0
          delta_reversed: false
          delta_first_last: false
          multi_type: separator
          separator: ', '
          field_api_classes: false
          plugin_id: field
        field_project_description:
          id: field_project_description
          table: node__field_project_description
          field: field_project_description
          relationship: none
          group_type: group
          admin_label: ''
          label: ''
          exclude: true
          alter:
            alter_text: false
            text: ''
            make_link: false
            path: ''
            absolute: false
            external: false
            replace_spaces: false
            path_case: none
            trim_whitespace: false
            alt: ''
            rel: ''
            link_class: ''
            prefix: ''
            suffix: ''
            target: ''
            nl2br: false
            max_length: 0
            word_boundary: true
            ellipsis: true
            more_link: false
            more_link_text: ''
            more_link_path: ''
            strip_tags: false
            trim: false
            preserve_tags: ''
            html: false
          element_type: span
          element_class: ''
          element_label_type: ''
          element_label_class: ''
          element_label_colon: false
          element_wrapper_type: span
          element_wrapper_class: ''
          element_default_classes: false
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          click_sort_column: summary
          type: text_trimmed
          settings:
            trim_length: 100
          group_column: value
          group_columns: {  }
          group_rows: true
          delta_limit: 0
          delta_offset: 0
          delta_reversed: false
          delta_first_last: false
          multi_type: separator
          separator: ', '
          field_api_classes: false
          plugin_id: field
        field_link:
          id: field_link
          table: node__field_link
          field: field_link
          relationship: none
          group_type: group
          admin_label: ''
          label: ''
          exclude: true
          alter:
            alter_text: false
            text: ''
            make_link: false
            path: ''
            absolute: false
            external: false
            replace_spaces: false
            path_case: none
            trim_whitespace: false
            alt: ''
            rel: ''
            link_class: ''
            prefix: ''
            suffix: ''
            target: ''
            nl2br: false
            max_length: 0
            word_boundary: true
            ellipsis: true
            more_link: false
            more_link_text: ''
            more_link_path: ''
            strip_tags: false
            trim: false
            preserve_tags: ''
            html: false
          element_type: ''
          element_class: ''
          element_label_type: ''
          element_label_class: ''
          element_label_colon: false
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          click_sort_column: uri
          type: link
          settings:
            trim_length: 80
            url_only: false
            url_plain: false
            rel: nofollow
            target: _blank
          group_column: ''
          group_columns: {  }
          group_rows: true
          delta_limit: 0
          delta_offset: 0
          delta_reversed: false
          delta_first_last: false
          multi_type: separator
          separator: ', '
          field_api_classes: false
          plugin_id: field
        nothing:
          id: nothing
          table: views
          field: nothing
          relationship: none
          group_type: group
          admin_label: 'content caption'
          label: ''
          exclude: false
          alter:
            alter_text: true
            text: "<figure>{{ field_project_thumbnail }}\n<figcaption><h3>{{ title }}</h3>{{ field_project_description }}{{ field_link }} </figcaption>\n</figure>"
            make_link: false
            path: ''
            absolute: false
            external: false
            replace_spaces: false
            path_case: none
            trim_whitespace: true
            alt: ''
            rel: ''
            link_class: ''
            prefix: ''
            suffix: ''
            target: ''
            nl2br: false
            max_length: 0
            word_boundary: true
            ellipsis: true
            more_link: false
            more_link_text: ''
            more_link_path: ''
            strip_tags: false
            trim: false
            preserve_tags: ''
            html: false
          element_type: '0'
          element_class: ''
          element_label_type: '0'
          element_label_class: ''
          element_label_colon: false
          element_wrapper_type: '0'
          element_wrapper_class: ''
          element_default_classes: false
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: false
          plugin_id: custom
      filters:
        status:
          value: true
          table: node_field_data
          field: status
          plugin_id: boolean
          entity_type: node
          entity_field: status
          id: status
          expose:
            operator: ''
          group: 1
        type:
          id: type
          table: node
          field: type
          relationship: none
          group_type: group
          admin_label: ''
          operator: in
          value:
            portfolio: portfolio
          group: 1
          exposed: false
          expose:
            operator_id: ''
            label: ''
            description: ''
            use_operator: false
            operator: ''
            identifier: ''
            required: false
            remember: false
            multiple: false
            remember_roles:
              authenticated: authenticated
            reduce: false
          is_grouped: false
          group_info:
            label: ''
            description: ''
            identifier: ''
            optional: true
            widget: select
            multiple: false
            remember: false
            default_group: All
            default_group_multiple: {  }
            group_items: {  }
          entity_type: node
          entity_field: type
          plugin_id: bundle
      sorts:
        created:
          id: created
          table: node_field_data
          field: created
          order: DESC
          entity_type: node
          entity_field: created
          plugin_id: date
          relationship: none
          group_type: group
          admin_label: ''
          exposed: false
          expose:
            label: ''
          granularity: second
      title: 'Recent work'
      header: {  }
      footer: {  }
      empty: {  }
      relationships: {  }
      arguments: {  }
      display_extenders: {  }
    cache_metadata:
      max-age: -1
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - 'user.node_grants:view'
        - user.permissions
      tags:
        - 'config:field.storage.node.field_link'
        - 'config:field.storage.node.field_project_description'
        - 'config:field.storage.node.field_project_thumbnail'
      cacheable: false
  block_1:
    display_plugin: block
    id: block_1
    display_title: Block
    position: 1
    display_options:
      display_extenders: {  }
    cache_metadata:
      max-age: -1
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - 'user.node_grants:view'
        - user.permissions
      tags:
        - 'config:field.storage.node.field_link'
        - 'config:field.storage.node.field_project_description'
        - 'config:field.storage.node.field_project_thumbnail'
      cacheable: false
  page_1:
    display_plugin: page
    id: page_1
    display_title: Page
    position: 2
    display_options:
      display_extenders: {  }
      path: portfolio
    cache_metadata:
      max-age: -1
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - 'user.node_grants:view'
        - user.permissions
      tags:
        - 'config:field.storage.node.field_link'
        - 'config:field.storage.node.field_project_description'
        - 'config:field.storage.node.field_project_thumbnail'
      cacheable: false
charlieweb82’s picture

charlieweb82 commented

the solution you mention @turegjorup is good, fix the problem and render the output I add the views-view-field-html.twig to my theme templates and add the {{ output | raw }} and the custom field render the fields in the view. but this need a fix in other version.

Devline’s picture

Devline commented

The issue is also occuring since RC1, on text replacement when the field is empty. It's working fine for the primary text replacement (when the field is not empty). Fix from @turegjorup is ok for temporary workaround.

tannerjfco’s picture

tannerjfco commented
Priority: Normal » Major

This is a regression, so I think major is appropriate.

dawehner’s picture

dawehner
Primary language German
commented
Version: 8.0.0-rc1 » 8.0.x-dev

Note: We also work on the dev version, never on the RC1 itself :)

dalin’s picture

dalin
he/him
Primary language English
Location 🇨🇦, 🇲🇽, 🌍
commented
Component: views_ui.module » views.module

The offending patch appears to have been:
#2348729: Convert theme_views_view_field to twig
https://www.drupal.org/node/2348729#comment-10358601

dalin’s picture

dalin
he/him
Primary language English
Location 🇨🇦, 🇲🇽, 🌍
commented
Title: Global Custom Text, replacement patterns » Views field "Global Custom Text" incorrectly escapes HTML
Issue summary: View changes
dalin’s picture

dalin
he/him
Primary language English
Location 🇨🇦, 🇲🇽, 🌍
commented
Title: Views field "Global Custom Text" incorrectly escapes HTML » Views field "Global > Custom Text" incorrectly escapes HTML
Issue summary: View changes
samuel.mortenson’s picture

samuel.mortenson
he/him
Primary language English
commented
Status: Active » Needs review
StatusFileSize
new views-2584655-double-escape-13.patch367 bytes

I think outputting as raw is appropriate here, although it does looks weird in a core template. From what I can tell, all the output being sent to views-view-field.html.twig has already been passed through a Views field plugin's advancedRender method, which manually renders (and escapes when appropriate) fields. I'm not an expert on how this particular render pipeline works, so we'll need to review this to make sure this is not a security risk.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Needs review » Closed (duplicate)

#2579427: Outputting markup from custom text field is not possible is RTBC