Support » Developing with WordPress » Help with block element and escaped code

  • Resolved Jeff Starr

    (@specialk)


    I develop a plugin that enables users to add code snippets and apply syntax highlighting on the front-end. The plugin works great except for one thing. When using the plugin’s code block, the block editor escapes left-facing angle quotes and other characters. For example, if the user enters this in the plugin code block:

    cat <<EOF
    echo "123"
    EOF

    The result is this (both angle brackets are escaped).

    I’ve tried everything I can think of, but not able to find a solution. Asking for help here, hopefully someone with more knowledge about blocks will share some clues.

    Here is an example of code that works, except for the unwanted escaping. Included in the save function:

    return el('pre', null, el('code', { className: 'language-'+ language }, content));

    When I use that, everything works perfectly, except for the escaped characters. The code snippets need to be unescaped in the editor (they are escaped properly on the front-end). Is there *any* way to accomplish this with blocks?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The code snippets need to be unescaped in the editor (they are escaped properly on the front-end).

    I think this is the wrong assumption. The code isn’t really code, so it should be escaped when it is typed in, and there is nothing to do on output. You should change your plugin so that it recognizes &lt ; as a delimiter for the syntax highlighting or when outputting you can decode, do the highlighting with encode. People should be able to write posts containing JS code without the danger of it being executed by a hack.

    Edit: note that I had to change my &lt to add a space even though it was in backticks (a <code> tag) because it was changed to <

    • This reply was modified 2 months, 1 week ago by Joy. Reason: add space to entity
    Thread Starter Jeff Starr

    (@specialk)

    Thanks for the response.

    Checking for &lt ; and &amp ; in the frontend output code is a good idea. If nothing else, I will try that route.

    And I get your logic about escaping code when it’s added in the editor. What I need to know is if it is *possible* to add unescaped code, or if there something that always will convert the angle brackets and ampersands. If you happen to know one way or another, it would be very useful and appreciated.

    I don’t know if you’ve tried it, but this sort of sounds opposite to what happens when you are editing. If you switch to HTML mode and put an entity, just switching back to Visual will convert the entity, in order to display it.
    I’m looking for the issue about it, but not finding it. I found this one though, https://github.com/WordPress/gutenberg/issues/24282

    Thread Starter Jeff Starr

    (@specialk)

    That is helpful, thank you.

    Thread Starter Jeff Starr

    (@specialk)

    Marking as resolved.

    Turned out to be an issue with the render_callback function used for block registration. Fixed that up and the plugin block is working perfectly.

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