위 그림과 같이 워드프레스 글 편집기(gutenberg editor)에서 코드 블럭만 다른 블럭과 다르게 왼쪽 정렬이 되고 있는 모습이다. 최종편집된 글을 보면 코드블럭이 다른 블럭들과 마찬가지로 가운데 정렬이 되어 출력되는데 편집기에서도 가운데 정렬이 되도록 하고 싶어 해결방법을 perplexcity에 물어보게 되었는데 총 2가지 답변을 받을 수 있었다.
두 가지 방법 모두 워드프레스에 커스텀 함수를 추가하여 스타일을 바꿔주는 방식으로 다음 경로의 워드프레스 서버의 파일에 접근 할 수 있어야 한다.
[..server directory]/wordpress/wp-content/themes/[you using theme name]/functions.php
CSS 를 통한 방법
function fix_block_alignment() {
if (get_current_screen()->is_block_editor()) {
echo '<style>
.editor-styles-wrapper .wp-block {
margin-inline: auto !important;
}
</style>';
}
}
add_action('admin_head', 'fix_block_alignment');만약 위 함수를 추가하여 해결이 안됐을 경우
/*
* 이 코드는 전체 너비 블럭의 정렬 문제를 해결하는데 도움이 됩니다
*/
add_action('enqueue_block_editor_assets', function() {
wp_add_inline_style('generate-block-editor-styles',
'.wp-block[data-align="full"] {
max-width: none;
}'
);
}, 20);