0

I'm developing a custom block plugin with the standard environment built with:

npx @wordpress/create-block my-plugin-name

I have now inserted some content using this block. Works fine. Good!

After a while, I want to make a modification to the block to fine-tune its design. After running the script to compile it (yarn build or yarn start), the content I had previously entered is lost. In the editor a message appears saying that the block has an unexpected error and offers me the possibility of trying to recover the block, but the attempt always fails.

I have to insert the content again in a new block.

enter image description here

So, after insert content I cant't make a plugin modificaton without losing my content.

How can I develop a plugin preserving the content?

This is the plugin in GitHub

block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "giraldez-block/muestradatos",
    "version": "0.1.0",
    "title": "Muestra datos",
    "category": "giraldez",
    "icon": "megaphone",
    "description": "Muestra tres datos en grande con el diseño inclinado de AG.",
    "supports": {
        "align": [ "wide", "full" ],
        "html": false
    },
    "textdomain": "giraldez-blocks",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css",
        "attributes": {
        "leyenda1": {
            "type": "string",
            "default": ""
        },
        "dato1": {
            "type": "string",
            "default": ""
        },
        "leyenda2": {
            "type": "string",
            "default": ""
        },
        "dato2": {
            "type": "string",
            "default": ""
        },
        "leyenda3": {
            "type": "string",
            "default": ""
        },
        "dato3": {
            "type": "string",
            "default": ""
        }
    }
}

edit function

export default function Edit( { attributes, setAttributes } ) {
    
    return (
        <div { ...useBlockProps() }>
            <div>
                <TextControl
                    label={ __( 'Leyenda 1', 'giraldez-blocks' ) }
                    value={ attributes.leyenda1 }
                    onChange={ ( val ) => setAttributes( { leyenda1: val } ) }
                />
                <TextControl
                    label={ __( 'Dato 1', 'giraldez-blocks' ) }
                    value={ attributes.dato1 }
                    onChange={ ( val ) => setAttributes( { dato1: val } ) }
                />
            </div>

            <div>
                <TextControl
                    label={ __( 'Leyenda 2', 'giraldez-blocks' ) }
                    value={ attributes.leyenda2 }
                    onChange={ ( val ) => setAttributes( { leyenda2: val } ) }
                />
                <TextControl
                    label={ __( 'Dato 2', 'giraldez-blocks' ) }
                    value={ attributes.dato2 }
                    onChange={ ( val ) => setAttributes( { dato2: val } ) }
                />
            </div>

            <div>
                <TextControl
                    label={ __( 'Leyenda 3', 'giraldez-blocks' ) }
                    value={ attributes.leyenda3 }
                    onChange={ ( val ) => setAttributes( { leyenda3: val } ) }
                />
                <TextControl
                    label={ __( 'Dato 3', 'giraldez-blocks' ) }
                    value={ attributes.dato3 }
                    onChange={ ( val ) => setAttributes( { dato3: val } ) }
                />
            </div>

        </div>
    );
}

save function

 export default function save( { attributes } ) {
    const blockProps = useBlockProps.save();
    return <div { ...blockProps }>
        <div className={`flex justify-between -skew-x-12 not-prose ${attributes.align}`.trimEnd()}>
            <div className='flex flex-col p-4 border-l-4 border-r-4 blqe border-rojo border-b-20 bg-blanco'>
                <p className='my-4 mt-0 text-2xl font-bold skew-x-12 leyenda text-rojo'>{ attributes.leyenda1 }</p>
                <p className='my-0 text-5xl font-bold skew-x-12 dato text-rojo'>{ attributes.dato1 }</p>
            </div>
            <div className='flex flex-col p-6 border-r-4 blqe border-rojo border-b-20 bg-blanco'>
                <p className='my-4 mt-0 text-2xl font-bold skew-x-12 leyenda text-rojo'>{ attributes.leyenda2 }</p>
                <p className='my-0 text-5xl font-bold skew-x-12 dato text-rojo'>{ attributes.dato2 }</p>
            </div>
            <div className='flex flex-col p-6 border-r-4 blqe border-rojo border-b-20 bg-blanco'>
                <p className='my-4 mt-0 text-2xl font-bold skew-x-12 leyenda text-rojo'>{ attributes.leyenda3 }</p>
                <p className='my-0 text-5xl font-bold skew-x-12 dato text-rojo'>{ attributes.dato3 }</p>
            </div>
        </div>
    </div>;
}
5
  • note that the content is not blocked, it just doesn't match the GUI, if you go to the frontend and look in the database that content is still there. I see you did not share code, can you edit your question to include code? It's very very difficult to answer this question without code, if it's possible at all.
    – Tom J Nowell
    Commented Jul 18, 2022 at 12:24
  • Thank you for the answer. I've linked a GitHub repo with the entire plugin (I'm not sure what part of the code you need exactly). Question updated.
    – aitor
    Commented Jul 18, 2022 at 13:31
  • 1
    ideally all of it, at an absolute minimum the javascript, and it should be in your question rather than a link, otherwise this question becomes useless once you take the github repo down. Also it's not clear what you changed as there's only 1 commit and no git history. Additionally, are you sure you want to store your attributes in the HTML that gets saved using selectors?
    – Tom J Nowell
    Commented Jul 18, 2022 at 14:50
  • I'm not sure. What is the good practice here? I'm learning, but is hard. I have no much level. I added the JS to the question. Also, tried to remove source from attrs in order to store data in comment delimiter. Problem persists. Every time I do a "npm run build" the blocks inserted becomes broken.
    – aitor
    Commented Jul 18, 2022 at 16:03
  • UPDATE: Now, using comment delimiter to store data the recover button works! So this is the solution. Thanks!
    – aitor
    Commented Jul 18, 2022 at 16:08

1 Answer 1

0

To prevent this kind of error whenever you change the block structure, I suggest using Dynamic Block instead. You can read more about it here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.