WordPress 블록 테마에서 CSS 스타일 관리

CSS가 WordPress 테마로 작성되는 방법은 극적으로 변화하고 있습니다. 최근에 WordPress가 크게 홍보하는 새로운 문서 인 WordPress에서 Fluid Font 지원을 추가하는 기술을 공유했습니다. WordPress는 Site-Whole Editing (FSE) 기능을 지원하는 WordPress 테마 스타일을 정의하기위한 중심적인 소스가 될 새로운 문서입니다.

잠깐, 아니요 파일? 우리는 여전히 그것을 가지고 있습니다. 실제로

는 여전히 블록 테마에서 필요한 파일이지만 효과가 감소하고 주제에 대한 메타 정보를 등록하는 데만 사용됩니다. 즉, theme.json는 여전히 활발한 발전을 받고 있습니다. 즉, 우리는 ,

및 심지어 블록 레벨로 정의 된 스타일을 찾을 수있는 과도기 기간에 있습니다.

그렇다면이 WordPress FSE 시대에서 실제로 어떤 스타일이 좋아 하는가? 이것이 제가이 기사에서 소개하고 싶은 것입니다. WordPress 테마 개발자 매뉴얼에는 블록 테마 스타일에 대한 문서가 부족하므로 여기에서 다루는 모든 내용은 현재 상황과 WordPress 테마에 대한 향후 토론에 대한 정보입니다. style.css WordPress 스타일의 진화 WordPress 6.1에 포함 된 새로운 개발 기능은 스타일을 완전히 정의하는 시스템에 더 가깝게 만들어 지지만, 완전히 의존하기 전에 여전히해야 할 일이 여전히 많습니다. 실험 기능이 일반적으로 테스트되는 Gutenberg 플러그인을 사용하여 향후 릴리스에 무엇이 나타날 지 배울 수 있습니다. style.css 우리는 또한 기본 WordPress 테마의 진화를 살펴보면 현재 상태에 대해 배울 수 있습니다. 지금까지 사이트 전체 편집을 지원하는 세 가지 기본 테마가 있습니다.

Twenty Twenty-One (TT1) :
• 이것은 블록과 호환되는 최초의 클래식 기본 테마 버전입니다. 블록 버전 (TT1 블록)도 있으며 그 이후로 블록 테마를위한 신뢰할 수있는 리소스였습니다. 그러나 TT1의 5900 행의 CSS는 모두 에 있습니다. 없음 파일. TT1 블록은 블록 편집기 시대에서 스타일을 처음 보았을 때 모델보다는 트레일러라고 생각할 수 있습니다. 2122-2 (tt2) : style.css 이것은 최초의 진정한 블록 기반 기본 WordPress 테마이며 우리가 처음 만난 theme.json. 이 파일에는 373 줄의 코드 만 포함되어 있습니다. 주요 개발자들은 CSS가없는 테마로 만들기 위해 조정 된 노력을 기울였습니다.
는 여전히
• 가 실험 Gutenberg 플러그인에서 해결되는 것은 아니기 때문에 여전히 코드의 코드가 남아 있습니다. 스물 23 명 (TT3) : 이것은 WordPress 6.1에 게시되며 필요한 파일에 CSS가없는 첫 번째 테마 예제입니다. theme.json style.css 그러나 그러나 theme.json의 CSS를 JSON 속성-값 쌍으로 즉시 교체하지 마십시오. 이 작업을 고려하기 전에 여전히
에서 지원할 CSS 스타일 규칙이 여전히 있습니다. 나머지 중요한 문제는 현재 논의되고 있으며, 목표는 모든 CSS 스타일 규칙을
• 를 완전히 옮기고 의 다른 소스를 하나의 UI로 병합하여 WordPress 사이트 편집기에서 직접 글로벌 스타일을 설정하는 것입니다. 이것은 우리를 비교적 어려운 상황에 처하게합니다. 테마 스타일을 무시할 명확한 경로는 없을뿐만 아니라 스타일의 출처가 무엇인지 불분명합니다. 파일, style.css, Gutenberg 플러그인 또는 다른 곳의 다른 레이어에서 나온 것입니까?
<.> 왜 Style.css 대신 테마 .json을 선택합니까?

