Gutenberg Forms로 블록 편집기를 통해 양식 작성

게시 됨: 2020-06-16

완벽한 형태의 플러그인에 대한 탐구는 거의 WordPress만큼 오래되었습니다. 프로젝트가 왔다가 사라졌습니다. 훌륭한 양식 플러그인이 몇 가지 있지만, 자신의 방식대로 작업을 수행하는 대규모 빌더와 너무 단순하여 기대에 부응하지 못하는 솔루션 사이에서 선택하는 경우가 너무 많습니다. Munir Kamal은 블록 편집기 내에서 독점적으로 양식을 작성하도록 설계된 플러그인인 Gutenberg Forms를 사용하여 포화된 이 시장에 자신의 모자를 썼습니다.

플러그인은 결코 완벽하지 않습니다. 그것은 많은 단점을 가지고 있습니다. 많은 일을 제대로 합니다. 게임을 바꿀 수 있는 기능으로 때때로 실패합니다. WordPress를 위한 최고의 양식 작성 플러그인 중 하나가 될 가능성이 있습니다.

최신 업데이트인 버전 1.4.0에서 Gutenberg Forms는 성공과 좌절이 뒤섞여 있습니다. 나는 그것에 대해 흥분한다.

우리가 이 플러그인 수명의 초기 단계에 있기 때문에 매우 기쁩니다. Kamal이 Gutenberg Hub 및 ACF Blocks를 포함하여 짧은 시간 내에 성공적인 Gutenberg 관련 프로젝트를 구축했기 때문에 흥분됩니다. 시간이 지나면 좋아질 거라 믿기 때문에 기대가 됩니다.

양식 플러그인은 쉽지 않습니다. 우리가 다룰 현재 문제에도 불구하고 Gutenberg Forms는 앞으로 양식 빌더에서 보고 싶은 많은 상자를 체크하는 유용한 플러그인입니다. 블록 기반 양식에 필요한 아이디어가 있습니다. 실행에는 약간의 개선이 필요합니다.

Gutenberg Forms는 올해 2월에 재창조되었습니다. Kamal은 원래 2018년에 플러그인을 출시했지만 최신 API로 업데이트하기 전까지 1년 반 동안 불안정했습니다. 그 이후로 그는 눈물을 흘리며 자주 업데이트를 출시하고 플러그인 작동 방식을 개선했습니다. 나는 몇 달 전에 처음으로 그것을 테스트했고 결과에 만족하지 못했습니다. 그러나 최신 버전은 훨씬 더 많은 가능성을 보여줍니다.

현재 사용자가 200명 이상인 상황에서 플러그인에 필요한 가장 큰 것은 더 많은 사용자로부터 더 많은 피드백을 받는 것입니다.

건물 양식

Gutenberg Forms 플러그인으로 표준 양식 만들기.
표준 양식 만들기.

Gutenberg Forms는 양식 작성을 간단하게 만듭니다. 플러그인에서 양식을 작성하는 두 가지 방법이 있습니다. 첫 번째 방법은 관리자의 사용자 지정 "양식" 화면입니다. 게시물이나 페이지처럼 작동하는 사용자 지정 게시물 유형입니다. 차이점은 사용자가 플러그인에서 제공하는 양식 필드를 추가하는 것으로 제한된다는 것입니다. 이 양식 작성 방법을 사용하는 것은 양식이 한 장소에 저장되고 사이트의 어느 곳에서나 사용할 수 있기 때문에 이상적입니다.

두 번째 방법은 게시물 또는 페이지 편집기에서 직접 양식을 작성하는 것입니다. 플러그인의 모든 사용자 정의 블록은 사용자 정의 양식을 만드는 데 사용할 수 있습니다. 일회용 양식의 경우 이 방법을 사용할 수 있지만 대신 양식 화면에서 작성하는 것이 좋습니다.

양식 화면을 통해 양식을 작성한 후 사용자는 나중에 Gutenberg Forms 블록을 사용하여 저장된 양식을 삽입할 수 있습니다. 이 블록을 삽입할 때 실제로 일어나는 일은 저장된 양식을 선택할 때 플러그인이 편집기에 단축 코드를 삽입한다는 것입니다. 이것은 플러그인의 단점 중 하나입니다. 빌딩 블록의 아이디어 중 하나는 개발자가 단축 코드 시스템을 사용하지 않도록 하는 것입니다. 기술적인 관점에서 여기에 숏코드를 혼합할 필요가 없습니다. 단순히 서버측 블록이어야 합니다. 나는 이것이 최종 사용자에게 그다지 중요하다고 생각하지 않습니다. 효과가있다. 장기적으로 발전하기를 바라는 것은 그저 이상한 일입니다.

Gutenberg Forms 플러그인을 사용하여 저장된 양식을 페이지에 삽입합니다.
저장된 양식을 페이지에 삽입합니다.

