WordPress 테마용 CSS를 작성하는 방식은 대대적인 변화를 겪고 있습니다. 나는 최근에 WordPress에 유체 유형 지원 추가 방법으로 theme.json, 새 파일 WordPress는 열심히 추진하고 있습니다 전체 사이트 편집(FSE) 기능을 지원하는 WordPress 테마에서 스타일을 정의하기 위한 진실의 중심 소스가 됩니다.

잠깐, 안돼 style.css 파일? 우리는 여전히 그것을 가지고 있습니다. 사실로, style.css is 여전히 필요한 파일 블록 테마에서는 그 역할이 테마 등록에 사용되는 메타 정보로 크게 축소됩니다. 즉, 사실은 theme.json 은(는) 여전히 활발하게 개발 중입니다. 즉, 거기에 정의된 스타일을 찾을 수 있는 과도기에 있습니다. styles.css 또는 블록 수준에서도.

그렇다면 이러한 WordPress FSE 시대에 스타일링은 실제로 어떤 모습일까요? 이것이 제가 이 글에서 다루고자 하는 것입니다. 블록 테마 스타일 지정에 대한 문서가 부족합니다. WordPress 테마 개발자 핸드북, 그래서 우리가 여기서 다루는 모든 것은 WordPress 테마의 미래에 대한 토론뿐만 아니라 현재 상황에 대해 수집한 것입니다.

워드프레스 스타일의 진화

에 포함된 새로운 개발 기능 워드 프레스 6.1 완전히 정의된 스타일 시스템에 더 가까이 다가갈 수 있습니다. theme.json, 그러나 우리가 그것에 완전히 기대기 전에 해야 할 일이 여전히 많습니다. 향후 릴리스에 대한 아이디어를 얻을 수 있는 한 가지 방법은 다음을 사용하는 것입니다. 구텐베르크 플러그인. 여기에서 실험적 기능에 테스트 실행이 제공되는 경우가 많습니다.

우리가 어디에 있는지 느낄 수 있는 또 다른 방법은 기본 WordPress 테마. 현재까지 전체 사이트 편집을 지원하는 세 가지 기본 테마가 있습니다.

그러나 CSS 거래를 시작하지 마십시오. style.css JSON 속성-값 쌍의 경우 theme.json 바로 지금. 여전히 지원해야 하는 CSS 스타일 지정 규칙이 있습니다. theme.json 우리가 그 일에 대해 생각하기 전에. 나머지 중요한 문제는 모든 CSS 스타일 규칙을 theme.json 다양한 소스 통합 theme.json 에 전역 스타일 설정을 위한 UI 직접 워드프레스 사이트 에디터.

그것은 우리를 상대적으로 힘든 지점에 남겨 둡니다. 뿐만 아니라 테마 스타일을 재정의하기 위한 명확한 경로가 없음, 그러나 이러한 스타일의 소스가 어디에서 왔는지 불분명합니다. theme.json 파일 style.css, Gutenberg 플러그인 또는 다른 곳?

theme.json 대신 style.css?

WordPress가 전통적인 CSS 파일 대신 JSON 기반 스타일 정의로 이동하는 이유가 궁금할 수 있습니다. Gutenberg 개발 팀의 Ben Dwyer는 왜 theme.json 접근 방식은 테마 개발자에게 이점입니다..

Ben의 게시물을 읽을 가치가 있지만 고기는 다음 인용문에 있습니다.

레이아웃, 사전 설정 또는 블록 스타일에 관계없이 CSS를 재정의하면 통합 및 상호 운용성에 장애가 됩니다. 프런트엔드와 편집기 간의 시각적 패리티를 유지하기가 더 어려워지고 블록 내부에 대한 업그레이드가 재정의와 충돌할 수 있습니다. 또한 사용자 정의 CSS는 다른 블록 테마에서 이식성이 떨어집니다.

테마 작성자가 사용하도록 권장함으로써 theme.json API가 가능한 경우 "기본 > 테마 > 사용자" 정의 스타일의 계층 구조를 올바르게 해결할 수 있습니다.

