워드프레스 에디터에서 핵심 javascript 가 불러와지지 않는 문제 수정

개요

window.wp나 wp 모두 개발자가 만든 자바스크립트 내에서 undefined를 뿜어내며 불러와지지 않는 문제이다. 어느 날 갑자기 잘 되던 코드가 안되서 원인을 찾다가 우여곡절 끝에 때려맞춰서 문제를 해결했다.

---

문제를 상세하게 보기

동적 블록 만들기 튜토리얼 결과, 문제가 발생했다.. 본래 작동하다가, 어느 날 갑자기 작동하지 않아 에디터 상에서 블록을 불러올 수 없었다. 에러 메시지를 확인해보니 다음과 같았다.

recent-posts-block.js?ver=5.3.2:6 Uncaught TypeError: Cannot read property 'element' of undefined
    at recent-posts-block.js?ver=5.3.2:6
    at recent-posts-block.js?ver=5.3.2:134

저 부분이 어디냐구?

var el = wp.element.createElement

이 부분이다. 그러니까 저 부분은 window.wp를 wp로 감싼 형태라서 실질적으로 window에 wp가 정의되지 않았다는 문제라고 보면 된다. 본래 에디터가 로딩되면 wp도 자동으로 만들어지기 때문에 이때까지 이런 에러는 일어난 적도 없었고 일어날 리도 없었다. 근데 문제가 생겼다.

이런 문제가 갑자기 왜 발생했는지는 모르겠지만 내부적으로 워드프레스가 돌아가는 방식이 미묘하게 바뀐 게 원인이라고밖에 설명할 수 없었다. 플러그인을 바꾼 것도 아니고, 여하튼 규정할 수 있는 원인이 없었다. 어쨌든 문제가 발생했으니 고쳐야 할 것 아닌가..

---

문제를 고쳐가는 과정

저 문제가 발생하는 이유는 워드프레스 구텐베르크, 즉 블록 에디터의 핵심 자바스크립트 라이브러리들이 로딩되기 전에 직접 만든 js 파일이 로딩되기 때문이다. 그래서 강제적으로 로딩 순서를 조정해줄 수 밖에 없었다. 아래 코드는 문제가 되는 코드이다. 기가 찬 점은 공식 문서에서의 예문과 거의 다를 바가 없다는 점이다.

function ezkorry_recent_posts_register()
{

  wp_register_script(
    'ezkorry_recent_posts',
    get_stylesheet_directory_uri() . '/editor/recent-posts-block.js'
  );

  register_block_type('ezkorry/recent-posts', array(
    'editor_script' => 'ezkorry_recent_posts',
    'render_callback' => 'ezkorry_recent_posts_render'

  ));
}
add_action('init', 'ezkorry_recent_posts_register');

add_action 부분 수정 시도 (실패)

액션 실행의 우선순의를 설정해주는 세 번째 파라미터에 50과 같은 큰 숫자를 적어도 변함이 없었다. 그렇다고 enqueue_block_editor_assets를 액션 후크로 쓰자니, 동적 블록 관련 기능은 저 후크로 쓰면 안되므로 패스했다. 아래와 같은 코드는 문제를 해결해주지 않았다.

// 문제가 해결 안 돼!
add_action('init', 'ezkorry_recent_posts_register', 50);

// 이것도!
add_action( 'enqueue_block_editor_assets', 'ezkorry_recent_posts_script_enqueue' );

dependency 조정 (성공)

아래 코드의 wp_register_script 함수는 세 번째 인수로써 의존하고 있는 코드를 명시할 수 있다. 이는 wp_enqueue_script 함수도 마찬가지이다. 그래서 이 세번째 인수에 블록 에디터와 관련된 핵심 요소를 집어넣으면 되지 않을까 하고 검색해보았다. 공식 문서를 살펴보면 알겠지만, 워드프레스 코어 단에서 등록된 스크립트의 종류가 굉장히 많음을 알 수 있다. 여기서 도대체 무엇일까. 무엇일까.

불행히도, 내가 원했던 후크는 여기에 없었다! 계속해서 구글링한 결과 정답을 찾게 되었다. (사실상 거의 그냥 때려맞춘 거나 마찬가지였다.) wp-editor 만 의존성에 추가해주면 된다. 아래는 그 내용을 적용하여, 원래 내용에서 단 1줄만 추가한 내용이다.

function ezkorry_recent_posts_register()
{

  wp_register_script(
    'ezkorry_recent_posts',
    get_stylesheet_directory_uri() . '/editor/recent-posts-block.js',
    array('wp-editor')
  );

  register_block_type('ezkorry/recent-posts', array(
    'editor_script' => 'ezkorry_recent_posts',
    'render_callback' => 'ezkorry_recent_posts_render'

  ));
}
add_action('init', 'ezkorry_recent_posts_register');

---

결론

워드프레스가 은근히 딱딱 정리되지 않아서 개발하기 힘들다. php가 대세가 아니어서 그런가.