WordPress 블록 테마에서 새로 제한된 레이아웃을 사용합니다

WordPress 사이트 편집기 (현재 공식적으로 명명)의 주요 목표 중 하나는 기본 블록 스타일을 CSS에서 구조화 된 JSON으로 마이그레이션하는 것입니다. JSON 파일은 Machine Readable이므로 JavaScript 기반 사이트 편집기가 WordPress에서 직접 글로벌 테마를 구성 할 수 있습니다.

그러나이 작업은 아직 완전히 완료되지 않았습니다! 20 개의 22 개 (TT2) 기본 테마를 살펴보면, 스타일 상호 작용 (예 : 호버, : active, : focus) 및 레이아웃 컨테이너의 마진 및 패딩이 해결되지 않은 두 가지 주요 문제가 있습니다. 이러한 문제가 The Theme.json 파일에 추가하는 대신 TT2의 Style.css 파일에서 일시적으로 수정되는 방법을 알 수 있습니다.

WordPress 6.1은 이러한 문제를 해결하고 후자를 전문화하고 싶습니다. 이제 레이아웃 컨테이너 마진 및 패딩 용 JSON 스타일이있어 테마 레이아웃의 간격을 정의하는보다 유연하고 강력한 방법을 제공합니다.

우리는 어떤 종류의 간격에 대해 이야기하고 있습니까?

우선, 우리는 이미 루트 레벨 채우기

를 가지고 있으며, 이는 요소 채우기에 대한 멋진 진술입니다. 모든 페이지와 게시물에서 공유되는 요소에 대한 일관된 간격을 보장하기 때문에 좋습니다. 그러나 더 많은 것이 있습니다. 이제 우리는 블록이 그 패딩을 우회하고 전체 너비로 정렬 할 수있는 방법이 있기 때문입니다. 이는 테마의 새로운 옵션 기능인 Fill-Aware Alignment

덕분입니다. 따라서 루트 레벨 패딩이 있더라도 이미지 (또는 다른 블록)가 끊어지고 전체 너비를 표시 할 수 있습니다. 이것은 우리에게 또 다른 것을 상기시킵니다. 여기서 아이디어는 레이아웃에 중첩 된 모든 블록이 레이아웃의 내용 너비 (글로벌 설정)에 순종하며 그 너비에서 벗어나지 않는다는 것입니다. 정렬을 사용 하여이 동작 블록을 블록별로 덮어 쓸 수 있지만 나중에 논의하겠습니다. 시작하자 ... 루트 레벨 채우기

다시, 이것은 새로운 것이 아닙니다. 실험적인 Gutenberg 플러그인이 버전 11.7로 도입되었으므로 Theme.json에서 요소를 채우는 기능이 있습니다. 우리는 스타일에 그것을 설정합니다. 스페이션 객체, 여기서 우리는 신체의 상단, 오른쪽, 하단 및 왼쪽 간격을 정의하기 위해 마진과 패딩 객체를 가지고 있습니다.

이것은 글로벌 설정입니다. 따라서 DevTools를 열고 요소를 확인하면이 CSS 스타일이 표시됩니다.

나쁘지 않습니다. 그러나 문제는 특정 블록이 해당 간격을 뚫기 위해 전체 화면을 채우는 모서리에서 가장자리에서 가장자리를 채우는 방법입니다. 그래서 간격이 존재하는 이유입니다. 이것이 일어나지 않도록 도와줍니다! 그러나 블록 편집기에서 작업 할 때는 성적인 경우에 그 간격을 뚫고 자하는 많은 경우가 있습니다. 우리가 페이지에 이미지 블록을 넣고 나머지가 루트 레벨 패딩에 순종하는 동안 전체 너비를 표시하기를 원합니까? 입력 ... 채우기 정렬 리드 디자이너 Kjell Reigstad는 테마 .json 파일의 모든 스타일을 정의하는 첫 번째 기본 WordPress 테마를 만들려고 할 때이 GitHub 질문에서 루트 레벨 채우기를 깨뜨리는 데있어 어려운 측면을 보여줍니다.

WordPress 6.1의 새로운 기능은이 문제를 해결하도록 설계되었습니다. 다음에 이러한 것들을 파헤쳐 봅시다.

userootpaddingawarealignments

이 문제를 해결하기 위해 새로운 userootpaddingawarealignments 속성이 만들어졌습니다. 실제로 Gutenberg 플러그인 v13.8에서 처음 소개되었습니다. 원래 풀 요청은 작동 방식에 대한 좋은 소개를 제공합니다.

