오늘 일찍 Mark Root-Wiley는 표준화된 디자인 토큰 및 CSS에 대한 제안 워드프레스용. 목표는 핵심 설계 도구를 중심으로 일관되고 사용자 지정 가능하며 상호 운용 가능한 시스템을 만드는 것입니다. 본질적으로 그는 표준화된 디자인 프레임워크 또는 그가 언급한 대로 WordPress, 테마 및 플러그인이 의존할 수 있는 “공유 CSS 툴킷”을 제안하고 있습니다.
블로그 게시물은 거의 4,000단어에 달합니다. 그는 또한 짧은 버전을 추가했습니다. Gutenberg GitHub 티켓을 통한 제안. 그러나 게시물은 아이디어를 확장하여 몇 년에 걸친 리소스에 연결합니다.
나는 이메일을 통해 Root-Wiley에 응답했습니다. 이것은 나에게 가깝고도 소중한 주제였습니다. 그것은 또한 내가 지난 몇 년 동안 이야기할 수 있는 특권을 누렸던 다른 주제 작가들로부터 좌절감을 주는 원인이기도 했습니다. 이들은 Day 1 이후로 블록 시스템 뒤에 100% 숨어 있는 테마자들이며 뒤에서 “Gutenberg는 끔찍합니다!”라고 외치는 무작위 사람이 아닙니다.
내가 공유한 주된 생각은 주제에 약간의 피로가 있었다는 것입니다. 표준 사전 설정을 코어에 자주 가져와야 한다는 압박이 있습니다. 그러나 바퀴가 움직이지 않는다는 것을 깨닫고 모두가 차에서 내릴 때까지는 항상 바퀴가 진흙 속에서 도는 것처럼 느껴집니다.
Root-Wiley는 내 2019년 게시물인 The Themes of the Future: A Design Framework and a Master Theme를 이 문제에 대한 심층 탐구의 공통 조상으로 언급했습니다. 하지만, 저와 다른 분들은 워드프레스 5.0에서 블록에디터가 출시되기 전부터 이야기를 해왔습니다.
부분적으로 이것은 우리가 더 많은 표준화의 가능성에 대해 흥분했기 때문입니다. WordPress는 마침내 오랜 문제 중 일부를 수정하고 잘 설계된 규칙을 기반으로 한 유토피아적 테마 생성 시대를 열 수 있습니다.
WordPress 5.0은 사용자 정의 글꼴 크기 및 색상 팔레트에 대한 테마 지원 플래그를 출시했습니다. 기능 자체는 환영할 만한 첫 번째 단계이지만 충분하지 않았습니다. 워드프레스는 처음부터 한 발 앞서서 표준을 설정했어야 했습니다.
대신 의미에 대한 지침 없이 기본 글꼴 크기와 색상 이름이 뒤죽박죽 섞였습니다. “거대한” 글꼴 크기는 얼마나 큽니까? 해당 명명 체계를 따라야 하고 더 큰 것이 필요하면 어떻게 합니까? 뭐라고 이름을 지어야 할까요? (크기 이름에 대한 잠재적인 교육적 접선은 내 이 포스트의 마지막에 있는 메모.)
나는 아직도 다음과 같은 수업을 볼 때마다 소름이 돋는다. .has-luminous-vivid-orange-background-color.
그러나 나는 플랫폼의 과거의 실수를 계속 비난하지 않을 것입니다. 기대해 봐야 할 때입니다. Root-Wiley는 자신의 게시물에서 다음과 같이 말합니다.
WordPress 디자인 및 레이아웃을 위한 CSS를 표준화하여 보다 투명하고 효율적이며 사용자 정의할 수 있는 방법을 제안하고 싶습니다. 이 접근 방식은 핵심 스타일을 단순화할 수 있을 뿐만 아니라 WordPress 5.0에서 블록 편집기가 출시되기 이전의 여러 장기적 WordPress 문제점을 해결할 수 있습니다.
사용자가 블록 디자인 도구를 통해 선택할 수 있는 모든 것에 대한 사전 설정을 보고 싶습니다. 예를 들어 여백의 절대 단위를 설정하는 대신 WordPress 및/또는 테마에서 미리 정의된 크기를 선택할 수 있습니다. 그러나 이러한 사전 설정의 이름을 지정하는 표준이 있어야 합니다.
이것이 왜 그렇게 중요한가? 의 상단 여백을 설정한다고 상상해보십시오. 20px 일부 블로그 게시물의 블록에서. 보기 좋고 현재 테마와 일치하며 다양한 요소에서 이 과정을 수십 번 이상 반복합니다. 그런 다음 나중에 디자인을 변경합니다. 이것은 전체 테마 전환이거나 글로벌 스타일 시스템을 통한 변경일 수 있습니다. 이 새로운 디자인은 다른 수직 간격 시스템을 구현합니다. 24px 보다 더 의미가있을 수 있습니다 20px 사이트 전체에 흩어져 있습니다.
기존 설정은 블록이 아닌 이상적인 세계의 글로벌 값에 연결됩니다. 이렇게 하면 현재 있는 모든 디자인 시스템과 일치할 수 있습니다.
여백은 훨씬 더 큰 퍼즐의 한 조각일 뿐입니다. 그리고 다양한 디자인 도구에 대한 사전 설정은 Root-Wiley의 제안에 있는 모든 것을 다루지 않습니다. 그렇기 때문에 모든 테마 및 플러그인 작성자가 검토할 것을 권장합니다.
제안서에 동의하지 않는 몇 가지 항목이 있습니다. 그러나 여기에는 표준화된 시스템을 만드는 개념이 아니라 낮은 수준의 구현 작업이 포함됩니다. 나는 그것들에 대해 자세히 논의할 계획이었지만 그렇게 하면 내가 함께 일했던 이전 팀원이 “잡초 토론”이라고 불렀던 것에 들어갈 것입니다. 그들은 큰 그림을 방해합니다.
Root-Wiley와 제가 동의하는 한 가지가 있다면 WordPress를 미래로 이끌 CSS 툴킷을 만드는 큰 그림입니다.
한 번도 공개되지 않은 크기 목록
이것은 약간의 측면 접선이지만 WordPress 글꼴 크기 모델에 따라 크기 이름에 대해 많은 연구를 했습니다. 그리고 내 연구 결과를 다른 곳에 게시할 이유가 없을 것이므로 여기에 게시할 수 있습니다.
특정 크기가 다른 것보다 크거나 작은지 궁금하신 경우(예: Colossal vs. Titanic) 다소 교육을 받았지만 100% 정확하지 않을 수 있음 목록:
- 소형(2XS)
- 타이니(XS)
- 작은
- 노멀(미디엄, 레귤러, 베이스)
- 크기가 큰
- 특대형(XL)
- 거대한(2XL)
- 거대(3XL)
- 콜로살 (4XL)
- 타이타닉 (5XL)
- 올림픽(6XL)
- 유성(7XL)
- 은하계(8XL)
- 유니버셜(9XL)
이것이 완전한 목록은 아니지만 정의와 리소스를 찾고 비교하는 데 몇 주를 보냈습니다. 참고용으로 몇 가지 대안을 믹스에 추가했습니다.
또한 이름 지정이 사용자 경험을 어떻게 손상시킬 수 있는지 보여주기 위해 이것을 게시하고 싶었습니다. 일반 사용자는 어떤 크기가 가장 크거나 작은지 생각할 필요가 없습니다. 이와 같은 명명 시스템은 혼란을 야기합니다. 사용자 경험이 작동하더라도 코드 기반 슬러그가 개발자를 혼란스럽게 해서는 안 됩니다.
이 동일한 규칙이 색상 및 기타 모든 사전 설정에 적용됩니다. 이름을 짓는 것은 어렵지만 이미 엉망이 되어 나중에 수정해야 하는 경우에는 더욱 어렵습니다. 특히 오늘 추가된 모든 것이 앞으로 몇 년 동안 레거시 코드 세트의 일부가 될 때 기초에서 시작됩니다.
원문기사 보기