Gutenberg 12.1은 블록 Appender 레이아웃 이동을 수정하고 템플릿 목록 보기를 추가하며 전역 스타일을 향상시킵니다.

게시 됨: 2021-12-09

오늘 일찍 구텐베르그 12.1은 워드프레스 플러그인 디렉토리에 들어왔습니다. 최신 릴리스는 블록 어펜더 레이아웃 전환 수정, 새로운 전역 스타일 기능 및 향상된 템플릿 목록 보기를 포함하여 사용자 경험 개선에 중점을 두었습니다. 테마 작성자는 또한 모든 모양 관련 도구를 활성화하기 위한 새로운 플래그가 있습니다.

WordPress 5.9는 오늘 출시될 예정이었으나 2022년 1월 25일로 연기되었습니다. 기여자는 릴리스와 함께 번들로 제공되는 사이트 편집기 및 관련 도구를 개선하는 데 더 많은 시간이 필요했습니다. 지금까지 버그를 수정하고 전반적으로 더 나은 사용자 경험을 제공함으로써 추가 시간을 사용하고 있습니다.

더 이상 레이아웃 이동 없음

이것이 구텐베르그 12.1의 유일한 변화였다면 나는 세상에서 가장 행복한 사용자였을 것이다. 다행히도 다른 좋은 항목이 있지만 블록 편집기를 사용한 지 3년 만에 가장 큰 문제가 수정되었습니다.

콘텐츠 캔버스의 블록 어펜더(작은 + 버튼)는 이제 고정 위치를 사용하여 표시됩니다. 즉, 블록, 특히 다른 블록 안에 중첩된 블록을 선택할 때 화면이 더 이상 튕기지 않거나 레이아웃이 이동하거나 완벽하지 않은 섹션에 공백이 남지 않습니다.

Appender 버튼은 레이아웃을 이동하지 않습니다.

나는 이것이 과거에 복잡한 레이아웃을 구축할 때 골칫거리였다는 것을 다른 사람들과 이야기하면서 압니다. 어떤 사람들은 블록 편집기가 너무 짜증나기 때문에 블록 편집기를 전혀 사용하지 않을 것입니다. 이 캠프에 빠지면 다시 한 번 시도해 볼 가치가 있습니다. 사용자 경험이 크게 개선되었습니다.

전역 스타일 개선 사항

이제 사용자는 전역 스타일 사이드바의 색상 팔레트 섹션을 통해 사용자 정의 그라디언트를 정의할 수 있습니다. 이들은 사이트 전체에서 사용할 수 있으며 테마와 관련이 없습니다.

사용자 정의 그라디언트 만들기.

팔레트는 동일한 그라디언트 섹션 아래에 이중톤 색상도 표시합니다. 그러나 사용자 정의 이중톤 필터를 만드는 옵션은 아직 없습니다. 읽기 전용 섹션입니다.

전역 스타일 패널은 또한 텍스트와 링크 요소 사이의 타이포그래피 옵션을 분할하여 향후 다른 HTML 요소에 대한 가능성을 열어줍니다.

타이포그래피 섹션을 연결합니다.

사용자는 링크에 대해 이것을 변경해서는 안 됩니다. 대신 일반적으로 주변 텍스트와 일치해야 합니다. 앞으로 텍스트 장식이나 이와 유사한 옵션이 생긴다면 분리가 더 합리적일 수 있습니다. 그러나 글꼴 크기 또는 줄 높이와 같은 설정을 변경하면 디자인에 해로울 수 있습니다.

템플릿 및 템플릿 부품 보기

Gutenberg 12.1은 사이트 편집기에서 새 템플릿 및 템플릿 부품 목록 보기를 도입합니다. 이 기능의 UI는 지난 몇 가지 플러그인 버전을 뛰어 넘었습니다. 목록은 편집기의 왼쪽 슬라이드 아웃 패널을 통해 몇 달 동안 사용할 수 있었습니다. 그런 다음 11.9에서 완전히 제거되었습니다. 해당 릴리스와 12.0 사이에 다시 나타났습니다.

