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 agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.