Reuse save function from core Code block which includes escaping#118
Reuse save function from core Code block which includes escaping#118westonruter merged 3 commits intodevelopfrom
Conversation
|
@mkaz FYI: As this appears to also be an issue in your version. |
| save({ attributes }) { | ||
| return ( | ||
| <pre> | ||
| <code>{attributes.content}</code> | ||
| </pre> | ||
| ); | ||
| }, | ||
|
|
There was a problem hiding this comment.
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>
);
}There was a problem hiding this comment.
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
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
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?
There was a problem hiding this comment.
I think that filter might run for deprecations too. So it's possible that one of them don't have save.
ghost
left a comment
There was a problem hiding this comment.
The plugin has been updated and it is working smoothly now. Thank you @westonruter for your unique help! I really appreciate that. :)
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 |

When extending the Code block, there's no need for us to define our own
savefunction since we can reuse the one from core entirely. The version we had lacked the requiredescape()function call, but by allowing the core version to pass through with theescape()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