Wordpress Добавить событие onclick внутри блока Гутенберга

Я везде искал, чтобы понять, как добавить событие в блок Гутенберга. Я работаю над добавлением аккордеонной системы с помощью ACF и Foundation. Я создал блок, поля и шаблон с помощью ACF. Я бы хотел, чтобы мои пользователи могли открывать и закрывать аккордеон в визуальном режиме.

Я нашел следующий сценарий, который отслеживает изменение блоков. Единственная проблема в том, что он срабатывает до того, как все будет загружено, и мне пришлось использовать тайм-аут, чтобы блоки могли полностью загрузиться. Я не смог найти лучшего способа добиться этого. Какие-либо предложения?

const getBlockList = () => wp.data.select( 'core/editor' ).getBlocks();
let blockList = getBlockList();
wp.data.subscribe(() => {
    const newBlockList = getBlockList();
    const blockListChanged = newBlockList !== blockList;
    blockList = newBlockList;
    if ( blockListChanged ) {
        setTimeout(function(){
            jQuery(document).foundation();
            Foundation.reInit($('[data-accordion]'));
        }, 4000);
    }
});

javascript wordpress wordpress-gutenberg gutenberg-blocks
person James    schedule 30.10.2018    source источник
comment
Это не отвечает на ваш вопрос, но, к сведению, вы можете легко создавать блоки аккордеона с помощью API блока, без использования AFC. React имеет встроенные функции onclick. API-интерфейс блока может полностью заменить ACF для лучшего взаимодействия с пользователем.   -  person CyberJunkie    schedule 09.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

На переднем конце вы, как и раньше, получаете статический html. Если вы добавите событие щелчка к вашему компоненту в функции сохранения, оно будет отключено во время сериализации, поэтому не нужно там беспокоиться. Все работает как до блоков.

Однако на стороне редактора вы можете добавить событие к любому элементу в возвращаемом элементе функции редактирования:

Вот как это делается в es6:

const handleClick = (event) => {
  console.log(event)
}

const element = <div onClick={handleClick}>Click Me</div>;

or in es2015:

var handleClick = function handleClick(event) {
  console.log(event);
};

var element = React.createElement(
  "div",
  { onClick: handleClick },
  "Click Me"
);

Между прочим, это блок gutenber, а не его представление в памяти, отображаемое с помощью реакции.

<!-- wp:paragraph {"key": "value"} -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->
person snnsnn    schedule 29.01.2019