• Resolved miegapele

    (@miegapele)


    Hey there,

    At first I just wanted to extend one of WordPress Gutenberg blocks by learning purposes. I chose the ‘core/code’ block. I added the h4 tag for a title below the default content, this part worked fine. Then I decided to change the h4 tag to h2 tag. As I understand now I need to add deprecated array to settings object. I did this but I am getting this error:
    Block validation: Expected tag name h2, instead saw h4.

    
    const { InspectorAdvancedControls }	= wp.editor;
    const { createHigherOrderComponent } = wp.compose;
    const { Fragment } = wp.element;
    import { RichText} from "@wordpress/editor";
    import deprecated from "./deprecated";
    
    const enableExtendOnBlocks = [
        'core/code',
    ];
    
    function addAttributes( settings, name ) {
    
        if ( ! enableExtendOnBlocks.includes( name ) ) {
            return settings;
        }
    
        if( typeof settings.attributes !== 'undefined' ){
    
            settings.attributes = {
                ...settings.attributes,
                vista:{
                    type: 'string',
                    default: 'vista',
                    source: 'html',
                    selector: 'h2',
                }
            };
    
            settings.title = 'My Code';
    
            settings.supports = {
                html: false,
            };
    
            settings.deprecated = deprecated;
    
        }
    
        return settings;
    }
    
    wp.hooks.addFilter(
        'blocks.registerBlockType',
        'extend-block-example/custom-attributes',
        addAttributes
    );
    
    const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {
    
        return ( props ) => {
    
            if ( ! enableExtendOnBlocks.includes( props.name ) ) {
                return <BlockEdit { ...props } />;
            }
    
            const onChangeVista = (vista) => {
                props.setAttributes({
                    vista: vista
                });
            };
    
            return (
                <Fragment>
                    <BlockEdit { ...props } />
                    <RichText
                        tagName="h2"
                        formattingControls={[]}
                        value={props.attributes.vista}
                        onChange={(vista) => onChangeVista(vista)}
                    />
                </Fragment>
            );
        };
    }, "withInspectorControl" );
    
    wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin/with-inspector-controls', withInspectorControls );
    
    function codeSaveElement( element, blockType, attributes ) {
        if ( blockType.name !== 'core/code' ) {
            return element;
        }
    
        return (
            <>
                <pre  className={attributes.className}>
                    <code>{ escape( attributes.content ) }</code>
                </pre>
                {/*{element}*/}
                <RichText.Content
                    tagName="h2"
                    value={attributes.vista}
                />
            </>
        );
    }
    
    wp.hooks.addFilter(
        'blocks.getSaveElement',
        'extend-block-example/custom-save',
        codeSaveElement
    );
    

    and the depricated array:

    
    import {RichText} from "@wordpress/editor";
    
    const oldAtt = {
        vista: {
            type: 'string',
            source: 'html',
            selector: 'h4',
            default: 'vista',
        },
        content: {
            type: "string",
            source: "text",
            selector: "code",
        },
        className: {
            type: "string",
        }
    };
    
    const oldAtt2 = {
        content: {
            type: "string",
            source: "text",
            selector: "code",
        },
        className: {
            type: "string",
        }
    };
    
    const deprecated = [
        {
            attributes: oldAtt2,
            save: function (oldAtt2) {
                return (
                    <>
                        <pre  className={oldAtt2.className}>
                            <code>{ escape( oldAtt2.content ) }</code>
                        </pre>
                    </>
                );
            },
        },
        {
            attributes: oldAtt,
            save: function (oldAtt) {
                return (
                    <>
                        <pre  className={oldAtt.className}>
                            <code>{ escape( oldAtt.content ) }</code>
                        </pre>
                        <RichText.Content
                            tagName="h4"
                            value={oldAtt.vista}
                        />
                    </>
                );
            },
        },
    ];
    
    export default deprecated;
    

    What I am doing wrong?

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Extension of core/code: deprecated doesn’t work’ is closed to new replies.