Gutenberg 12.6은 블록 변환 기능을 향상하고, 더 읽기 및 포스트 작성자 바이오 블록을 추가하고, 소셜 아이콘 레이블을 활성화합니다.

Gutenberg 12.6은 어제 WordPress 플러그인 디렉토리에 도착했습니다. 업데이트에는 여러 변환 관련 개선 사항과 새로운 자세히 보기 및 작성자 약력 게시 블록이 포함됩니다. 이제 사용자는 소셜 아이콘 블록을 통해 가시적 레이블을 표시할 수도 있습니다.

이 릴리스에서는 아무 것도 깨진 것 같지 않으며 항상 환영합니다. 구텐베르크는 내가 오랫동안 의지했던 것을 근본적으로 망가뜨리지 않았다. 몇 가지 성장통이 있었지만 소프트웨어는 작년에 더 안정적이 되었습니다. 매일 작업하는 사람들을 칭찬하기 위해 메모를 추가하고 싶었습니다.

평소와 같이 몇 가지 요점을 가지고 있지만 이것은 전체적으로 또 다른 확실한 릴리스처럼 보입니다.

블록 변환

개발자들은 Gutenberg 12.6의 블록 변환에 올인했습니다 . 다음 블록은 이제 서로 전환을 지원합니다.

• 캘린더 아카이브
• 코드 단락
• 태그 클라우드 카테고리
• 그룹 행(변형 컨트롤을 통해)

변환 중에 스타일을 유지하기 위한 새로운 메커니즘도 이번 릴리스에 도입되었습니다. 현재 글꼴 크기 및 색상 옵션을 지원합니다. 예를 들어, 사용자는 특정 사용자 정의를 잃지 않고 일반적인 사용 사례인 표제 블록과 단락 블록 사이를 전환할 수 있습니다. 그러나 블록 간에 공유하더라도 다른 설정은 손실됩니다. 이 시나리오에서 텍스트 정렬을 유지하기 위해 제공하지 않을 것은 많지 않습니다.

이 릴리스에서 단락으로 변환할 때 표제 블록의 앵커가 생략됩니다. 이 변경의 이유는 WordPress가 자동으로 생성하기 때문입니다. 그러나 수동으로 추가한 앵커도 제거됩니다.

갤러리를 이미지 블록으로 변환할 때 이전에 링크 대상, 링크 대상 및 이미지 크기 설정이 손실되었습니다. 새 패치는 누락된 속성을 추가합니다.

소셜 아이콘 레이블

내가 Gutenberg 12.6 릴리스에서 특히 열광하는 것이 있다면 소셜 아이콘 블록을 통해 텍스트 레이블을 표시하는 옵션입니다. 이전에는 화면 판독기용으로만 표시되었습니다. 그러나 사용자는 이제 모든 사람에 대해 이 기능을 켤 수 있습니다.

이 추가는 블록에 대한 수많은 디자인 변형을 열 수 있습니다. 물론 위의 스크린샷과 같이 손으로 그린 ​​테두리 디자인으로 이미 내 자신의 스핀을 넣었습니다.

WP Tavern은 실제로 이 기능을 구현하는 데 작은 역할을 했습니다. Nick Diego의 Social Sharing 블록에서 유사한 제어에 대해 논의할 때 핵심 Social Icons 블록에 대한 공개 티켓을 언급했습니다. 디에고가 패치를 준비한지 오래되지 않았으며 지금은 구텐베르크에 있습니다.

색상 패널은 도구 패널 구성 요소를 사용합니다.

최신 업데이트는 블록 색상 옵션을 도구 패널 구성 요소로 전환합니다. 대부분의 시나리오에서 텍스트 및 배경색은 "보기 옵션" 드롭다운(줄임표 버튼)을 통해 사용할 수 있는 링크 색상과 함께 표시됩니다.

더 통합되고 깨끗한 UI를 만들기 위해 이제 여러 블록에 더 많은 혼란을 추가한 것 같습니다. Pullquote 블록에 대한 위의 스크린샷에서 볼 수 있듯이 색상, 타이포그래피 및 테두리 패널은 모두 영구적으로 열려 있습니다. 그룹 블록은 차원 섹션이 추가되어 더욱 무거워졌습니다. 사용자는 자신이나 기본 컨트롤을 숨길 방법이 없습니다.

도구 패널 구성 요소가 처음 도입되었을 때 일부 컨트롤이 숨겨져 있었기 때문에 정리 효과가 있었습니다. 그러나 이제 더 많은 패널이 사용하고 있으므로 차단 옵션 사이드바의 아주 작은 공간이 사라졌습니다. 올바른 설정을 찾으려면 여러 양식 필드를 스크롤해야 합니다.

다시 접을 수 있게 만들 수 있습니까? 또는 탭과 도구 패널 구성 요소를 함께 사용할 수 있습니까?

게시물 작성자 전기 블록

Post Author Biography 블록이 Gutenberg 12.6에 상륙했습니다. 그 목적은 관리자의 사용자 프로필 페이지를 통해 설정할 수 있는 사용자의 "인력 정보"를 표시하는 것입니다. 대부분의 기본 디자인 옵션을 다루지만 테두리 지원이 누락되었습니다.