CSS를 JSON으로 옮기는 것의 주요 이점 중 하나는 JSON이 기계가 읽을 수 있는 형식이라는 점입니다. 즉, API를 가져와 WordPress 사이트 편집기 UI에 노출할 수 있으므로 사용자가 기본값을 수정하고 사이트의 모양을 사용자 정의할 수 있습니다. 모든 CSS를 작성합니다. 또한 블록에 일관되게 스타일을 지정하는 방법을 제공하는 동시에 사용자 설정이 theme.json. 테마 수준 스타일 간의 상호 작용 theme.json Global Styles UI의 사용자 정의 스타일은 JSON 접근 방식을 매력적으로 만드는 요소입니다.

개발자는 JSON에서 일관성을 유지하고 사용자는 코드 없는 사용자 지정을 통해 유연성을 얻습니다. 그것은 윈윈입니다.

확실히 다른 이점이 있습니다. WP Engine의 Mike McAlister는 이 Twitter 스레드에 몇 가지를 나열합니다.. 여기에서 더 많은 이점을 찾을 수 있습니다. 심도 있는 토론 Make WordPress Core 블로그에서 확인하세요. 그리고 그것을 읽은 후에는 JSON 접근 방식의 이점을 다음과 비교하십시오. 클래식 테마에서 스타일을 정의하고 재정의하는 데 사용할 수 있는 방법.

JSON 요소로 스타일 정의

우리는 이미 테마의 어느 부분에 이르기까지 많은 진전을 보았습니다. theme.json 스타일링이 가능합니다. 워드프레스 6.1 이전에는 스타일 제목과 링크만 할 수 있었습니다. 이제 워드프레스 6.1에서는 버튼, 캡션, 인용 및 제목을 추가할 수 있습니다. 믹스에.

그리고 우리는 그것을 정의함으로써 JSON 요소. 요소를 WordPress 블록에 있는 개별 구성 요소로 생각하십시오. 제목, 단락 및 버튼을 포함하는 블록이 있다고 가정합니다. 이러한 개별 조각은 요소이며 elements 반대하다 theme.json 스타일을 정의합니다.

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}

JSON 요소를 설명하는 더 좋은 방법은 블록의 복잡성이 필요하지 않은 테마 및 블록의 하위 수준 구성 요소입니다. 그들은 HTML 프리미티브의 표현입니다 블록에 정의되지 않았지만 블록 간에 사용할 수 있습니다. WordPress(및 Gutenberg 플러그인)에서 지원되는 방식은 다음에서 설명합니다. 블록 편집기 핸드북 이 전체 사이트 편집 튜토리얼 캐롤리나 나이마크.

예를 들어 링크는 elements 객체이지만 그 자체로는 블록이 아닙니다. 그러나 링크는 블록에서 사용할 수 있으며 블록에 정의된 스타일을 상속합니다. elements.link 반대하다 theme.json. 이것은 요소의 정의를 완전히 캡슐화하지는 않지만 Heading 및 Button 블록과 같은 일부 요소도 블록으로 등록되기 때문에 해당 블록은 다른 블록 내에서 계속 사용할 수 있습니다.

다음은 현재 스타일 지정에 사용할 수 있는 요소의 표입니다. theme.json, 캐롤라이나의 호의:

보시다시피 아직 초기 단계이며 Gutenberg 플러그인에서 WordPress Core로 옮겨야 할 부분이 여전히 많습니다. 그러나 CSS 파일이나 DevTools에서 선택자를 찾지 않고도 테마의 모든 머리글 스타일을 전역적으로 지정하는 것과 같은 작업을 얼마나 빨리 수행할 수 있는지 알 수 있습니다.

또한, 다음의 구조가 theme.json 전역 요소(예: headings) 개별 요소(예: h1) 및 블록 수준 스타일(예: h1 블록)에 포함되어 있습니다.

JSON 요소에 대한 추가 정보는 다음에서 확인할 수 있습니다. 이 Make WordPress 제안 및 이 오픈 티켓 Gutenberg 플러그인의 GitHub 저장소에서.

JSON 및 CSS 특이성

