Possible to modify/format uesr-submitted data behind the scenes?

[maxxwv]

Describe the bug
I tried looking this up but didn't come up with anything, so sorry if it's a repeat - please point me to the relevant threads and I'll take it from there. I'm trying to put together a block that will allow my clients to add floor plans inside the content stream. I've got some data I'm wanting to track, but starting small I'm just trying to get each field working before I move onto the next. I've got the name field working just fine, but already ran into what might be bug with the cost field. I want the user to be able to enter a plain number, while the system outputs the data in a monetary format. This is what I've got:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const {
	RichText
} = wp.editor;
const {
	TextControl
} = wp.components;
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2 });

registerBlockType(
	'aw/floor-plan-in-content', {
		title: __('Floor Plan'),
		icon: 'index-card',
		category: 'common',
		attributes:{
			title: {
				type: 'string',
				source: 'text',
				selector: '.fp_header'
			},
			cost: {
				type: 'string',
				source: 'text',
				selector: '.cost',
			}
		},
		edit: props => {
			const {
				className,
				attributes: {
					title,
					cost
				}
			} = props;
			const onChangeTitle = value => {
				props.setAttributes({ title: value });
			};
			const onChangeCost = value =>{
				props.setAttributes({ cost: value });
			};
			return(
				<div className={ props.className }>
					<RichText
						tagName="h2"
						className = "fp_header widefat"
						placeholder = {__("Floor Plan name")}
						keepPlaceholderOnFocus={ true }
						value = { title }
						onChange= { onChangeTitle }
						multiline={ false }
						formattingControls={ [] }
					/>
					<TextControl
						className = "cost widefat"
						placeHolder = { __("Cost") }
						keepPlaceholderOnFocus = { true }
						value = { cost }
						onChange = { onChangeCost }
					/>
				</div>
			);
		},
		save: props => {
			const {
				attributes: {
					title,
					cost
				}
			} = props;
			let costFormatted = formatter.format(cost);
			return (
				<div className={"floorplan-display" + className }>
					<RichText.Content
						tagName = "h2"
						className = "fp_header widefat"
						value = { title }
					/>
				{cost && (
					<div className="cost widefat">{ costFormatted }</div>
				)}
				</div>
			);
		}
	}
);

If I format the cost in the onChangeCost() function, I get NaN because it looks like GB simply appends any new digits entered into the field to the dataset currently saved, and trying to type "123,456" turns into "$1.00", "$1.001", "$1.0012", etc. Obviously this won't do. However, trying to format the output results in this:

Block validation: Block validation failed for `aw/floor-plan-in-content` (

Expected:

<div class="wp-block-aw-floor-plan-in-content floorplan-display"><h2 class="fp_header widefat"></h2><div class="cost widefat">NaN</div></div>

Actual:

<div class="wp-block-aw-floor-plan-in-content floorplan-display"><h2 class="fp_header widefat"></h2><div class="cost widefat">$121,120.00</div></div>

Obviously, the actual output is what I want. This also brings up the fact that it all appears to work just fine until I refresh the entire page - none of this validation or sanitizing is reflected in the actual UI.

To Reproduce
Create a custom block with the code above. Add '123456' to the 'cost' field, update the post, then refresh the page.

Expected behavior
I should see '$123,456.00' in the 'cost' field. I see 'NaN' and the warning that the block has been modified externally.

Desktop (please complete the following information):

• Windows 10 development machine, centOS 6 server
• FireFox, Chrome, Edge, Opera
• Most recent version of all browsers

Additional context

• GB 3.9.0
• WP 4.9.8
• PHP 7.2 (in case that matters)

[danielbachhuber]

Hi @maxxwv,

To the best of my knowledge, this use case isn't yet possible. #8473 and #10204 are a couple related scenarios I've run into.

[maxxwv]

@danielbachhuber - Thanks for adding the labels, but I'm not sure I would classify this as a question. Unless I'm reading this wrong, it sounds like developers don't have the ability to modify, sanitize, or validate user-submitted data behind the scenes - which certainly feels like a massive issue. We're being asked to trust the user completely and cede any and all control of the output or even basic viability of the data.

[danielbachhuber]

Sure. I've noted your opinion.

[youknowriad]

It should be possible to do this:

value={ transformToNumber( formattedAttribute ) }
onChange={ number => setAttributes( { formattedAttribute: format( number ) } ) }

and just store your attribute as a formatted number.

I hope this helps.