시작은 확실하지만 아직 한 가지 문제가 있습니다. 출력에 대해 wpautop() 을 실행하지 않습니다. 이는 콘텐츠가 <p> 태그로 래핑되지 않음을 의미합니다. 이 때문에 사용자 편집 화면을 통해 입력된 이중 줄 바꿈도 고려하지 않습니다. WordPress에는 테마 작성자가 처리할 수 있도록 사용자 약력을 출력하고 형식을 지정하는 표준 기능이 없었습니다. 그러나 일부 사용자는 사용자 지정 서식이 작동할 것으로 예상할 수 있습니다.

우리는 완전한 작가 관련 블록 세트에 점점 더 가까워지고 있습니다. WordPress는 처음에 모든 작업을 약간 수행하는 Post Author 블록을 출시했습니다. 이 때문에 포스트 바이라인이나 테마의 다른 한 줄 메타데이터 영역에 일관되게 사용하는 것이 거의 불가능했습니다. 또한 게시물 끝에 자주 표시되는 "저자 소개" 섹션의 디자인 범위를 제한했습니다.

이제 Post Author Avatar 블록이 세트를 완성할 때까지 기다려야 합니다.

블록이 추가됨

Gutenberg 12.6은 테마 작성자가 쿼리 루프 디자인을 작업할 수 있도록 전용 자세히 보기 블록을 추가합니다. 게시물에 대한 HTML 영구 링크일 뿐입니다. 이것은 Post Excerpt 블록의 링크 출력과 별개입니다. 불행히도 여러 문제가 있으며 실제 사용하기 전에 더 많은 테스트가 필요합니다.

사용자는 배경색을 추가할 수 있지만 텍스트 색상은 추가할 수 없습니다. 이렇게 하면 읽을 수 없는 텍스트를 쉽게 만들 수 있습니다. 그룹 블록에 넣고 링크 색상을 변경하여 이 문제를 해결할 수 있었습니다.

대부분의 테두리 옵션을 지원하지만 스타일 컨트롤이 없습니다. 또한 블록 수준의 HTML 래퍼가 없으므로 다른 블록에 래핑하지 않고 수평으로 정렬할 방법이 없습니다.

이것은 이상한 경우입니다. WordPress의 다른 곳에서 최상위 블록에 대한 다른 인라인 HTML 요소(기술적으로 CSS를 통해 블록 요소로 설정됨)가 있는지 확실하지 않습니다.

다른 문제는 2개의 "더 읽기" 링크의 가능성입니다. 하나는 전용 블록을 통해, 다른 하나는 Post Excerpt 블록을 통해 이루어집니다. 후자의 링크를 토글하는 초안 패치가 있습니다.

클래식 이미지에 대한 반응형 처리

큰 이미지가 있는 클래식 편집기로 작성된 게시물의 경우 블록 테마를 사용할 때 미디어가 콘텐츠 영역 외부로 날아갑니다. Gutenberg는 수정 사항으로 핵심 Image 블록에서 반응형 이미지 처리를 분리했습니다. 이 변경 사항은 부 WordPress 릴리스로 백포트된 것으로 표시되므로 사용자는 WordPress 6.0을 기다릴 필요가 없습니다.

이것은 이미지에 대한 수정 사항을 제공하지만 클래식 콘텐츠를 처리하지 않거나 간단한 HTML 스타일을 지정하지 않는 블록 테마 문제를 해결하지 않습니다. 우리 사이트의 예로서, 핵심 Table 블록에 몇 가지 기능이 없기 때문에 최근에 <table> 요소를 추가했습니다. 이것은 사용자 정의 HTML이었기 때문에 블록의 CSS가 로드되지 않아 본질적으로 스타일이 지정되지 않았습니다. 클래식 콘텐츠에도 동일한 문제가 있습니다.

여기서 한 가지 문제는 WordPress가 theme.json 을 통해 블록 수준에서 CSS 스타일을 푸시하고 있다는 것입니다. 그러나 링크 및 제목과 같은 소수의 HTML 요소만 스타일을 지정할 수 있습니다. 이러한 유형의 구성 요소 기반 설계는 모든 것이 구성 요소(예: 블록)로 래핑될 때 잘 작동합니다.

대표 블록보다 기본 HTML 요소의 스타일을 지정하는 것이 더 합리적입니다. 그렇게 하면 타사 플러그인을 포함하여 요소를 사용하는 모든 블록에서 공유된 스타일이 됩니다.

큰따옴표 스타일이 제거됨

마지막으로 누군가가 "큰" 인용 스타일을 제거했습니다. 블록에 대한 글꼴 크기 컨트롤을 추가한 이후로 필요하지 않았습니다.

나는 WordPress가 자체적으로 사용자 정의 블록 스타일을 제공하는 것을 피해야 한다는 점을 적어도 여러 번 강조했습니다. 대부분의 경우 이것은 유능한 테마 작성자의 손에 맡기는 것이 가장 좋습니다. 최소한 새로운 블록 스타일은 설계 도구가 보다 균형 잡힐 때까지 피해야 합니다. 블록 스타일을 사용하지 않으면 모든 WordPress 사이트와 함께 로드되는 레거시 CSS 수하물이 생성됩니다.