CSS 특이성에 대해 계속 이야기해 봅시다. 앞서 스타일링에 대한 JSON 접근 방식이 계층 구조를 설정한다고 언급했습니다. 그리고 그것은 사실입니다. JSON 요소에 정의된 스타일 theme.json 기본 테마 스타일로 간주됩니다. 전역 스타일 UI에서 사용자가 설정한 모든 항목은 기본값을 재정의합니다.

다른 말로: 사용자 스타일은 기본 테마 스타일보다 더 구체적입니다.. 이것이 어떻게 작동하는지 감을 잡기 위해 Button 블록을 살펴보겠습니다.

나는 사용하고있다. 빈테마, CSS 스타일이 없는 빈 WordPress 테마입니다. 새 페이지에 Button 블록을 추가하겠습니다.

좋아, 우리는 WordPress Core가 약간의 가벼운 스타일과 함께 제공된다는 것을 알고 있습니다. 이제 WordPress 3에서 기본 TT6.1 테마로 전환하여 활성화하겠습니다. 버튼으로 내 페이지를 새로고침하면 버튼의 스타일이 변경됩니다.

정확하게 보실 수 있습니다 새로운 스타일의 출처 TT3에서 theme.json 파일. 이것은 JSON 요소 스타일이 WordPress Core 스타일보다 우선한다는 것을 알려줍니다.

이제 TT3를 다음으로 재정의하여 수정하겠습니다. theme.json Button 블록의 기본 배경색이 빨간색으로 설정된 하위 테마의 파일입니다.

하지만 마지막 스크린샷에서 검색 버튼을 주목하세요. 역시 빨간색이겠죠? 즉, 내가 만든 변경 사항이 전역 수준인 경우 다른 수준에서 스타일이 지정된다는 의미입니다. 우리가 바꾸고 싶다면 두 단추, 사이트 편집기의 전역 스타일 UI를 사용하여 사용자 수준에서 이를 수행할 수 있습니다.

두 버튼의 배경색을 파란색으로 변경하고 전역 스타일 UI를 사용하여 텍스트도 수정했습니다. 거기의 파란색이 테마 스타일보다 우선합니다!

스타일 엔진

이것은 매우 빠르지만 WordPress 블록 테마에서 CSS 특이성을 관리하는 방법에 대한 좋은 아이디어입니다. 하지만 아직 불분명하기 때문에 완전한 그림이 아닙니다. 어디에 해당 스타일이 생성됩니다. WordPress에는 어딘가에서 가져온 고유한 기본 스타일이 있으며 theme.json 더 많은 스타일 규칙을 위해 전역 스타일에 설정된 규칙으로 재정의합니다.

해당 스타일이 인라인입니까? 별도의 스타일시트에 있습니까? 아마도 그들은 페이지에 주입되었을 것입니다 ?

그것이 바로 새로운 스타일 엔진 잘 해결될 것입니다. 스타일 엔진은 WordPress 6.1의 새로운 API로, 스타일이 생성되는 방식과 스타일이 적용되는 위치에 일관성을 부여하기 위한 것입니다. 즉, 가능한 모든 스타일링 소스를 사용하며 블록 스타일을 적절하게 생성하는 일을 단독으로 담당합니다. 내가 알지. 일부 스타일을 작성하기 위해 다른 추상화 위에 또 다른 추상화가 있습니다. 그러나 스타일에 대한 중앙 집중식 API를 사용하는 것이 아마도 여러 위치에서 스타일을 가져올 수 있다는 점에서 가장 우아한 솔루션일 것입니다.

Style Engine을 처음으로 살펴보는 것입니다. 사실 지금까지 완성된 것은, 티켓에 따르면:

• 코드가 백엔드에서 블록 지원 CSS를 생성하는 위치를 감사하고 통합하여 동일한 위치(여러 위치가 아님)에서 제공되도록 합니다. 여기에는 마진, 패딩, 타이포그래피, 색상 및 테두리와 같은 CSS 규칙이 포함됩니다.
• 반복적인 레이아웃별 스타일을 제거하고 시맨틱 클래스 이름을 생성합니다.
• 블록, 레이아웃 및 요소 지원을 위해 페이지에 인쇄하는 인라인 스타일 태그의 수를 줄입니다.

