WordPress 구성 요소를 처음부터 다시 상상하는 G2 구성 요소

몇 가지 를 업데이트하십시오.

이것이 Automattic의 수석 디자이너인 Jon Quach가 G2 Components 프로젝트를 Gutenberg 및 궁극적으로 핵심 WordPress에 통합하기 위한 로드맵에서 제시한 목표였습니다. 이 프로젝트는 블록 편집기를 구성 요소 시스템의 "처음부터" 정밀 검사하는 부분을 다시 상상하는 것입니다. 모든 것 또는 심지어 많은 것을 한 번에 업데이트하면 모든 것이 손상될 위험이 있습니다.

Quach는 게시물에서 "이상적으로는 매우 통제되고 의도적인 방식으로 일부 항목만 업데이트해야 합니다."라고 썼습니다. 그는 전통적인 발전소가 폐쇄될 때까지 도시를 구역별로 태양광 발전에 비유했습니다. 다음 섹션으로 이동하기 전에 한 조각을 변환하고, 테스트하고, 문제를 찾고, 수정합니다.

이것이 G2 Components를 Gutenberg에 통합하기 위한 계획입니다.

Quach는 “G2 Components는 사용자 인터페이스와 사용자 경험을 다른 사람들에게 더 좋게 만든다는 아이디어를 구현하는 프로젝트입니다. “현재 구텐베르크와 워드프레스의 컨텍스트와 환경에서 작동하도록 설계된 Component System으로 구현되었습니다.”

목표는 Gutenberg 프로젝트의 UI를 개선하기 위한 리소스를 제공하는 것입니다. 구성 요소는 코드를 함께 해킹하지 않고도 새로운 UI를 더 쉽게 만들 수 있도록 해야 합니다. Quach는 구성 요소 시스템의 일관성과 경험이 확장되어야 하고 WordPress 플랫폼 전체에 파급 효과가 있어야 한다고 말했습니다. 이는 타사 블록 개발자에게도 확장됩니다.

"코드 구성 요소는 시작점일 뿐입니다."라고 그는 말했습니다. "나의 궁극적인 목표는 이것이 코드를 초월하고 디자인에 영향을 미치고 디자인을 향상시키는 것입니다. 사람들이 WordPress 세계 내에서 응집력 있고 기능이 풍부한 UI 경험을 만들 수 있도록 하고 권한을 부여하는 통합 디자인 시스템을 만드는 것입니다."

Quach는 플랫폼이 유사한 접근 방식을 통해 이점을 얻었다고 생각합니다. 그는 Google의 Material Design이 Android 플랫폼을 향상시키고 회사 제품 전반에 걸쳐 응집력을 가져왔다고 언급했습니다.

Gutenberg 팀은 이미 G2 Components를 프로젝트에 통합하기 시작했습니다. 이 통합은 핵심 편집기 또는 타사 프로젝트 내에서 기존 구현을 중단하지 않는 제어된 방식으로 WordPress 구성 요소(@wordpress/components)를 대체합니다. 새 구성 요소는 준비되는 대로 교체됩니다. "스위치를 켜는 것과 같습니다."라고 Quach는 말했습니다.

다음 비디오는 Quach가 YouTube에 게시한 G2 구성 요소에 대한 1시간 길이의 연습입니다.

그는 정기적으로 G2 Components 블로그에 업데이트를 게시합니다. 그와 함께 프로젝트에 대한 그의 디자인 사고에 대한 심층 분석도 있습니다. 그는 또한 거의 매일 Twitch 스트림에서 프로젝트에 대해 이야기합니다.

구성 요소란 무엇입니까?

구성 요소는 버튼에서 토글, 확인란에 이르기까지 모든 것입니다. 블록 편집기의 UI를 구성하는 표준화된 부분입니다. 최종 사용자가 보고 상호 작용하는 내용을 생성하기 위해 핵심 및 타사 개발자 모두가 사용할 수 있습니다. 그러나 원래의 구성 요소 시스템을 구축하는 방법에 문제가 있었습니다.

