Jamie Marsland는 블록 편집기를 사용하여 20분 만에 WordPress.org 홈페이지를 다시 만듭니다.

WordPress.org의 새 홈페이지 및 다운로드 페이지 디자인을 구현하는 데 얼마나 오래 걸릴지에 대한 최근 논란에 대한 응답으로 Gutenberg YouTuber Jamie Marsland는 블록 편집기를 사용하여 이를 다시 만들기로 결정했습니다.

Matt Mullenweg는 개발에 들어가는 새로운 디자인에 대한 계획에 대해 "구현하는 데 몇 주가 아닌 몇 시간이 걸렸어야 했습니다."라고 말했습니다. 블록 편집기로 작업하는 현실에 대한 후속 대화를 촉발시킨 그의 가장 선동적인 발언은 WordPress의 경쟁자를 언급했습니다.

Mullenweg는 "기본 레이아웃이기 때문에 Squarespace, Wix, Webflow 또는 WP 페이지 빌더 중 하나에서 한 사람이 하루 이상 걸린다는 것을 상상하기 어렵습니다."라고 말했습니다.

Marsland는 Gutenberg를 사용하여 도전하기로 결정했습니다. 이 연습에서 그는 WordPress의 가장 최근 기본 테마인 Twenty Twenty-Two를 사용했습니다. 그의 결과는 워드프레스의 새로운 디자인과 동일하지는 않지만 매우 유사했으며 약 20분 만에 홈페이지를 채울 수 있었습니다.

아래에 포함된 비디오에서 Marsland는 홈페이지의 각 섹션을 만드는 과정을 안내합니다. 그는 블록 편집기를 사용하는 고급 사용자라고 할 수 있습니다. 그는 행, 열 및 그룹을 빠르게 섞고 필요에 따라 패딩과 여백을 조정하고 디자인에 해당하는 색상을 각 섹션에 할당할 수 있습니다. 이 시점에서 이것은 대부분의 평균 WordPress 사용자가 할 수 있는 작업이 아니므로 해당 동영상이 시청자로부터 뜨거운 반응을 얻었습니다. Marsland의 YouTube 채널은 사용자가 Gutenberg를 사용하여 구축 페이지를 마스터하고 WooCommerce로 상점을 만드는 데 중점을 두고 있습니다.

"내 결론은 디자인의 95%를 신속하게 완료하는 것은 매우 쉽지만 내 경험에서 항상 가장 많은 시간이 소요되는 것은 마지막 5%라는 것입니다."라고 Marsland가 말했습니다. “지연을 일으킨 것은 내부 프로세스에 관한 것이지만 관여하지 않고는 확실히 말하기 어렵습니다. (Matt Mullenweg가 Wix, Squarespace 및 기타 WP 페이지 빌더를 언급한 것처럼) 디자인을 구축하는 데 구텐베르크의 문제가 아니라는 것을 보여주고 싶었습니다.”

Automattic이 후원하는 프로젝트 기고자 Alex Shiels는 "11y, 응답성, 브라우저 호환성, SEO 및 성능에 대한 합리적인 표준"을 위한 작업을 포함하여 지연을 일으킨 블록 편집기와 관련이 없는 몇 가지 항목을 언급했습니다. 다양한 대륙의 기여자들과 협력합니다.

Marsland의 시도에 대한 응답으로 WordPress 개발자 Patrick Boehner는 작은 세부 사항이 어떻게 매우 중요하게 남아 있는지에 대해 언급했습니다. Boehner는 "무엇이 먼저 디자인 중심인지 에디터에서 디자인되었는지 확실히 알 수 있습니다."라고 말했습니다.

구텐베르크가 WordPress에 데뷔한 지 5년이 지난 지금도 테마 개발자는 블록 우선 접근 방식을 염두에 두고 생성되지 않은 디자인에 생명을 불어넣는 데 어려움을 겪고 있습니다.