WordPress가 기존 CSS 파일 대신 JSON 기반 스타일 정의로 변하는 이유가 궁금 할 것입니다. Gutenberg의 개발 팀의 Ben Dwyer는 왜

메소드가 주제 개발자에게 이점이되는지를 대단히 설명합니다. style.css 벤의 게시물을 읽을 가치가 있지만 요점은이 인용문에 있습니다. theme.json 레이아웃, 사전 설정 또는 블록 스타일이든, CSS를 덮어 쓰기 CSS는 통합 및 상호 운용성에 대한 장벽을 만들 수 있습니다. 프론트 엔드와 편집기 간의 시각적 일관성은 유지하기가 더 어려워지고 블록 내에서 업그레이드하는 것이 오버리와 충돌 할 수 있습니다. 또한, 사용자 정의 CSS는 다른 블록 테마에서 휴대용이 덜 휴대합니다. theme.json "기본"정의 스타일의 계층 구조는 주제 저자가 가능한 한 theme.json API를 사용하도록 장려함으로써 올바르게 해결할 수 있습니다. theme.json

CSS를 JSON으로 옮기는 주요 이점 중 하나는 JSON이 기계로 읽을 수있는 형식이라는 것입니다. 즉, API를 가져 와서 WordPress 사이트 편집기 UI에 노출 될 수 있으며, 사용자는 CSS를 작성하지 않고도 기본값을 수정하고 사이트의 모양을 사용자 정의 할 수 있습니다. 또한 블록을 일관되게 스타일링하는 방법을 제공하는 동시에 특정 레이어를 생성하는 구조를 제공하여 사용자 설정이 에 정의 된 설정보다 우선 순위가 높습니다. 글로벌 스타일 UI의 테마 수준 스타일과 사용자 정의 스타일 사이의 이러한 상호 작용은 JSON 방법을 매우 매력적으로 만듭니다.

개발자는 JSON의 일관성을 유지하고 사용자 사용자 정의를 통해 유연성을 얻습니다. 이것은 상생 상황입니다. theme.json 물론 다른 이점이 있으며 WP Engine의 Mike McAlister는이 트위터 스레드에 몇 가지를 나열합니다. Make WordPress Core 블로그에 대한 심도있는 토론에서 더 많은 혜택을 찾을 수 있습니다. 읽은 후 JSON 메소드의 장점을 고전적인 주제에서 스타일을 정의하고 덮어 쓰는 사용 가능한 방법과 비교하십시오. theme.json JSON 요소 를 사용하여 스타일을 정의합니다 우리는 테마의 일부를 설정할 수있는 측면에서 많은 진전을 보았습니다. WordPress 6.1 이전에, 우리가 실제로 할 수있는 것은 제목과 링크를 스타일링하는 것뿐입니다. 이제 WordPress 6.1을 사용하면 버튼, 제목, 따옴표 및 제목을 추가 할 수 있습니다.

우리는 를 정의하여이를 수행합니다. 요소는 WordPress 블록에 존재하는 단일 구성 요소로 취급 될 수 있습니다. 제목, 단락 및 버튼이있는 블록이 있다고 가정합니다. 이 개별 부분은 요소이며, 우리가 그들의 스타일을 정의하는

객체가 있습니다.

JSON 요소를 설명하는 더 좋은 방법은 주제와 블록의 낮은 수준 구성 요소가되는 것이며, 이는 블록 복잡성이 필요하지 않습니다. 이들은 블록으로 정의되지 않았지만 블록 사이에 사용할 수있는 HTML 프리미티브의 표현입니다. WordPress (및 Gutenberg Plug-In)에서 지원되는 방법은 Block Editor Manual 및 Carolina Nymark 의이 사이트 전체 편집 자습서에 설명되어 있습니다.

예를 들어

객체의 링크 스타일은 블록 자체가 아닙니다. 그러나 링크는 블록에 사용될 수 있으며

객체에 정의 된 스타일을 상속합니다. 그러나 일부 요소는 제목 및 버튼 블록과 같은 블록으로 등록되므로 요소의 정의를 완전히 요약하지는 않지만이 블록은 여전히 ​​다른 블록에서 사용할 수 있습니다. theme.json 다음은 Carolina가 제공하는 요소 테이블입니다. WordPress 6.1 전에

