워드프레스 에디터에 테마 css 적용하기

최근에 테마 바꿈질에 정신을 못차리고 있는 요즘이지만.. 그 바꿈질을 하면서 간혹 어떤 테마는 에디터의 넓이라든가 폰트 등이 변경되는데 현재 사용 중인 테마는 적용이 되지 않기에 방법을 찾아보니 방법이 없는 것이 아니었다. 현재 테마는 기존 워드프레스의 클래식 에디터인 tinymce 에 대한 css 파일을 가지고 있지만 새롭게 바뀐 Gutenberg 에디터에 대한 css 파일은 존재하지가 않았다. 그래서 editor-block.css 파일을 생성하고 관련 스타일을 추가한 후에 아래 코드를 이용해 에디터 스타일을 적용해 줬다.

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'allium-fonts', allium_fonts_url() );
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap' );
    wp_enqueue_style( 'allium-block-editor', get_stylesheet_directory_uri() . "/editor-block.css", false, '1.0.0', 'all' );
}, 99 );

현재 테마인.. Allium 테마의 스타일을 참고해서 작성한 editor-block.css 파일의 코드는 아래와 같다.

.editor-default-block-appender textarea.block-editor-default-block-appender__content,
.editor-default-block-appender textarea.editor-default-block-appender__content,
.edit-post-visual-editor .block-editor-block-list__block,
.edit-post-visual-editor .editor-block-list__block {
	font-size: 16px;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.editor-default-block-appender textarea.block-editor-default-block-appender__content,
.editor-default-block-appender textarea.editor-default-block-appender__content {
	font-family: "Nunito Sans", sans-serif, 'Nanum Gothic';
}

.editor-post-title__block .editor-post-title__input {
	color: #020202;
	font-family: "Nunito Sans", sans-serif, 'Nanum Gothic';
  font-size: 38px;
  font-size: 2.375rem;
	font-weight: 700;
}

.edit-post-visual-editor h1,
.edit-post-visual-editor h2,
.edit-post-visual-editor h3,
.edit-post-visual-editor h4,
.edit-post-visual-editor h5,
.edit-post-visual-editor h6 {
	font-weight: 700;
}

.editor-block-list__block h1 {
  font-size: 32px;
  font-size: 2rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

.editor-block-list__block h2 {
  font-size: 26px;
  font-size: 1.625rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

.editor-block-list__block h3 {
  font-size: 23px;
  font-size: 1.4375rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

.editor-block-list__block h4 {
  font-size: 16px;
  font-size: 1rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

.editor-block-list__block h5 {
  font-size: 12px;
  font-size: 0.75rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
  -webkit-text-stroke: .35px;
  /* Hack to fix thin text in Windows */
}

.editor-block-list__block h6 {
  font-size: 10px;
  font-size: 0.625rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
  -webkit-text-stroke: .35px;
  /* Hack to fix thin text in Windows */
}

/* Main column width */

.editor-styles-wrapper {
	max-width: 100% !important; /* Override where editor-style.css is affecting this. */
}

.wp-block {
  max-width: 829px; /* Based on one-column post width; 829px + 30px to account for padding. */
  padding: 1.875rem;
}

/* Alignments */

.edit-post-visual-editor .alignleft {
	margin-right: 1.5em;
}

.edit-post-visual-editor .alignright {
	margin-left: 1.5em;
}

/* List styles */
.edit-post-visual-editor ul.wp-block-gallery {
    margin: 0 0 30px 0;
    padding: 0;
}

/* Quotes */
.editor-styles-wrapper .wp-block-pullquote blockquote {
    border-left: none;
}

.wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
  color: #555;
  border-left: 6px solid #04bfbf;
  font-family: "Roboto", sans-serif;
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 1.3;
  margin: 0 auto 26px;
  margin: 0 auto 1.625rem;
  padding: 15px;
  padding: 0.9375rem;
  position: relative;
}

.wp-block-image figcaption {
  text-align:center;
  font-size:0.8em;
}

css 코드를 잘 다루는 것이 아니기 때문에 다른 테마의 코드를 가져다가 일부분만 수정한 것이라 제대로 된 것인지는 확인이 어렵다. 일단 적용은 되는 것으니 사용하면서 문제가 되는 부분이 있다면 차츰 수정하는 방향으로 하면 될 것 같다.