블록 테마 편집기에서 버튼 스타일을 드롭다운으로 선택하게 만들기

로

블록 테마에서 버튼 모양을 에디터에서 바로 고르게 만들고 싶었다.
내가 참고한 테마는 그 방식을 깔끔하게 보여준다.
여기서는 비개발자 기준으로 어떤 파일을 어디서 어떻게 고치면 되는지
최소한의 코드만 보고 이해할 수 있게 정리했다.

핵심 원리 한 줄 요약

에디터에 스타일 이름을 등록했다.
워드프레스가 자동으로 클래스를 붙였다.
그 클래스를 CSS로 꾸몄다.
끝이다.

  • 등록 파일: functions.php
  • 스타일 파일: style.css 또는 theme.json
  • 결과: 에디터 “스타일” 패널에서 선택 가능해짐

1) 어디를 고치나

A. functions.php

테마 루트에 있다.
여기에 “스타일 이름”을 등록한다.
등록을 하면 에디터에 스타일 옵션이 생긴다.
버튼 블록, 소셜 링크 블록 등 원하는 블록을 지정한다.

B. style.css (또는 theme.json)

테마 루트에 있다.
여기에 “등록한 스타일 이름”과 같은 이름의 클래스를 잡아서 디자인을 써준다.
에디터와 프론트 양쪽에 보이게 하려면 Oaknut처럼 add_editor_style('style.css')가 되어있다.

2) 파일별로 무엇을 하였나

A. functions.php에서 한 일

  • 버튼 블록에 “리본” 같은 스타일을 등록했다.
  • 워드프레스가 자동으로
    .is-style-스타일이름 클래스를 블록에 붙인다.
  • 에디터 오른쪽 “스타일” 탭에
    사람이 고를 수 있는 옵션이 생긴다.

포인트: 이 단계는 “이름만 알려주는” 단계이다.
실제 모양은 CSS에서 만든다.

B. style.css에서 한 일

  • .is-style-스타일이름 클래스를 잡았다.
  • 내부 요소(예: .wp-block-button__link)에
    모양을 적용했다.
  • Oaknut은 clip-path, box-shadow 같은 속성으로
    다양한 형태를 만들었다.

포인트: 이름-클래스-스타일이 서로 이어져 있다.
이름을 등록하면 클래스가 붙고
그 클래스를 CSS가 꾸민다.

3) 버튼 말고도 가능한가

가능하다.
원리는 완전히 같다.
Oaknut은 버튼과 소셜 링크에
같은 스타일 이름을 등록해서
두 블록에 똑같이 적용했다.
다른 코어 블록에도 등록할 수 있다.
인용문, 구분선, 이미지, 커버 등 원하는 대로 확장한다.

  • 방법은 동일하다.
    1. functions.php에서 해당 블록 이름으로 등록
    2. style.css에서 .is-style-스타일이름 디자인 작성

블록마다 내부 마크업이 달라서
버튼처럼 내부 링크 요소를 함께 지정해야 할 때가 있다.
Oaknut 소스를 보면 패턴이 보인다.

4) 실무 체크리스트

  • functions.php에서 등록했는지 확인한다.
    (스타일 이름과 라벨이 맞는지 본다)
  • style.css에서 같은 이름의 클래스를 잡았는지 본다.
    (예: .is-style-my-style …)
  • 에디터에서 스타일 패널이 보이는지 확인한다.
  • 에디터와 프론트가 같이 보이는지 확인한다.
    (add_editor_style('style.css')가 있으면 된다)
  • 이름 규칙을 통일한다.
    접두사(예: socialhub-)를 정해서
    여러 블록에 재사용하면 관리가 쉬워진다.
  • 스타일은 간결하고 재사용 가능하게 만든다.
    색, 간격, 모서리 값은 theme.json “토큰”으로 통일하고
    모양만 변형 스타일에서 바꾸면 일관성이 생긴다.

5) 최소 예시(참고용, 복붙 후 이름만 바꾸기)

아래는 흐름만 이해하기 위한 참고이다.
이름만 본인 테마 규칙에 맞게 바꾼다.
코드는 최소화했다.

  • functions.php에 등록
    (버튼과 소셜 링크 두 곳에 같은 이름을 등록했다는 가정)
// 버튼과 소셜 링크에 'Soft Bevel' 등록 (예시)
foreach ( array( 'core/button', 'core/social-links' ) as $block ) {
  register_block_style( $block, array(
    'name'  => 'socialhub-soft-bevel',
    'label' => __( 'Soft Bevel', 'socialhub' ),
  ) );
}
  • style.css에 디자인
    (같은 이름으로 클래스 지정)
/* 예시: 두 블록에 동일한 느낌 적용 */
.wp-block-button.is-style-socialhub-soft-bevel .wp-block-button__link,
.is-style-socialhub-soft-bevel .wp-block-social-link {
  border: 2px solid currentColor;
  box-shadow: 0 2px 0 currentColor, inset 0 2px 0 rgba(255,255,255,.2);
  border-radius: 8px;
}

에디터에 즉시 반영되어야 한다.
만약 반영이 안 보이면 캐시를 지우거나
add_editor_style('style.css')가 있는지 확인한다.

6) 정리

  1. functions.php에서 스타일 이름 등록을 했다.
  2. 워드프레스가 블록에 자동 클래스를 붙인다.
  3. style.css에서 그 클래스를 디자인했다.
  4. 버튼뿐 아니라 다른 블록에도 같은 방식으로 확장했다.
  5. theme.json 토큰으로 색·폰트·간격을 통일하면
    변형 스타일만 바꿔도 전체 룩이 흔들리지 않는다.

이 방식은 간단하고 반복 가능하다.
상용 테마에서 통일성과 확장성을 동시에 얻을 수 있다.