block editor - Gutenberg extending the existing class

admin管理员组

文章数量:1130349

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

Is there any way to extend the existing class?

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

Is there any way to extend the existing class?

本文标签： block editorGutenberg extending the existing class