Gutenberg 8.3, 블록 카테고리 업데이트, 상위 블록 선택기 포함, 새로운 디자인 컨트롤 추가

어제 Gutenberg 팀은 블록 편집기 뒤에서 진행 중인 플러그인 버전 8.3을 출시했습니다. 팀의 초점은 곧 있을 전체 사이트 편집에 있지만 이 업데이트에는 재구성된 블록 범주 세트, 상위 블록 선택기, 간격 제어 및 링크 색상 옵션과 같은 몇 가지 사용자 대면 기능이 포함됩니다.

한 가지 더 작은 개선 사항에는 작성자별로 최신 게시물 블록을 필터링하는 기능이 포함됩니다. 헤딩 블록의 레벨 컨트롤도 변경되었습니다. 블록 옵션 사이드바에서 레벨을 선택하는 대신 레벨 선택기가 이제 편집기 도구 모음에 있습니다.

Gutenberg 8.2에서 이미지 블록의 캡션 필드 내에서 Enter 키를 누르면 새 단락이 생성되었습니다. 8.3에서 이 기능은 캡션이 있는 모든 블록으로 확장되었습니다.

팀은 최신 릴리스에서 20개 이상의 버그 수정을 수정했습니다. 전체적으로 새로운 플러그인 업데이트는 하루 사용 후 견고한 것으로 보입니다. 그러나 새로운 패딩 컨트롤과 같은 일부 실험적 추가 사항은 우려할만한 가치가 있을 수 있습니다. 테마 작성자는 이것을 테스트하고 피드백을 제공하고 개발이 올바른 방향으로 가고 있는지 확인해야 합니다.

새로운 블록 카테고리

Gutenberg 팀은 블록 카테고리의 이름을 바꾸고 재구성했습니다. 새 목록은 더 이해하기 쉽고 적절한 그룹으로 더 잘 통합된 것 같습니다.

• 텍스트
• 미디어
• 설계
• 위젯
• 임베드

나는 새로운 카테고리 이름의 팬이지만 이 시점에서 카테고리는 실용적인 목적에 쓸모가 없다는 것을 알게 되었습니다. 구텐베르그가 블록 삽입기에서 탭 인터페이스를 떨어뜨린 이후로, 그것은 블록의 큰 벽처럼 느껴졌습니다. 필요한 특정 블록을 찾기 위해 사용 가능한 블록 목록을 스크롤하고 스크롤하고 스크롤할 때 내 눈은 자연스럽게 범주 이름을 건너뜁니다. 나는 블록을 삽입할 때 거의 항상 키보드 슬래시 명령을 사용합니다. 그렇지 않은 경우 이상적인 사용자 경험이 아니며 새로운 범주는별로 도움이되지 않습니다.

상위 블록 선택

Gutenberg에서 가장 실망스러운 경험 중 하나는 중첩 블록 시나리오에서 상위 블록을 선택하려고 시도하는 것입니다. 너무 자주 사용자는 편집해야 하는 블록으로 실제로 이동할 수 있는 최적의 지점에 도달하기를 바라면서 무작위로 클릭하는 것처럼 느낍니다. 최고의 순간에 좌절하는 연습입니다.

구텐베르그 팀은 이 고통을 완화하기 위한 작은 조치 를 취했습니다. 편집기 도구 모음에서 "블록 유형 또는 스타일 변경" 버튼 위로 마우스를 가져가면 상위 블록을 선택하는 새 버튼이 나타납니다.

이것이 문제를 처리하는 올바른 방법인지 확실하지 않습니다. 가리키지 않고 나타나는 일종의 화살표 버튼에 대한 몇 가지 실험을 보고 싶습니다. 현재로서는 팀이 문제를 해결하려고 시도하고 있다는 점에 만족하고 향후 반복 작업을 통해 중첩 블록 내 탐색이 개선되기를 바랍니다.

이 기능은 상단 도구 모음 모드가 활성화된 경우 작동하지 않는 것 같습니다. 이 모드를 사용하는 경우 상위 블록을 선택하는 가장 좋은 방법은 편집기 하단의 이동 경로 탐색을 사용하는 것입니다.

