Получить значение Combobox select в редакторе WP

В установке Wordpress у меня есть пользовательский тип записи и метабокс с пользовательскими полями post_meta.

Родительское выпадающее поле на боковой панели Гутенберга раньше было элементом <select>. У меня есть несколько сценариев, которые onChange запускают скрытие/отображение различных полей, делая их условными, в зависимости от того, является ли редактируемая страница родительской или дочерней:

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

Параметры в <select> имеют идентификаторы в качестве значений, поэтому я могу получить заголовок и идентификатор для выбранного родителя и динамически отображать некоторые данные в метабоксе для моего пользователя:

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

Начиная с версии 5.6 Wordpress заменил этот элемент выбора на поле со списком. Я пытался получить те же данные onChange и добился некоторого успеха только с помощью blur:

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

Я смог получить только заголовок страницы, так как в этом поле со списком теперь есть элемент ввода, в котором отсутствуют идентификаторы, например этот:

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

Я также пытался использовать Ajax для получения идентификатора с помощью get_page_by_title(), но это не всегда работает, потому что страницы могут иметь одинаковый заголовок, а редактор также добавляет тире и пробелы в именах для уровней иерархии.

Как я могу получить связанный идентификатор страницы, выбранной в родительском поле со списком, при изменении?


javascript wordpress jquery combobox wordpress-gutenberg
person GeorgeP    schedule 02.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Через некоторое время, прочитав документацию редактора, я нашел правильное решение. Вот как вы можете прослушивать изменения и получать идентификатор родительского поля со списком в редакторе WP:

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

wp.data.subscribe вызывается каждый раз, когда происходит изменение текущего состояния при редактировании сообщений в редакторе, поэтому функция слушателя вызывается каждый раз. Мы можем избежать этого с помощью простой проверки переменных, когда есть фактическое изменение в нужном нам поле. Он ведет себя как подписка Redux без отписки и только один слушатель.

Чтобы также проверить текущий тип сообщения, которое мы редактируем, мы можем использовать получитьCurrentPostType:

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

Это полный код для этой проблемы для дальнейшего использования:

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;

 });

}
person GeorgeP    schedule 03.02.2021