changed attributes not waving with Wordpress block - reactjs

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"
}
}
}

Answer 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"
}