core/button 블록의 스타일 설정 및 패턴 코드 예시
theme.json 에서 설정한 스타일을 실제 템플릿이나 패턴에서 어떻게 설정하는지 알아본다.
우선 코드 예시를 한번 보고 궁금하거나 이상한 점에 대해 다시 확인해본다.
1) `theme.json` 상세 설정 (발췌, 실전용)
{
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "bg", "name": "BG", "color": "#ffffff" },
{ "slug": "ink", "name": "Ink", "color": "#111111" },
{ "slug": "muted", "name": "Muted", "color": "#f3f5f7" },
{ "slug": "accent", "name": "Accent", "color": "#1565c0" },
{ "slug": "warn", "name": "Warn", "color": "#d93025" }
]
},
"typography": {
"fontSizes": [
{ "slug": "sm", "name": "SM", "size": "14px" },
{ "slug": "md", "name": "MD", "size": "16px" },
{ "slug": "lg", "name": "LG", "size": "18px" }
]
},
"spacing": {
"units": ["px","rem"],
"preset": [
{ "slug": "8", "size": "8px" },
{ "slug": "12", "size": "12px" },
{ "slug": "16", "size": "16px" },
{ "slug": "20", "size": "20px" }
]
},
"border": {
"radius": [
{ "slug": "sm", "name": "SM", "size": "8px" },
{ "slug": "pill", "name": "Pill", "size": "9999px" }
]
},
"blocks": {
"core/button": {
"border": { "color": true, "radius": true, "width": true },
"typography": { "fontStyle": true, "fontWeight": true, "textTransform": true, "letterSpacing": true },
"spacing": { "padding": true }
}
}
},
"styles": {
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--accent)",
"text": "var(--wp--preset--color--bg)"
},
"border": {
"radius": "var(--wp--preset--border-radius--pill)",
"width": "0"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--12)",
"bottom": "var(--wp--preset--spacing--12)",
"left": "var(--wp--preset--spacing--20)",
"right": "var(--wp--preset--spacing--20)"
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--md)",
"fontWeight": "600",
"letterSpacing": "0.3px",
"textTransform": "uppercase"
}
}
}
}
}주의: hover/focus 같은 상태 스타일은 `theme.json`에서 직접 지정 불가. `style.css`로 보완.
옵션(권장) – 상태 스타일 최소 보강 style.css:
.wp-block-button__link {
transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
.wp-block-button__link:where(:hover,:focus-visible) {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.is-style-outline .wp-block-button__link {
background: transparent;
color: var(--wp--preset--color--accent);
border: 1.5px solid var(--wp--preset--color--accent);
}
.is-style-outline .wp-block-button__link:where(:hover,:focus-visible) {
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--bg);
}2) 실제 사용 예시
A. 패턴에서 기본 버튼(테마 기본값 상속)
<?php
/**
* Title: CTA - Primary
* Slug: mytheme/cta-primary
* Categories: call-to-action
* Inserter: yes
*/
?>
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link">지금 시작하기</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->* 색상/라운드/패딩/대문자 변환 등은 전부 theme.json의 기본값 적용.
B. 아웃라인 스타일(코어의 `is-style-outline` 활용)
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline">
<a class="wp-block-button__link">자세히 보기</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->C. 경고 버튼(프리셋 색만 교체)
html
<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"backgroundColor":"warn","textColor":"bg"} -->
<div class="wp-block-button">
<a class="wp-block-button__link has-warn-background-color has-bg-color has-text-color has-background">
위험도 확인
</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->* 프리셋만 바꾸면 인라인 수치 없이 일관성 유지.
D. 템플릿(예: `front-page.html`) 내 사용
html
<!-- wp:group {"layout":{"type":"constrained","contentSize":"720px"},"style":{"spacing":{"blockGap":"var:preset|spacing|16"}}} -->
<div class="wp-block-group">
<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">블록 테마 스타터</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>가장 빠른 워크플로로 사이트를 시작하세요.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">무료로 체험</a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">문서 보기</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->A 예시 자세히 알아보기
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->wp:buttons: 버튼 묶음 컨테이너(core/buttons). 안에 개별wp:button들을 담는다.layout.type: "flex": 컨테이너를 플렉스 레이아웃으로 배치.layout.justifyContent: "center": 안의 버튼들을 가운데 정렬.
추가로 자주 쓰는 옵션들:
layout.flexWrap: "wrap"→ 줄바꿈 허용(반응형일 때 유용).style.spacing.blockGap: "var:preset|spacing|16"→ 버튼 사이 간격(프리셋 권장).layout.orientation: "horizontal" | "vertical"→ 가로/세로 배치.
컨테이너(buttons)는 배치/간격을,
자식(button)은 버튼 자체 외형을 담당한다고 보면 된다.
“기본 스타일을 사용”의 의미
A에서 개별 버튼은 이렇게 비어 있다:
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">지금 시작하기</a></div>
<!-- /wp:button -->여기서 색/패딩/둥근모서리/폰트 등 외형을 별도로 지정하지 않았기 때문에,
다음 우선순대로 스타일이 적용된다:
- theme.json의 기본값
styles.blocks["core/button"]에 정의한 배경색, 텍스트 색, 패딩, 라운드, 타이포 등이 적용.- 팔레트/폰트/간격 프리셋도 여기서 연결됨.
- 워드프레스 코어 기본값
- theme.json에 특정 항목이 없으면 코어의 기본 버튼 스타일이 보조.
- 인스턴스(예: A의 버튼)에서 별도 지정이 없으므로
- 인라인 스타일이 거의 생기지 않음(프리셋 기반이라 유지보수 용이).
- 패턴/템플릿 어디서 써도 일관된 버튼이 나온다.
반대로, 인스턴스에서 "backgroundColor":"warn" 같은 걸 넣으면
그 버튼 하나만 덮어써서(프리셋 클래스/변수로) 색이 바뀐다.
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->buttons 에서 layout 과 같은 스타일을 없애려면 theme.json 에서 지정해주면 없앨 수 있다.
| 항목 | 설명 |
|---|---|
| ✅ 가능 | spacing.blockGap, layout.type, layout.justifyContent, layout.flexWrap 등은 전역화 가능. |
| ⚠️ 제한 | 버튼 개별 색, 라운드, 패딩 등은 core/button 쪽 설정이어야 함. (core/buttons은 컨테이너) |
| ⚠️ 예외 | 특정 패턴만 다르게 배치하려면, 그때만 패턴에 JSON 직접 추가해야 함. |
