WordPress Site Editor의 주요 목표 중 하나(예, 이제 "공식" 이름) 기본 블록 스타일을 이동하는 것입니다. 에 CSS를 구조화된 JSON으로. JSON 파일은 기계가 읽을 수 있으므로 WordPress에서 직접 테마의 전체 스타일을 구성하기 위해 JavaScript 기반 사이트 편집기에서 사용할 수 있습니다.
아직 다 안 왔어요! Twenty Twenty-Two(TT2) 기본 테마를 보면 해결되지 않은 두 가지 주요 문제가 있습니다. 스타일링 상호 작용 (처럼 :hover, :active, :focus), 그리고 여백 과 레이아웃 컨테이너 패딩. TT2에서 일시적으로 어떻게 수정되었는지 확인할 수 있습니다. style.css 파일로 만드는 것보다 theme.json 파일.
워드 프레스 6.1 이러한 문제를 해결했고 제가 원하는 것은 특히 후자를 살펴보는 것입니다. 이제 레이아웃 컨테이너의 여백 및 패딩에 대한 JSON 스타일이 있으므로 테마 레이아웃에서 간격을 정의하는 보다 유연하고 강력한 방법.
우리는 어떤 종류의 간격에 대해 이야기하고 있습니까?
먼저, 우리는 이미 루트 수준 패딩 패딩을 설명하는 멋진 방법입니다. 요소. 모든 페이지와 게시물에서 공유되는 요소에서 일관된 간격을 보장하기 때문에 좋습니다.
하지만 더 많은 것이 있습니다. 이제 블록이 해당 패딩을 우회하고 전체 너비로 정렬할 수 있는 방법이 생겼기 때문입니다. 덕분입니다 패딩 인식 정렬 의 새로운 옵트인 기능입니다. theme.json. 따라서 루트 수준 패딩이 있는 경우에도 이미지(또는 다른 블록)가 전체 너비로 확장되도록 허용할 수 있습니다.
그것은 우리가 얻는 또 다른 것을 얻습니다. 제한된 레이아웃. 여기서 아이디어는 레이아웃에 중첩된 모든 블록이 레이아웃의 콘텐츠 너비(전역 설정)를 준수하고 외부로 흐르지 않는다는 것입니다. 정렬을 사용하여 블록별로 해당 동작을 재정의할 수 있지만 그렇게 하겠습니다.
부터 시작하겠습니다...
루트 수준 패딩
다시 말하지만 이것은 새로운 것이 아닙니다. 우리는 요소 theme.json 실험 이후 구텐베르크 플러그인 버전 11.7에서 도입되었습니다. 우리는 그것을 설정 styles.spacing 객체, 우리가 가지고 있는 곳 margin 과 padding 본문의 위쪽, 오른쪽, 아래쪽 및 왼쪽 간격을 정의하는 개체:
{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}전역 설정입니다. 따라서 DevTools를 열어서 요소에서 다음 CSS 스타일을 볼 수 있습니다.
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;
}시원한. 그러나 여기에는 일부 블록이 그 간격을 벗어나 전체 화면을 가장자리에서 가장자리로 채우도록 허용할 수 있는 방법에 대한 문제가 있습니다. 그래서 간격이 있는 거죠? 미연에 방지할 수 있도록 도와줍니다!
그러나 실제로 블록 편집기에서 작업할 때 일회성 인스턴스에서 해당 간격을 벗어나고 싶을 수 있는 경우가 많이 있습니다. 페이지에 이미지 블록을 배치하고 나머지 콘텐츠가 루트 수준 패딩을 존중하는 동안 전체 너비로 이동하기를 원한다고 가정해 봅시다.
시작하다…
패딩 인식 정렬
모든 스타일을 정의하는 첫 번째 기본 WordPress 테마를 만들려고 시도하는 동안 theme.json 파일에서 리드 디자이너 Kjell Reigstad는 루트 수준 패딩을 깨는 데 있어 어려운 측면을 설명합니다. GitHub 문제.
이 문제를 해결하기 위해 WordPress 6.1의 새로운 기능이 만들어졌습니다. 다음에 그것들을 파헤쳐 보자.
useRootPaddingAwareAlignments
새로운 useRootPaddingAwareAlignments 속성은 문제를 해결하기 위해 만들어졌습니다. 실제로 Gutenberg 플러그인 v13.8에서 처음 도입되었습니다. 그만큼 원래 풀 리퀘스트 작동 방식에 대한 좋은 입문서입니다.
{
"version": 2,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
// etc.
},즉시 이 기능을 선택해야 합니다. 속성은 다음과 같이 설정됩니다. false 기본적으로 명시적으로 설정해야 합니다. true 활성화하기 위해. 또한 우리가 appearanceTools 로 설정 true 뿐만 아니라. 그것은 우리를 UI 컨트롤로 선택합니다 스타일 테두리, 링크 색상, 타이포그래피 및 예, 여백과 패딩을 포함하는 간격에 대한 사이트 편집기에서.
환경 appearanceTools 로 설정 true 자동으로 블록을 마진 및 패딩으로 선택 둘 중 하나를 설정하지 않고 settings.spacing.padding or setting.spacing.margin 에 true.
우리가 활성화 할 때 useRootPaddingAwareAlignments에 설정된 루트 패딩 값이 있는 사용자 지정 속성이 제공됩니다. 프런트 엔드의 요소. 흥미롭게도 패딩을 .editor-styles-wrapper 백엔드 블록 편집기에서 작업할 때 간격이 표시되도록 클래스. 정말 멋진!
여기저기 파헤치면서 DevTools에서 이러한 CSS 사용자 지정 속성을 확인할 수 있었습니다.
사용 useRootPaddingAwareAlignments 또한 위의 전역 스타일 이미지에서 "내용" 너비 및 "넓은" 너비 값을 지원하는 모든 블록에 왼쪽 및 오른쪽 패딩을 적용합니다. 우리는 또한 이러한 값을 다음에서 정의할 수 있습니다. theme.json:
{
"version": 2,
"settings": {
"layout": {
"contentSize": "640px",
"wideSize": "1000px"
}
}
}전역 스타일 설정이 정의된 것과 다른 경우 theme.json이면 전역 스타일이 우선합니다. 블록 테마 스타일 관리에 대한 모든 것을 배울 수 있습니다. 내 마지막 기사에서.
contentSize블록의 기본 너비입니다.wideSize"와이드" 레이아웃 옵션을 제공하고 블록을 확장할 수 있는 더 넓은 열을 설정합니다.
따라서 마지막 코드 예제는 다음 CSS를 제공합니다.
/* The default content container */
.wp-container-[id] > * {
max-width: 640px;
margin-left: auto !important;
margin-right: auto !important;
}
/* The wider content container */
.wp-container-[id] > .alignwide {
max-width: 1000px;
}[id] WordPress에서 자동으로 생성된 고유 번호를 나타냅니다.
하지만 우리가 무엇을 더 얻을 수 있을까요? 전체 정렬도!
.wp-container-[id] .alignfull {
max-width: none;
}저거 봐? 활성화하여 useRootPaddingAwareAlignments 그리고 정의 contentSize 과 wideSize, 페이지 및 게시물에 추가되는 블록의 너비를 제어하기 위한 총 XNUMX개의 컨테이너 구성에 대한 전체 정렬 CSS 클래스도 얻습니다.
이는 열, 그룹, 게시물 콘텐츠 및 쿼리 루프와 같은 레이아웃별 블록에 적용됩니다.
블록 레이아웃 컨트롤
앞서 언급한 레이아웃별 블록을 페이지에 추가한다고 가정해 보겠습니다. 블록을 선택하면 블록 설정 UI는 다음을 기반으로 새로운 레이아웃 설정을 제공합니다. settings.layout 우리가 정의한 값 theme.json (또는 전역 스타일 UI).
우리는 여기에서 매우 구체적인 블록을 다루고 있습니다. 내부에 다른 블록이 중첩될 수 있는 블록입니다. 따라서 이러한 레이아웃 설정은 중첩된 블록의 너비와 정렬을 제어하는 것과 관련이 있습니다. "내부 블록은 콘텐츠 너비 사용" 설정은 기본적으로 활성화되어 있습니다. 우리가 그것을 끄면 우리는 max-width 컨테이너와 그 안의 블록은 가장자리에서 가장자리로 이동합니다.
토글을 켠 상태로 두면 중첩된 블록이 contentWidth or wideWidth 값(자세한 내용은 잠시 후). 또는 숫자 입력을 사용하여 사용자 지정을 정의할 수 있습니다. contentWidth 과 wideWidth 이 일회성 인스턴스의 값입니다. 엄청난 유연성입니다!
와이드 블록
방금 살펴본 설정은 상위 블록에 설정되어 있습니다. 내부에 블록을 중첩하고 선택하면 해당 블록에서 다음을 사용할 수 있는 추가 옵션이 있습니다. contentWidth, wideWidth, 또는 전체 너비로 이동합니다.
contentWidth 설정, 상황에 맞는 메뉴에서 "없음"으로 표시되지만 다음으로 설정할 수도 있습니다. wideWidth ("넓은 너비"로 표시됨) 또는 "전체 너비"로 표시됩니다.WordPress가 루트 수준 패딩 CSS 사용자 정의 속성을 -1 "전체 너비" 옵션을 선택할 때 음수 여백을 만들 수 있습니다.
.alignfull 클래스는 루트 수준 패딩 설정과 충돌하지 않고 전체 뷰포트 너비를 차지하도록 중첩된 블록에 음수 여백을 설정합니다.제한된 레이아웃 사용
방금 WordPress 6.1에서 얻은 새로운 간격과 정렬을 다루었습니다. 이는 블록 및 블록 내의 중첩된 블록에만 적용됩니다. 그러나 워드프레스 6.1은 테마 템플릿의 유연성과 일관성을 더욱 높이기 위해 새로운 레이아웃 기능도 도입했습니다.
사례: WordPress는 Flex 및 Flow 레이아웃 유형을 완전히 재구성하여 제한된 레이아웃 사이트 편집기의 전역 스타일 UI에서 콘텐츠 너비 설정을 사용하여 테마에서 블록 레이아웃을 쉽게 정렬할 수 있는 유형입니다.
유연한, 흐름 및 제한된 레이아웃
이 세 가지 레이아웃 유형의 차이점은 출력하는 스타일입니다. Isabel Brison은 훌륭한 글을 썼습니다. 차이점을 잘 설명했지만 참조를 위해 여기에서 다른 말로 표현해 보겠습니다.
- 흐름 레이아웃: 내포된 블록 사이에 세로 간격을 추가합니다.
margin-block방향. 중첩된 블록은 왼쪽, 오른쪽 또는 가운데에 정렬할 수도 있습니다. - 제한된 레이아웃: 흐름 레이아웃과 정확히 동일하지만
contentWidth과wideWidth설정(또는theme.json또는 전역 스타일). - 플렉스 레이아웃: 이것은 WordPress 6.1에서 변경되지 않았습니다. 그것은 사용 CSS 플렉스박스 기본적으로 수평으로(행으로) 흐르지만 수직으로도 흐를 수 있으므로 블록이 다른 블록 위에 쌓이는 레이아웃을 만들 수 있습니다. 간격은 CSS를 사용하여 적용됩니다.
gap재산.
이 새로운 레이아웃 유형 슬레이트는 각 레이아웃에 대한 시맨틱 클래스 이름을 생성합니다.
| 시맨틱 레이아웃 클래스 | 레이아웃 유형 | 지원되는 블록 |
|---|---|---|
.is-layout-flow |
흐름 레이아웃 | 열, 그룹, 게시물 콘텐츠 및 쿼리 루프. |
.is-layout-constrained |
제한된 레이아웃 | 열, 그룹, 게시물 콘텐츠 및 쿼리 루프. |
.is-layout-flex |
플렉스 레이아웃 | 열, 버튼, 소셜 아이콘 |
Justin Tadlock은 다양한 레이아웃 유형 및 시맨틱 클래스, 사용 사례 및 예제 포함.
제한된 레이아웃을 지원하도록 테마 업데이트
직접 만든 블록 테마를 이미 사용하고 있다면 제한된 레이아웃을 지원하도록 업데이트. 필요한 것은 몇 가지를 교체하는 것입니다. theme.json:
{
"version": 2,
"settings": {
"layout": {
"type": "constrained", // replaces `"inherit": true`
"type": "default", // replaces `"inherit": false`
}
}
}간격 설정을 활성화한 최근 출시된 블록 테마입니다. useRootPaddingAwareAlignments 그리고 업데이트 theme.json 제한된 레이아웃을 정의하는 파일:
레이아웃 스타일 비활성화
기본 레이아웃 스타일은 WordPress 6.1 Core에 포함된 기본 기능입니다. 즉, 즉시 사용할 수 있습니다. 하지만 필요한 경우 이 작은 스니펫을 사용하여 비활성화할 수 있습니다. functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );큰 경고: 기본 레이아웃 유형에 대한 지원 비활성화 해당 레이아웃의 모든 기본 스타일을 제거합니다.. 즉, 다양한 템플릿 및 블록 컨텍스트에서 콘텐츠를 표시하는 데 필요한 간격, 정렬 및 기타 항목에 대해 고유한 스타일을 롤링해야 합니다.
최대 포장
전체 너비 이미지의 열렬한 팬으로서 새로 포함된 WordPress 6.1 레이아웃 및 패딩 인식 정렬 기능은 내가 가장 좋아하는 두 가지 기능입니다. 더 나은 마진 및 패딩 제어를 포함한 다른 도구와 함께 사용하면 유체 타이포그래피, 그리고 업데이트된 List 및 Quote 블록은 WordPress가 더 나은 콘텐츠 생성 경험을 향해 나아가고 있다는 확실한 증거입니다.
이제 우리는 평범한 디자이너와 콘텐츠 크리에이터의 상상력과 창의성이 이 놀라운 도구를 어떻게 사용하고 새로운 차원으로 끌어올릴지 지켜봐야 합니다.
진행 중인 사이트 편집기 개발 반복으로 인해 우리는 항상 어려운 길을 예상해야 합니다. 그러나 낙관론자로서 나는 곧 출시될 WordPress 6.2 버전에서 어떤 일이 일어날지 기대하고 있습니다. 제가 유심히 지켜보고 있는 것 중 일부는 다음과 같습니다. 고려중인 기능 포함, 지원 끈적한 포지셔닝, 새 레이아웃 클래스 이름 내부 블록 래퍼의 경우 업데이트된 바닥글 정렬 옵션및 Cover 블록에 제한된 흐름 레이아웃 옵션 추가.
이 GitHub 문제 #44720 레이아웃 관련 토론을 나열합니다. 워드프레스 6.2 예정.
추가 리소스
이 모든 것을 파헤치면서 많은 출처를 참조하고 참고했습니다. 다음은 제가 유용하다고 생각하고 여러분도 즐길 수 있을 것이라고 생각하는 많은 목록입니다.
