워드프레스 블록 편집기와 함께 디자인 시스템 사용하기 Pt. 1: 테마.json
게시 됨: 2022-12-15이전 블로그 게시물에서는 디자인 시스템을 Figma에서 WordPress 테마의 theme.json으로 가져오는 방법을 보여 주었습니다. 그렇게 함으로써 디지털 자산 전반에 걸쳐 지속적인 일관성을 보장할 수 있습니다.
새로운 2부작 시리즈는 블록 편집기에서 theme.json에서 가져온 디자인 토큰을 사용하는 방법을 보여줌으로써 해당 토대 위에 구축됩니다. 이렇게 하면 디자인 시스템을 반영하도록 WordPress 사이트를 더 잘 구성할 수 있습니다. 두 가지 주요 목표가 있습니다.
- 디자인 시스템과 관련된 theme.json 부분 이해
- 가져온 디자인 시스템을 활용하기 위해 theme.json 수정 및 확장
theme.json 이해하기
theme.json은 블록 편집기를 구성 및 테마화하고, 블록 설정을 변경하고, 전체 블록 테마를 개발하기 위한 기반을 구축할 수 있는 구성 파일입니다.
이는 WordPress 사이트의 전체 설정 및 스타일을 제어할 수 있도록 하기 위한 것입니다. 모든 새로운 WordPress VIP 사이트에는 블록 테마인 Twenty Twenty-Three 테마가 기본으로 제공됩니다. 이 테마는 가벼운 블록 테마를 실험하고 theme.json에서 사용할 수 있는 몇 가지 강력한 컨트롤을 이해하기에 좋은 출발점입니다.
theme.json 수정
이전 블로그 게시물에서 사용된 theme.json부터 시작하겠습니다. 브리지 도구가 Figma의 디자인 시스템을 삽입하고 업데이트할 수 있는 사용자 정의 섹션을 확인하십시오. theme.json을 실제로 효과적으로 사용하기 위해 디자인 시스템(디자인 토큰)의 다양한 구성 요소를 참조하는 핵심 섹션입니다.
아래에서는 theme.json이 제공하는 모든 것을 활용할 수 있도록 팁과 전략을 살펴봅니다.
디자인 토큰 저장
브리지 도구를 사용하여 디자인 토큰의 위치를 사용자 지정할 수 있지만 항상 설정의 사용자 지정 섹션에 보관해야 합니다. 이것은 브리지 도구의 기본 위치이며 변경하면 안 됩니다. 이렇게 하면 단일 위치에서 적절하게 구성되고 기존 사용자 지정 테마 섹션과의 충돌을 방지하는 데 도움이 될 수 있습니다.
디자인 토큰 사용
theme.json의 사용자 지정 섹션을 사용하는 예를 살펴보겠습니다. 여기에 기본 텍스트 색상을 녹색으로, 배경을 검정색으로 정의한 스니펫이 있습니다.
"settings": { "custom": { "text": { "primary": "#00FF00", “background”: “000000” } } } }이렇게 하면 다음을 사용하여 theme.json 내에서 이 두 가지 색상을 참조할 수 있습니다.
var(--wp--custom--text--primary) and var(--wp--custom--text--background)다음 스니펫은 달리 지정하지 않는 한 기본적으로 모든 블록에 녹색 텍스트가 있는 검은색 배경이 있는지 확인합니다.
"styles": { "color": { "text": "var(--wp--custom--text--primary)", “background”: “var(--wp--custom--text--background)” } }사용자 지정 설정에서 참조하려는 키의 스키마는 다음과 같습니다.
var(--wp--custom–<location to the value with -- as a separator between each key>)이점은 실제 값이 관리되는 하나의 중앙 위치를 유지하면서 이러한 키를 사용하여 모든 디자인 토큰을 참조할 수 있다는 것입니다.
모범 사례
- WordPress에서 생성된 디자인 토큰 변수(예:
var(--wp--custom--text--primary))를 사용하여 어디에서나 토큰을 참조하십시오. 실제 값 자체를 사용하는 대신 기본 및 배경 사용자 정의 색상을 참조하는 위에 제공된 스니펫에 유의하십시오. 이렇게 하면 텍스트 색상과 같은 속성을 업데이트하려는 경우 다른 위치는 단순히 참조이므로 단일 위치만 변경해야 합니다. - theme.json에 삽입된 디자인 토큰은 위에 표시된 동일한 키 참조를 사용하여 theme.json 외부의 CSS에서도 액세스할 수 있습니다. 이것은 테마에서 사용되는 블록 개발 및 기타 구성 요소에 적용됩니다. theme.json 내에서만 사용하기 위한 것이 아니며 모든 사용자 지정 CSS에서 재사용해야 합니다.
theme.json을 신뢰할 수 있는 단일 소스로 유지하려면 이 두 모범 사례를 모두 따르는 것이 좋습니다. 특히 Figma에 연결하는 WordPress VIP의 브리지 도구와 같은 자동화 도구를 사용할 때 디자인 토큰을 쉽게 업데이트할 수 있습니다.
편집기 및 블록 스타일 수정
위의 스니펫은 블록의 스타일을 지정하는 방법을 사용자 지정하는 데 유용한 방법입니다. 예를 들어 블록의 기본 스타일과 블록 편집기에서 선택할 수 있는 사전 설정을 변경할 수 있습니다. 이는 사이트에서 사용되는 기본 제공 블록의 모양을 보다 세분화하고 정확하게 지정하려는 경우에 유용합니다.
theme.json에는 두 가지 주요 위치가 있습니다.
- 설정 및 settings.blocks - 블록 편집기에서 일반적으로 사용 가능한 설정과 개별 블록 유형에 대한 맞춤형 설정을 사용자 정의할 수 있습니다.
- 스타일 및 스타일.블록 - 전체 블록 편집기 및 블록별 사용자 정의에 대한 사전 설정 스타일을 정의할 수 있습니다.
예를 들어 모든 제목에 기본 녹색(기본) 색상과 보조 색상 옵션이 있는지 확인하는 방법은 다음과 같습니다.
"settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }, "styles": { "blocks": { “core/heading”: { “color”: { "text": "var(--wp--custom--text--primary)" } } } }이것은 기본 녹색 텍스트 색상을 갖도록 각 헤더 블록을 구성하고 색상을 빨간색 보조 색상으로 변경하는 두 번째 블록 편집기 옵션을 추가합니다. 참고: 약간의 반복이 필요합니다. 스타일은 기본 기본 색상을 지정하고 팔레트는 동일한 색상을 보조 색상과 결합하여 블록 편집기에서 두 가지 옵션을 모두 제공합니다.
스타일링 경고
가능하면 블록 스타일 지정을 위해 theme.json의 스타일 및 styles.blocks 섹션만 사용하십시오. 절대적으로 필요한 경우가 아니면 핵심 블록 스타일을 재정의하기 위해 CSS 스타일을 사용하지 마십시오. 블록 스타일에 대한 CSS 재정의는 일반적으로 안정적이지 않습니다. 블록 편집기 업데이트는 스타일과 구조를 변경하여 해당 스타일을 깨뜨릴 수 있습니다.
블록별 커스터마이징
위의 예는 블록의 설정 및 스타일을 사용자 정의하는 방법을 보여주지만 사용자 정의를 완전히 비활성화하고 블록 편집기 옵션을 특정 블록으로 제한할 수도 있습니다. 이는 디자인 시스템의 모양과 느낌을 유지하면서 콘텐츠를 만드는 데 사용할 수 있는 옵션을 엄격하게 제어하는 데 유용합니다.
동일한 원칙이 색상, 타이포그래피 및 간격과 같은 다른 구성 가능한 속성에 적용되는 또 다른 색상 설정 예제를 계속 살펴보겠습니다. 제목 블록을 제외한 모든 곳에서 기본 텍스트 색상을 변경하는 기능을 비활성화하려면 theme.json을 구성하는 방법은 다음과 같습니다.
"settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “color”: { “text”: false }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }이 예에서는 설정을 통해 전역 설정을 구성하고 설정 아래의 블록 섹션을 통해 블록별 설정을 구성하는 방법을 보여줍니다. 이는 전역 스타일 지정(루트 스타일 속성에서 사용 가능) 및 블록별 스타일 지정(styles.blocks에서 사용 가능)에도 적용됩니다.
간단한 사전 설정 템플릿
디자인 시스템 생성을 시작하는 좋은 방법은 블록 편집기 설정을 전체적으로 잠그는 것입니다. 그런 다음 개별 블록에 대한 설정을 점진적으로 활성화하고 사용자 지정 옵션에 압도되지 않고 디자인 시스템의 모양과 느낌을 제어할 수 있습니다. 시작하려면 워드프레스 VIP의 디자인 시스템이 모든 테두리, 색상을 전역적으로 비활성화하는 데 사용하는 간단한 설정 세트가 있습니다. 편집기에서 기본적으로 , 타이포그래피 및 간격 컨트롤:
{ "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "border": { "color": false, "radius": false, "style": false, "width": false }, "color": { "text": false, "background": false, "link": false, "custom": false, "defaultPalette": false, "defaultGradients": false, "defaultDuotone": false, "customGradient": false, "customDuotone": false, "palette": [ // Design system palette colors... ], "gradients": [ // Design system gradients... ] }, "spacing": { "margin": false, "padding": false, "units": ["rem", "%"] }, "typography": { "customFontSize": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "dropCap": false, "fontFamilies": [], "fontSizes": [] } } } 이렇게 잠긴 기본값을 사용하면 settings.blocks를 사용하여 편집기의 특정 블록에 대한 옵션을 표시하고 잘 정의된 설정으로 사용자 정의를 제한할 수 있습니다.
결론적으로
Theme.json은 글로벌 디자인 토큰을 구성하고, 글로벌 테마 스타일을 설정하고, 개별 블록을 사용자 지정하기 위한 강력한 도구입니다. 사용자 지정을 위해 블록 편집기가 제공하는 모든 기능을 활용하면 디자인 시스템 구현이 중앙 집중화되고 내장된 블록 편집기와 호환됩니다.
시리즈의 2부에서는 디자인 시스템에서 내장된 블록 유형 및 스타일을 관리하기 위한 theme.json 이외의 고급 팁을 다룰 것입니다.
유용한 링크
- Theme.json이 무엇인가요?
- 전역 설정 및 스타일(theme.json)
저자
Alec Geatches, Automattic 수석 소프트웨어 개발자
대만 타이페이에 거주하는 Enterprise WordPress 개발자 및 디자인 시스템 애호가.
Gopal Krishnan, Automattic 수석 소프트웨어 개발자
Gopal은 디자인 시스템과 Gutenberg에 관심이 있는 WordPress VIP의 분리된 WordPress 제품에서 작업합니다. 그는 호주 시드니에 기반을 두고 있으며 최근에 캐나다에서 이사했습니다.