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

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

0 голосов
/ 30 октября 2018

Я искал везде, чтобы выяснить, как добавить событие в блок Гутенберга. Я работаю над добавлением аккордеонной системы с использованием 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);
    }
});

1 Ответ

0 голосов
/ 29 января 2019

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

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

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

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

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

или в es2015: 

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

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

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

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