기본적으로 이것은 테마에 대한 모든 CSS 스타일 규칙을 포함하는 단일 API를 설정하기 위한 기반입니다. WordPress가 6.1 이전에 인라인 스타일을 주입하는 방식을 정리하고 의미론적 클래스 이름에 대한 시스템을 설정합니다.

Style Engine의 장기 및 단기 목표에 대한 자세한 내용은 여기에서 확인할 수 있습니다. WordPress Core 토론 만들기. 다음을 따를 수도 있습니다. 추적 문제 및 프로젝트 보드 더 많은 업데이트.

JSON 요소 작업

우리는 JSON 요소에 대해 조금 이야기했습니다. theme.json 파일과 제목, 버튼, 링크 등과 같은 항목에 대한 기본 스타일을 정의하기 위한 기본 HTML 프리미티브인 방법. 이제 실제로 살펴보자 사용 JSON 요소 및 다양한 스타일 지정 컨텍스트에서 작동하는 방식.

JSON 요소에는 일반적으로 두 가지 컨텍스트가 있습니다. 글로벌 수준 그리고 블록 수준. 전역 수준 스타일은 블록이 사용되는 모든 곳에서 일관성을 위해 블록별 스타일이 우선적으로 적용되도록 블록 수준보다 덜 명확하게 정의됩니다.

JSON 요소의 전역 스타일

새로운 기본 TT3 테마를 살펴보고 해당 버튼의 스타일을 살펴보겠습니다. 다음은 TT3의 축약된 복사-붙여넣기입니다. theme.json 파일(여기 전체 코드) 전역 스타일 섹션을 표시하지만 여기에서 원래 코드를 찾을 수 있습니다.

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

모든 버튼은 전역 수준(styles.elements.button).

DevTools에서도 이를 확인할 수 있습니다. 라는 클래스에 주목하십시오. .wp-element-button 셀렉터입니다. 동일한 클래스가 대화형 상태의 스타일을 지정하는 데에도 사용됩니다.

다시 말하지만 이 스타일링은 모두 글로벌 수준에서 발생합니다. theme.json. 버튼을 사용할 때마다 버튼은 동일한 선택기를 공유하고 다른 스타일 규칙을 재정의하지 않기 때문에 동일한 배경을 갖게 됩니다.

여담으로 WordPress 6.1이 추가되었습니다. 스타일 지정 대화형 상태 지원 버튼 및 링크와 같은 특정 요소에 대해 의사 클래스를 사용하여 theme.json — 포함 :hover, :focus및 :active — 또는 전역 스타일 UI. 자동화 엔지니어 데이브 스미스 보여줍니다 이 기능 YouTube 동영상에서

버튼의 배경색을 재정의할 수 있습니다. theme.json (기본 WordPress 테마를 사용하므로 자식 테마에 있는 것이 좋습니다) 또는 사이트 편집기의 전역 스타일 설정(코드 변경이 필요하지 않으므로 자식 테마가 필요하지 않음).

그러나 그러면 버튼이 한 번에 모두 변경됩니다. 버튼이 특정 블록의 일부일 때 배경색을 재정의하려면 어떻게 해야 합니까? 블록 수준 스타일이 작동하는 곳입니다.

요소에 대한 블록 수준 스타일

블록 수준에서 스타일을 사용하고 사용자 지정하는 방법을 이해하기 위해 검색 블록에 포함된 버튼의 배경색을 변경해 보겠습니다. 버튼 블록이 있지만 우리가 하는 일은 검색 블록의 블록 수준에서 배경색을 재정의하는 것입니다. 그렇게 하면 새 색상을 모든 버튼에 전체적으로 적용하는 것이 아니라 새 색상만 적용합니다.

이를 위해 스타일을 정의합니다. styles.blocks 반대하다 theme.json. 맞습니다. 모든 버튼에 대한 전역 스타일을 정의하면 styles.elements에서 버튼 요소에 대한 블록별 스타일을 정의할 수 있습니다. styles.block, 유사한 구조를 따릅니다.

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

저거 봐? 내가 설정 background 및 text 속성 styles.blocks.core/search.elements.button WordPress에 미리 설정된 두 개의 CSS 변수가 있습니다.

결과? 이제 검색 버튼이 빨간색(--wp--preset--color--quaternary), 기본 버튼 블록은 밝은 녹색 배경을 유지합니다.

