WordPress 블록 편집기 플러그인 상용구

WordPress의 개발은 비약적으로 현대화되고 있습니다. 며칠 전에 저는 컨텐츠 관리 시스템 버전 5에 이미 존재하는 현재 기술에 대해 설명했습니다. 이제 새로운 블록 편집기의 가능성을 고려하여 WordPress용 플러그인을 개발하는 방법을 알려줄 차례입니다.

오늘은 JavaScript 기반의 WordPress 개발을 위해 Nelio에서 사용하는 상용구 에 대해 설명하겠습니다 .

GitHub에 WordPress용 상용구 플러그인 의 모든 코드베이스가 있으므로 현대화하지 않고 개발자로서의 지평을 확장하지 않을 이유가 없습니다.

WordPress 블록 편집기 상용구

새로운 WordPress 플러그인 생성의 기반이 되는 프로젝트를 생성하는 주된 이유는 개발자가 모든 프로젝트를 통합하고 표준화할 수 있어야 한다는 우리 자신의 필요 때문입니다.

WordPress Plugin Boilerplate에서 영감을 받아 컴파일러, 트랜스파일러, 번들러 및 궁극적으로 JavaScript 프로젝트용 공통 개발 도구를 사용하여 최신 스택으로 블록 편집기를 확장하는 플러그인에 중점을 둔 유사한 작업을 수행하는 것이 우리의 아이디어입니다.

설치 및 개발 프로세스

기반으로 만든 플러그인 상용구는 GitHub에서 직접 다운로드할 수 있습니다. 그런 다음 WordPress 설치의 플러그인 폴더( /wp-content/plugins/ )로 이동할 수 있습니다.

 git clone https://github.com/avillegasn/wp-beb.git

그러면 모든 콘텐츠가 포함된 플러그인 폴더가 다운로드됩니다. 그런 다음 원하는 이름을 사용하려면 이 폴더와 해당 콘텐츠의 이름을 모두 바꿔야 합니다. 예를 들어 플러그인이 my-plugin 이라고 하는 경우:

• wp-beb 파일의 이름을 my-plugin 으로 바꿉니다.
• wp-beb 를 my-plugin 으로 교체
• wp_beb 를 my_plugin 으로 교체
• WP_BEB 를 MY_PLUGIN 으로 교체

이 작업을 완료하고 플러그인을 컴파일하고 최종 코드를 생성하려면 다음을 실행하세요.

 npm install && npm run build

다음 도구를 설치해야 합니다.

• Node.js v8.9.1 이상.
• npm v5.5.1 이상.
• 작곡가 v1.8.1 이상.

npm install 명령은 node_modules 및 vendor 폴더에서 각각 Node.js 및 PHP의 종속성을 다운로드합니다. 프로세스가 완료되면 컴파일된 파일이 있는 dist 폴더가 생깁니다. 이제 WordPress에서 플러그인을 활성화하는 것이 안전합니다.

이전 명령 외에도 상용구는 다음과 같은 추가 명령을 제공합니다.

• npm run dev 축소 없이 파일을 빌드합니다.
• npm run watch 파일을 빌드하고 변경 사항을 감시합니다.
• npm run build 하고 JS 및 CSS를 축소합니다.
• npm run lint-php PHP 파일에서 PHP_CodeSniffer를 실행하여 오류를 감지합니다.
• npm run lint-php:fix phpcbf 를 실행하여 PHP 오류를 수정합니다.
• npm run lint-css SCSS 파일에서 stylelint 를 실행하여 오류를 감지합니다.
• npm run lint-css:fix SCSS 파일의 오류 수정을 시도합니다.
• npm run lint-js JS 파일에서 eslint 를 실행하여 오류를 감지합니다.
• npm run lint-js:fix JS 파일의 오류 수정을 시도합니다.
• npm run lint PHP, SCSS 및 JS 파일에서 linting 프로세스를 실행합니다.
• npm run update:packages Node.js에서 패키지 종속성을 업데이트합니다.

일반적으로 변경 사항이 실시간으로 컴파일 및 번들링되도록 코드를 개발하는 동안 npm run watch 를 실행합니다. 그러나 안정적인 최종 버전을 생성하려면 npm run build 를 실행하십시오.

콘텐츠 및 폴더 구조

WordPress 블록 편집기 상용구에는 다음 파일과 폴더가 포함되어 있습니다.

• .babelrc . Babel 구성 파일.
• . .editorconfig . 다양한 편집기 및 IDE에서 동일한 프로젝트에서 작업하는 여러 개발자를 위해 일관된 코딩 스타일을 유지하는 데 도움이 되는 EditorConfig 파일입니다.
• .eslintignore . ESLint linting 프로세스에서 특정 파일을 제외하는 데 사용됩니다.
• .eslintrc . ESLint 구성 파일.
• .gitattributes . Git에서 경로 이름에 속성을 부여하는 텍스트 파일입니다.
• .gitignore . 저장소에서 특정 파일을 제외하는 데 사용됩니다.
  composer.json . 프로젝트의 PHP 종속성을 설명하고 다른 메타데이터도 포함할 수 있습니다.
