구텐베르크 11.3, 치수 패널 도입, 버튼 패딩 지원 추가, 삽입기 속도 향상

오늘 일찍 구텐베르그 11.3이 워드프레스 플러그인 디렉토리에 들어왔습니다. 최신 업데이트에는 간격 관련 블록 옵션을 전환하기 위한 새로운 치수 패널이 도입되었습니다. Button 블록은 이제 패딩 컨트롤을 지원하고 Post Featured Image 블록에는 새로운 너비 및 높이 설정이 있습니다.

릴리스의 하이라이트 중 하나는 삽입기 내에서 열기 및 검색 속도 향상이었습니다. 개방 시간은 370.35ms에서 137.28ms로 200ms 이상 감소했습니다. 검색 속도는 190.37ms에서 67.24ms로 빨라졌습니다.

최신 릴리스에는 단순화된 색상 선택기 라이브러리가 포함되어 있습니다. 외부 URL을 위해 Gutenberg 10.9에 도입된 기능인 풍부한 링크 미리보기가 이제 내부 사이트 링크와 함께 작동합니다.

테마 작성자는 재설정 및 클래식 편집기 스타일시트의 감소된 특이성을 즐길 수 있습니다. 이러한 변경은 항상 테마 작성자가 편집기와 프론트 엔드 스타일을 일치시키는 것을 조금 더 쉽게 만듭니다.

간격 조절용 치수 패널

Gutenberg 11.3에는 여백 또는 패딩 컨트롤을 지원하는 블록에 대한 새로운 차원 패널이 도입되었습니다. 이 기능은 일반적인 탭 열기/닫기 화살표 대신 줄임표( ... ) 버튼을 추가합니다. 사용자는 사용하려는 컨트롤을 선택할 수 있습니다.

장기적인 목표는 인터페이스를 정리하고 사용자에게 실제로 필요한 컨트롤만 노출하는 것입니다. 이러한 요구 사항은 주관적이므로 사용자가 켜기/끄기로 전환하는 것이 이상적인 방법입니다.

현재 단점은 두 가지입니다. 여백 또는 패딩 컨트롤을 표시하도록 선택하면 패널 자체를 축소할 수 없습니다. 이것은 새로운 기능이 해결하려고 시도하는 바로 사이드바 인터페이스의 문제를 악화시킵니다. 적어도 저에게는 항상 간격 컨트롤에 빠르게 액세스하기를 원합니다. 그러나 항상 표시할 필요는 없습니다.

두 번째 문제는 표시할 항목에 대한 사용자 선택이 저장되지 않는 것 같습니다. 블록으로 작업할 때마다 표시할 컨트롤을 선택해야 합니다.

새 치수 패널은 크기 조정(너비 및 높이), 간격(패딩 및 여백) 및 블록 관련 컨트롤을 처리하는 과정의 일부일 뿐입니다. 보다 균형 잡힌 솔루션을 위한 작업은 여전히 ​​진행 중입니다. 아마도 개발 팀은 향후 릴리스에서 이러한 문제와 기타 문제를 해결할 것입니다. 그러나 프로덕션에서 Gutenberg 플러그인을 실행하는 사람들은 사용법이 이상할 것으로 예상해야 합니다.

Block Visibility 플러그인은 현재 그러한 토글 컨트롤의 가장 사용자 친화적인 버전을 가지고 있습니다. 아직 완벽한 솔루션은 아니지만 현재 구텐베르크에 있는 것보다 조금 더 잘 작동합니다.

버튼 블록 패딩

TT1 Blocks 테마(Twenty Twenty-One의 블록 기반 버전)를 사용할 때 Button 블록의 기본 패딩이 마음에 들지 않는다는 것은 비밀이 아닙니다. 저는 FSE 아웃리치 프로그램의 일부로 테스트를 위한 마지막 요청에서 블록을 사용하는 것을 거부하기까지 하여 일상적으로 그것을 지적하는 것을 제 임무 중 하나로 만들었습니다.

크기가 큰 버튼이 웹 페이지에서 항상 잘못된 스타일 선택은 아닙니다. 컨텍스트가 중요하고 어떻게 든 좀 더 축소해야 하는 시나리오에 계속해서 부딪칩니다. Button 블록의 패딩에 대한 제어는 몇 달 동안 내 위시리스트에 있었고 Gutenberg 개발 팀이 제공했습니다.

