Book Review Block 플러그인으로 뛰어들기

게시 됨: 2020-10-16

Automattic의 Product Wrangler인 Donna Peplinskie가 만든 Book Review Block 플러그인은 거의 3년이 되었습니다. 그러나 최근 여행에서 흥미로운 블록 플러그인을 찾기 위해 내 관심을 끌었습니다.

플러그인은 표지에 표시된 대로 거의 수행합니다. 그것은 책을 검토하도록 설계되었습니다. 일반적으로 제목, 작성자, 이미지, 등급 등과 같이 사용자가 리뷰에 추가해야 하는 모든 필드가 있습니다. 흥미로운 점은 간단한 ISBN 값으로 이러한 세부 정보를 자동으로 채울 수 있다는 것입니다. 또한 SEO에 도움이 될 수 있는 스키마 마크업을 지원합니다.

비가 오나 눈이 오나, 아프든 좋든, 나는 매일 책을 읽습니다. 저는 현재 2년 연속 독서를 한 달 반 동안 부끄럽게 생각하고 있습니다. 기분이 들뜨면 서평을 쓰기도 한다. 흥미로운 WordPress 프로젝트를 커뮤니티와 공유하고 싶은 만큼 때때로 Book Review Block과 같은 플러그인을 테스트하고 작성하려는 개인적인 동기가 있습니다. 저나 다른 열렬한 독자들이 문학 세계에 대한 우리의 생각을 다른 사람들과 공유하는 데 도움이 될 수 있는 모든 것이 관심입니다.

내가 가장 좋아하는 판타지 시리즈인 The Stormlight Archive 의 4번째 책인 Rhthym of War 의 ISBN을 연결했을 때 정말 기뻤습니다. "도서 세부 정보 가져오기" 버튼을 클릭하기만 하면 됩니다.

성공! 플러그인은 마법을 부리고 필요한 정보를 가져왔습니다. 내가 가장 좋아하는 작가의 이름, 출판사, 출시 예정일, 페이지 수가 있었습니다. 그것은 심지어 내가 편집기에서 다듬을 수 있는 긴 설명을 가지고 있었습니다.

WordPress 편집기에서 Book Review Block 사용하기.
Book Review 블록의 기본 출력입니다.

성공하기 전에 이것을 실현하기 위한 약간의 작업이 있었습니다. 도서 세부정보를 자동으로 가져오려면 최종 사용자에게 Google의 API 키가 있어야 합니다. 그것을 설정하고 블록 옵션 사이드바에서 사용 가능한 필드에 입력하는 데 약 1분이 걸렸습니다. 플러그인의 가장 큰 장점은 사용자가 책을 검토할 때마다 입력할 필요가 없도록 이 키를 저장한다는 것입니다.

Book Review 좋은 출발점을 차단합니다. 간단하고 사용하기 쉽습니다. 아직 훌륭한 플러그인이라고 할 수 있는 단계는 아닙니다. 그러나 그럴 수 있습니다.

짧게 떨어지다

플러그인의 Book Review 블록은 핵심 Media & Text 블록에서 신호를 가져와야 합니다. 당신이 그것에 도달했을 때, 둘은 본질적으로 시각적으로 같은 일을 하고 있습니다. 둘 다 이미지와 일부 콘텐츠가 나란히 있는 블록입니다.

다음은 코어의 리드를 따라야 하는 항목 목록입니다.

  • 대체 텍스트를 편집할 수 있는 방법이 없습니다(책 제목이 자동으로 사용됨).
  • 이미지는 항상 왼쪽으로 정렬되고 내용은 뒤집을 방법 없이 오른쪽으로 정렬됩니다.
  • 미디어와 콘텐츠는 모바일 보기에서 쌓을 수 없습니다.
  • 이미지 또는 콘텐츠 열의 크기를 조정할 수 없습니다.
  • 인라인 서식 있는 텍스트 컨트롤이 지원되는 동안 사용자는 제목, 목록 또는 단락 블록을 콘텐츠 영역에 추가하고 관련 블록 옵션을 사용할 수 없습니다.

사용자 경험을 빠르게 개선할 수 있는 후보 목록입니다. 궁극적으로 플러그인의 문제는 본질적으로 출력을 사용자 정의하는 방법을 제공하지 않는 데 있습니다.

