워드프레스 구텐베르크(Gutenberg) Editor의 분리자(Separator) 이슈

qpress 2020년 1월 29일 90

구텐베르크 에디터의 분리자(Separator) 블럭을 사용할 때, 에디팅화면과 Front-end 화면이 다르게 나타나는 경우가 있다.

에디터 화면
Front-end

관리자의 에디터 환경에서는 자동으로 로딩되는 css 파일(load-style.php)이 Front-end에서 로딩이 되지 않기 때문에 나타나는 현상으로 보인다.

무언가 설정을 바꿔줘야 하는 것인지 알수가 없어서 일단, 에디터에서 로딩되는 해당 CSS 부분을 Front-end의 CSS 파일(예를 들면 style.css)로 다음과 같이 복사해줌으로써 해결은 된듯 하다.(더 나은 해결책이 있으면 댓글 부탁 드립니다.)

.wp-block-separator.is-style-wide{border-bottom-width:1px}
.wp-block-separator.is-style-dots{background:none!important;border:none;text-align:center;max-width:none;line-height:1;height:auto}
.wp-block-separator.is-style-dots:before{content:"\00b7 \00b7 \00b7";color:currentColor;font-size:20px;letter-spacing:2em;padding-left:2em;font-family:serif}
.wp-block-separator{border:none;border-bottom:2px solid #8f98a1;margin-left:auto;margin-right:auto}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots){max-width:100px}
.wp-block-separator.has-background:not(.is-style-dots){border-bottom:none;height:1px}
.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots){height:2px}