• composer.lock .자물쇠 . 동일한 프로젝트에서 작업하는 여러 개발자를 동일한 버전의 PHP 종속성으로 잠그는 데 사용됩니다.
  index.php . 그것이 무엇이든간에 서버의 내부 파일 구조를 숨기려면.
• LICENSE.txt . GNU GPL v2 라이센스 사본.
• package-lock.json . 동일한 프로젝트에서 작업하는 여러 개발자를 동일한 버전의 NPM 종속성으로 잠그는 데 사용됩니다.
• package.json . 프로젝트의 매니페스트 파일입니다. 필요한 패키지의 이름과 프로젝트를 관리하는 데 사용할 수 있는 CLI 명령을 찾을 수 있는 구성의 중앙 리포지토리입니다.
• phpcs.ruleset.xml . PHP_CodeSniffer 구성 파일.
• postcss.config.js . PostCSS 구성 파일.
• README.md . 현재 읽고 있는 파일입니다.
• readme.txt . WordPress 플러그인 추가 정보 파일용 템플릿.
• webpack.config.js . 웹팩용 설정 파일.
• wp-beb.php . 워드프레스 플러그인의 메인 파일.
• CSS, JS 및 이미지 리소스가 포함된 assets 디렉토리입니다.
• i18n에 대한 번역 파일이 포함된 languages 디렉토리.
• WordPress 블록 편집기를 확장하기 위한 블록 정의가 포함된 packages 디렉토리.

이 모든 것 외에도 프로젝트를 컴파일하면 컴파일된 파일이 있는 dist 폴더, PHP에 대한 종속성 및 실행 파일이 있는 vendor 디렉터리, NPM 및 JavaScript에 대한 종속성과 실행 파일이 있는 node_modules 디렉터리가 표시됩니다.

WordPress 블록 편집기에 새 블록 추가

이 WordPress 블록 편집기 상용구에 대한 흥미로운 점은 기본 상태입니다. 플러그인을 다운로드하고 컴파일한 후 활성화하면 편집기에 새 블록을 추가하는 완전한 기능의 플러그인임을 알게 될 것입니다.

상용구에 의해 추가된 데모 블록은 이전 스크린샷에서 볼 수 있듯이 하트 대시 아이콘 이 앞에 오는 단순한 텍스트 블록입니다. 또한 블록은 블록 내부의 텍스트 색상을 수정하는 두 가지 추가 스타일을 정의합니다. 이것들은 구텐베르크에서 블록과 스타일을 만드는 방법을 이해하는 데 도움이 될 것입니다.

편집기에서 이 블록을 추가하는 JavaScript 코드는 packages/blocks/demo 에 있습니다(여기 참조). 이 블록을 삭제하려면 demo 디렉토리를 삭제하고 packages/blocks/index.js 파일에서 가져오기 및 사용법을 삭제하면 됩니다.

또한 데모 블록의 코드는 서로 다른 파일로 분할되며, 각각은 registerBlockType 에서 사용하는 인수의 서로 다른 부분을 포함합니다.

반면에 추가 블록을 추가하려면 packages/blocks/demo 를 복제하고 원하는 블록 이름을 지정합니다. 내부의 JavaScript 파일을 원하는 대로 수정하고 packages/blocks/index.js 에서 새 블록의 기본 파일을 가져오는 것을 기억하십시오.

플러그인으로 블록 편집기 확장

앞서 언급한 데모 블록 외에도 블록 편집기용 상용구 에는 구텐베르크 플러그인 정의가 포함되어 있습니다. 이 "플러그인"은 일반 WordPress 플러그인이 아니라 블록 편집기 자체를 확장하는 것입니다. 원하는 경우 "WordPress 플러그인 내부의 플러그인".

오른쪽에 있는 위의 스크린샷에서 플러그인을 볼 수 있습니다. 이 플러그인은 오른쪽 상단의 게시 버튼 옆에 있는 아이콘을 클릭하면 활성화됩니다.

플러그인에는 색상 선택기(Gutenberg에 포함된 React 구성 요소를 쉽게 재사용하는 방법을 볼 수 있음)와 프로그래밍 방식으로 편집기에 데모 블록을 삽입하는 버튼(또 다른 흥미로운 시나리오)이 포함되어 있습니다.

assets/src/js/admin 에 플러그인 코드가 있습니다(여기에서 볼 수 있음). 특히, plugin.js 파일은 registerPlugin 호출을 포함하고, plugin-component.js 파일은 앞에서 언급한 색상 선택기와 버튼을 렌더링하는 컴포넌트를 정의합니다.

다시 말하지만, 이 플러그인을 원하는 대로 수정할 수 있습니다. 또는 원하는 경우 삭제할 수 있습니다. 그렇게 하려면 기본 파일 wp-beb.php (여기 참조)와 해당 CSS 파일(여기)에 있는 plugin.js JavaScript 파일을 제거하는 것을 잊지 마십시오.

한 번 해보자!

WordPress 블록 편집기 상용구를 사용하여 JS에 대한 두려움을 없애고 간단한 방법으로 WordPress 블록 편집기용 프로그래밍 확장을 시작하는 데 도움이 되기를 바랍니다. 그것을 시도하고 당신의 경험에 대해 알려주십시오. 우리는 귀하의 의견을 기꺼이 읽을 것입니다!

Unsplash 의 Icons8 팀 이 추천한 이미지 .