다른 일관된 문제 중 하나는 플러그인이 로드하는 책 이미지가 항상 약간 작다는 것입니다. 이것은 플러그인보다 Google Books API의 문제인 것 같습니다. 책을 테스트할 때마다 더 큰 이미지를 추가하기로 선택했습니다. 플러그인을 사용하면 기본값을 바꿀 수 있습니다.

색상 설정이 제한됩니다. 블록은 텍스트 색상을 조정할 방법이 없는 배경색 옵션만 제공합니다. 플러그인 사용자를 위한 더 나은 옵션은 그룹 블록으로 묶고 배경 및 텍스트 색상을 조정하는 것입니다.

WordPress 편집기의 Group 블록 내부에 Book Review 블록을 래핑합니다.
Group 블록 안에 래핑된 Book Review 블록.

또한 많은 블록 플러그인 작성자가 종종 간과하는 기능인 폭넓고 전체 정렬 옵션을 사용하는 것이 좋습니다.

미디어 및 텍스트 블록을 사용하여 서평 블록 다시 만들기

Book Review Block 플러그인은 많은 잠재력을 가지고 있으며 최종 사용자에게 더 많은 유연성을 제공하여 발전하는 모습을 보고 싶습니다. Media & Text 블록은 플러그인이 제공하는 것과 가장 가까운 핵심 블록이기 때문에 더 시각적으로 매력적인 디자인을 재현하기로 결정했습니다.

편집기에서 미디어 및 텍스트 블록으로 서평 섹션 만들기.
미디어 및 텍스트 블록으로 만든 도서 리뷰 섹션.

내용 측면에서 약간의 조정을 했습니다. 책 제목에는 Heading 블록, 책 메타데이터에는 List 블록, 설명에는 Paragraph 블록을 사용했습니다.

Media & Text 블록은 또한 정렬을 조정하고, 모바일 보기에서 이미지와 콘텐츠를 쌓고, 이미지 크기를 조정할 수 있는 자유를 제공했습니다. 또한 이미지 alt 속성을 사용자 정의하는 데 가장 중요한 필드가 있습니다.

Media & Text 블록은 저에게 훨씬 더 많은 디자인 마일리지를 주었습니다.

그러나 코어 블록에는 한계가 있습니다. Book Review 블록을 통해 사용할 수 있는 일부 기능을 완전히 캡처하지 않습니다. 가장 분명한 것은 ISBN과 스키마 마크업을 통한 자동 도서 세부 정보입니다. 덜 분명하지만 별 등급을 쉽게 재현할 수 있는 방법은 없으며(나는 이모티콘 별을 사용했습니다) 긴 설명 텍스트는 이미지 아래에 줄바꿈되지 않습니다. 이를 다시 만들려면 왼쪽 정렬된 이미지와 콘텐츠를 차례로 사용하도록 선택해야 합니다.

전반적으로 미디어 및 텍스트 블록은 출력 스타일을 더 잘 지정할 수 있는 기능을 제공합니다. 이는 사용자로서 제가 더 관심을 갖는 부분입니다. 나는 사물에 나의 독특한 스핀을 넣고 싶다. 그것이 Book Review Plugin이 잘못 작동하는 곳입니다. 또한 플러그인 작성자가 반복하여 향후 더 많은 유연성을 제공할 수 있는 것입니다.

이것은 특히 사용자가 입력해야 하는 데이터가 1~2비트 이상인 경우 많은 블록 플러그인이 잘못되는 부분입니다. 블록은 여러 면에서 자유를 나타냅니다. 그러나 플러그인 개발자가 엄격한 구조를 고수할 때 사용자는 페이지를 구축할 때 가질 수 있는 자유를 잃을 수 있습니다.

그 자유를 보존하는 최고의 블록 중 하나는 Recipe Block 플러그인입니다. 구조화된 입력 및 필드가 있습니다. 그러나 최종 사용자가 자신의 것으로 만들 수 있는 자유 형식 콘텐츠를 허용합니다.

블록 작성자가 이러한 엄격함을 넘어서면 사용자가 승리합니다.