FSE 아웃리치 라운드 #2: Gutenberg의 사이트 편집기로 맞춤형 홈페이지 구축

Anne McCarthy는 전체 사이트 편집(FSE) 아웃리치 프로그램에 대한 두 번째 테스트 라운드를 발표했습니다. 테스트 요청은 사용자가 Gutenberg 플러그인의 사이트 편집기에서 홈페이지를 구축하도록 요청합니다. 피드백은 3월 5일까지 가능합니다.

1차 테스트는 2020년 12월에 시작되어 지난달 종료되었습니다. 테스터는 블록 편집기의 템플릿 편집 모드를 사용하여 몇 가지 문제점을 식별할 수 있었습니다. 이 프로그램은 Gutenberg 개발자가 개선할 수 있는 실행 가능한 항목을 만들었습니다.

이번 2라운드도 비슷하다. 그러나 테스트는 훨씬 더 크고 복잡한 영역을 다룹니다. 사용자는 익숙한 블록 편집기를 떠나 사이트 편집기로 이동할 것입니다.

McCarthy는 홈페이지 구축을 위한 22단계 프로세스를 나열했습니다. 거의 대부분 따라하다가 끝내기 전에 지루했어요. 이것이 내가 가난한 시험 대상을 만드는 이유 중 하나입니다. 나는 스스로 가능한 것을 탐구하고 보는 것을 좋아합니다. 아이디어가 있으면 실행에 옮기고 싶습니다. 약간 순서가 어긋나더라도 주로 전체적인 대본에 충실했습니다.

결국 The Grilled Cheese라는 레스토랑에 대한 맞춤형 홈페이지를 만들었습니다 . WordPress 커뮤니티를 떠나면 현실 세계에서 이 레스토랑을 확실히 열 것입니다.

그것은 합리적으로 간단합니다. 이 단계에 이르기까지 다양한 개념을 가지고 노는 데 약 2시간이 걸렸습니다. 내가 만족할 만한 것을 만들려면 몇 시간이 더 걸렸을 것입니다.

전반적으로 이상적인 홈페이지를 구성하는 데 한계를 느꼈습니다. 각 단계는 도구와의 힘든 싸움이었습니다. HTML과 CSS로 절반도 안 되는 시간에 이것을 구축할 수 있었습니다. WordPress용 다른 최신 페이지 빌더 플러그인으로 더 많은 작업을 수행할 수 있습니다.

테스트 결과에 대해 알아보기 전에 잔인한 정직함을 가지고 있습니다. FSE Outreach 테스트에 사용된 테마인 TT1 Blocks는 스너프까지 하지 않습니다. 테마는 사이트 편집기가 최종 사용자의 손에 설정한 다양한 가능성을 안정적으로 처리하지 못합니다. 이 전체 경험은 더 나은 테마로 더 매끄럽게 만들 수 있습니다. 그러나 선택 사항이 제한되어 있으며 현재 작업하기에 더 나은 블록 기반 테마가 있는지 확실하지 않습니다.

사이트 편집기와 프론트 엔드 사이에 불일치가 너무 많아서 모두 나열하는 것은 거의 의미가 없습니다. 간격이 크게 벌어졌습니다. 일반적으로 테마 문제로 봅니다. 나는 시행착오 모드에서 많은 시간을 보냈고, 에디터에서 조정하고 프런트 엔드 결과를 보기 위해 새로고침했습니다. 헹구기. 반복하다.

문제점 식별

이 게시물은 사이트 편집자에 대해 비판적이지만 경험이 완전히 좋지 않았다는 의미는 아닙니다. 매주 개선되는 모습을 보니 워드프레스가 시장에 나와 있는 어떤 것과도 견줄 수 있는 사이트 편집기를 갖게 될 것이라는 희망이 생겼습니다. 결국. 그러나 여기서 내 목표는 팀이 사용할 수 있는 실제 피드백을 제공하는 것입니다.

앞서 언급한 일반적인 간격 문제 외에도 맞춤형 홈페이지를 구축하는 동안 몇 가지 걸림돌을 식별했습니다.

최대 너비