DevTools에서도 변화를 볼 수 있습니다.

다른 블록에 포함된 버튼의 스타일을 지정하려는 경우에도 마찬가지입니다. 버튼은 하나의 예일 뿐이므로 다른 예를 살펴보겠습니다.

예: 각 수준에서 제목 스타일 지정

예를 들어 이 모든 정보를 집으로 가져갑시다. 이번에는:

• 모든 제목을 전체적으로 스타일 지정
• 모든 제목 2 요소 스타일 지정
• 쿼리 루프 블록의 스타일 제목 2 요소

먼저 기본 구조부터 시작하겠습니다. theme.json:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

이렇게 하면 전역 및 블록 수준 스타일의 개요가 설정됩니다.

모든 제목을 전체적으로 스타일 지정

추가하자. headings 전역 스타일에 반대하고 일부 스타일을 적용합니다.

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

그러면 모든 제목의 색상이 WordPress의 사전 설정된 기본 색상으로 설정됩니다. 전역 수준에서 제목 2 요소의 색상과 글꼴 크기도 변경해 보겠습니다.

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

이제 모든 제목 2 요소는 유동적인 글꼴 크기. 하지만 아마도 우리는 고정된 것을 원할 것입니다. fontSize Query Look 블록에서 사용되는 제목 2 요소의 경우:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

이제 제목 2 요소에 대한 세 가지 수준의 스타일이 있습니다. 모든 제목, 모든 제목 2 요소 및 쿼리 루프 블록에서 사용되는 제목 2 요소입니다.

기존 테마 예시

이 기사에서는 버튼과 머리글에 대한 스타일 지정 예제만 살펴보았지만 WordPress 6.1은 추가 요소의 스타일 지정을 지원합니다. 에 그것들을 요약한 표가 있습니다. "JSON 요소로 스타일 정의" 안내

어떤 JSON 요소가 어떤 CSS 속성을 지원하는지 궁금할 것입니다. 이러한 속성을 선언하는 방법은 말할 것도 없습니다. 공식 문서를 기다리는 동안 우리가 가진 최고의 리소스는 theme.json 기존 테마 파일. 사용자 지정 요소를 기반으로 테마에 대한 링크를 제공하고 사용자 지정되는 속성을 지적하겠습니다.

반드시 각자에게 theme.json 이러한 테마에는 styles.blocks 목적.

최대 포장

전체 사이트 편집기에 대한 빈번한 변경이 많은 사람들에게 자극의 주요 원인를 포함한 기술에 정통한 구텐베르크 사용자. 클래식 테마와 잘 작동하는 매우 간단한 CSS 규칙도 블록 테마에는 작동하지 않는 것 같습니다. 새로운 차원의 특이성 우리는 이전에 다루었습니다.

에 대하여 GitHub 제안 새 브라우저 모드에서 사이트 편집기를 다시 디자인하려면 Sara Gooding은 WP Tavern 게시물에 글을 씁니다.:

도구 내에서 밤낮으로 작업하지 않는 한 사이트 편집기를 탐색하는 동안 길을 잃기 쉽습니다. 특히 템플릿 탐색에서 템플릿 편집, 개별 블록 수정으로 이동할 때 탐색이 불안정하고 혼란스럽습니다.

구텐베르크 블록 편집기 및 블록 아이 테마의 세계에 대한 예리한 초기 라이더로서 저는 제 자신의 좌절감을 많이 가지고 있습니다. 그러나 나는 낙관적이며 사이트 편집기가 완성되면 사용자와 기술에 정통한 테마 개발자 모두에게 혁신적인 도구가 될 것이라고 기대합니다. 이것 희망 트윗 이미 확인했습니다. 그 동안 우리는 더 많은 변화를 준비해야 할 것 같고, 아마도 험난한 여정도 있을 것 같습니다.

참고자료

이 문서에 대한 정보를 조사하는 동안 사용한 모든 리소스를 나열하고 있습니다.

JSON 요소

글로벌 스타일

스타일 엔진

읽어 주셔서 감사합니다! 블록 테마 사용과 CSS 관리 방법에 대한 의견을 듣고 싶습니다.