Support » Developing with WordPress » Gutenberg custom block: HTML does not unescape

  • majorlabel

    (@majorlabel)


    I’m building some custom Gutenberg blocks and noticed a problem. I defined an attribute like so:

            desc: {
                type: "string",
                source: "html",
                selector: "div.dishdetails__desc",
            },
    

    and create the RichText editor in the edit function like so:

    
    el(
        wp.editor.RichText,
        {
            className: "dishdetails__desc",
            tagName: "div",
            key: "editable",
            placeholder: "Type beschrijving",
            value: desc,
            onChange: function(newText) {
                props.setAttributes({desc: newText});
            }
        }
    )
    

    I saved it like this:

    
    el(
        "div",
        {
            className: "dishdetails__desc"
        },
        desc
    )
    

    But when I output the text into the page, the html in the div doesn’t get escaped correctly. I took a look at the source. The closing tag does get escaped, but the opening one doesn’t. So for instance a <strong> tag will look like this: “& lt;\/strong>” (NO SPACE in between but I had to cause ironically this does get escaped)

    • This topic was modified 5 months ago by  majorlabel.
    • This topic was modified 5 months ago by  majorlabel.
    • This topic was modified 5 months ago by  majorlabel.
    • This topic was modified 5 months ago by  majorlabel.
    • This topic was modified 5 months ago by  majorlabel.
    • This topic was modified 5 months ago by  majorlabel.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi @majorlabel,

    The escaping is expected behavior, but there is a RawHTML component that will allow you to save unescaped HTML.

    Assuming it is part of your save() function, here is your last code block adapted to use RawHTML.

    
    el(
        "div",
        {
            className: "dishdetails__desc"
        },
        el( wp.element.RawHTML, null, desc )
    )
    

    I believe that’s all you need to fix this case. Does that help?

    majorlabel

    (@majorlabel)

    Thanks for you answer, will try and let you know. I can’t imagine this escaping being expected though, since the < character was escaped properly and the > character wasn’t.

    majorlabel

    (@majorlabel)

    @bpayton

    Thanks for your tip, that seems to have solved it!

    Joy

    (@joyously)

    The < character is the entity that needs escaping. The > character does not.

    Thanks for you answer, will try and let you know. I can’t imagine this escaping being expected though, since the < character was escaped properly and the > character wasn’t.

    @majorlabel, I wondered about this as well, and consistent with what @joyously mentioned, Gutenberg’s escape-html package explains that all we need to avoid are unescaped less-than characters and ambiguous ampersands:
    https://github.com/WordPress/gutenberg/blob/3f23b1a69a1919b37c67f971cdf98112eb18b5e7/packages/escape-html/src/index.js#L71-L76

    I’m glad your issue is solved! Cheers!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.