우선, 우리가 선택 해야하는 기능입니다. 이 속성은 기본적으로 False로 설정되며,이를 활성화하려면 명시 적으로 설정해야합니다. 또한 우리는 또한 외형을 true로 설정했습니다. 이를 통해 사이트 편집기에서 UI 컨트롤을 사용하여 스타일 테두리, 링크 색상, 타이포그래피 및 간격 (여백 및 충전 포함)을 설정할 수 있습니다.

septs.spacing.padding 또는 setting.spacing.margin to true를 설정하지 않고 블록을 선택하지 않고 블록을 자동으로 선택합니다.

userootpaddingawarealignments를 활성화하면 프론트 엔드 요소에 루트 채우기 값이 설정된 사용자 정의 속성이 나타납니다. 흥미롭게도, 백엔드 블록 편집기에서 작업 할 때 간격을 보여주기 위해 .Editor-Styles-Wrapper 클래스에 패딩을 적용합니다. 너무 멋져요! 나는 DevTools 에서이 CSS 사용자 정의 속성을 파기 동안 확인할 수있었습니다.

userootpaddingawarealignments 활성화는 위의 글로벌 스타일 이미지에서 "컨텐츠"너비 및 "폭"너비 값을 지원하는 모든 블록에 왼쪽 및 오른쪽 채우기를 적용합니다. 이 값을 테마에서 정의 할 수도 있습니다 .JSON :

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

contentsize는 블록의 기본 너비입니다.

Widesize는 "너비"레이아웃 옵션을 제공하고 블록 스트레칭을위한 더 넓은 열을 만듭니다.

따라서 마지막 코드 예제는 다음 CSS를 제공합니다.

[id]는 WordPress에 의해 자동으로 생성 된 고유 한 숫자를 나타냅니다.

하지만 우리가 무엇을 얻었는지 맞춰보세요? 완전히 정렬되었습니다!

봤어? userootpaddingawarealignments를 활성화하고 컨텐츠 크기 및 widesize를 정의함으로써 페이지 및 기사에 추가 된 블록 폭을 제어하는 ​​3 개의 컨테이너 구성에 대해 완전히 정렬 된 CSS 클래스를 얻습니다.

이것은 열, 그룹, 기사 내용 및 쿼리 루프의 다음 레이아웃 별 블록에 적용됩니다.

<code>body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}</code>

블록 레이아웃 컨트롤

위의 레이아웃 특정 블록을 페이지에 추가한다고 가정 해 봅시다. 블록을 선택하면 블록 설정 UI는 setting.json (또는 Global Style UI)에서 정의하는 설정 값을 기반으로 새로운 레이아웃 설정을 제공합니다. 내부 블록 사용량 내용 너비 설정은 기본적으로 활성화됩니다. 우리가 그것을 닫으면, 컨테이너에는 최대 폭이 없으며 그 블록은 가장자리에서 가장자리로 표시됩니다.

우리가 토글을 계속 켜면, 중첩 블록은 contentwidth 또는 widewidth 값에 순종합니다 (나중에 자세히 설명). 또는 숫자 입력을 사용 하여이 일회성 인스턴스에서 사용자 정의 Contentwidth 및 Widewidth 값을 정의 할 수 있습니다. 이것은 큰 유연성입니다!

넓은 블록 방금 본 설정은 부모 블록에 설정되었습니다. 블록을 내부에 중첩하고 선택하면 Contentwidth, Widewidth 또는 Full-Width 디스플레이에 해당 블록에서 추가 옵션을 사용할 수 있습니다.

전체 너비 옵션을 선택할 때 WordPress가 루트 레벨 인구 CSS 사용자 정의 속성에 -1을 -1로 곱하기 위해 음수 마진을 생성하는 방법에 유의하십시오.

제한된 레이아웃을 사용한 우리는 방금 WordPress 6.1에 의해 가져온 새로운 간격 및 정렬을 도입했습니다. 이들은 블록 내 및 블록 내 중첩 블록에만 해당됩니다. 그러나 WordPress 6.1은 테마 템플릿에서 유연성과 일관성을 높이기 위해 새로운 레이아웃 기능을 도입합니다.

예 : WordPress는 Flex 및 Flow Layout 유형을 완전히 리팩터링하고

제한된 레이아웃 유형을 제공하므로 사이트 편집기의 글로벌 스타일 UI의 컨텐츠 너비 설정을 사용하여 테마의 블록 레이아웃을보다 쉽게 ​​정렬 할 수 있습니다.

플렉스, 흐름 및 제한된 레이아웃

이 세 가지 레이아웃 유형의 차이점은 출력 스타일입니다. Isabel Brison은 이러한 차이점을 잘 설명하는 훌륭한 기사를 가지고 있지만 참조를 위해 여기에서 해석합시다.

흐름 레이아웃 :

마진 블록 방향으로 중첩 블록 사이에 수직 간격을 추가하십시오. 이 중첩 블록은 왼쪽 정렬, 오른쪽 정렬 또는 중앙 정렬 일 수도 있습니다.