Quach는 "현재 구성 요소는 시스템을 염두에 두고 제작된 것이 아니라 즉각적인 필요를 충족하기 위해 제작되었습니다."라고 말했습니다. “이 특정한 디자인 디테일이 중요합니다. 시스템 우선 접근 방식은 새로운 기능의 추가와 더 중요한 맞춤화를 보다 쉽게 ​​지원합니다!”

새로운 접근 방식은 WordPress용 기본 디자인 시스템을 구축하는 것입니다. 이러한 시스템을 통해 누구나 그 위에 구축하고 기본 경험을 만들 수 있습니다.

Quach는 이것을 보는 가장 쉬운 방법 중 하나는 백엔드 테마 관점에서 보는 것이라고 말했습니다. Component System에도 테마 하위 시스템이 있습니다. "CSS를 '스킨'으로 작성하여 맨 위에 레이어로 표시하는 기존 방법 대신 구성 값을 통해 UI 미학을 조정할 수 있습니다. 이는 WordPress가 wp-config.php 파일의 정의로 구성되는 방식과 유사합니다."라고 그는 말했습니다. “이러한 값은 스타일 시스템에 직접 연결되어 스타일이 올바른 위치와 시간에 올바르게 로드되도록 하므로 이러한 구분이 중요합니다. 모든 것은 현재 환경의 스타일에 영향을 미치지 않고, 더 중요한 것은 현재 환경의 스타일에 영향을 받지 않는다는 것입니다.”

그는 구성 요소 시스템을 처음부터 다시 구축해야 하는 이유에 대한 내 질문에 답하고 있었습니다. 아이디어는 WordPress 테마의 스타일시트가 단순히 로드되는 것만으로도 구성 요소를 손상시키지 않도록 하는 것과 같이 WordPress 관리자와 같은 환경에서 "그냥 작동하는" 구성 요소를 갖는 것입니다.

"입력, 버튼, 모달, 드롭다운 등을 왜 재고하고, 재구축하고, 향상합니까?" 이에 대해 Quach는 반박했습니다. "개발자가 그럴 필요가 없도록."

이것은 개발자에게 무엇을 의미합니까?

Quach는 G2 Components 프로젝트의 아키텍처를 설계할 때 이전 버전과의 호환성을 존중하는 것을 매우 진지하게 생각했다고 말했습니다. 그는 또한 그것이 그가 제안한 통합 전략의 일부라고 말했습니다.

"나는 이 프로젝트가 '다른 사람들을 위해 사용자 인터페이스와 사용자 경험을 더 좋게 만드는 아이디어를 구현'한다고 언급했습니다."라고 그는 말했습니다. "이전 버전과의 호환성을 고려하고 타사 마이그레이션을 지원하는 것은 절대적으로 사용자 경험 범주에 속합니다."

Gutenberg 팀이 새로운 구성 요소를 계속 통합함에 따라 개발자가 이미 수행한 작업을 변경해서는 안 됩니다. 그러나 그것은 몇 가지 새로운 가능성을 열 수 있습니다.

"새로운 구성 요소 시스템은 UI 부서에서 확실히 도움이 될 것입니다."라고 Quach가 말했습니다. “제가 특히 흥분하는 한 분야는 신속한 개발/프로토타이핑 공간입니다. 이러한 구성 요소는 자체 포함된 단위이기 때문에 CodeSandbox와 같은 플랫폼으로 가져올 수 있으며...그냥...작동합니다. 시작을 하고 프로토타입을 신속하게 구성하고 공유할 수 있습니다(작지만 강력한 것부터 크고 작은 책임까지).”

그는 구성 요소 디자인을 테스트하고 빠른 피드백을 위한 아이디어를 시연하는 데 성공했다고 말했습니다. 그는 CodeSandbox에서 복잡한 구성 요소를 빌드하고 이를 다시 구성 요소 시스템으로 가져오는 반대 방향에서도 일했습니다.

"디자이너이자 프론트 엔드 개발자로서 이 '마이크로 빌딩' 워크플로가 얼마나 효율적이고 효과적이며 창의적으로 해방되는지 강조할 수 없습니다."라고 그는 말했습니다. "다른 사람들도 경험할 수 있어 기쁩니다."