crayon-syntax-highlighter icon indicating copy to clipboard operation
crayon-syntax-highlighter copied to clipboard

Seems to not work with Gutenberg Wordpress Editor

Open The-Judge opened this issue 7 years ago • 6 comments

In the current version of Wordpress (4.9.8) the WP team introduced a preview of the will-become-default - Editor called Gutenberg (https://wordpress.org/plugins/gutenberg/). Crayon Syntax Highlighter seems not to be compatible with it; when a code-block is inserted, it doesn't get rendered by CSH as it is with the legacy WordPress editor.

The-Judge avatar Aug 06 '18 18:08 The-Judge

I'm noticing this also: When I edited an old post with the new editor, I clicked the "code" toolbar item on an existing block of code, and the crayon editor popped up as expected. But when I paste my code, and render the whole post in preview, some unescaped HTML comes through inside the block. And subsequent attempts to pull up the crayon editor haven't worked.

when I go to the bottom of the page and add a new block with gutenberg of type Formatting>Code, the Crayon editor similarly doesn't work. But the output page gets rendered as Crayon would by default, and without unescaped HTML.

alexwhittemore avatar Aug 08 '18 23:08 alexwhittemore

I'm not sure if it is a fault of Gutenberg but it seems when Gutenberg saves a post and the save_post action hook is triggered, is_admin() returns false as opposed to the classic editor which returns true.

The part which needs to be fixed is in crayon_wp.class.php: https://github.com/aramk/crayon-syntax-highlighter/blob/2.8.3/crayon_wp.class.php#L1277-L1325

The line 1323 add_action('save_post', 'CrayonWP::save_post', 10, 2); is not read when Gutenberg updates a post as it is in a conditional block of is_admin(). Moving the line to outside the conditional block solves the problem.

Changing

    } else {
        // Update between versions
        CrayonWP::update();
        // For marking a post as containing a Crayon
        add_action('update_post', 'CrayonWP::save_post', 10, 2);
        add_action('save_post', 'CrayonWP::save_post', 10, 2);
        add_filter('wp_insert_post_data', 'CrayonWP::filter_post_data', '99', 2);
    }

to

    } else {
        // Update between versions
        CrayonWP::update();
        // For marking a post as containing a Crayon
        add_action('update_post', 'CrayonWP::save_post', 10, 2);
        add_filter('wp_insert_post_data', 'CrayonWP::filter_post_data', '99', 2);
    }
    add_action('save_post', 'CrayonWP::save_post', 10, 2);

would solve the problem. I haven't fully tested it thoroughly so not sure about any side effects.

[edit] Found an relevant issue there in the Gutenberg issue tracker. https://github.com/WordPress/gutenberg/issues/11138 So they clearly say that it uses REST API and is_admin() returns false when save_post is fired.

mipon avatar Nov 10 '18 16:11 mipon

Thank you, @mipon

I wonder if Crayon Syntax Highlighter developers will fix this problem.

EXL avatar Dec 26 '18 04:12 EXL

P.S. Inline code insertion also does not work, e.g.:

Test <pre class="inline:1">preformatted</pre> text.

Gutenberg result: screenshot_20181226_112941

Classic editor result: screenshot_20181226_112721

EXL avatar Dec 26 '18 04:12 EXL

@EXL try this plugin.

mipon avatar Dec 26 '18 07:12 mipon

@mipon thanks! But while I switched to using the Classic Editor.

EXL avatar Dec 27 '18 00:12 EXL