EditorPlus WordPress 플러그인을 통한 제어 블록 디자인

지난 주에 내가 그의 Gutenberg Forms 프로젝트에 대한 리뷰를 마지막으로 편집하고 있을 때 Munir Kamal은 블록 편집기를 위한 다른 종류의 WordPress 플러그인 출시를 준비하고 있었습니다. 이것을 EditorPlus라고 하며 블록에 대한 디자인 시스템을 만들었습니다. Kamal과 그의 팀은 조용히 버전 1.0을 마무리하고 며칠 후 WordPress 플러그인 저장소에 플러그인을 출시했습니다.

특정 디자인 결과를 얻기 위해 사용자 정의 블록을 생성하는 다른 많은 플러그인과 달리 EditorPlus는 사용자가 가지고 있는 것으로 페이지를 사용자 정의할 수 있는 유연성을 제공합니다. WordPress의 기존 블록 각각에 다양한 디자인 옵션을 추가합니다. 프런트 엔드에서는 해당 페이지에 필요한 CSS만 즉석에서 출력하여 가벼운 발자국을 남깁니다.

아마도 현재 이 플러그인의 가장 좋은 점은 구텐베르그와 궁극적으로 핵심 WordPress에서 영구적인 집을 찾을 가능성이 있는 많은 디자인 관련 기능의 토대를 마련한다는 것입니다. 구텐베르크 팀은 아이디어를 차용하고, 반복하고, 개선할 수 있습니다. 우리는 이미 Gutenberg 8.3에서 실험적인 패딩 제어 영역을 보았습니다. 개발 팀이 추후에 추가 설계 제어를 수행하는 것이 합리적일 것입니다. 타사 플러그인에서 먼저 롤아웃하는 이러한 컨트롤의 좋은 점은 팀이 사용자가 이에 어떻게 반응하는지 확인하고 어떤 작업을 수행하기 전에 구텐베르크에서 직접 작업할지 여부를 파악할 수 있다는 것입니다.

EditorPlus는 코드를 건드리지 않고 많은 디자인 자유를 원하는 사람들을 위한 상품이 부족하지 않습니다. 기본적으로 플러그인은 CSS를 몰라도 CSS 편집기입니다. 블록 옵션을 통해 최종 사용자에게 가장 필요한 CSS 기능에 대한 옵션을 제공합니다. 프론트 엔드에서 사이트를 부풀리지 않고 독특한 레이아웃을 만들 수 있을 만큼 충분히 강력하고 디자인을 만지작거리는 것을 좋아하는 사람들을 위한 놀이터입니다.

EditorPlus 작동 방식

EditorPlus 플러그인을 활성화한 후 최종 사용자는 게시물 또는 페이지 편집기로 이동하여 바로 해당 옵션을 사용할 수 있습니다. 블록을 삽입한 후 플러그인은 블록 옵션 패널에서 다음 8개 탭을 사용할 수 있게 합니다(각각 앞에 + 기호가 있음).

• 국경
• 박스 섀도우
• 사이징
• 배경
• 여유
• 심
• 테두리 반경
• 엑스트라

이 탭은 현재 타사 플러그인 블록이 아닌 핵심 WordPress 블록에만 나타납니다. Extras 탭을 제외하고 각 탭은 해당 CSS에 해당합니다. 추가 탭은 사용자가 CSS에서 블록 래핑 요소의 display 값을 변경할 수 있는 고급 "표시" 옵션을 제공합니다. 이 옵션은 고급 사용자에게 맡기는 것이 가장 좋습니다. 또한 호버 스타일과 잘 작동하는 전환 옵션을 제공합니다.

각 차단 옵션 탭에는 신비한 "R" 및 "H" 버튼도 있습니다. "R" 버튼을 통해 사용자는 반응형 옵션을 활성화할 수 있습니다. 즉, 데스크톱, 태블릿 및 모바일 화면을 기반으로 차단 스타일을 변경할 수 있습니다. "H" 버튼을 사용하면 사용자가 마우스 호버 상태에 따라 디자인을 변경할 수 있습니다.

