If you include more than symbol into pattern, custom html block it will html escape it

[asolopovas]

Description

I use Alpine.js and often perform arrow function operation inside attributes for examples <div :class="{ 'shown' : () => shown === true"> because I use > quote turns final quote into "}&#8221" causing incorrect tags. For example if you create with html block the following <div separator="()=>{}"></div> it will turn on the output to <div separator="()=>{}&#8221;></div> it should not be escaping final quotes.

Step-by-step reproduction instructions

Open fresh WordPress installation, create html block with the following contents <div separator="()=>{}"></div> the html output will look like this <div separator="()=>{}&#8221;></div>

funny enough if you use < everything works fine.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [ ] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [x] Not sure

[Mayank-Tripathi32]

Hello @asolopovas,

I believe the behavior you're encountering is intentional.

The issue where separator="()=>{}&#8221;" appears instead of separator="()=>{}" is due to the way HTML entities are encoded when using dangerouslySetInnerHTML.

Here’s how it works:

export default function save( { attributes } ) {
    return <RawHTML>{ attributes.content }</RawHTML>;
}

export default function RawHTML( { children, ...props } ) {
    let rawHtml = '';

    // Cast children as an array, and concatenate each element if it is a string.
    Children.toArray( children ).forEach( ( child ) => {
        if ( typeof child === 'string' && child.trim() !== '' ) {
            rawHtml += child;
        }
    } );

    // The `div` wrapper will be stripped by the `renderElement` serializer in
    // `./serialize.js` unless there are non-children props present.
    return createElement( 'div', {
        dangerouslySetInnerHTML: { __html: rawHtml },
        ...props,
    } );
}

When using RawHTML to render, React applies dangerouslySetInnerHTML, which automatically escapes certain characters (like quotes) to ensure proper HTML rendering and to safeguard against XSS (cross-site scripting) attacks. This built-in behavior is designed to keep your application secure.

I hope this clears up the behavior! Let me know if you have any further questions or any corrections! Thanks

[carolinan]

The HTML block is for HTML, so if you need to do anything more complex, use a custom block.

[t-hamano]

I don't think the issue reported here is an issue with custom HTML blocks or React. I can reproduce the same error in the classic editor.

I think the underlying problem is that content is filtered by the wptexturize function by default.

There are a few ways to solve this, but one way is to disable texturized on specific tags:

function my_no_texturize_tags( $tags ) {
    $tags[] = 'div';
    return $tags;
}
add_filter( 'no_texturize_tags', 'my_no_texturize_tags' );