changed attributes not waving with Wordpress block

Question

I have a fairly simple block in a plugin, built using npx @wordpress/create-block pn-DisplayBlocks. Attributes, in block.json, are:

(code changed as per fixes below)

    "attributes": {
        "pid": {
            "type": "text",
            "default": "444"
        }
    }

save.js is:

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

export default function Save( {attributes} ) {

    console.log( "SAVING", attributes )
    return (
        <p { ...useBlockProps.save() }>
            { __( 'Pn Image – hello from the saved content! ' + attributes.pid, 'pn-image' ) }
        </p>
    );
}

and edit.js is:


import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';

export default function Edit( {attributes, setAttributes} ) {

    console.log( "pid", attributes.pid )
    return (
        <p { ...useBlockProps() }>
            { 
                __( 'Pn Image – hello from the editor! ' + attributes.pid, 'pn-image' ) 
            }
            <NumberControl
                label="PID"
                isShiftStepEnabled={ true }
                onChange={ value => { setAttributes( {pid: value})} }
                shiftStep={ 10 }
                value={ attributes.pid }
            />
        </p>

    );
}

NumberControl value updates pid and the block with the correct number value when changed, that all works fine, but if I preview the page I see the default value of pid showing, not the one I've just change it to. Same if I update the page to save it; console.log shows the new pid value but when reloaded into the edit page, pid reverts to the default value. Maybe I'm staring too hard but for the life of me I can't see what's wrong. Also, I'm fairly new to this so I may be doing something idiotic.

save & edit called from registerBlockType in index.js:

import { registerBlockType } from '@wordpress/blocks';

import './style.scss';

import Edit from './edit';
import Save from './save';

registerBlockType( 'pn-displayblocks/pn-image', {
    edit: Edit,
    save: Save,
} );

Attributes in block.json:

{
    "apiVersion": 2,
    "name": "pn-displayblocks/pn-image",
    "version": "0.1.0",
    "title": "Pn Image",
    "category": "widgets",
    "icon": "smiley",
    "description": "Example block written with ESNext standard and JSX support – build step required.",
    "supports": {
        "html": false
    },
    "textdomain": "pn-displayblocks",
    "editorScript": "file:./build/index.js",
    "editorStyle": "file:./build/index.css",
    "style": "file:./build/style-index.css",

    "attributes": {
        "pid": {
            "type": "text",
            "default": "444"
        }
    }
}

it's not clear what's the relationship between Edit and save. Also save can't be named lower letter, because you output a component. Please show the lines where either Edit invokes save, or the other way around. — windmaomao
– windmaomao, Commented Sep 11, 2021 at 17:05
You're right, it's inconsistent but changing save to Save doesn't appear to help. I've added code to my op, hopefully to clarify — Kim Aldis
– Kim Aldis, Commented Sep 12, 2021 at 7:12

ValentinG · Accepted Answer · 2021-09-11 17:17:47Z

1

Did you try to store your attributes in comments of block ?

In according with documentation gutenberg :

The available source values are:
– (no value) – when no source is specified then data is stored in the block’s comment delimiter.
– attribute – data is stored in an HTML element attribute.
– text – data is stored in HTML text.
– html – data is stored in HTML. This is typically used by RichText.
– query – data is stored as an array of objects.
– meta – data is stored in post meta (deprecated)

Can you try with ?

 "pid": {
    "type": "text",
    "default": "444"
  }

answered Sep 11, 2021 at 17:17

ValentinG

2164 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kim Aldis Over a year ago

This partially fixes. Refreshing the page editor after saving now shows up the new, changed value from the NumberControl but when previewed, attributes.pid is showing in the page as undefined.

Kim Aldis Over a year ago

OK. I have it. export default function Save( attributes ) should be export default function Save( {attributes} )

ValentinG Over a year ago

Nice, maybe you can edit your post with the solution

Collectives™ on Stack Overflow

changed attributes not waving with Wordpress block

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related