Meta values not saved, meta changes to empty array on update

[baerkins]

Description

I have a block that updates meta values, but when I click 'update', the values are not saved for the post. Additionally, the meta values I get from useEntityProp load as an object with meta key/values, but turns into an empty array when Update is clicked. If I reload the post, old values are still there, but new values are not.

I have a question on Stack Overflow as well with more details: https://wordpress.stackexchange.com/questions/419214/block-editor-meta-values-not-saved-meta-changes-to-empty-array-on-update

Step-by-step reproduction instructions

I followed the Meta Boxes demo exactly:

I registered meta:

<?php
// register custom meta tag field
function myguten_register_post_meta() {
    register_post_meta( 'post', 'myguten_meta_block_field', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ) );
}
add_action( 'init', 'myguten_register_post_meta' );

I setup a js (and block.json) file for the block:

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType( 'myguten/meta-block', {
    edit: ( { setAttributes, attributes } ) => {
        const blockProps = useBlockProps();
        const postType = useSelect(
            ( select ) => select( 'core/editor' ).getCurrentPostType(),
            []
        );

        const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
		console.log(meta);
        const metaFieldValue = meta[ 'myguten_meta_block_field' ];
        const updateMetaValue = ( newValue ) => {
            setMeta( { ...meta, myguten_meta_block_field: newValue } );
        };

        return (
            <div { ...blockProps }>
                <TextControl
                    label="Meta Block Field"
                    value={ metaFieldValue }
                    onChange={ updateMetaValue }
                />
            </div>
        );
    },

    // No information saved to the block.
    // Data is saved to post meta via the hook.
    save: () => {
        return null;
    },
} );

When I look at the result of console.log(meta) on initial load, I get a result of {myguten_meta_block_field: ''}.

If I add 'Some Text' to the TextControl, I get {myguten_meta_block_field: 'Some Text'} logged.

When I click 'update', I get [] - no meta values at all.

If I reload, the meta value did not save to Some Text.

Screenshots, screen recording, code snippet

GutenbergMeta.mp4

Environment info

• WP v6.3.1, gutenberg plugin not installed
• PHP 8.2
• Chrome v117 on Mac 12.6.5

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

@baerkins, do you have "Custom Fields" enabled in the editor? There's a known conflict #23078.

[baerkins]

@Mamaduka - "Custom Fields" is not enabled. I did enable it just to check, and the same issue occurred.

[talldan]

I tested it, but it's not something I was able to reproduce.

@baerkins Have you tried this on a completely fresh WordPress installation with no other plugins? I wonder if there might be some meta fields being registered incorrectly somewhere on your site. The fact that it happens on 'update' implies that it's a server-side issue, and the value from the REST API is wrong, as that's when the block editor will reconcile itself with the server.

You could have a look in the network tab of your browser dev tools to confirm it's the data from the REST API, you'd be looking for the latest POST request to the /posts endpoint. For me the data is sent like this as an object:

and returned as an object:

If your data is sent as an object but returned as an array, then it probably means some misconfiguration on your site.

[baerkins]

@talldan - thanks for your response. I took a look at network and actually saw nothing for /posts. I dug a little more, and realized that the register_post_meta function was called in the init hook, but the method I added the code to was only being called if is_admin() is true (this work is converting an existing metabox, hence the check). This is why the meta loaded on the admin side (as register_post_meta was called), but not the REST side (where register_post_meta was called because is_admin() returns false) 🤪

Thanks for taking the time to be a rubber duck everyone. I was truly pounding my head against my desk :)