Is It Possible to Use the Gutenberg Block Editor With Custom Fields in a Custom

Hi Samuel,
If you want to do something when a custom field is saved, you should hook into the process that actually saves the field into the postmeta table. There are a number of possible hooks. Checkout the source code for update_metadata(). Blocks of red comment text precede each hook, so they are easy to find within the source code.

You should be able to use the block editor in other UI elements. I’m not so sure you can alter the default custom fields meta box, but you could create your own meta box that utilizes the block editor. I’m not sure how you would actually do so, but I’m confident it’s possible.

Enabling the block editor here in the forums is accomplished with the Blocks Everywhere plugin. It’s meant specifically for this www.ads-software.com site, but maybe you can gain insight into what’s involved by examining the source code.

Thanks!

I just checked the documentation. This is for the PHP side. I was hoping to hook into the JavaScript side of saving the post when the users click on the “Update” button of the Gutenberg Block Editor.

I asked ChatGPT and it said to use wp.data.subscribe(). Is that correct? Because I’m getting a “Maximum stack size exceeded” error.

• This reply was modified 1 year, 5 months ago by Samuel.

Sorry, I don’t know enough about wp.data to speculate on the accuracy of ChatGPT. You could add a JS click event listener to the Update button element and have the related callback do whatever you need done.

I realized that I shouldn’t be saving the custom fields in a separate way. Isn’t there something I can hook it to that adds the custom fields to a list of things the editor saves when the “Update” button is clicked? I’m adding the custom fields dynamically to the block editor using JavaScript.

The block editor updates the post content via the REST API when Update is clicked. Other post properties are saved through independent requests. Sometimes via Ajax or the API when the field changes, or sometimes as a separate POST request that’s also triggered by the Update button. I’m not sure where your field data would be included with any of those.

Use your browser’s network developer tool to examine the payloads of various requests to see where your data is included. Whichever request that is would be a clue towards what you should do to save the data.

It could be your data isn’t included in any of those, in which case your JS would need to send its own request to save the data, either via Ajax or the API. Any DOM event could trigger your JS to initiate a save request. The field’s onchange event, or a click event on some other element. For example, the default custom fields meta box has separate update buttons for each field.

Thanks! I decided to create a custom REST API route but it’s not working. It’s giving me a “400 Bad Request” error. I don’t know what I did wrong. Is it okay if you take a look at my code?

I’m willing to take a look, but I’m nowhere near experienced with custom API routes. I’m not confident I’d be able to spot the cause of the error you’re experiencing. Getting some fresh eyes on a problem is always a good idea though.

Please do not post extensive code in forum replies. Instead place your code somewhere else publicly accessible, such as pastebin.com, gist.github.com, or your own server. Then just provide the link here.

Thanks! I made some changes and it’s now giving me a 404 Not Found error. Here’s a link to the gist.

404 error indicates you’ve merely built the wrong API URL in your scripts. You have this:
guidePostsAjax.ajaxUrl + '/guide-posts/v1/save-locations/' + editor.getCurrentPostId()
but the value of guidePostsAjax.ajaxUrl is something like "https://example.com/wp-json/guide-posts/v1". Thus your URL has the namespace in it twice!

Maybe there are other problems less obvious to me. Resolve the immediate problem first and see what happens. What happens then will give us a better clue about what else might be wrong, if anything. Maybe we’ll be lucky and it’ll all work! ??

Thanks! It’s finally working with some help from you and another guy from StackExchange. Would you know why this code block is working except it’s not adding the “Add Media” button?

Here’s the gist.

Sorry, I don’t know a thing about implementing the editor in JS.

However, I noticed in /wp-admin/js/editor.js that the setting for the media button is mediaButtons (line 1279). Not the media_buttons that you have. I’m not sure if that is meaningful or not, but it’s easy enough to give it a try.

I’ve tried both media_buttons and mediaButtons just to see if it will work. It didn’t fix it. Anyway. Thanks!