WordPress 개발자로서 Gutenberg에 기여하는 방법

어느 정도 마음에 들겠지만 WordPress 블록 편집기인 Gutenberg가 여기에 있습니다. 좋은 점은 오픈 소스이기 때문에 원하는 대로 수정할 수 있다는 것입니다(방법을 알고 있는 경우).

더욱이 편집기에서 해결해야 한다고 생각하는 오류를 발견하면 보고하거나 직접 해결하고 변경 사항을 업로드하여 우리 모두가 혜택을 받을 수 있습니다. 이것 으로 당신 은 당신 의 좋은 업보 뿐만 아니라 프로젝트 를 개선 하는 데 기여할 것입 니다 .

구텐베르크 기본 코드에 기여하기 위해 따라야 할 단계를 알고 있습니까? 아마 당신의 대답은 아니오입니다. 나에게도 똑같은 일이 일어났고 나는 그것을 조사해야 했다. 그래서 전 과정을 보다 쉽고 빠르게 이해하고 개발자로서 자신의 코드로 구텐베르크 개선에 기여할 수 있도록 진행하는 방법을 설명하겠습니다.

해야 할 일과 개선해야 할 사항이 많지만 WordPress 블록 편집기에서 발견한 문제를 해결하는 데 도움이 되는 것은 여러분의 손끝에 있습니다.

구텐베르크 발전에 기여하는 단계

시작하기 전에 Git에 대한 최소한의 지식이 있고 GitHub 계정이 있다고 가정하겠습니다. 그렇지 않은 경우 하나의 계정을 만들고 이 자습서를 보고 기본 사항을 배우십시오.

구텐베르크의 포크 만들기

가장 먼저 알아야 할 것은 Gutenberg 소스 코드가 이 코드 저장소의 GitHub에서 호스팅된다는 것입니다. 프로젝트의 진화는 거기에서 이루어집니다.

여기에서 구텐베르크 코드를 WordPress 플러그인으로 사용할 수 있습니다. 플러그인의 새 버전마다 코드 기반의 안정적인 버전이 WordPress 코어의 다음 버전으로 전송됩니다. 그리고 그것이 갈 길입니다.

Gutenberg 저장소에 코드로 기여하려면 먼저 GitHub 계정에 포크를 생성해야 합니다. 이를 위해 이전 이미지에서 볼 수 있는 오른쪽 상단 모서리에 나타나는 포크 버튼을 클릭합니다.

이렇게 하면 WordPress의 공식 저장소와 동일한 기능 및 코드를 사용하여 GitHub 계정에 저장소가 생성됩니다. 그러나 제어하는 ​​계정에 있으므로 코드를 수정하고 원하는 작업을 수행할 수 있습니다. 기본적으로 사본이 있습니다.

리포지토리 복제

이제 원본에 연결된 고유한 구텐베르크 저장소가 있습니다. 이제 컴퓨터에 다운로드하여 작업할 시간입니다. 이렇게 하려면 터미널을 열고 다음 명령을 실행합니다.

 git clone https://github.com/your-user/gutenberg.git

your-user 를 GitHub에서 사용 중인 사용자 이름으로 바꾸는 것을 잊지 마십시오. 그러면 컴퓨터에 gutenberg 폴더가 생성되어 GitHub 리포지토리의 모든 콘텐츠를 로컬로 다운로드합니다.

새 분기 만들기

새 폴더에 액세스하면 리포지토리의 마스터 브랜치(또는 메인 브랜치)에 나타나는 모든 것이 포함되어 있음을 알 수 있습니다. 이 분기를 수정하여 건드리면 안 되므로 구텐베르크 코드를 수정하기 전에 새 분기를 만드는 방법을 알아보겠습니다.

Git의 브랜치가 무엇인지 모르신다면 이 글을 읽어보시길 권합니다. 어쨌든, 우리가 할 일에 대해 Git의 분기는 특정 순서를 유지하기 위해 저장소 코드에서 수정한 내용을 분리하는 방법이라는 것을 알아야 합니다.

새 기능을 추가하려면 내가 할 일을 식별하는 이름의 새 분기를 만든 다음 거기에서 기능을 개발하겠습니다. 완료되고 수정된 모든 코드가 안정되면 해당 분기를 주 분기( master , 기억)와 병합할 수 있습니다.

새 브랜치를 생성하여 저장소에 업로드하는 Git 명령은 다음과 같습니다.

 git checkout -b fix/clone-block git push -u origin fix/clone-block

이것은 fix/clone-block 분기를 생성합니다. 수행하려는 작업에 따라 이름을 변경하는 것을 잊지 마십시오. Gutenberg의 기고자 가이드에 따르면 [type]/[change] 와 같이 접두사와 설명이 있는 브랜치 이름을 사용해야 합니다.

좋은 접두사는 일반적으로 다음과 같습니다.

• 새로운 기능을 add/ 추가
• 테스트 목적을 위한 try/ 실험 기능
• 기존 기능 update/ 업데이트
• fix/ 수정

예를 들어, fix/clone-block 은 블록을 복제할 때 수정을 제안할 것임을 나타냅니다.

코드에 변경 사항 적용

