Wordpress의 Gutenberg 블록 팝업에 사용자 정의 CSS 규칙 추가

Question

다음은 제가 Wordpress 편집기에서 작성한 구텐베르그 블록입니다.

구텐베르그 에디터 블록의 팝업 위치를 살짝 변경하고 싶습니다.

이전 단락 블록이 이전 블록 앞에 나타나기 때문에 선택할 수 없습니다.

아래 그림과 같이 개발자 모드에서 문제를 해결하기 위한 올바른 규칙을 찾았습니다

그래서 editor-style.css 파일에 CSS 규칙을 추가했습니다:

으아아아

물론, 하위 테마의 function.php에 에디터 스타일을 추가했습니다.

으아아아

<style> 태그가 실제로 페이지에 추가되었습니다:

그러나 WordPress에는 내가 작성한 규칙의 CSS 선택자 앞에도 .editor-styles-wrapper 이라는 접두어가 붙었습니다. 그렇기 때문에 팝업에서는 작동하지 않는다고 생각합니다.

사용자 정의 구텐베르크 블록을 위한 많은 솔루션과 달리 팝업 자체에 CSS 규칙을 추가하는 방법을 찾을 수 없었습니다. 이 목표를 어떻게 달성할 수 있나요?

미리 감사드립니다.

Answer 1

내 생각에는 add_editor_style()는 당신이 생각하는 것과는 다릅니다. 다음은 백엔드 편집기에서 CSS 및 JS 파일을 로드하는 예입니다.

으아악

Answer 2

드디어 알았어요.

에디터 스타일을 추가하기 전에 after_setup_them 후크를 사용했습니다.

으아아아

하지만 구텐베르크 편집기의 경우에는 다른 후크를 사용하는 것이 좋습니다. enqueue_block_editor_assets 후크는 WordPress 5.0에서 도입되었습니다.

이제 제가 쓰는 글은 다음과 같습니다.

으아아아

이제 내 editor-style.css 中，带有 .editor-styles-wrapper 的 css 规则适用于正文，任何没有 .editor-styles-wrapper의 규칙이 팝업 자체와 그 안에 있는 다른 요소에 적용됩니다.