실험적 간격/패딩 제어

테마 작성자는 이제 add_theme_support( 'experimental-custom-spacing' ) 를 통해 실험적 패딩 컨트롤에 대한 지원을 추가할 수 있습니다. 지원되는 경우 최종 사용자는 Cover 블록에 대한 블록 옵션 사이드바 아래에 새로운 Spacing 탭을 볼 수 있으며 향후 다른 블록에 사용할 수 있습니다. 기본적으로 사용자는 단일 값으로 블록의 4면 모두에 대한 패딩을 제어할 수 있습니다. 또한 패딩을 "연결 해제"하고 위쪽, 아래쪽, 왼쪽 및 오른쪽 값을 개별적으로 제어할 수 있습니다.

아마도 Gutenberg 팀은 여백 컨트롤도 포함하도록 이 간격 기능을 확장할 것입니다. 그것은 자연스러운 움직임이고 사용자들이 지난 몇 년 동안 함께 살아야 했던 Spacer 블록의 죽음으로 이어지기를 바라는 것입니다.

그러나 최종 사용자가 명시적 값으로 패딩을 제어할 수 있도록 허용하는 것은 아닙니다. 패딩 값을 임의로 변경하면 많은 테마 작성자가 시간을 들여 세심하게 계산하는 수직 리듬이 깨집니다. 픽셀 값(기본값)을 사용할 때 사용자는 태블릿 및 모바일 화면 크기와 관련된 문제에 직면하게 될 것입니다. 본질적으로, 그것은 간격의 완전한 혼란을 만들 것입니다.

나는 그 생각에 반대하지 않는다. 이것이 WordPress에 도착하기 직전에 완료되기를 바랍니다. 테마 작성자는 스타일시트를 통해 처리되는 명명된 클래스를 등록할 수 있어야 합니다. 이것은 WordPress에 디자인 프레임워크가 있다는 아이디어로 돌아갑니다. 간격을 위한 유틸리티 클래스 세트를 만듭니다(오, 안녕하세요, Tailwind). 테마 작성자가 디자인에 따라 간격을 정의하도록 합니다. 사용자가 그 중에서 선택할 수 있습니다. 그런 다음 사용자가 문제를 직접 처리하고 싶어하는 경우 사용자 지정 옵션을 제공합니다. 그 시점에서 그들은 테마 작성자가 선택한 디자인 흐름에서 벗어나기로 분명한 결정을 내렸습니다.

링크 색상

테마 작성자가 블록 편집기의 스타일을 지정할 때 직면해야 하는 더 어려운 장애물 중 하나는 사용자가 블록의 배경색을 변경할 때 링크 색상으로 무엇을 해야 하는지 파악하는 것입니다. 사용자는 오랫동안 해당 시나리오에서 텍스트 색상을 제어해 왔습니다. 그러나 링크 색상은 빠르게 액세스할 수 없게 되거나 완전히 보기 흉해질 수 있습니다. 미래 지향적인 테마 작성자는 해당 링크 색상의 스타일을 지정하여 텍스트 색상을 상속하지만 이것이 항상 이상적인 솔루션은 아닙니다.

이것이 사용자 제어 링크 색상이 필요한 곳입니다. 사용자 정의 링크 색상에 대한 지원을 추가하려면 테마 작성자가 add_theme_support( 'experimental-link-color' ) 를 통해 기능을 선택해야 합니다. 이렇게 하면 단락, 제목, 그룹, 열, 미디어 및 텍스트 블록에 대한 새 색상 선택기가 추가됩니다.

테마 지원 함수 호출과 함께 이 기능을 사용할 수 없으므로 문제를 찾기 위해 코드를 조금 파헤쳐야 했습니다. 테마 작성자가 링크 색상에 대한 지원을 추가하려면 다음 CSS 코드 스니펫과 같이 기본 링크도 정의해야 합니다.

 a { color: var( --wp--style--color--link, #000 ); }

WordPress는 자동으로 --wp--style--color--link 변수를 설정합니다. 더 구체적인 내용을 위해 테마 작성자는 .has-link-color a 를 대상으로 지정할 수도 있습니다.