이제 가장 좋아하는 편집기로 파일을 열고 프로그래밍을 시작할 수 있는 모든 준비가 완료되었습니다. 하지만 그렇게 하기 전에 몇 가지를 알아야 합니다...

첫째, 모든 구텐베르크 코드는 당신이 또한 존중해야 하는 특정 스타일 가이드를 따릅니다. 코드 작성 방법에 대한 구체적인 내용은 여기에 설명되어 있습니다.

CSS, JavaScript 및 PHP에 대한 규칙이 있습니다. 이 규칙을 준수하지 않으면 공식 리포지토리에서 코드를 수락할 때 확실히 문제가 발생합니다.

참고로, 제 경우에는 wp.blocks.cloneBlock()을 사용하여 블록을 복제할 때 블록의 속성에 wp.blocks.cloneBlock() lodash.cloneDeep() 함수를 사용하여 복사가 심층적으로 수행되도록 수정했습니다. 우리가 복제한 블록의 얕은 사본 . 여기에서 내가 변경한 사항을 볼 수 있습니다.

새 분기에 변경 사항 업로드

완료되면 변경 사항을 커밋하고 저장소에 업로드해야 합니다. 새 파일을 만든 경우 먼저 다음 명령을 사용하여 버전 제어에 추가해야 합니다.

 git add your-file

이제 다음 명령으로 변경 사항을 커밋할 시간입니다.

 git commit -am "Use cloneDeep when cloning a block"

마지막으로 변경 사항을 저장소에 업로드하려면 다음 명령을 사용해야 합니다.

 git push

그 후 GitHub의 리포지토리로 이동하면 생성한 분기에 변경 사항이 업로드된 것을 볼 수 있습니다. 완벽한! 거의 다 왔어…

구텐베르크 리포지토리에서 풀 리퀘스트 생성

이미 변경 사항을 적용하고 저장소에 업로드했습니다. 이제 우리가 해야 할 일은 구텐베르그 프로젝트 관리를 담당하는 개발자에게 제안된 변경 사항의 존재에 대해 경고하는 것입니다.

우리의 변경 사항이 논의되고 구텐베르크 코드 베이스의 일부(또는 포함되지 않음)로 승인되려면 pull 요청 을 수행해야 합니다. 풀 요청은 저장소의 포크 소유자가 원래 저장소의 소유자에게 요청하여 후자가 포크에 있는 커밋을 통합하도록 합니다.

이를 위해 Gutenberg 포크 리포지토리로 이동하여 New pull request 버튼을 클릭합니다. 이렇게 하면 변경 사항과 함께 방금 업로드한 분기를 선택하는 보기가 표시됩니다. 이렇게 하면 원래 구텐베르크 저장소의 주요 분기와 비교됩니다.

오른쪽의 드롭다운 선택기에서 분기를 선택하면 이전 이미지에서 볼 수 있듯이 GitHub는 원래 구텐베르크 저장소와 관련하여 이 분기에서 변경된 사항에 대한 요약을 보여줍니다.

그런 다음 Create pull request 버튼을 클릭합니다. 이렇게 하면 저장소에서 이러한 변경을 수행하려는 이유에 대한 설명 정보로 텍스트를 채워야 하는 또 다른 보기로 이동합니다.

다음 이미지에서 볼 수 있듯이 이미 작성해야 하는 콘텐츠 템플릿이 있습니다.

기본적으로 변경 내용과 이유를 설명하는 변경 사항에 대한 설명을 포함해야 합니다. 또한 코드를 테스트했는지 여부와 수행 방법도 표시해야 합니다. 필요한 경우 스크린샷을 추가할 수도 있습니다.

채우는 방법을 잘 모르더라도 걱정하지 마십시오. 구텐베르크 저장소를 관리하는 사람들이 당신을 도울 것입니다.

완료되면 풀 리퀘스트 생성 버튼을 클릭하여 풀 리퀘스트가 최종적으로 공개되도록 합니다. 이제 다른 검토자가 살펴보고 최종적으로 코드를 승인하고 공식 리포지토리에 병합할 때까지 기다려야 합니다.

이 수정은 여러 요인에 따라 다소 시간이 걸릴 수 있습니다. 제 경우에는 마침내 풀 리퀘스트가 닫혀서 성공하지 못했습니다. 하지만 그 과정에서 많은 것을 배웠습니다. 그리고 리뷰어들의 코멘트는 항상 긍정적이고 건설적이었습니다. 여기에서 볼 수 있습니다. 하지만 계속 일했고 마침내 풀 리퀘스트가 승인되었습니다!

구텐베르크에서 변경해야 하는 것이 있다고 생각하고 코드에서 변경하기를 기대한다면 이제 프로세스가 어떤 것인지 알 것입니다. 게다가 내가 여기에서 설명한 모든 것은 구텐베르크에게만 유효한 것은 아닙니다. 대부분의 오픈 소스 소프트웨어 프로젝트는 동일하게(또는 매우 유사하게) 작동합니다.

주저하지 말고 기여하십시오. 물론 그 과정에서 많은 것을 배우게 될 것입니다.

Unsplash 에서 Mike Erskine 의 주요 이미지 .