ACF Blocks는 Advanced Custom Fields Pro에서 구축된 다양한 블록을 제공합니다.
게시 됨: 2020-05-07주말에 Munir Kamal은 편집기용 블록 모음을 생성하는 프로젝트인 ACF Blocks 플러그인 버전 2.0을 출시했습니다. 플러그인은 무료 버전에서 18개의 사용자 정의 블록을 제공하고 프로 업그레이드에서 15개를 더 제공합니다. ACF Pro(Advanced Custom Fields Pro)를 기반으로 구축되었습니다.
플러그인의 최신 업데이트는 블록 내 텍스트에 다양한 Google 글꼴을 사용하는 옵션을 포함하여 타이포그래피에 대한 지원을 추가했습니다. Kamal은 또한 플러그인의 모든 블록에 대한 여백 및 패딩과 같은 디자인 기능에 대한 기본 스타일 옵션을 포함했습니다.
ACF Pro를 하드 종속성으로 사용하면 ACF 블록의 청중이 제한됩니다. 대체로 이 플러그인은 예산 내에서 클라이언트를 위한 기능을 빠르게 구축해야 하는 에이전시 및 프리랜서에게 유용할 것입니다. 이를 위해 플러그인은 견고한 작업을 수행합니다.
ACF Pro와의 긴밀한 결합은 플러그인에 대한 사용자 경험을 손상시킵니다. 그러나 ACF Blocks의 이면에 있는 아이디어와 사용자 지정 옵션은 종속된 상위 플러그인에 의존하는 단점을 보완합니다. 둘을 분리하는 것은 불가능하지만 더 부드러운 경험을 제공하고 플러그인을 더 많은 청중에게 공개할 것입니다.
Kamal은 ACF와 그 프로 버전에서 플러그인에 대한 영감을 얻었습니다. 그는 중급 개발자에게도 "매우 쉬운" 프레임워크로 블록을 만드는 과정을 설명했습니다. "사용자 정의 필드를 만드는 것은 수년 동안 놀라운 WordPress 프레임워크였습니다."라고 그는 말했습니다. "[Elliot Condon]이 ACF의 블록 생성 기능을 발표했을 때 즉시 사용 가능한 ACF 블록 컬렉션을 구축하게 되었습니다."
가장 큰 기술적인 한계는 Kamal이 현재 ACF의 한계인 중첩 블록을 구축할 수 없다는 것입니다. "나는 이미 [Condon]과 논의했으며 그는 이미 그 기능을 곧 제공하기 위해 노력하고 있습니다."라고 그는 말했습니다. "일단 ACF에 관한 한 우리는 더 놀랍고 강력한 구텐베르크 블록을 만들 수 있습니다."
플러그인 작동 방식에 대한 짧은 설명 보기:
유용한 블록 모음
ACF Blocks의 무료 버전을 주로 테스트하는 동안 최종 사용자의 일반적인 요구 사항을 즉시 해결할 수 있는 몇 가지 유용한 블록이 있음을 발견했습니다. 18개의 무료 블록을 사용할 수 있으므로 사용자는 업그레이드 경로를 따라 프로 버전으로 이동할지 여부를 결정하기 전에 많은 작업을 수행할 수 있습니다.
컬렉션에서 최고의 블록 중 하나는 사진 콜라주 블록입니다. 핵심 갤러리 블록에 대한 ACF 블록의 답변입니다. 이 블록에 대한 그리드 옵션만으로도 이 플러그인을 확인할 가치가 있습니다. 블록은 사용자가 선택한 그리드 옵션에 따라 2~15개의 그리드 레이아웃을 제공합니다.
내가 두 번째로 좋아하는 구색은 Testimonial 블록입니다. 모든 블록에 사용할 수 있는 타이포그래피 옵션과 함께 사용 후기 섹션을 디자인하는 데 많은 재미를 느낄 수 있습니다.
이것은 플러그인이 할 수 있는 일의 작은 샘플입니다. 가격표 블록은 레스토랑 사이트에서 메뉴를 설정하는 데 도움이 될 수 있습니다. 가격 상자 블록, 특히 핵심 열 블록에 중첩된 경우 여러 제품 옵션이 있는 가격 섹션을 쉽게 설정할 수 있습니다. 그리고 팀 블록을 사용하면 회사의 팀/정보 페이지에 프로필 섹션을 간단하게 만들 수 있습니다.
다음 블록은 무료 버전에서 사용할 수 있습니다(프로 버전에서는 몇 개 더 있음).
- 스크롤 가능한 이미지 블록
- 탭 블록
- 토글 블록
- 아코디언 블록
- 이미지 슬라이더 블록
- 소셜 공유 차단
- 사진 콜라주 블록
- 게시물 차단
- 평가 블록
- 팀 블록
- 멀티 버튼 블록
- 가격 상자 블록
- 가격 목록 블록
- 등급 차단 시작
- 진행률 표시줄 블록
- 카운터 번호 블록
- 트윗하려면 클릭하세요 차단
- 영업시간 차단
Kamal이 전체 제품군에서 가장 좋아하는 블록은 Image Hotspot으로, 사용자가 "포인터"로 이미지 배경을 설정하여 콘텐츠를 표시할 수 있습니다. 사용자가 슬라이딩 막대를 사용하여 두 이미지를 비교할 수 있는 Before After Image; 및 플러그인의 그리드 기반 갤러리 블록인 Photo Collage. 처음 두 개는 플러그인의 프로 버전에서만 사용할 수 있습니다. 플러그인 제작자는 모든 블록이 유용하다고 생각하지만 이것이 빌드하는 것이 가장 재미있다고 말했습니다.
발전을위한 여지
ACF 블록은 좋은 개념입니다. 그것은 많은 것을 바로잡습니다. 그러나 블록 작업 경험을 약화시키는 사소한 문제가 있습니다. 이러한 문제는 극복할 수 없으며 Kamal이 그의 과거 작업에 대한 친숙도를 기반으로 다음 버전에서 해결하고 사용자를 위한 훌륭한 제품을 구축하기 위해 추진할 것으로 기대합니다.
가장 시급하고 가장 수정하기 쉬운 문제는 모든 블록의 왼쪽 및 오른쪽 여백에 대한 플러그인 스타일입니다. 플러그인은 기본적으로 이러한 여백을 0 으로 재설정합니다. 사이트의 활성 테마에 따라 블록을 프런트 엔드의 콘텐츠 영역 대신 화면 가장자리로 이동할 수 있습니다. 일부 테마는 왼쪽/오른쪽 여백을 사용하여 콘텐츠를 정렬합니다. 이것은 ACF 블록만의 문제가 아닙니다. 프론트 엔드 출력이 있는 플러그인 중에서 널리 사용됩니다.
여백 문제에 대한 빠른 솔루션 중 하나는 핵심 그룹 블록 내에서 플러그인 블록을 래핑하는 것입니다. 이렇게 하면 여백이 테마의 제어 하에 다시 놓이게 됩니다.
블록 내용 편집은 블록에서 직접 발생하지 않고 블록 옵션 패널에서 발생합니다. 이것이 ACF Pro 프레임워크 사용의 한계인지 Kamal 측의 설계 결정인지 확실하지 않습니다. 콘텐츠 영역의 콘텐츠 편집과 사이드바의 콘텐츠 편집 사이를 건너뛰는 것이 이상하게 느껴집니다.
내가 블록 콘텐츠와 혼동한 한 가지 예는 사진 콜라주 블록이었습니다. 업로드할 미디어 라이브러리가 나타나길 바라며 블록을 클릭했습니다. 아무 일도하지. 처음에는 제대로 클릭하지 못했기 때문에 다시 클릭했습니다. 아무 일도하지. 결국 오른쪽에 있는 블록의 옵션 패널 아래에서 이미지 업로드 버튼을 찾았습니다.
블록 옵션을 설정하면 편집기의 블록 출력이 변경 사항을 즉시 반영하지 않기 때문에 때때로 약간 느려질 수 있습니다. 이것은 주로 ACF Blocks가 ACF Pro의 서버 측 렌더링 기능에 의존하기 때문입니다. 블록 플러그인에서 이 문제를 해결할 수 있을 것 같지 않습니다. 일부 사용자는 여러 옵션을 편집할 때 지연된 렌더링이 지루하다고 생각할 수 있습니다.
마지막 생각들
Kamal은 많은 최종 사용자가 즉시 만들 수 없는 콘텐츠 섹션을 구축하는 데 도움이 되는 유용한 블록 세트를 구성했습니다. 무료 버전과 프로 버전 사이에는 총 33개의 블록이 있습니다. 제작자는 사용자 피드백을 기반으로 시간이 지남에 따라 더 많은 블록을 추가하기 위해 최선을 다하고 있습니다. 가까운 장래에 그는 버그 수정을 계속 해킹하고 코드를 개선할 계획입니다.
나는 여전히 ACF Pro의 작동 방식이 이 플러그인을 처음부터 빌드할 경우 얼마나 좋은지 방해한다고 생각합니다. 즉, 프레임워크는 Kamal의 플러그인을 현실로 만드는 데 도움이 되었습니다. ACF Blocks는 ACF Pro를 통해 가능한 것의 쇼케이스로, WordPress 생태계에서 가장 널리 사용되는 프레임워크 중 하나를 기반으로 구축된 솔루션을 찾고 있는 다른 개발자들에게 영감을 줄 것입니다.
Kamal은 일부 ACF Pro 사용자가 유사한 블록을 만들기 위해 손을 댈 수 있지만 지원을 제공하기 위한 그의 팀의 지식과 헌신이 방정식의 가장 중요한 부분이라고 생각한다는 것을 이해합니다. "ACF Blocks는 가장 일반적인 웹 디자인 요소에 대한 블록을 직접 만드는 데 드는 시간과 노력을 절약합니다."라고 그는 말했습니다.
참고: 이 플러그인 검토 및 피드백은 플러그인 작성자가 요청한 것입니다. 리뷰 처리 방법에 대한 자세한 내용은 실제 경험을 기반으로 한 정직한 피드백에 대한 게시물을 읽어보세요.