Htaccess Syntax Errors

[ghost]

Hi,

I was going to create a content regarding Jeff Star's (Perishablepress) 7G Firewall Rules for htaccess. However, something breaks the code.

The first issue appears after highlighting the code:

The second issue: I copied the original code without editing from txt file to Gutenberg block via Syntax highlighting code block.

But the code has been changed. To clarify check the difference please.
Original line:
RewriteCond %{REQUEST_URI} (/)(\*|\"|\'|\.|,|&|&?)/?$ [NC,OR]

it is changed by Syntax highlighting code block like that:
RewriteCond %{REQUEST_URI} (/)(\*|\"|\'|\.|,|&|&?)/?$ [NC,OR]

Also another original line:
RewriteCond %{HTTP_USER_AGENT} (<|%0a|%0d|%27|%3c|%3e|%00|0x00) [NC,OR]

Changed by Syntax highlighting code block:
RewriteCond %{HTTP_USER_AGENT} (<|%0a|%0d|%27|%3c|%3e|%00|0x00) [NC,OR]

But if I encode all the code, then no issue at all and The Syntax highlighting code block plugin shows the exact code without changing it. So should I encode codes before inserting them to Gutenberg? Do you recommend doing that?

NOTE: Highlighting issue is still there whether encode them or not.

Regards.

[westonruter]

The encoding issue may be a bug in Gutenberg. Do you experience that issue even without this plugin active?

In regards to the highlighting issue, @allejo do you think this is an issue with the language definition?

[ghost]

Yes. Although I don't encode code, Gutenberg doesn't edit/change any line.

Without the plugin:

[westonruter]

What is the URL for the page that has that .htaccess code to copy/paste from?

[ghost]

It is a website which is currently under development. So I installed the same plugin on another website and created a sample page for you.

Check this please:
https://serdarwork.com/sample-page/

To download the original txt file:
https://perishablepress.com/downloads/16621/

Thank you!
Kind regards.

[westonruter]

No, I mean where can we find the code you're using to copy/paste?

[ghost]

Sorry about that. Here is the link:
https://perishablepress.com/7g-firewall/

To directly download:
https://perishablepress.com/downloads/16621/

[allejo]

In regards to the highlighting issue, @allejo do you think this is an issue with the language definition?

I haven't tested this code specifically yet, but yea I would imagine the regex in the language definition is breaking.

[westonruter]

If I try adding the block with this plugin deactivated, and then I activate the plugin and reload the editor, it shows a parse error:

Somehow, our HighlightablePlainText component is failing to handle this markup. In our version we render the text via:

syntax-highlighting-code-block/src/index.js

Line 78 in 545db7e

<PlainText ref={plainTextRef} {...props} />

In WordPress 5.4, the code used is:

		<div className={ className }>
			<PlainText
				value={ attributes.content }
				onChange={ ( content ) => setAttributes( { content } ) }
				placeholder={ __( 'Write code…' ) }
				aria-label={ __( 'Code' ) }
			/>
		</div>

Not sure why this would make a difference.

In the console, when this plugin is active there is a block validation error:

Content generated by save function:

Content retrieved from post body:

So this leads me to think the issue is that our save function is not doing HTML encoding as it needs to be!

Our function is:

syntax-highlighting-code-block/src/index.js

Lines 272 to 278 in 545db7e

	save({ attributes }) {
	return (
	<pre>
	<code>{attributes.content}</code>
	</pre>
	);
	},

But, look at this… the code in Gutenberg is different:

import { escape } from './utils';

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

So it seems the only thing we're missing is escape()!

[westonruter]

@WPLibrary Here's a PR with the fix and a build for testing: #118

[westonruter]

In my testing, the fix is not reliable as sometimes the save function ends up undefined. See #118 (comment).

[westonruter]

@WPLibrary Would you test this update please: #119.