이제 패널이 사이트, 템플릿 및 템플릿 부분에 대한 세 개의 링크를 포함하도록 축소되었습니다. 첫 번째 링크는 사이트 편집기를 불러옵니다. 나머지는 기존 템플릿의 테이블을 표시합니다.

템플릿 목록 보기.

현재 화면 전환이 느립니다. 하지만 이것은 전 세계 워드프레스 사용자들이 보게 될 사이트 에디터 1.0 버전입니다. 시간이 지남에 따라 변경될 것입니다. Riad Benguella는 발표 게시물에서 "현재 반복되는 디자인은 단순성과 사용성을 선호합니다. "클라이언트 측 탐색 및 모자이크 보기를 구현하는 반복이 향후에 추가될 수 있습니다."

카테고리나 작성자 아카이브와 같은 사용자 지정 템플릿을 추가하는 방법은 없는 것 같습니다. Twenty Twenty-Two 테마를 사용할 때 "새 항목 추가" 버튼을 클릭하면 전면 페이지 및 검색 템플릿에 대한 옵션이 표시됩니다.

그러나 새 템플릿 부분을 추가하는 것은 훨씬 더 세련된 프로세스입니다. 버튼을 클릭하여 생성하면 다음 스크린샷과 같이 사용자에게 오버레이와 양식이 표시됩니다.

사용자 정의 템플릿 부품 생성.

사용자는 사용자 지정 이름을 지정하고 일반, 머리글 및 바닥글의 세 가지 허용 영역 중에서 선택할 수 있습니다. 새 부품을 만든 후 사용자는 편집기로 이동합니다.

템플릿 부품 목록을 다시 볼 때 이를 생성한 사용자가 표시되고 옵션 드롭다운(줄임표 버튼)이 있습니다. 현재 유일한 조치는 부품을 삭제하는 것입니다.

템플릿 부품 목록 보기.

새 템플릿을 만들 때 최상위 템플릿이 템플릿 부분과 동일한 처리를 받는 것을 보고 싶습니다. 그들 사이에는 약간의 차이가 있지만 둘 다 결국에는 템플릿입니다. 생성 프로세스가 일치하면 사용자 경험에 도움이 됩니다.

이 화면에서 기본 목록 외부에 사용자 정의 템플릿을 생성하면 디자이너가 사이트 편집기에서 시각적으로 테마를 구축하는 데 도움이 됩니다.

빈 탐색 폴백

최신 릴리스에는 빈 탐색 메뉴 블록에 대한 대체가 도입되었습니다. 궁극적으로 메뉴가 없으면 페이지 목록 블록이 표시됩니다. Twenty Twenty-Two의 다음 스크린샷에서 볼 수 있듯이 사용자 사이트의 페이지 수에 따라 이 작업은 빠르게 해결되지 않을 수 있습니다.

긴 페이지 목록이 있는 탐색 블록 대체.

테마 개발자는 탐색 부모에 대해 false 값 또는 유효한 자식 블록 집합을 반환하여 block_core_navigation_render_fallback 필터 후크를 통해 이 대체를 덮어쓸 수 있습니다. 테마 작성자 여러분, 이 필터 후크를 아낌없이 사용하도록 초대합니다.

주목할만한 블록 테마 아이템

블록 테마 개발자를 위해 표준 템플릿 관련 폴더의 이름이 변경되었습니다. 이전 이름은 계속 작동하지만 작성자는 테마에서 다음을 업데이트해야 합니다.

  • /block-templates 이름이 /templates 로 변경됨
  • /block-template-parts 이름이 /parts 로 변경됨

이 변경은 최상위 테마 디렉토리를 정리하지만 향후 더 많은 표준화를 위한 경로를 생성합니다. /patterns 에 대한 공개 티켓이 이미 있으며 /styles 폴더가 가능합니다.

Gutenberg 12.1은 또한 theme.json 에 대한 appearanceTools 플래그를 도입하여 테마 작성자가 현재 및 미래의 모든 테두리, 색상, 간격 및 타이포그래피 옵션을 지원할 수 있도록 합니다. 마지막 릴리스와 함께 번들로 기능을 잘못 표시한 Gutenberg 12.0 게시물에서 이에 대해 더 자세히 다루었습니다.