제한된 레이아웃 : 는 흐름 레이아웃과 정확히 동일하지만 중첩 블록의 너비 제약은 Contentwidth 및 Widewidth 설정 (테마 또는 글로벌 스타일)을 기반으로합니다.

플렉스 레이아웃 :

이것은 WordPress 6.1에서 변경되지 않았습니다. CSS Flexbox를 사용하여 기본 수평 흐름 (한 행)이있는 레이아웃을 생성하지만 수직으로 흐를 수도 있으므로 블록은 하나씩 쌓입니다. CSS 갭 속성을 사용하여 간격을 적용하십시오.

이 새로운 레이아웃 유형은 각 레이아웃에 대한 시맨틱 클래스 이름을 만듭니다. Justin Tadlock은 사용 사례 및 예제를 포함하여 다양한 레이아웃 유형 및 시맨틱 클래스에 대한 광범위한 소개를 제공합니다.

제한된 레이아웃을 지원하기 위해 테마를 업데이트하십시오 이미 블록 테마를 사용하고 있다면 제한된 레이아웃을 지원하기 위해 업데이트해야합니다. Theme.json :
• 에서 교환 할 것이 몇 가지 밖에 없습니다. 이들은 userootpaddingawarealignments가 활성화 된 최근에 출시 된 간격 설정이며 Theme.json 파일이 제한된 레이아웃을 정의하기 위해 업데이트되었습니다. 레이아웃 스타일 비활성화 기본 레이아웃 스타일은 WordPress 6.1 코어의 기본 기능입니다. 다시 말해, 그들은 상자 밖으로 작동합니다. 그러나 필요한 경우 functions.php : 에서이 작은 코드를 사용하여 비활성화 할 수 있습니다.

  <code>{
    "version": 2,
    "styles": {
      "spacing": {
        "margin": {
          "top": "60px",
          "right": "30px",
          "bottom": "60px",
          "left": "30px"
        },
        "padding": {
          "top": "30px",
          "right": "30px",
          "bottom": "30px",
          "left": "30px"
        }
      }
    }
  }</code>

  여기에 중요한 경고가 있습니다. 기본 레이아웃 유형에 대한 지원은 이러한 레이아웃의 모든 기본 스타일을 제거합니다. 즉, 간격, 정렬 및 다양한 템플릿 및 블록 컨텍스트에 컨텐츠를 표시하는 데 필요한 모든 것을 스타일링해야합니다.
  요약 전체 폭스 이미지의 열렬한 팬으로서 새로운 기능에는 WordPress 6.1 레이아웃과 Fill-Aware Alignment가 내가 가장 좋아하는 두 가지 기능입니다. 더 나은 마진 및 충전 제어, 부드러운 타이포그래피 및 업데이트 된 목록 및 참조 블록을 포함한 다른 도구로 작업하는 것은 더 나은 콘텐츠 제작 경험에 대한 증거입니다.

  이제 우리는 일반 디자이너와 컨텐츠 제작자가 이러한 놀라운 도구를 사용하여 다음 단계로 끌어 올릴 수있는 방법을 기다려야합니다.

  사이트 편집기 개발 반복이 진행 중이므로 항상 도로의 어려움을 예상해야합니다. 그러나 낙관론자로서 나는 다음 버전의 WordPress 6.2에서 어떤 일이 일어나는지보고 싶습니다. 고려중인 기능, 스티커 포지셔닝 지원, 내부 블록 래퍼의 새로운 레이아웃 클래스 이름, 업데이트 된 바닥 글 정렬 옵션 및 커버 블록에 제한 및 유량 레이아웃 옵션을 추가하기 위해 세심한주의를 기울이고 있습니다.

  이 GitHub 문제 #44720에는 WordPress 6.2에 대한 레이아웃 관련 토론이 나와 있습니다.

  추가 자원 나는이 모든 것을 탐구하면서 많은 출처를 상담하고 언급했다. 다음은 내가 도움이 된 것을 찾은 거대한 목록입니다.

  튜토리얼

  레이아웃 스타일 (스타일 | 개발자 리소스) 테마 .json 레이아웃 및 간격 옵션 (사이트 전체 편집) 충전 인식 정렬 (사이트 전체 편집) WordPress의 레이아웃 및 넓은 정렬 : 과거, 현재 및 다가오는 변화 (Gutenberg Times) WordPress의 레이아웃 클래스의 Gutenberg Times

  WordPress 기사

  편집기 레이아웃 지원 6.1 이후에 업데이트되었습니다 (WordPress Core 생성)

위 내용은 WordPress 블록 테마에서 새로 제한된 레이아웃을 사용합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!