@wordpress/scripts를 사용하여 구텐베르크 편집기에 버튼을 추가하는 방법

거의 1년 반 전에 Antonio는 플러그인을 새로운 WordPress 블록 편집기에 적용할 때 직면한 어려움 중 하나를 설명하는 이 블로그 게시물을 작성했습니다. 그의 튜토리얼 결과는 다음과 같았습니다.

다행이든 불행이든 구텐베르크는 올해 반 동안 많은 변화를 겪었습니다. 개발 스택은 확장 및 개선되었으며 플러그인 및 테마 개발자는 새로운 기술을 수용하고 적용해야 했습니다. 그리고 우리의 경험에 대해 쓰고 우리가 배운 것을 공유하는 사람들은 이제 최신 상태를 유지할 수 있도록 자습서를 업데이트해야 하는 "강제"입니다. 하지만 우리는 그것에 대해 기쁘게 생각합니다!

몇 주 전에 독자 중 한 명인 Ivan이 Antonio의 튜토리얼에 도움을 요청하는 댓글을 남겼습니다. 분명히 그는 Antonio의 플러그인을 구현할 수 없었습니다. 그리고 최근에 상황이 많이 바뀌었기 때문에 솔직히 이것은 놀랍지 않습니다. 따라서 Ivan과 우리를 읽고 WordPress에 대해 계속 배우고 싶은 모든 사람들을 돕기 위해 WordPress에서 제공하는 모든 새로운 도구를 활용하여 Gutenberg 블록 편집기에 버튼을 추가하는 방법에 대한 자습서를 다시 작성해 보겠습니다!

플러그인 만들기

가장 먼저 해야 할 일은 WordPress 플러그인을 만드는 것입니다. 이것은 매우 간단합니다. 기본적으로 우리가 해야 할 일은 플러그인에 부여할 이름(예: gutenberg-button )으로 wp-content/plugins 에 폴더를 만들고 그 안에 동일한 이름과 .php 확장자. 그런 다음 플러그인 파일에 다음 코드를 입력합니다.

이제 이전 스니펫이 하는 일을 자세히 살펴보겠습니다.

• 먼저 <?php 태그를 엽니다. 여기에 놀라움이 없습니다.
• 다음으로 이 기본 파일에 여러 줄 주석을 추가합니다. 주석에는 "키/값" 쌍이 있는 여러 줄이 포함됩니다. 예를 들어 플러그인 이름( Plugin Name ), 버전( Version ) 또는 작성자 이름( Author )을 지정하는 방법을 봅니다. 이 모든 정보는 WordPress의 플러그인 섹션에서 볼 수 있습니다.
• 마지막으로 상용구 코드를 추가합니다.
  • 우리는 namespace 를 지정합니다(여기서 네임스페이스에 대해 이야기했습니다).
  • 파일이 실행되면 WordPress의 일부로 실행되고
  • 플러그인에 대한 몇 가지 상수를 정의합니다(나중에 도움이 될 것입니다).

이 모든 작업을 완료하고 WordPress의 플러그인 화면으로 이동하면 Gutenberg 버튼 이 있는 것을 볼 수 있습니다.

우리는 그것을 활성화하고 ... 짜잔! 물론 아무 것도 하지 않지만 이미 있습니다.

자바스크립트 플러그인 개발

요즘 WordPress 개발자는 JavaScript에 능숙해야 합니다. 그것이 구텐베르그가 핵심에 있는 결과 중 하나라고 생각합니다. 그리고 이 튜토리얼도 예외는 아닙니다.

환경 준비

Gutenberg 인터페이스에 새 버튼을 추가하려면 이 기능을 JavaScript로 코딩해야 합니다. 이제 플러그인에서 JavaScript 개발 환경을 준비합시다. 이렇게 하려면 명령줄에서 다음 명령을 실행하기만 하면 됩니다(이 작업을 수행할 때 wp-content/plugins/gutenberg-button 에 있는지 확인).

 npm init

지침을 따르십시오.

 This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (gutenberg-button) version: (1.0.0) description: Adding a formatting button in Gutenberg. entry point: (index.js) ...

이 프로세스의 결과는 package.json 파일입니다. 잠시 후 보게 되겠지만 이 파일은 앞으로 매우 유용할 것입니다.

이 게시물의 제목에서 이미 밝혔듯이 @wordpress/scripts 를 사용하여 플러그인을 만들 것입니다. 따라서 다음 명령을 실행하여 종속성으로 추가해 보겠습니다.

 npm install --save-dev @wordpress/scripts

이 명령은 플러그인 내부( node_modules 아래)의 많은 종속성을 다운로드하고 @wordpress/scripts 가 이제 개발 종속성임을 분명히 하기 위해 package.json 을 수정합니다.

