Update post meta custom field using block editor

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #30
    MatSipe
    Participant

    I have a custom mapping plugin that (among other things) saves/updates coordinates to a custom field when the user drags a map marker within a custom block. Everything works as expected except for the fact that the custom field is only stored during the initial interaction. For some reason, it is not updating the post meta during various events.

    The question is how to update post meta in a custom field in response to a user interaction in the editor?

    I’ve tried both setAttributes and wp.data.dispatch but must be missing something.

    // register custom field
    add_action('init', 'register_block_attributes');
    function register_block_attributes()
    {
        register_meta('post', 'api_coordinates_pp', array(
            'object_subtype' => 'locations',
            'show_in_rest' => true,
            'single' => true,
            'type' => 'string',
            'auth_callback' => function() {
                return current_user_can( 'edit_posts' );
            }
        ));
    }
    
    // in registerBlockType...
    attributes: {
        api_coordinates_pp: {
            type: "string",
            source: "meta", // this is a custom field!
            meta: "api_coordinates_pp",
        },
        lat: {
            type: "string",
            selector: "div.map-pp",
            source: "attribute",
            attribute: "data-lat",
        },
        lon: {
            type: "string",
            selector: "div.map-pp",
            source: "attribute",
            attribute: "data-lon",
        },
    
    // an event where I need to update the post meta
    marker.on("dragend", function (e) {
        const ll = e.target.getLatLng();
        // these work as expected
        props.setAttributes({ lat: ll.lat });
        props.setAttributes({ lon: ll.lng });
    
        // this doesn't update the value in the custom field
        props.setAttributes({
            api_coordinates_pp: ll.lat + "," + ll.lng,
        });
        
        // this also does not work, the value never gets updated
        wp.data
            .dispatch("core/editor")
            .editPost({ meta: { api_coordinates_pp: ll.lat + "," + ll.lng } });
    
        map.setView([ll.lat, ll.lng], ll.zoom, { animation: true });
    });
    

    UPDATE: I also tried this, calling updateMetaCoordinates where appropriate, but same issue, the changes are not saved.

    const postType = useSelect(
        (select) => select("core/editor").getCurrentPostType(),
        []
    );
    const [meta, setMeta] = useEntityProp("postType", postType, "meta");
    const updateMetaCoordinates = (newValue) => {
        console.log(newValue);
        setMeta({ ...meta, api_coordinates_pp: newValue });
    };
    

    ANOTHER UPDATE: I tried useDispatch and the same thing. It works the first time but subsequent edits are never saved.

    const { editPost } = useDispatch("core/editor");
    const updateMetaCoordinates = (newValue) => {
        editPost({ meta: { api_coordinates_pp: newValue } });
    };
    

    Basically, it seems like all of these work the very first time, but nothing I do allows me to actually change the meta values, not even before the initial post save. The only way to actuate a change is to delete the meta field for api_coordinates_pp and then perform an action that causes a change.

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.