Gutenberg 11.5, 위젯 그룹화 추가, 블록 간격 기능 반복 및 탐색 메뉴 업데이트

게시 됨: 2021-09-17

Gutenberg 11.5는 오늘 일찍 도착했습니다. 탐색 블록에 대한 광범위한 변경, 위젯 그룹화를 위한 새로운 방법 및 더 많은 블록 간격 기능 통합이 포함된 대규모 릴리스입니다.

최신 릴리스에 포함된 기능에 대해 엇갈린 반응을 보였습니다. 어떤 시점에서 나는 스스로 생각했고 마침내 이것이 성공했습니다 . 다른 순간에는 Jean-Luc Picard의 유명한 얼굴 손바닥을 최고의 버전으로 렌더링했습니다. 하지만 수레바퀴는 계속 돌아가고, 프로젝트에 시간과 노력을 투자한 개발자들은 계속해서 개선해나가고 있습니다.

한 가지 빠른 참고 사항은 블록 편집기를 지원하는 테마를 실행하지 않는 모든 사람은 백엔드 스타일이 제자리에 있지 않은지 확인해야 한다는 것입니다. Gutenberg는 사용자의 활성 테마가 자체적으로 등록되지 않거나 theme.json 파일이 있는 경우 일부 기본 편집기 스타일을 자동으로 출력합니다. 이것은 사용자가 5.9까지 기다리지 않도록 WordPress 5.8.2와 같은 포인트 릴리스에 번들로 제공되어야 합니다.

탐색 블록 변경 사항

탐색 메뉴가 여전히 사이트 편집의 골칫거리인 상황에서 Gutenberg는 새로운 차원의 복잡성을 추가했습니다. 사이트 제목 및 사이트 로고 블록은 탐색 컨테이너 내부에서 허용됩니다.

Joen Asmussen이 원본 티켓에서 공유했듯이 일부 복잡한 레이아웃은 Navigation 블록 내에서 더 많은 내부 요소를 허용하는 것이 좋습니다.

이것은 사용자 정의 패턴을 통해 테마 작성자에게 레이아웃 가능성의 세계를 열 수 있습니다.

저는 구텐베르크가 이러한 고급 레이아웃의 기초를 다루는 데 문제가 없습니다. 그러나 우리는 아직 탐색의 기본을 매끄럽게 하지 못했습니다. 사이트 내 링크를 검색하고 삽입하는 경험은 기껏해야 여러 번 마우스를 클릭해야 하는 형편없는 수준입니다. 더 가벼운 탐색 경험을 위한 공개 티켓이 있으며, 이것이 초점이 되어야 합니다.

테마 작성자는 탐색 블록이 이제 margin 대신 간격에 대해 CSS gap 속성에 의존한다는 점에 유의해야 합니다. 몇 달 전에 내 프로젝트를 위해 이것을 사용자 정의한 이후로 이것을 거의 놓쳤습니다 . 2021년에 오신 것을 환영합니다. 이제 단순한 간격을 위해 해킹 마진 솔루션에 의존할 필요가 없습니다 . 이 변경 사항은 기존 테마 디자인에 영향을 줄 수 있습니다.

테마 화면으로 제한되는 FSE 관리자 공지

테마/외관 관리 화면의 FSE 테마 관리 공지입니다.
고독한 FSE 테마 관리자 공지입니다.

기능이 지속적으로 유동적이기 때문에 Gutenberg 플러그인에는 많은 불만이 있습니다. 그러나 플러그인을 실행할 때 가장 짜증나는 것은 사용자가 블록 테마를 실행할 때 지속적이고 닫을 수 없는 관리자 알림이었습니다.

플러그인의 이전 버전에서는 이 알림이 백엔드의 모든 화면에 표시되었습니다. 이제 테마/외관 페이지에만 나타납니다.

지난 몇 달 동안 저는 이 알림을 숨기기 위한 유일한 목적으로 Ben Gillbanks의 Toolbelt 플러그인을 활성 상태로 유지했습니다.

잘 가. 작별.

위젯 그룹 블록

새 위젯 그룹 블록이 표시된 WordPress 관리자의 위젯 화면.
위젯 그룹 블록 제목 편집.

나는 일반적으로 Gutenberg 플러그인 개발자와 핵심 WordPress가 피드백을 잘 활용한다고 생각하지만 블록 기반 위젯 시스템은 프로젝트가 공을 떨어뜨린 영역 중 하나였습니다. 2020년 9월부터 거듭 말씀드리지만 그 기능은 근본적으로 망가졌습니다. 목표는 최종 사용자가 더 많은 위치에 블록을 추가할 수 있도록 하는 것이지만 클래식 테마 마크업 및 스타일과 호환되지 않았습니다.