워드프레스 개발자 존 브라운(Jon Brown)은 “전통적으로 조롱된 페이지 디자인을 블록을 사용하여 실행하는 것은 오늘날 근본적으로 불가능에서 불가능으로 남아 있습니다. “이것은 문제입니다.

"물론, 블록은 '브라우저에서 페이지를 디자인'하고 블록에서 얻은 것을 수용하는 데 적합하지만 블록에는 목업을 기반으로 하는 반응형, 액세스 가능, 픽셀 완벽한 레이아웃을 생성하는 데 필요한 유연성과 컨트롤이 계속 부족합니다. .

"예전에는 12줄의 PHP와 12줄의 CSS가 걸렸지만 이제는 핵심 블록을 후크를 통해 쉽게 조정할 수 없고 필요한 기본 제어 기능이 없기 때문에 사용자 지정 블록을 구축하는 데 몇 주가 걸립니다."

Gutenberg 기고자들은 유동적인 타이포그래피를 도입하여 발전하고 있으며 디자인 도구 일관성 향상과 관련된 여러 문제를 추적하고 있습니다. 그 동안 테마 개발자는 블록 편집기가 자신의 디자인을 즉각적으로 반응하도록 만들고자 하는 사람들을 수용할 수 있도록 성숙함에 따라 필요한 성장 고통을 견디고 있습니다.

베테랑 테마 개발자인 Mike McAlister는 "처음부터 완전한 FSE 테마를 구축해 왔으며, theme.json 및 사용자 지정 CSS를 최소화하거나 사용하지 않고 성공적으로 복제할 수 있었던 내 디자인의 양에 놀랐습니다."라고 말했습니다. . “물론, 손이 많이 갔지만 그럼에도 불구하고 나는 감명을 받았습니다.

“그러나 Jon이 언급했듯이 더 작은 화면(또는 편집기에서 모바일 우선 디자인을 시도하려는 경우 더 큰 화면)에 맞게 조정해야 하는 두 번째 단계는 벽에 부딪힙니다. 아직 반응 제어가 없는 여백, 패딩 및 블록 간격에서 특히 분명합니다. .org의 새 테마에서 CSS를 통해 조정된 것을 볼 수 있습니다.”

응답성은 Shiels가 블록 편집기에서 단순히 디자인을 다시 만드는 것보다 디자인을 구현하는 데 더 많은 시간이 소요된 이유 중 하나입니다.

McAlister는 "그러나 응답성에 대한 개선의 암시가 있습니다."라고 말했습니다. “Fluid typography와 clamp()는 확실히 typography를 확인하는 데 도움이 되었지만 더 세밀한 제어가 필요한 상황은 항상 있을 것입니다. 다른 모든 사이트 빌더가 이 문제를 해결했으므로 WordPress가 불가능하거나 불가능하다고 생각할 이유가 없습니다. (요즘 트래픽의 50-60%가 모바일 장치에서 발생하기 때문에 확실히 그렇게 되기를 바랍니다!)

"이러한 성장통을 극복하는 가장 좋은 방법 중 하나는 가능한 한 많은 개밥을 먹는 것입니다. 편집기와 FSE를 사용하여 이러한 사각지대를 밝히기 위해 가능한 한 많은 실제 시나리오를 구축합니다."

Marsland의 짧은 연습은 블록 편집기에 대한 방법을 알고 있다면 짧은 시간에 WordPress.org의 디자인을 재창조하는 데 얼마나 근접할 수 있는지 보여줍니다. 그는 Gutenberg 페이지 구축 UI가 다른 응용 프로그램에서 만든 디자인을 재현하는 데 방해가 되지 않는다는 것을 증명하는 데 성공했습니다. 그보다는 개발자가 일반적으로 접근성, 반응성 및 SEO 고려 사항을 포함하여 편집기 외부에서 해결해야 하는 다른 모든 관련 체크리스트 항목입니다. 구텐베르크가 응답성 및 접근성과 관련된 추가 작업을 줄이는 데 가까울수록 자신이 꿈꾸는 디자인을 직접 제작하려는 일반 사용자에게 더 쉽게 다가갈 수 있습니다.