11.3부터 ​​사용자는 개별 Button 블록의 패딩을 제어할 수 있습니다. 이제 앞에서 언급한 새 차원 패널 내에서 옵션으로 나타납니다.

기도가 응답되었습니다. 이제 모든 블록에 패딩 컨트롤을 추가하는 방향으로 이동해 보겠습니다.

일부 사용자가 겪을 수 있는 한 가지 잠재적인 문제는 여러 Button 블록을 함께 사용할 때 일관된 간격을 유지하는 것입니다. 가장 쉬운 방법은 첫 번째 항목을 추가하고 스타일을 지정한 다음 복제하여 동일한 간격으로 다른 항목을 만드는 것입니다. 이것은 새로운 문제가 아닙니다. 사용자가 그룹 내에서 일관성을 원하는 모든 버튼 옵션에 적용됩니다.

추천 이미지 치수 컨트롤

Post Featured Image 블록이 마침내 작지만 편리한 업그레이드를 받았습니다. 과거에는 사용자와 테마 작성자가 게시물에 링크할지 여부를 결정할 수 있는 단일 옵션만 있었습니다. 이제 이미지의 너비와 높이를 제어할 수 있습니다.

사용자가 이미지의 높이를 설정하면 편집기는 다음 선택 항목과 함께 별도의 "크기 조정" 옵션을 표시합니다.

• 덮개(기본값)
• 포함하다
• 뻗기

이러한 옵션은 실제로 무엇을 합니까? 좋은 질문입니다. 20년 가까이 웹 디자인 및 개발 루프에 있는 사람이라 할지라도 가끔 잊어버리고 찾아보아야 합니다. 그것들은 object-fit CSS 속성에 대한 값이며 많은 경우에 사용자를 혼란스럽게 할 수 있습니다.

Cover and contain은 가로 세로 비율을 유지하면서 이미지를 포함하는 요소의 상자 안에 맞도록 허용합니다(이미지를 늘리지 않음). 차이점은 커버 값이 맞지 않으면 잘리고 포함 값이 레터박스로 표시될 수 있다는 것입니다. 늘이기 값은 종횡비에 관계없이 컨테이너를 채웁니다.

컨테이너의 이미지 종횡비에 따라 각 값은 기본적으로 화면에 동일한 것을 표시할 수 있습니다. 또는 매우 다른 결과를 제공할 수 있습니다. 이러한 치수 컨트롤을 넓은 정렬과 전체 정렬(너비 관련 옵션도 포함)과 결합하면 일부 예측할 수 없는 실험도 발생할 수 있습니다.

내 테마 디자이너는 이에 대한 UI를 완전히 비활성화하고 약간 더 제어된 이미지 크기 선택기를 제공하려고 합니다.

이러한 선택기는 너비 및 높이 컨트롤과 혼동되어서는 안 됩니다. WordPress 테마 작성자는 수년 동안 사용자 정의 이미지 크기를 등록해 왔습니다. 이에 대한 주요 사용 사례는 추천 이미지였습니다. 사용자는 현재 이미지 및 최신 게시물 블록과 함께 이러한 크기를 사용할 수 있습니다. 그러나 그들은 아직 추천 이미지 게시에 이 옵션이 없습니다.

저는 이미지 크기 컨트롤이 블록에 첫 번째로 추가되어야 한다고 생각하는 진영에 있습니다. 이는 WordPress 테마 디자인의 필수적인 부분이므로 빠뜨릴 수 없으며 테마 작성자가 사용자 정의 크기를 통해 추천 이미지를 제어할 수 있도록 하기 위해 투쟁하거나 최소한 잔소리를 하고 있습니다.

다행히도 사용자 정의 이미지 크기 지원을 위한 공개 티켓이 있습니다. 아직 누락된 다른 기능 중에서 블록 테마로 도약하려는 많은 테마 작성자를 위한 차단기입니다.

자동으로 포스트 그리드의 추천 이미지를 정사각형으로 자르는 것과 같은 새로운 옵션에 대한 많은 사용 사례가 있습니다. Post Featured Image 블록을 위한 보다 강력한 도구 세트를 참을성 없이 기다리고 있습니다.