구텐베르크 에디터 공백 블록 기본 값 변경 방법

안녕하세요 하나씩 차근차근, 모든 분들과 함께하는 워드프레스 성장 노트, 짜근페이퍼입니다.

AI 프롬프트에 빠져있다가 오래간만에, 워드프레스 관련해서 궁금한 사항이 생겼습니다. 말 그대로, 워드프레스 구텐베르크 에디터에서 공백 블록을 사용할 때 기본 값이 100px로 되어 있어 너무 불편 했습니다.

저는 공백 블록을 사용할 때 일반적으로 30px을 사용하고 있고, 일부 조정이 필요할 때 수정을 합니다. 하지만 위 그림과 같이 공백 블럭 기본 값이 100px로 설정되어 있어 매번 변경을 해줘야 하는 불편함이 있었습니다.

사람은 역시 적응의 동물이었나요, 불편함을 느끼면서도 해당 내용을 고칠 생각을 하지 못하고 있다가, 오늘 다른 테스트를 진행중에 또 100px을 보는 순간 갑자기 욱하는 마음과 함께 해당 문제를 해결할 방법을 찾았습니다.

테마 파일 편집기를 이용하여 functions.php 내용 추가

1. 워드프레스 관리자 메뉴에 “도구” 메뉴 클릭.
2. “도구” 하위 메뉴 중 “테마 파일 편집기” 클릭
3. 좌측에 있는 파일 목록 중 “테마 기능 (functions.php)” 클릭

이제 수정할 준비가 되셨으면 제가 아래에 작성한 내용을 그대로 복사해서 functions.php 제일 하단에 입력합니다.

// 여백(Spacer) 블록의 기본 높이를 30px로 설정
add_filter( 'block_type_metadata', function( $metadata ) {
    if ( 'core/spacer' === $metadata['name'] ) {
        $metadata['attributes']['height']['default'] = '30px';
    }
    return $metadata;
});

제가 적용한 결과물을 다시 한번 확인해 보세요

위 그림과 같이 코드 내용을 그대로 복사 후에, 에디터 맨 밑줄에 붙여 넣으신 후 “파일 업데이트”를 클릭하여 저장합니다. 자 이제 다시 구텐베르크 에디터로 돌아가서 공백 블록의 기본 값이 100px 에서 30px로 변경되었는지 확인해 볼까요?

그림과 같이 공백 블록을 추가하게 되면 기본 값이 100px 에서 30px로 변한 것을 확인할 수 있습니다. 30px을 제 기준으로 변경한 내용이오니, 코드에서 숫자 30을 여러분들이 원한는 수치로 변경하면 원하는 값이 기본 값으로 변경이 됩니다.

오늘은 워드프레스 구텐베르크 에디터 공백 블록 기본값 변경에 대한 내용을 확인했습니다.

지금까지 하나씩 차근차근, 모든 분들과 함꼐하는 워드프레스 성장 노트, 짜근페이퍼였습니다.