플러그인은 최종 사용자가 양식 플러그인에서 볼 것으로 기대하는 대부분의 일반적인 양식 필드를 제공합니다. 다음은 현재 사용 가능한 양식 필드 블록입니다.

  • 계산
  • 체크박스
  • 날짜 선택기
  • 이메일
  • 파일
  • 양식 버튼
  • 메세지
  • 이름
  • 숫자
  • 핸드폰
  • 라디오
  • 선택하다
  • 텍스트
  • 웹사이트
  • 예 아니오

Gutenberg Forms에는 출력 필드용이 아닌 다른 블록도 포함됩니다. Form Columns 블록을 사용하면 최종 사용자가 열화된 필드를 생성할 수 있습니다. 이것은 도시, 주 및 우편 번호 필드와 같이 수평으로 정렬되어야 하는 필드에 적합합니다. 양식 그룹 블록을 사용하면 사용자가 여러 블록을 그룹화할 수 있습니다. 또한 사용자 정의 색상 및 패딩을 포함한 여러 디자인 옵션이 있습니다. 양식 단계 블록은 다단계 양식에 단계를 추가하는 데 유용합니다.

가장 크지만 가장 다듬어지지 않은 기능은 Gutenberg Forms에서 제공하는 미리 디자인된 템플릿 라이브러리입니다. 현재 플러그인에는 약 34개의 사용자 정의 템플릿이 있습니다. Kamal이 Gutenberg Hub에서 템플릿을 사용한 작업을 고려할 때 앞으로 더 많은 템플릿을 보게 될 것이라고 생각합니다.

Gutenberg Forms WordPress 플러그인을 사용하여 페이지에 양식 템플릿 삽입
양식 템플릿을 페이지에 삽입합니다.

문제? 양식 템플릿 삽입기가 항상 작동하는 것은 아닙니다.

최신 WordPress 및 Gutenberg 플러그인에 대해 플러그인을 테스트했지만 새 양식 화면을 통해 양식 템플릿을 삽입할 수 없었습니다. 삽입을 방해하는 JavaScript 오류가 있습니다. 적어도 내 테스트 환경에서 작동하지 않는 플러그인의 가장 흥미로운 기능 중 하나는 약간의 실망이었습니다.

양식 작성 화면에서는 템플릿 삽입이 작동하지 않지만 페이지 편집 화면에서 일회성 양식 작성 시에는 작동했습니다. 그러나 삽입 후 일부 블록에 대해 "이 블록에는 예기치 않거나 잘못된 콘텐츠가 포함되어 있습니다"라는 두려운 메시지를 받았습니다.

이 문제는 극복할 수 없습니다. 구텐베르크 프로젝트는 끊임없이 변화하는 상태에 있습니다. 상황이 너무 불안정하기 때문에 지금 이러한 유형의 문제를 용서하고 있으며 업데이트에서 해결할 수 있다는 것도 알고 있습니다. 그러나 프로덕션 환경에서 좀 더 세련된 것이 필요한 사용자를 위해 지적하고 싶습니다. 템플릿 기능 없이도 쉽게 양식을 작성할 수 있습니다.

마지막 생각들

예, Gutenberg Forms는 가장자리가 약간 거칠습니다. 양식 시장의 다른 주요 업체와 경쟁할 수 있는 지점이 아닙니다. 그러나 6개월 또는 1년 후 지속적인 개선을 가정하면 자체 파이 조각을 시작할 수 있는 위치에 있어야 합니다.

플러그인에는 몇 가지 다른 요점이 있습니다. 예를 들어, 일부 블록에서 사용할 수 있는 "인라인" 블록 스타일은 기본값으로 재설정할 수 없습니다. 확인란 블록 이름의 "C"는 소문자이고 다른 모든 블록 이름은 대문자로 시작합니다. 이러한 사소한 것들이 플러그인을 실제보다 덜 세련되게 보이게 합니다.

내가 설명한 문제에도 불구하고 블록 기반 양식 빌더 시장에 있는 사람들에게 이 플러그인을 테스트할 것을 권장합니다. 그 단순함은 많은 사람들에게 쉬운 선택이 될 것입니다. 대부분 잘 작동합니다. 하루가 끝나면 양식을 작성하고 해당 양식에 대한 제출물을 데이터베이스에 직접 저장할 수 있으며 이것이 진정으로 중요합니다.

나는 우리가 특별한 것의 시작에 있다고 굳게 믿습니다. 우리가 거기에 도착하기까지 약간의 시간이 걸릴 것입니다. Gutenberg Forms가 양식 빌더 시장을 인수하지 않더라도 다른 플러그인 개발자는 이 플러그인이 수행하는 작업에서 신호를 받기 시작해야 합니다.