플러그인은 약간의 공간에 많은 옵션을 제공합니다. 모든 새로운 디자인 탭은 처음에는 다소 압도적으로 느껴질 수 있습니다. 그러나 조금만 사용하면 근육 메모리를 확보하고 사용자 정의 레이아웃을 빠르게 폭파할 수 있습니다.

플러그인의 각 옵션은 매우 간단합니다. 그리고 그렇지 않은 경우 블록 편집기를 통해 즉각적인 피드백의 이점을 얻을 수 있습니다.

특정 블록의 테마 스타일에 따라 일부 사용자에게 문제가 될 수 있는 몇 가지 영역이 있습니다. 예를 들어 크기 조정 탭의 너비 설정이 항상 작동하지 않을 수 있습니다. 일부 테마는 블록에 최대 너비를 추가하여 크기에 관계없이 전체 너비를 제한합니다. 플러그인을 통해 이것을 무효화하는 것이 가능하지만 Kamal은 버전 1.0에서 이것을 하지 않기로 선택했습니다.

여백에 주의하십시오. 테마 디자인에 따라 좌우 여백을 사용하여 콘텐츠를 배치할 수 있습니다. 상단 또는 하단 여백만 설정하는 경우에도 플러그인은 왼쪽 및 오른쪽 여백에 대해 자동으로 0 을 출력합니다. 이로 인해 일부 테마의 콘텐츠 레이아웃이 손상될 수 있습니다.

플러그인에서 발생한 한 가지 문제는 일반적으로 플러그인의 스타일을 압도하는 활성 테마의 스타일이었습니다. 예를 들어 기본 Twenty Twenty 테마는 CSS에서 p.has-background 를 대상으로 지정하여 맞춤 패딩을 추가합니다. 따라서 EditorPlus 플러그인의 CSS를 더 높은 특이도로 무시합니다. 이 문제는 예상된 문제였으며 플러그인 개발자는 각 디자인 옵션에 대해 "중요" 확인란의 형태로 이에 대한 솔루션을 추가했습니다. 사용자가 이 상자를 선택하면 출력의 스타일 규칙에 !important 가 추가되어 테마 스타일을 무시할 수 있습니다. 100% 완벽한 솔루션은 아닙니다. 마일리지는 테마에 따라 다를 수 있지만 대부분의 사용 사례에서 작동해야 합니다.

UI에 중요한 체크박스가 있다는 아이디어가 마음에 들지 않습니다. 사용자가 걱정할 일이 아닙니다. 그러나 테마와 플러그인이 다른 것보다 더 중요한 디자인 규칙을 전달할 수 있는 실질적인 방법이 없는 것이 현실입니다. UI에 이것을 원하지는 않았지만 포함시키는 것은 현명한 결정이었습니다. 그렇지 않으면 너무 많은 테마의 스타일 규칙이 플러그인의 CSS를 덮어썼을 것입니다.

마지막 생각들

버전 1.0 릴리스의 경우 EditorPlus는 안정적으로 시작됩니다. 내 테스트에서 몇 가지 결함을 발견했습니다. 일반 사용자에게 발생하는 모든 문제는 테마 충돌의 형태로 나타날 수 있으며 이러한 충돌은 CSS에서 높은 특이성 또는 !important 를 사용하는 테마와 관련될 가능성이 큽니다.

Kamal은 플러그인의 웹페이지에서 이 플러그인에서 더 많은 것이 있음을 분명히 합니다. 그가 염두에 두고 있는 기능이 무엇인지 확신할 수 없지만, 나는 그것들을 보기를 고대하고 있습니다. Heading, Paragraph와 같은 텍스트 관련 블록에 대한 텍스트 그림자 옵션을 보고 싶습니다. 또한 단순히 래핑 요소가 아닌 갤러리 블록 내에서 이미지에 대한 몇 가지 디자인 옵션을 보는 것도 좋을 것입니다.

EditorPlus를 사용해야 하는지 여부는 추가 디자인 컨트롤이 필요한지 여부에 따라 다릅니다. EditorPlus는 경량 페이지 빌더와 유사한 것이 필요하지만 기본 WordPress를 고수하려는 사람들을 대상으로 합니다. 이 플러그인은 가능한 것을 보여주는 좋은 쇼케이스이며 언젠가 WordPress에 포함될 수 있는 잠재적인 디자인 옵션에 대한 좋은 지표입니다.