에서 스타일링하는 데 사용할 수 있습니다. 알다시피, 이것은 여전히 ​​초기 단계에 있으며 Gutenberg 플러그인에서 WordPress 코어로 이동해야 할 것이 여전히 많습니다. 그러나 CSS 파일 또는 DevTools에서 선택기를 검색하지 않고 테마의 모든 타이틀을 전 세계적으로 설정하는 것이 얼마나 빨리 있는지 알 수 있습니다.

또한

의 구조가 글로벌 요소 (제목과 같은)에서 개별 요소 (예 : H1), 블록 수준 스타일 (예 : 블록에 포함 된 H1)에 이르기까지 특정 레이어를 형성하는 방법을 이해하기 시작할 수 있습니다. theme.json JSON 요소에 대한 자세한 내용은 Gutenberg 플러그인 Github 리포지토리에서 WordPress 제안 및이 공개 티켓을 참조하십시오.

JSON 및 CSS 특이성

CSS 특이성에 대해 계속 논의합시다. 앞에서 언급했듯이 JSON의 스타일 방법은 계층 구조를 만듭니다. 이것은 사실입니다. JSON 요소의 에 정의 된 스타일은 기본 테마 스타일로 간주됩니다. 글로벌 스타일 UI에서 사용자가 설정 한 내용은 기본값을 무시합니다.

다시 말해 <:> 사용자 스타일은 기본 테마 스타일보다 특이성이 높습니다. 버튼 블록을보고 그것이 어떻게 작동하는지 이해합시다.

나는 CSS 스타일이없는 빈 WordPress 테마 인 Emptytheme을 사용합니다. 새 페이지에 버튼 블록을 추가하겠습니다. Ok, 우리는 WordPress Core에 몇 가지 간단한 스타일이 제공된다는 것을 알고 있습니다. 이제 WordPress 6.1의 기본 TT3 테마로 전환하여 활성화하겠습니다. 버튼으로 페이지를 새로 고치면 버튼 스타일이 변경됩니다.

당신은 TT3의 theme.json 파일 에서이 새로운 스타일의 위치를 ​​정확히 알 수 있습니다. 이것은 JSON 요소 스타일이 WordPress 코어 스타일보다 우선한다는 것을 알려줍니다.

이제 버튼 블록의 기본 배경색이 빨간색으로 설정된 어린이 테마에서 TT3을 덮어 쓸어 TT3을 수정합니다.

그러나 마지막 스크린 샷에서 검색 버튼을 기록하십시오. 그것은 또한 빨간색이어야합니까? 이것은 내가 만든 변경이 전 세계 수준이라면 다른 수준에서 스타일링되어야 함을 의미합니다. 두 버튼을 변경하려면 사이트 편집기의 글로벌 스타일 UI를 사용하여 사용자 수준에서 변경할 수 있습니다. 우리는 글로벌 스타일 UI를 사용하여 두 버튼의 배경색을 파란색으로 변경하고 텍스트를 수정했습니다. 파란색은 테마 스타일보다 우선합니다!

스타일 엔진 이것은 WordPress 블록 테마에서 CSS 특이성을 관리하는 방법에 대해 매우 빠르지 만 좋은 아이디어입니다. 그러나이 스타일이 어디에서 생성되는지 명확하지 않기 때문에 이것은 완전한 그림이 아닙니다. WordPress는 어딘가에서 나오는 고유 한 기본 스타일을 가지고 있으며

의 데이터를 사용하여 더 많은 스타일 규칙을 얻고 글로벌 스타일로 설정된 모든 규칙을 덮어 씁니다.

이 스타일이 상환됩니까? 별도의 스타일 시트에 있습니까? 아마도 그들은 페이지에 주사되었을까요?

이것은 새로운 스타일 엔진이 해결 될 것으로 예상되는 문제입니다. 스타일 엔진은 WordPress 6.1의 새로운 API로 스타일을 생성하고 스타일의 응용 위치를 일관되게 유지하는 것을 목표로합니다. 다시 말해, 가능한 모든 스타일 소스가 필요하며 블록 스타일을 올바르게 생성하는 데 개별적으로 책임이 있습니다. 알아요. 몇 가지 스타일을 작성하기 위해 다른 추상화 레이어 위에 추상화 레이어가 추가되었습니다. 그러나 중앙 집중식 스타일 API를 갖는 것은 아마도 스타일이 여러 곳에서 나올 수 있다는 점을 감안할 때 가장 우아한 솔루션 일 것입니다.

