예제가 있는 구텐베르크 개발: Google 지도(1부)

며칠 전 우리는 WordPress.org 플러그인 디렉토리인 Nelio Maps에 새로운 플러그인을 게시했습니다. 이름에서 알 수 있듯이 WordPress 편집기에 새로운 유형의 블록을 추가하는 지도 플러그인 입니다. 이를 통해 페이지나 게시물에 Google 지도를 쉽게 추가할 수 있습니다. 다음과 같이 표시됩니다.

Nelio Maps는 완전히 Gutenberg를 위해 설계된 최초의 플러그인 중 하나입니다. 비교적 간단한 플러그인임에도 불구하고 매우 유용한 제품입니다. 한편으로는 웹사이트에 지도를 추가하려는 모든 사용자가 이제 간단하고 가벼운 플러그인을 설치하여 추가할 수 있기 때문입니다. 반면에 구텐베르크에서 개발하려는 모든 개발자는 이제 이 게시물을 읽는 것만으로 "처음부터" 플러그인을 만드는 방법에 대한 실제 예를 가지고 있기 때문입니다.

이와 같은 플러그인 개발이 세상에서 가장 쉬운 일이 아니라는 것을 알고 있기 때문에 이 튜토리얼을 세 부분으로 구성했습니다. 오늘 은 플러그인을 "처음부터" 만드는 방법을 설명하여 최종 제품을 빌드하는 데 사용할 스켈레톤으로 마무리합니다. 두 번째 게시물 에서는 WordPress 블록 편집기에서 대화형 맵을 얻는 방법을 설명하고 플러그인을 만들기 위해 만든 모든 구성 요소를 볼 것입니다. 마지막으로 세 번째이자 마지막 게시물 에서 데이터베이스에 지도를 저장하는 방법과 프론트엔드 에 지도를 표시하는 방법을 살펴보겠습니다 .

우리가 원하는 프로젝트와 플러그인 정의하기

당연한 것처럼 보일 수 있지만 새로운 프로젝트를 시작하기 전에 가장 먼저 해야 할 일은 해당 프로젝트에서 달성하고자 하는 바를 정의하는 것입니다. 포함하려는 기능에 따라 요구 사항 집합이 달라집니다. 따라서 이 튜토리얼에서 구현하려는 지도 플러그인의 종류를 정의해 보겠습니다.

프로젝트의 요구 사항은 다음과 같습니다.

1. 자신의 페이지나 게시물 에 지도(또는 둘 이상)를 추가 할 수 있어야 합니다.
2. 지도를 아무데나 중앙에 놓을 수 있어야 합니다.
   
   • 마우스로 지도를 끌거나
   • 또는 검색 상자에서 위치를 찾고 있습니다.
3. 지도의 크기는 너비와 높이 모두 조정 가능해야 합니다.
4. 지도에는 다양한 스타일 (흑백, 사용자 지정 색상 팔레트 등)이 포함되어야 합니다.
5. 사용자는 지도에 마커 를 추가할 수 있어야 합니다.
6. 마커가 있는 경우 마커에 대한 추가 정보가 포함된 텍스트 상자가 지도에 함께 표시되어야 합니다.

야심차죠? 자, 시작하겠습니다!

"처음부터" 구텐베르크 플러그인을 만드는 방법

우리 블로그를 팔로우하시면, Antonio가 Nelio에서 만든 플러그인 상용구를 사용하여 플러그인을 만드는 방법을 설명하는 게시물을 며칠 전에 게시한 것을 보셨을 것입니다. 아직 그의 게시물을 읽지 않았다면 먼저 읽는 것이 좋습니다. 왜냐하면 우리 플러그인은 Antonio가 거기에서 설명하는 플러그인 상용구 wp-beb 를 기반으로 하기 때문입니다.