이 패키지의 문서를 살펴보면 빌드, 구문 유효성 검사, 코드 형식 지정 등을 위한 많은 스크립트가 포함되어 있음을 알 수 있습니다.

 { "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "format:js": "wp-scripts format-js", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:md:docs": "wp-scripts lint-md-docs", "lint:md:js": "wp-scripts lint-md-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "packages-update": "wp-scripts packages-update", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

"scripts" 섹션에 모든 권장 명령이 포함되도록 package.json 파일을 편집해 보겠습니다.

모든 것이 작동하는지 확인하는 방법…

프로젝트의 루트에 src 폴더를 만들고 그 안에 index.js 파일을 추가합시다. 이것은 플러그인의 기본 JavaScript 파일이 될 것이며 모든 코드를 포함할 것입니다(주 파일이 src/index.js 인 한 원하는 대로 코드를 구성할 수 있습니다).

다음 명령문 index.js 를 추가하여 예상대로 작동하는지 시험해 봅시다.

 console.log( 'Hi!' );

npm run build 를 사용하여 프로젝트를 빌드합니다. 이렇게 하면 코드가 브라우저에서 실행할 수 있는 것으로 변환되고(지금은 실제로 필요하지 않지만 몇 분 안에 필요할 것입니다) build 폴더 안에 새 스크립트를 생성합니다.

이제 우리가 해야 할 일은 이 스크립트가 로드될 수 있도록 존재한다는 것을 WordPress에 알리는 것입니다. 그렇게 하려면 플러그인의 기본 파일( gutenberg-button.php )을 열고 끝에 다음 줄을 추가하기만 하면 됩니다.

 function enqueue_script() { wp_enqueue_script( 'gutenberg-button', GUTENBERG_BUTTON_URL . '/build/index.js', [], GUTENBERG_BUTTON_VERSION ); }//end enqueue_script() add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script' );

주의를 기울이면 단순히 WordPress에 새 스크립트 /build/index.js 를 블록 편집기 리소스로 대기열에 넣으라고 지시한다는 것을 알 수 있습니다. 이렇게 하면 사용자가 블록 편집기에 액세스할 때 스크립트가 편집기에 포함될 자산의 일부가 됩니다.

그럼 이것을 확인해보자. WordPress 대시보드로 이동하여 게시물을 편집하고 브라우저의 JavaScript 콘솔을 확인합니다. 일이 예상대로 진행되면 "Hi!"가 표시되어야 합니다. 콘솔에 작성:

튜토리얼을 복제하여 Gutenberg에 버튼 추가

자, 이제 JavaScript 코드를 작성할 수 있고 npm run build 할 수 있다는 것을 보았으므로 Antonio의 자습서를 복제할 시간입니다. 친애하는 독자 여러분, 이것은 매우 간단합니다.

src/index.js 파일을 열고 이전 console.log 문을 다음으로 바꿉니다.

보시다시피 이것은 Antonio가 몇 달 전에 작성한 코드와 거의 같습니다. 주요 차이점은 구텐베르크의 기능과 구성 요소에 액세스하기 위해 전역 변수 wp 를 더 이상 사용하지 않는다는 사실입니다. 대신 이제 import 문에 의존합니다. 그러나 그 외에는 거의 동일합니다.

코드를 작성했으면 npm run build it만 하면 됩니다! 이제 구텐베르크에 버튼이 있습니다.

일부 텍스트를 선택하고 버튼을 클릭하여 작동하는지 확인합시다.

그러면 콘솔에 텍스트가 다시 표시되는 것을 볼 수 있습니다!

종속성에 대한 마지막 참고 사항…

build 폴더 안을 살펴보면 @wordpress/scripts 가 index.js 파일을 생성했을 뿐만 아니라 index.asset.php 파일도 가지고 있음을 알 수 있습니다. 이 파일은 두 가지 속성이 있는 작은 개체를 정의합니다.

• 플러그인에 필요한 종속성 목록(즉, WordPress 스크립트)
• 빌드 버전

스크립트가 제대로 실행되도록 하려면 WordPress에서 스크립트를 대기열에 넣을 때 이 두 속성을 모두 사용할 수 있고 사용해야 합니다. 그렇게 하려면 간단히 gutenberg-button.php 로 돌아가서 아래와 같이 변경하십시오.

 function enqueue_script() { $asset = include GUTENBERG_BUTTON_PATH . '/build/index.asset.php'; wp_enqueue_script( 'gutenberg-button', GUTENBERG_BUTTON_URL . '/build/index.js', $asset['dependencies'], $asset['version'] ); }//end enqueue_script() add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script' );

include 문을 사용하여 index.asset.php 에 있는 객체를 로드하고 기존 종속성 목록( [] )을 실제 종속성으로 바꾸고 빌드 번호를 플러그인 버전으로 사용하기만 하면 됩니다.

결론

정말 유용한 WordPress 플러그인을 만드는 것은 까다롭습니다. JavaScript의 작동 방식을 잘 이해하고 WordPress의 모든 리소스에 익숙해야 합니다. 하지만 @wordpress/scripts 패키지 덕분에 JavaScript 개발 환경을 준비하고 WordPress 내에서 실행할 수 있는 JavaScript 플러그인을 구축하는 것이 그 어느 때보다 쉬워졌습니다.

오늘 포스팅이 마음에 드셨으면 좋겠습니다. 그리고 항상 그렇듯이 막히거나 질문이 있는 경우 의견을 남겨주시면 도와드리겠습니다.

아, 그런데 여기 프로젝트에 대한 링크가 있습니다. 원하는 경우 다운로드하여 테스트할 수 있습니다. 프로젝트를 복제하고, npm install 하고, npm run build 한 번 시도해 보세요!

Unsplash에서 Ashim D'Silva의 추천 이미지.