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.

• Yes

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

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• 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' );

[asolopovas]

Thank you all for your replies. I was thinking that it might be some form of sanitization, though I am not sure if there is a way to disable it from within the block. In reality, I just need React to ignore these somehow, as they are only used on the frontend. I managed to simply create a function on the data rather than choosing to write inline statements, but its really convenient whenever you can just through a tiny arrow function and get the job done.

[ellatrix]

Hi! Some history here: #9963. It can't be fixed in Gutenberg, it must be fixed in core. Not sure if there an open issue on https://core.trac.wordpress.org, if not I'd recommend creating one there.

[ellatrix]

I just need React to ignore these somehow

As you can see in the above issue, it's not React, but us explicitly converting that character.

[asolopovas]

I understand, I used functions instead as a workaround. Maybe it only bothers me so it doesn't matter.