Reuse save function from core Code block which includes escaping

[westonruter]

When extending the Code block, there's no need for us to define our own save function since we can reuse the one from core entirely. The version we had lacked the required escape() function call, but by allowing the core version to pass through with the escape() function intact. This fixes block validation errors when the code content contains special HTML characters.

Fixes #110.

Build for testing: syntax-highlighting-code-block.zip

[westonruter]

@mkaz FYI: As this appears to also be an issue in your version.

[westonruter]

By deleting this here, we can just reuse what the overridden block is already doing, but with escape():

import { escape } from './utils';

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

[westonruter]

Actually, removing this is causing problems. In WordPress 5.4.1 without Gutenberg active, I'm getting an error where the save function in the blockType is undefined:

[westonruter]

For some reason settings.save is defined up front, after being filtered it gets dropped, even though all of settings is being returned:

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

Lines 136 to 137 in 99510a2

	return {
	...settings,

Perhaps it is due to this apparent race condition I commented about on the subsequent lines:

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

Lines 139 to 143 in 99510a2

	/*
	* @todo Why do the attributes need to be augmented here when they have already been declared for the block type in PHP?
	* There seems to be a race condition, as wp.blocks.getBlockType('core/code') returns the PHP-augmented data after the
	* page loads, but at the moment this filter calls it is still undefined.
	*/

In any case, capturing the original save the first time we see it seems to fix this:

--- a/src/index.js
+++ b/src/index.js
@@ -26,6 +26,8 @@ import * as BlockEditor from '@wordpress/block-editor';
  */
 import languagesNames from './language-names';
 
+let save;
+
 /**
  * Extend code block with syntax highlighting.
  *
@@ -37,6 +39,14 @@ const extendCodeBlockWithSyntaxHighlighting = (settings) => {
 		return settings;
 	}
 
+	if (settings.save) {
+		save = settings.save;
+	}
+
+	if (!save) {
+		return settings;
+	}
+
 	const useLightBlockWrapper =
 		settings.supports &&
 		settings.supports.lightBlockWrapper &&
@@ -269,6 +279,8 @@ const extendCodeBlockWithSyntaxHighlighting = (settings) => {
 			);
 		},
 
+		save,
+
 		deprecated: [
 			...(settings.deprecated || []),
 			{

But this hardly seems like the right solution.

@youknowriad Do you know what's going on here?

[youknowriad]

I think that filter might run for deprecations too. So it's possible that one of them don't have save.

[ghost]

The plugin has been updated and it is working smoothly now. Thank you @westonruter for your unique help! I really appreciate that. :)

[mkaz]

@mkaz FYI: As this appears to also be an issue in your version.

Thanks @westonruter for the heads up.

Unfortunately I do need my own save function, since the Prism JS needs the additional attributes. So I'll need to add the escape() function directly.