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.