Word press Gutenberg 블록 안에서 Add on click 이벤트

Word press Gutenberg 블록 안에서 Add on click 이벤트

구텐베르크 블록 안에 이벤트를 추가하는 방법을 찾기 위해 곳곳을 뒤졌습니다.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);
    }
});

프론트엔드에는 이전과 마찬가지로 정적 html이 표시됩니다.저장기능의 구성요소에 클릭시 이벤트를 추가하면 직렬화 중에 제거되므로 땀 흘릴 필요가 없습니다.모든 것이 블록 이전과 같이 작동합니다.

그러나 편집기 측에서는 편집 함수의 반환 요소에 있는 모든 요소에 이벤트를 추가할 수 있습니다.

다음은 es6에서 수행하는 방법입니다.

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

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

또는 ines2015:

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 -->

언급URL : https://stackoverflow.com/questions/53072701/wordpress-add-onclick-event-inside-gutenberg-block