프로젝트를 시작하기 위해 가장 먼저 할 일은 Nelio의 상용구 플러그인을 미러링하는 것입니다. 먼저 GitHub 계정에 새 리포지토리를 만듭니다. 그런 다음 Github의 도움말 페이지에 설명된 단계에 따라 상용구를 미러링합니다.

 git clone --bare https://github.com/avillegasn/wp-beb.git cd wp-beb.git git push --mirror https://github.com/your-username/your-repo.git

프로젝트가 준비되면 README.md 에 있는 지침에 따라 프로젝트를 컴파일하면 WordPress 사이트에서 볼 수 있습니다.

플러그인 상용구를 플러그인으로 변환하는 방법

플러그인 상용구 문서에 나와 있듯이 가장 먼저 해야 할 일은 소스 코드에서 프로젝트 이름을 변경하는 것입니다. 즉, 플러그인 이름(내 경우에는 nelio-maps )으로 wp-beb 의 모든 항목(대소문자, 하이픈 또는 밑줄 포함)을 변경해야 합니다.

이를 위해 다음 스크립트를 사용할 수 있습니다.

nelio maps int 줄 5, 8, 9, 10을 플러그인 이름으로 바꿔야 한다는 점을 명심하십시오.

한편, 지금은 플러그인 문서를 변경하기에 좋은 시기이기도 합니다. 한편으로는 새 플러그인의 목적을 반영하도록 README.md 및 readme.txt 파일을 편집해야 합니다(물론 상용구를 기본으로 사용한다는 사실을 잊지 않고). 다른 한편으로는 WordPress가 플러그인 화면에 플러그인을 표시하는 데 사용하는 데이터이므로 기본 PHP 파일의 첫 번째 주석을 변경해야 합니다.

Nelio Maps 프로젝트의 첫 번째 커밋에서 이러한 모든 변경을 수행한 방법을 볼 수 있습니다.

불필요한 것들의 플러그인 상용구를 청소하는 방법

Nelio의 상용구 플러그인은 기본적으로 (a) 데모 블록 및 (b) Gutenberg 플러그인의 몇 가지 구성 요소를 포함합니다. 우리는 블록(지도) 생성에만 관심이 있으므로 남은 모든 것(구텐베르크 플러그인)을 제거할 것입니다.

이 단계는 기본적으로 플러그인에서 불필요한 것을 "삭제"하기 때문에 매우 간단합니다. 구체적으로 다음을 수행해야 합니다.

1. assets 폴더(구텐베르크 플러그인이 추가된 위치, 스타일 및 아이콘)에 나타나는 모든 콘텐츠를 제거합니다.
2. 방금 제거한 assets 의 파일을 사용하는 몇 가지 규칙이 있으므로 webpack.config.js 파일을 정리합니다.
3. 더 이상 존재하지 않는 스타일시트와 JavaScript 파일을 대기열에 추가하므로 플러그인의 기본 파일을 정리합니다.

이 커밋의 모든 변경 사항을 볼 수 있습니다. 코드를 다시 컴파일하면 Demo 블록이 여전히 존재하지만 화면 오른쪽 상단에 나타난 구텐베르크 플러그인은 존재하지 않는 것을 볼 수 있습니다.

요약

오늘의 게시물에서 우리는 Gutenberg용 플러그인을 만드는 방법을 보았습니다. 먼저 생성하려는 프로젝트 유형을 정의하고 요구 사항을 식별했습니다. 다음으로 Nelio의 상용구 플러그인을 새 프로젝트에 적용하는 데 필요한 단계를 살펴보았습니다. 즉, Nelio의 상용구 프로젝트를 복제하고 특정 요구 사항을 충족하도록 정리하는 방법을 보았습니다.

다음 주에 이 튜토리얼의 두 번째 부분으로 뵙겠습니다. 데모 블록이 이 게시물의 시작 부분에서 설명한 모든 기능을 수행하도록 수정합니다.

Unsplash 에서 Brett Zeck 의 추천 이미지 .