사이트 편집기를 통해 전체 사이트 페이지를 디자인할 때 한 가지 문제가 무엇보다 두드러졌습니다. WordPress에는 균형 잡힌 "최대 너비" 시스템이 없습니다. 사용자로서 내 홈페이지의 콘텐츠 영역 너비를 설정하는 데 있어 선택의 여지가 거의 없었습니다. 현재 테마 작성자는 사용자 정의 콘텐츠, 와이드 및 전체 너비를 설정할 수 있습니다. 그러나 이 시스템은 끔찍하게 제한적입니다. 테마 작성자가 이것으로 할 수 있는 일은 많지 않으며 이 문제는 사용자가 블록 편집기와 사이트 편집기 모두에서 할 수 있는 작업을 직접적으로 제한합니다.

나는 이전에 테마 작성자가 사용자 정의할 수 있는 디자인 프레임워크의 필요성에 대해 쓴 적이 있습니다. Tailwind CSS에는 유연성을 제공하는 최대 너비 시스템이 있습니다. WordPress는 이러한 현대적인 디자인 프레임워크에서 아이디어를 차용해야 합니다.

블록 아이콘 추가

기본 콘텐츠 영역의 요소 사이에 마우스를 가져갈 때 "블록 추가" 아이콘이 표시되도록 하는 것은 거칠었습니다. 마우스가 나타나도록 완벽한 위치에 마우스를 놓아야 했습니다. 조금만 움직여도 아이콘이 다시 사라지는 좌절감의 연습이었다.

Top Toolbar 모드로 전환하면 이 작업이 훨씬 쉬워졌습니다. 기본 블록 도구 모음이 어느 정도 숨기고 있다고 가정합니다. 이 모드로 전환할 때의 문제는 내 도구 모음 선택 항목이 저장되지 않았다는 것입니다. 사이트 편집기로 돌아갈 때마다 다시 한 번 활성화해야 했습니다.

쿼리 블록

맞춤 홈페이지에 게시물을 올릴 때 가장 답답한 부분은 제한을 설정하는 것이었습니다. 숫자를 3으로 설정하고 싶었습니다. 그러나 쿼리 블록에는 이를 수행할 수 있는 옵션이 없습니다. 결국 카테고리 필터를 사용하여 가짜 제한을 만들고 게시물이 몇 개만 있는 필터를 선택했습니다.

업데이트: 주석에서 Nick이 언급한 대로 제한을 설정할 수 있습니다. 도구 모음에는 페이지당 게시물 수, 오프셋 및 최대 페이지 수를 설정하기 위한 "설정" 아이콘이 있습니다. 왜 이러한 특정 쿼리 설정이 사이드바의 다른 설정과 분리되어 있는지 잘 모르겠습니다. 함께 그룹화하는 것이 더 합리적입니다.

Query 블록의 또 다른 혼란스러운 측면은 키워드 필터입니다. 내가 아는 한 WordPress는 "키워드"라는 용어를 사용한 적이 없습니다. SEO 플러그인 외부에는 이 필터가 하는 일에 대한 컨텍스트가 없는 것 같습니다. 검색 키워드처럼 작동하는 것 같아요.

모든 블록에 대한 전역 스타일

전역 스타일 패널로 전환할 때 블록 수준에서 스타일을 적용할 때 일부 블록이 누락된 것을 발견했습니다. 특히 Latest Comments 블록의 스타일을 조정하고 싶었습니다.

타이포그래피, 색상 및 기타 디자인 관련 옵션이 있는 블록만 목록에 표시된다고 가정합니다. 이것은 사이트 편집기가 WordPress에 도착할 때 최종 사용자를 혼란스럽게 할 수 있습니다. 모든 블록에는 사용자가 사용자 정의할 수 있는 스타일 옵션이 있어야 합니다.

전체 너비 열 없음

내 홈페이지의 콘텐츠에 대해 전폭 Columns 블록을 만들려고 했습니다. 그러나 두 개의 개별 칼럼은 각각 66.67%와 33.33%를 차지함에도 불구하고 크기에 제한이 있었다.

이것은 테마 문제인 것 같습니다. 나는 또한 이것이 최대 너비를 보다 직접적으로 제어하는 ​​것이 도움이 되었을 때 중 하나라고 주장합니다. 나는 테마의 전체 너비와 넓은 너비 사이에 있는 것을 정말로 원했습니다.

추천 이미지

Post Featured Image 블록에서 출력되는 이미지의 크기를 설정할 수 있는 방법은 없습니다. 현재 균일한 크기를 얻는 유일한 방법은 이미지를 WordPress에 업로드하기 전에 미리 자르는 것입니다.

이것이 본질적으로 Image 블록의 변형이 아니어야 할 이유가 없습니다. 추천 이미지가 달라야 하는 유일한 것은 게시물에 링크하는 옵션입니다.