WordPress 6.0(add_editor_style)은 Gutenberg 편집기에서 style.css를 로드하지 않습니다.

Question

저는 맞춤형 WordPress 블록 테마를 만들기 위해 Udemy WordPress 강좌를 수강할 예정입니다. function.php에 블록 유형을 성공적으로 등록했으며 구텐베르그 편집기에서 내 블록을 선택할 수 있습니다.

튜토리얼에서는 CSS가 프런트엔드에도 로드되도록 다음 방법을 사용하여 구텐베르그 블록 요소의 스타일을 로드할 것을 제안했습니다.

으아악

어쨌든, 내가 무엇을 하든 Gutenberg는 내 블록의 style.css 파일을 로드하지 않습니다.

구텐베르크 백엔드의 이미지

팁이 있나요? 무엇이 누락되었을 수 있으며 문제를 어떻게 디버깅할 수 있습니까?

정말 감사합니다!

Answer 1

관리자 CSS에도 몇 가지 문제가 있습니다. 다음과 같이 admin style.css에서 CSS를 가져오면 스타일 로딩이 중단되는 것으로 나타났습니다.

으아악

이상하게도 다음과 같이 따옴표 없이도 작동합니다.

으아악

하지만 이것이 좋은 습관인지 확실하지 않습니다... 가장 좋은 방법은 import 문을 사용하는 대신 다음과 같은 외부 라이브러리를 로드하는 것입니다.

으아악

다른 분들에게도 도움이 되길 바랍니다!

Answer 2

블록 기반 테마< /a>에서 wp-block-styles는 편집기와 프런트엔드에서 스타일시트를 로드하는 데 사용됩니다. TwentyTwentyTwo 테마는 동일한 기술을 사용합니다. 블록 기반 테마가 비교적 새로운 것이므로 (현재) 오래된 테마 튜토리얼을 따랐을 수도 있습니다.

으아아아

그래도 스타일 로드가 표시되지 않으면 대상으로 삼는 블록의 클래스 이름이 HTML 태그와 일치하는지 확인하세요.

추신. 캐시된 버전의 편집기가 표시되지 않도록 항상 브라우저 캐시/강제 새로 고침을 삭제하여 이는 매우 일반적이지만 간과되는 많은 문제의 원인입니다.