우리는 처음으로 스타일 엔진 만보고 있습니다. 실제로, 티켓에 따르면, 지금까지 다음과 같은 작업이 이루어졌습니다.

> 감사 및 병합 백엔드 CSS 코드 위치를 지원하는 블록을 생성하여 동일한 위치에서 여러 위치가 아닌 동일한 위치에서 전달되도록합니다. 여기에는 여백, 충전, 타이포그래피, 색상 및 국경과 같은 CSS 규칙이 포함됩니다.

중복 레이아웃 특정 스타일을 제거하고 의미 클래스 이름을 생성하십시오.
• 블록, 레이아웃 및 요소로 페이지에 인쇄를 지원하는 인라인 스타일 태그 수를 줄입니다.
• 기본적으로 이것은 주제에 대한 모든 CSS 스타일 규칙을 포함하는 단일 API를 구축하는 기초입니다. WordPress가 6.1 이전에 인라인 스타일을 주입하는 방식을 정리하고 시맨틱 클래스 이름을위한 시스템을 구축합니다.
스타일 엔진의 장기 및 단기 목표에 대한 자세한 내용은 WordPress Core 토론을 참조하십시오. 더 많은 업데이트를 위해 추적 문제와 프로젝트 보드를 따라갈 수도 있습니다.
• JSON 요소를 사용하는 우리는 파일의 가 어떻게 JSON 요소는 일반적으로 두 가지 컨텍스트를 가지고 있습니다. 글로벌 레벨 스타일의 정의는 블록 특정 스타일이 선호되도록 블록 레벨보다 낮습니다. JSON 요소의 글로벌 스타일 새로운 기본 TT3 테마를 살펴보고 버튼의 스타일을 확인해 봅시다. 다음은 전역 스타일 섹션을 보여주는 TT3

  파일 (전체 코드)의 짧은 사본-포장입니다. 그러나 여기에서 원래 코드를 찾을 수 있습니다.

  뷰 코드

  ``` { "버전": 2, "설정": {}, // ... "스타일": { // ... "요소": { "버튼": { "국경": { "반경": "0" }, "색상": { "배경": "var (-WP-- 프리 세트-콜로 프라이어)", "텍스트": "var (-WP-- 프레셋 컬러-대회)" }, ": 호버": { "색상": { "배경": "var (-WP-- PreSet-Color-대회)", "텍스트": "var (-WP-- 프레셋 컬러-베이스)" } }, ":집중하다": { "색상": { "배경": "var (-WP-- PreSet-Color-대회)", "텍스트": "var (-WP-- 프레셋 컬러-베이스)" } }, ":활동적인": { "색상": { "배경": "var (-WP-- 프리셋 컬러-초등 회)", "텍스트": "var (-WP-- 프레셋 컬러-베이스)" } } }, "H1": { "타이포그래피": {} }, // ... "제목": { "타이포그래피": { "Fontweight": "400", "LineHeight": "1.4" } }, "링크": { "색상": { "텍스트": "var (-WP-- 프레셋 컬러-대회)" }, ": 호버": { "타이포그래피": { "TextDecoration": "없음" } }, ":집중하다": { "타이포그래피": { "TextDecoration": "Underline Dashed" } }, ":활동적인": { "색상": { "텍스트": "var (-WP-- 프리셋 컬러-고등학교)" }, "타이포그래피": { "TextDecoration": "없음" } }, "타이포그래피": { "TextDecoration": "밑줄" } } }, // ... }, "TemplateParts": {} } <.>

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

  { "버전": 2, // ... "스타일": { // 글로벌 레벨 스타일 "요소": {}, // 블록 레벨 스타일 "블록": { "코어/검색": { "요소": { "버튼": { "색상": { "배경": "var (-WP-- 프레셋 컬러-4 분기)", "텍스트": "var (-WP-- 프레셋 컬러-베이스)" } } }, // ... } } } } <.>

  <code>
  所有按钮都在全局级别（`styles.elements.button`）设置样式。
  
  我们也可以在DevTools中确认这一点。请注意，名为`.wp-element-button`的类是选择器。相同的类也用于设置交互式状态。
  
  同样，所有这些样式都在全局级别发生，来自`theme.json`。每当我们使用按钮时，它都将具有相同的背景，因为它们共享相同的选择器，并且没有其他样式规则覆盖它。
  
  顺便说一句，WordPress 6.1添加了对使用`theme.json`中的伪类（包括`:hover`、`:focus`和`:active`）或全局样式UI设置某些元素（如按钮和链接）的交互式状态样式的支持。Automattic工程师Dave Smith在一个YouTube视频中演示了此功能。
  
  我们可以在`theme.json`中（最好在子主题中，因为我们使用的是默认WordPress主题）或在站点编辑器中的全局样式设置中覆盖按钮的背景颜色（不需要子主题，因为它不需要代码更改）。
  
  但是，按钮将同时更改。如果我们想在按钮是特定块的一部分时覆盖背景颜色怎么办？这就是块级样式发挥作用的地方。
  
  #### 元素的块级样式
  
  为了了解如何在块级别使用和自定义样式，让我们更改包含在搜索块中的按钮的背景颜色。请记住，有一个按钮块，但我们正在做的是在搜索块的块级别覆盖背景颜色。这样，我们只在那里应用新颜色，而不是将其全局应用于所有按钮。
  
  为此，我们在`theme.json`的`styles.blocks`对象上定义样式。没错，如果我们在`styles.elements`上定义所有按钮的全局样式，我们可以在`styles.block`上定义按钮元素的块特定样式，这遵循类似的结构：
  </code>

  { "버전": 2, "스타일": { // 글로벌 레벨 스타일 "요소": {}, // 블록 레벨 스타일 "블록": {} } } <.>
  { "버전": 2, "스타일": { // 글로벌 레벨 스타일 "요소": { "제목": { "색상": "var (-WP-- 프레셋 컬러-베이스)" }, }, // 블록 레벨 스타일 "블록": {} } } <.>

  <code>
  看到了吗？我在`styles.blocks.core/search.elements.button`上设置了背景和文本属性，并使用了WordPress中预设的两个CSS变量。
  
  结果？搜索按钮现在是红色的（`--wp--preset--color--quaternary`），默认按钮块保留其亮绿色背景。
  
  我们也可以在DevTools中看到更改。
  
  如果我们想设置包含在其他块中的按钮的样式，也是如此。按钮只是一个例子，所以让我们再看一个。
  
  ### 示例：在每个级别设置标题样式
  
  让我们用一个例子来巩固所有这些信息。这次，我们将：
  
  - 全局设置所有标题的样式
  - 设置所有二级标题元素的样式
  - 设置查询循环块中二级标题元素的样式
  
  首先，让我们从`theme.json`的基本结构开始：
  </code>

  { "버전": 2, "스타일": { // 글로벌 레벨 스타일 "요소": { "제목": { "색상": "var (-WP-- 프레셋 컬러-베이스)" }, "H2": { "색상": "var (-WP-- 프리셋 컬러-프라이팬)", "타이포그래피": { "fontsize": "클램프 (2.625rem, calc (2.625rem ((1VW -0.48REM) * 8.4135)), 3.25REM)" " } } }, // 블록 레벨 스타일 "블록": {} } } <.>

  <code>
  这为我们的全局和块级样式建立了轮廓。
  
  #### 全局设置所有标题的样式
  
  让我们将`headings`对象添加到我们的全局样式并应用一些样式：
  </code>

  { "버전": 2, "스타일": { // 글로벌 레벨 스타일 "요소": { "제목": { "색상": "var (-WP-- 프레셋 컬러-베이스)" }, "H2": { "색상": "var (-WP-- 프리셋 컬러-프라이팬)", "타이포그래피": { "fontsize": "클램프 (2.625rem, calc (2.625rem ((1VW -0.48REM) * 8.4135)), 3.25REM)" " } } }, // 블록 레벨 스타일 "블록": { "코어/쿼리": { "요소": { "H2": { "타이포그래피": { "Fontsize": 3.25rem } } } } } } } <.>

위 내용은 WordPress 블록 테마에서 CSS 스타일 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!