Block Data changes after field change

• modemlooper

• March 13, 2022 at 11:51 am

I’m trying to get a field from another block during onchange event but the block data has the field name on first load but as soon as you change a field the blocks data changes from field name to key. This is making it impossible to parse the data out of a block.

var instance = new acf.Model({
    events: {
        'change': 'onChange',
    },
    onChange: function(e, $el){
        e.preventDefault();

        const editor = wp.data.select("core/block-editor");
        
        // THIS CHANGES THE ATTRIBUTES DATA TO KEYS WHEN THE FIRST LOAD IS FIELD NAME
        const blocks = editor.getBlocks();
        console.log(blocks);
        
        const block = editor.getSelectedBlock(); 

        if (!block) {
            return;
        }

        // THIS CHANGES THE ATTRIBUTES DATA TO KEYS WHEN THE FIRST LOAD IS FIELD NAME
        console.log(block.attributes.data);

    }
});

• modemlooper

• March 13, 2022 at 12:24 pm

found related topic, this seems like a huge issue.

https://support.advancedcustomfields.com/forums/topic/react-solution-to-the-change-of-field-names/

• modemlooper

• March 13, 2022 at 1:19 pm

Well, I think I found a solution to this in the most Gutenberg way possible.

Set block template javascript variable in the template, then read that variable instead of relying on wp.data.select(“core/block-editor”).

Since Gutenberg is all about saving the data into the html this seemed like the best way to get field data from other blocks.

<?php
// Dynamic block ID.
$block_id = 'repeater-' . $block['id'];

$blockClasses = implode( ' ', array( $block['className'] ) );

$per_page = get_field( 'per_page' );

$allowed_blocks = array( 'acf/card' );

?>

<div id="<?php echo $block_id; ?>" class="<?php echo $blockClasses; ?>">
	<InnerBlocks templateLock="false" allowedBlocks="<?php echo esc_attr( wp_json_encode( $allowed_blocks ) ); ?>"/>
</div>
<div class="items-repeat"></div>

<script>
	var <?php echo $block['id']; ?> = {
	   'per_page': <?php echo $per_page; ?>
	}
</script>

Then in my javascript onchange I can get the block / field from the variable

window[block.attributes.id].per_page

• modemlooper

• March 13, 2022 at 6:32 pm

I found another option, you can add to wp.data.dispatch(‘core/editor’) meta that isn’t saved and can be sorta a transient between blocks.

Register a meta field to a post type and then use dispatch to save data. The interesting thing about this is you don’t need to save it to database as Gutenberg editor has an in memory data store for meta until you actually hit the save button.

	register_post_meta(
		'post',
		'acf_sync',
		array(
			'auth_callback'     => function() {
				return current_user_can( 'edit_posts' );
			},
			'sanitize_callback' => 'sanitize_text_field',
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
		)
	);

wp.data.dispatch('core/editor').editPost({meta: {acf_sync: JSON.stringify(sync)}});

const meta = wp.data.select('core/editor').getEditedPostAttribute('meta').acf_sync;