[gatsby-source-wordpress] title field — issue with deserialization for use with react-helmet

[endymion1818]

Description

WordPress API returns serialized HTML, this is fine when dealing with body content, however I recently encountered an issue when trying to use react-helmet to set the post.title where the post.title contained an unescaped character.

Steps to reproduce

Example title in WordPress editor title field: 'mytitle - contains a dash'
Example escaped title served by WordPress REST API: 'mytitle ” contains a dash'

Here is the code I expected to use in Helmet:

<Helmet title={`${post.title} } />

For the avoidance of all doubt here's my GraphQL query:

query currentPage($id: String!) {
    wordpressPage(id: { eq: $id }) {
      title
      content
      slug
    }
 }

Expected result

post.title resolves to mytitle - contains a dash

Actual result

post.title resolves to mytitle ” contains a dash

What happened:

Environment

• Gatsby version: 1.9.231
• gatsby-cli version: 1.1.45
• Node.js version: 1.1.45
• Operating System: Ubuntu 16.04

Temporary Resolution

We got around this issue by using the package xmldom in this way:

import React from 'react'
import Helmet from 'react-helmet'
import { DOMParser } from 'xmldom'

class pageTemplate extends React.Component {
  render() {

    const post = this.props.data.wordpressPage;
    const siteTitle = this.props.data.site.siteMetadata.title;

    var dom = new DOMParser().parseFromString(`<div>${this.props.data.wordpressPage.title}</div>`);
    var decodedString = dom.childNodes[0].textContent;

      return (
      <div>
        <Helmet title={`${decodedString} | ${siteTitle}`} />
...

Would it be possible to add this into a normalizer so that post.title is de-serialized?

[endymion1818]

I'd really like some advice on this since I think changing the current way it's done could disrupt the way existing sites are doing things, or easily cause confusion ...

[pieh]

Right now I think this should be done in your project in places where it makes sense - as in your example for meta tags. Might be worth adding note about it in docs, but not sure if workaround You presented is the best one (relying on DOMParser - seems pretty heave for this).

[lightstrike]

Could a custom normalizer as explored in #3783 work?

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!