Get the value of a Combobox select in WP editor

Question

In a Wordpress installation I have a custom post type and a metabox with custom post_meta fields.

Parent dropdown field in Gutenberg's sidebar used to be a <select> element. I have some scripts that onChange trigger the hide/show of different fields making them conditional, depending whether the page being edited is a parent or child:

$(document).on("change", ".editor-page-attributes__parent select", function(){
    toggleFields();
}

The options in the <select> have IDs as values so I could get Title and ID for the selected parent and dynamically show some data in the metabox for my user:

var dropdown = $('.editor-page-attributes__parent select');
var parentName = dropdown.find(':selected').text();
var parentId = dropdown.val();

Since v5.6 Wordpress has replaced that select element with a Combo Box. I have tried to get the same data onChange and only had some success using blur:

$(document).on("blur", ".editor-page-attributes__parent .components-combobox-control__input", function(){
    toggleFields();
    var parentName = dropdown.val();
})

I was only able to get the page title since this combobox now has an input element that's missing IDs, like this one:

<input id="components-form-token-input-0" type="text" class="components-combobox-control__input components-form-token-field__input" value="Page Name Here">

I have also tried doing an Ajax, to retrieve the ID using get_page_by_title() but it does not always work because pages might have the same title and editor also adds dashes and spaces in names for hierarchy levels.

How can I get the associated ID of the page selected in the Parent Combobox on change?

Answer 1

After some time reading the Editor Documentation I found the proper solution. This is how you can listen to changes and get the id of the Parent Combobox select in the WP Editor:

wp.data.subscribe( function () {
  var newParent = wp.data.select('core/editor').getEditedPostAttribute('parent');
  console.log(newParent);
} );

wp.data.subscribe is called every single time a change occurs in the current state while editing posts in the editor, so the listener function is called every single time. We can avoid that with a simple variable check when there is an actual change to the field we want. It behaves as Redux subscribe without unsubscribe and only one listener.

To also check for the current post type we are editing we can use getCurrentPostType:

wp.data.select('core/editor').getCurrentPostType();

This is the full code for this problem for future reference:

if (wp.data.select('core/editor').getCurrentPostType() == 'cpt_name') {
 const getPostParent = () => wp.data.select('core/editor').getEditedPostAttribute('parent');

 // set initial parent
 let postParent = getPostParent();

 wp.data.subscribe(() => {

    // get current parent
    const newPostParent = getPostParent();    

    // only if parent changes
    if( postParent !== newPostParent ) {
      // Do what we want after parent changed
         toggleFields();
    }

    // update the variable
    postParent = newPostParent;

 });

}