Получить выбранный блок каждый раз, когда выбран новый блок в Гутенберге

На чтение 3 мин Опубликовано 06.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Объяснение:

Вопрос или проблема

Я хочу получить выбранный блок (вложенный блок) каждый раз, когда выбирается новый блок.

Я пробую следующее:

edit() {
  const selectedBlock = wp.data.select( 'core/block-editor' ).getSelectedBlock();
  
  useEffect( () => {
    console.log( selectedBlock );
  }, [ selectedBlock ] );
})

Выбранный блок возвращается только тогда, когда блок отображается. Ничего не происходит, когда я выбираю новый вложенный блок. Это работает только когда я кликаю вне родительского блока, а затем снова кликаю на вложенный блок.

Короче говоря, используйте хук useSelect() или утилиту withSelect() HOC из @wordpress/data, чтобы создать подписку на выбранное значение. Любой из них вызовет рендеринг, когда выбранное значение изменяется в состоянии:

import { useSelect } from '@wordpress/data';

edit() {
  const selectedBlock = useSelect(
    ( select ) => select( 'core/block-editor' ).getSelectedBlock()
  );

  useEffect( () => {
    console.log( selectedBlock );
  }, [ selectedBlock ] );
}

Ответ или решение

Для достижения вашей цели по отслеживанию выбранного блока (внутреннего блока) в редакторе Gutenberg каждый раз, когда пользователь выбирает новый блок, вы можете использовать хук useSelect из пакета @wordpress/data. Это позволит вам подписаться на изменения состояния и гарантировать, что ваш компонент будет перерисовываться при изменении выбранного блока.

Вот пошаговое объяснение и код, который решает вашу проблему:

Импортируйте необходимые зависимости: Вам нужно будет импортировать useSelect и, возможно, useEffect из React, если вы еще этого не сделали.
Используйте хук useSelect: Вместо непосредственно получения выбранного блока в методе edit, используйте хук useSelect, чтобы автоматически обновлять состояние, когда выбранный блок изменяется.
Используйте useEffect для побочных эффектов: Вы можете задать useEffect, который будет реагировать на изменение selectedBlock, чтобы выполнять любые дополнительные действия, такие как логирование информации.

Вот обновленный код для вашего компонента:

import { useSelect } from '@wordpress/data';
import { useEffect } from '@wordpress/element';

const YourBlockEditComponent = () => {
  const selectedBlock = useSelect(
    (select) => select('core/block-editor').getSelectedBlock()
  );

  useEffect(() => {
    if (selectedBlock) {
      console.log('Выбранный блок:', selectedBlock);
    }
  }, [selectedBlock]);

  return (
    <div>
      {/* Ваш код для рендеринга блока */}
    </div>
  );
};

export default YourBlockEditComponent;

Объяснение:

useSelect: Этот хук получает текущий выбранный блок из редактора, и каждый раз, когда входит, он будет вызывать перерисовку компонента при изменении выбранного блока.
useEffect: Здесь мы передаем массив зависимостей [selectedBlock], что означает, что этот эффект будет выполнен каждый раз, когда selectedBlock изменяется. Вы можете использовать это для выполнения любых действий, связанных с выбранным блоком, например логирование или другие побочные эффекты.

Таким образом, с использованием useSelect и useEffect вы можете эффективно отслеживать и реагировать на изменения выбранного блока в редакторе Gutenberg.