New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
endymion1818 opened this Issue Mar 15, 2018 · 4 comments

Comments

Projects
None yet
4 participants
@endymion1818
Contributor

endymion1818 commented Mar 15, 2018

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 &#8221; 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

This comment has been minimized.

Contributor

endymion1818 commented Mar 17, 2018

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 ...

@endymion1818 endymion1818 changed the title from gatsby-source-wordpress title field needs to be deserialized for use with react-helmet to [gatsby-source-wordpress] title field — issue with deserialization for use with react-helmet Mar 17, 2018

@pieh

This comment has been minimized.

Contributor

pieh commented Mar 19, 2018

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

This comment has been minimized.

Contributor

lightstrike commented Mar 19, 2018

Could a custom normalizer as explored in #3783 work?

@KyleAMathews

This comment has been minimized.

Contributor

KyleAMathews commented Sep 8, 2018

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment