Gutenberg 12.5는 전역 스타일 변형을 도입하고 인접 버튼 스타일을 유지하며 색상 선택기에 알파 투명도를 추가합니다.

Gutenberg 12.5는 오늘 일찍 WordPress 플러그인 디렉토리에 상륙했습니다. 나는 이미 적어도 하나의 새로운 개선 사항, 글로벌 스타일 변형에 대해 흥분하고 있습니다. 그러나 이것은 여러 개발자 및 사용자 중심 기능이 포함된 강력한 업데이트입니다.

이제 WordPress 5.9가 출시되면서 5월에 6.0 릴리스를 준비하면서 모든 손이 다시 갑판에 있는 것처럼 보입니다. 지난 주에 저는 초기 로드맵을 다루었고 그 목록의 일부 항목은 이미 어떤 형태나 방식으로 최신 Gutenberg 업데이트에 포함되어 있습니다.

전역 스타일 변형

테마 작성자는 이제 여러 theme.json 변형을 만들어 테마의 /styles 폴더에 넣을 수 있습니다. 그런 다음 사용자는 다양한 사전 설정 간에 가장 적합한 것으로 전환할 수 있습니다.

새 기능은 WordPress 6.0 릴리스의 하이라이트 중 하나가 될 것이며 기본 Twenty Twenty-Two 테마는 결국 여러 변형을 제공할 것입니다.

지난 주 포스트에서 이 기능에 대해 자세히 설명했습니다. Gutenberg 프로젝트 책임자 Matias Ventura는 이에 대해 다음과 같이 설명했습니다.

경험과 역학을 정리할 수 있도록 주기의 초기에 이것을 가져옵니다. 나는 그것이 몇 번의 반복에서 정말 좋을 것으로 기대합니다. 이러한 모든 변형이 본질적으로 모든 블록 테마와 호환되기 때문에 테마 번들 벽을 깨는 것을 특히 기대하고 있습니다!

이 기능에 대한 Ventura의 열정을 공유하지만 6.0으로 테마 장벽을 깰 수 있을지 확신할 수 없습니다. 여기서 아이디어는 그러한 변형이 테마 간에 상호 교환 가능하다는 것입니다. 글로벌 스타일 시스템의 현재 상태를 고려할 때 그런 일이 발생하지 않는다고 봅니다.

대부분의 theme.json 은 표준화되어 있지만 많은 작성자가 settings.custom 속성을 사용합니다. 이를 통해 테마 스타일시트를 통해 자주 참조되는 사용자 정의 값을 얼마든지 설정할 수 있습니다.

색상 및 타이포그래피와 같은 기능에 대한 표준 명명 체계가 없다는 문제도 있습니다.

이 두 가지 중 어느 것도 두 테마 간에 항상 동일하지 않기 때문에 전환 변형이 항상 예쁜 것은 아닙니다. 그것은 고상한 목표이며, 아마도 무엇이 가능한지 시도해 볼 가치가 있을 것입니다. 그러나 개념은 하나의 거대한 쿠키 커터 기본값을 위해 테마 시스템을 모두 삭제하려는 추구처럼 느껴집니다.

변형 전환은 개별 테마에 맡기는 것이 가장 좋습니다. theme.json 위에 맞춤형 시스템을 구축하는 테마 작성자가 사용자 경험과 기대치를 관리할 수 있도록 합니다. 사용자가 완전히 다른 프로젝트에 JSON 변형을 "설치"하는 것에 대해 걱정하지 않고 비전을 실행하는 데 도움이 되는 도구를 구축하는 데 집중해야 합니다.

새 버튼은 인접한 버튼 스타일을 유지합니다.

WordPress를 사용하면 Button을 비교적 쉽게 복제할 수 있지만 도구 모음의 옵션 드롭다운 아래에 숨겨져 있습니다. 단순히 "+" 아이콘을 눌러 새 버튼 블록을 삽입하는 것과 비교하면 두 번 클릭하는 작업입니다. Gutenberg 12.5 이전에는 새 버전이 기본 스타일 처리를 받게 되었습니다. 한 번에 여러 버튼으로 작업을 시작할 때까지는 사소한 성가심 중 하나입니다.

최신 릴리스는 다음 블록을 삽입할 때 인접한 Button 블록의 스타일을 자동으로 복제합니다. 이것은 훨씬 더 나은 경험입니다.

그러나 우리가 가야 할 만큼 멀리 가지 않습니다. 나중에 모든 Button의 디자인을 변경하기로 결정하면 어떻게 됩니까? 각각을 수정하려면 많은 작업이 필요합니다. 버튼 블록 그룹의 다른 모든 스타일에 하나의 스타일을 복사할 수 있는 공개 티켓이 있습니다.

사용자는 투명 색상을 추가할 수 있습니다.

사용자는 마침내 블록 수준에서 사용자 정의 색상의 알파 투명도를 제어할 수 있습니다. 이 기능은 텍스트, 배경, 링크 및 테두리 색상 옵션에서 작동합니다. 이 개선 사항은 2019년 10월에 처음 열린 티켓을 마감합니다.

활성화되지 않은 일부 색상 선택기가 있습니다. 여기에는 글로벌 스타일 패널의 사용자 정의 팔레트 섹션과 소셜 링크 블록의 아이콘 관련 색상이 포함됩니다. Cover 블록 오버레이 색상도 마찬가지지만 별도의 불투명도 컨트롤이 있습니다.

추천 이미지 크기 옵션 게시

Gutenberg 12.5에는 WordPress 또는 테마 정의 이미지 크기를 사용하도록 Post Featured Image 블록을 설정할 수 있는 새로운 옵션이 도입되었습니다. 사소한 변화처럼 보이지만 블록 테마를 위한 도약이다.

테마 작성자는 이를 처리하기 위해 post_thumbnail_size 후크를 필터링했습니다. 그러나 이 방법은 이미지 크기가 다양한 여러 게시물 쿼리를 처리할 때 복잡해집니다.

나는 이것을 1년 동안만 언급했습니다. 나는 그것에 대해 계속해서 썼고, 누구라도 듣게 하려고 노력했습니다. 더 많은 디자이너가 블록 기반 테마 개발 열차에 오르게 하려면 추천 이미지를 제어해야 합니다. 너무 많은 레이아웃이 최상의 모양을 위해 특정 크기에 의존합니다.

이제 Cover와 Media & Text 블록 안에 있는 추천 이미지만 사용할 수 있다면…

모든 사이트 편집기 콘텐츠 복사

오늘 저는 포스트 에디터의 옵션 메뉴에 "모든 콘텐츠 복사" 버튼이 있다는 것을 배웠습니다 . 얼마나 오랫동안 거기에 있었는지 모르지만 그것은 일종의 깔끔합니다. 나는 불필요하게 콘텐츠 캔버스를 통해 모든 콘텐츠(때로는 어느 정도 성공)를 선택하려고 노력했습니다. 거의 모든 시간을 편집기에서 보내는 우리들조차도 때때로 새로운 트릭을 배울 수 있습니다.

이 copy-content 옵션은 이제 두 편집자 간에 기능 동등성을 가져오기 위한 이니셔티브의 일부로 사이트 편집기에 추가되었습니다.

사이트 편집기의 코드 보기

게시물 편집자와 사이트 편집자 간의 기능 패리티를 계속해서 사용자는 이제 사이트 편집기에서 코드 보기로 전환할 수 있습니다.

기술적으로 이것을 "코드 편집기"라고 하지만 편집을 시도하는 사람에게는 드래곤이 있습니다 . 적어도 그들이 두려운 "이 블록에는 예기치 않거나 잘못된 콘텐츠가 포함되어 있습니다"라는 메시지 외에 다른 것이 예상된다면. 나는 더 잔잔한 바다로 항해하고 독서나 복사 이외의 다른 목적으로 그것을 피할 것입니다.