패턴을 사용하자고 제안했지만 팀은 Widget Group 블록을 사용했습니다. 최종 결과는 비슷하지만 완전히 동일하지는 않습니다. 좋은 소식은 핵심 기능에 대한 방해 요소를 수정했다는 것입니다.

더 좋은 소식은 이것이 올해 말 5.9 릴리스 대신 WordPress 5.8.2에 포함될 가능성이 있다는 것입니다.

나는 그것을 완벽한 솔루션이라고 부르지 않을 것입니다. 경험으로는 위젯 제목을 추가하는 방법이 즉시 명확하지 않습니다. 사용자는 먼저 블록을 추가해야 합니다. 블록이 추가되면 표시되는 제목/제목 자리 표시자를 클릭할 수 있습니다. 그런 다음 UI는 제목을 입력할 수 있는 필드로 전환됩니다.

다음 비디오는 위젯 그룹 블록이 어떻게 작동하는지 보여줍니다:

나는 해결책이 전혀 없는 것보다 약간의 버벅거림을 경험하고 싶습니다. 이제 최소한 사용자는 위젯 래퍼를 수동으로 만들 필요가 없습니다. 일부는 이 문제가 보류인 경우 Classic Widgets 플러그인을 비활성화할 수도 있습니다.

"행" 그룹 변형 및 플렉스 레이아웃

새로운 행 블록 변형을 사용하여 게시물 작성자, 날짜 및 댓글 링크가 나란히 정렬됩니다.
행 블록 변형이 있는 포스트 메타(바이라인) 섹션 추가.

Gutenberg 11.2에 도입된 새로운 플렉스 레이아웃 시스템 테스트를 시작하기 위해 개발 팀은 Row라는 Group 블록에 변형을 추가했습니다. 이를 통해 사용자는 기본 "흐름" 레이아웃에서 내부 블록을 나란히 정렬하지 않고 나란히 정렬할 수 있습니다.

이 기능에 대한 사용 사례가 많이 있습니다. 테마 작성자를 위한 기본 시나리오 중 하나는 게시물 및 댓글 메타데이터 블록을 나란히 정렬하는 것입니다. 이전에는 기둥 블록이나 사용자 정의 스타일을 사용해야 했지만 둘 다 이상적이지 않았습니다.

경험은 가장자리가 거칠습니다. 나는 종종 블록을 편집하기 위해 올바른 위치를 클릭하는 것이 어렵다는 것을 발견했고, 새 블록을 추가하기 위해 어펜더 버튼이 항상 나타나지는 않았습니다.

Social Icons 블록은 또한 새로운 플렉스 레이아웃을 사용합니다. 그러나 현재 수직 소셜 링크의 경우 흐름 모드로 전환할 수 있는 방법이 없습니다.

더 많은 블록 갭 통합

개별 열 블록 사이의 간격/간격을 강조 표시했습니다.
각 Column 블록 사이의 간격.

Columns 블록은 이제 개별 Column 블록 사이의 간격을 처리하기 위해 Gutenberg 11.4에 도입된 간격 기능을 사용합니다. 최종 사용자가 이를 제어할 수 있는 UI는 아직 없지만 기능이 발전함에 따라 향후 릴리스에 포함될 가능성이 높습니다.

Gutenberg 11.5는 이제 편집기의 게시물 제목에 하단 여백을 추가했습니다. 어떤 이유에서든 개발 팀은 도약을 했고 현재의 블록 갭 기능 처리에 이것이 필요하다고 가정했습니다. 해결해야 할 복잡한 문제입니다. 그 동안 일부 사용자는 편집기에서 제목과 콘텐츠 사이에 익숙한 것보다 더 많은 공백을 볼 수 있습니다.

블록 편집기에서 게시물 제목과 콘텐츠 사이의 비정상적인 양의 공백.
추가 간격이 많이 있습니다.

물론 이것은 활성 테마, 블록 간격 기능 지원 및 현재 스타일에 따라 다릅니다.

포스트 작성자 듀오톤 지원

스크랩 힙으로 향해야 했던 무언가에 대해 Post Author 블록은 이제 아바타에 대한 이중톤 필터 지원 형태로 새로운 생명을 얻었습니다. Image 및 Cover와 같은 다른 블록과 동일하게 작동합니다.

문제는 Post Author가 아직 준비되지 않았기 때문에 마지막 WordPress 릴리스에서 펀트되었다는 것입니다. 블록은 저자 이름, 아바타 및 설명을 프랑켄슈타인 스타일 로 매쉬업한 것입니다. 테마 작성자와 사용자가 고유한 레이아웃으로 정렬할 수 있는 여러 블록이어야 합니다.

이중톤 지원은 단순히 한 줄의 코드를 추가하는 것뿐이지만 현재 형식의 블록에서 계속 작업하는 것은 의미가 없습니다. 별도의 Post Author Avatar 블록의 일부로 보고 싶습니다.