I am building a prism plugin to highlight the code syntaxes. In existing code block there is already a sidebar option with Additional Class Name but i have to manually enter the class name for the syntaxes. Like for php syntaxes i have to add language-php and so on. To prevent this issue a added a additional sidebar option for code block only that is a drop down with all the supported languages class names.

But now the issue is when i am trying to extend the existing classname i got the validation error.

export function addSaveProps( extraProps, blockType, attributes ) {

    // If the current block is valid, add our prop.
    if ( isValidBlockType( blockType.name ) ) {

        if( "undefined" != typeof attributes.prismClass && 
            attributes.prismClass.length ) {

            //extraProps.prismClass = attributes.prismClass;
            extraProps.className = attributes.className+" "+attributes.prismClass;

    return extraProps;

But with the above code I got the following error:

blocks.min.js?ver=6.0.4:2 Block validation: Block validation failed for core/code

enter image description here

Is there any way to extend the existing class?

  • I checked your code with a custom class and it works (being called as the callback of blocks.getSaveContent.extraProps, is this the filter you are using?). For highlighting I think there is a package, already in gutenberg, in case you are interested: annotations but I haven't tested it so Im not sure about it. – Alvaro Jan 2 at 10:32
  • @Alvaro yes i am using the blocks.getSaveContent.extraProps filter and added the screenshot to the question too. I haven't seen any package to highlighting the syntax in gutenberg. – jogesh_pi Jan 2 at 16:03

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.