초보자 개발자를위한 구텐베르크 튜토리얼 : 첫 블록 플러그인 만들기

초보자를위한 구텐베르크 튜토리얼


2020 년에 WordPress 용으로 무언가를 개발할 생각이라면 Gutenberg를 무시하는 것은 단순히 옵션이 아닙니다. 플러그인과 테마는 모두 구텐베르크와 잘 협력하고 사용자가 워드 프레스 대시 보드에서 볼 수있는 모든 것에 일관된 사용자 경험을 제공해야합니다. 특히 구텐베르크는 현재 워드 프레스의 핵심 부분이기 때문에 단순히 블록 편집기라고합니다..

그러나 구텐베르크를 시작하는 것은 간단하지 않습니다. 몇 년 전만해도 메모장 만 사용하여 양질의 WordPress 플러그인을 작성할 수있는 반면, 프로세스는 훨씬 더 어려워졌습니다..

Gutenberg는 WordPress REST API, JavaScript 및 React와 같은 기술을 사용합니다. 따라서 Gutenberg와 함께 작동하려면 플러그인 및 테마에 대한 새로운 요구 사항이 필요했습니다..

좋은 소식은 우리가 오늘 모든 것에 대해 이야기 할 것이라는 것입니다! 이 글은 처음 Gutenberg 용 플러그인을 만들고자하는 초보자를위한 Gutenberg 튜토리얼 역할을합니다..

우리는 주로 구텐베르크 플러그인 개발의 다양한 측면에 초점을 맞 춥니 다. 개발 환경 설정, 기본 플러그인 생성 및 블록 작업의 뉘앙스.

1. Gutenberg 개발 환경 설정

Gutenberg 개발을 시작하려면 JavaScript 및 React에 대한 기본 지식이 필요합니다. 다음은 WordPress 개발자를위한 JavaScript에 대한 자습서입니다. 또한 구텐베르크의 추가 패키지는 npm NodeJS 패키지 관리자를 사용해야합니다..

설치 프로그램을 사용하여 Windows 또는 MacOS에 최신 안정 버전의 NodeJS를 설치할 수 있습니다 공식 사이트에서. Linux 서버가있는 경우 소스 코드를 컴파일하거나 해당 패키지 관리자 (예 : apt 및 yum)를 사용할 수 있습니다. 예를 들어, Ubuntu를 사용하는 경우 터미널에서 다음 명령을 실행하십시오..

sudo apt 업데이트
sudo apt 설치 nodejs npm

설치가 완료되면 다음 명령을 실행하여 NodeJS 버전을 확인할 수 있습니다.

nodejs-버전

이 상자를 체크 한 후 현재 Gutenberg 플러그인 (독립형 플러그인) 또는 개발 버전으로 테스트 WordPress 웹 사이트를 설정하는 것이 좋습니다. GitHub에서.

⚠️ 참고; Gutenberg는 현재 WordPress에 내장되어 있지만 그 버전은 최신 버전이 아닙니다. Gutenberg에 대한 개발은 여전히 ​​상당히 개별적으로 이루어지며 새로운 모든 것은 Gutenberg 독립형 플러그인에 먼저 포함됩니다. 코어의 실제 구텐베르크 버전은 WordPress 5.0에 포함 된 이후 주요 업데이트를 아직받지 못했습니다. 항상 최신 버전의 구텐베르크에서 작업하고 싶기 때문에 미래의 작업을 보장하고 나중에 WordPress 코어에 제공되는 모든 내용과 조화를 이루도록 만들 수 있기 때문입니다..

또 다른 참고로, 핵심 구텐베르크 플러그인에 기여하려는 경우 저장소에 기여 가이드 라인 로컬 환경을 설정하고 검토 할 변경 사항을 설정하는 방법.

�� 마지막으로 기존 플러그인을 구텐베르크에 적용하려는 경우이를 달성하는 방법에 대한 자세한 자습서는 다음과 같습니다 (1 부 및 2 부)..

이미 Gutenberg와 협력 할 준비가 된 템플릿 플러그인 디렉토리를 시작하려면 다음을 사용하는 것이 좋습니다. 구텐베르크 상용구 플러그인. 이러한 솔루션은 플러그인의 컨텐츠에 집중할 수 있도록 기본 파일 구조를 도와줍니다. 상용구를 사용하려면 플러그인을 다운로드하여 설치하십시오 여기에서 (zip). 상용구 플러그인을 설치하고 활성화하면 샘플 블록이 활성화되며이 튜토리얼에서 살펴볼 것입니다. 상용구의 플러그인 위치에있는 해당 디렉토리에서 각 블록의 코드를 찾을 수 있습니다..

2. 초기 구성

Gutenberg는 표준 TinyMCE 편집기 캔버스를 대체하는 블록 개념을 소개합니다. 경우에 따라 블록은 다양한 방법으로 플러그인이 WordPress 컨텐츠에 추가하는 데 사용되는 단축 코드 및 기타 추가 컨텐츠 요소를 대체 할 수도 있습니다..

구텐베르크 (Gutenberg) 구축에 관심이있는 경우 가장 일반적인 방법은 새 블록을 만들어 사용자가 사용할 수있는 플러그인을 만드는 것입니다. 이것이 바로 구텐베르크 튜토리얼에서 우리가 할 일입니다..

다음 섹션에서는 처음부터 끝까지 프로세스를 설명합니다..

빌드 할 특정 플러그인은 사용자 정의 할 수있는 특정 배경의 메시지를 인쇄합니다. 예제 빌드 일 뿐이지 만 여기에 제시된 원칙을 취하여 더 복잡한 플러그인에 적용 할 수 있습니다..

이러한 플러그인을 만드는 기본 사항은 익숙해야합니다. WordPress의 plugins 디렉토리에 새 디렉토리를 작성하여 시작하십시오. 여기에는 4 개의 파일이 있습니다.

  • index.php –이 파일은 새로운 Gutenberg 블록에 대한 메타 데이터를 포함합니다.
  • block.js –이 JavaScript 파일은 사용자 정의 Gutenberg 블록을 등록합니다.
  • editor.css –이 파일에는 편집기 스타일이 포함되어 있습니다.
  • style.css –이 파일에는 블록의 프런트 엔드에 대한 스타일이 포함되어 있습니다.

목록의 처음 두 파일은 블록을 등록하고 다음 두 파일은 블록 요소의 시각적 스타일을 정의합니다..

3. 블록 등록

구텐베르크에 블록을 등록하는이 단계에서 우리는 크게 두 가지를 다룰 것입니다.

  • WordPress의 PHP 엔진에 플러그인 메타 데이터 등록,
  • Gutenberg가 실행하는 React 프레임 워크에 블록을 등록.

index.php 파일은 블록과 에디터의 대기열에 포함 된 애셋을 포함합니다.

  • 먼저 add_action을 통해 커스텀 함수를 등록하십시오.
  • 그런 다음 wp_enqueue_style 및 wp_enqueue_script 함수를 사용하여 블록 및 편집기의 JavaScript 및 CSS 파일 경로를 나열하는 함수를 정의하십시오..

아래 PHP 코드를 통해이를 요약 해 보겠습니다.

add_action ( ‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

함수 gb_block_01_basic_editor_assets () {
// 스크립트.
wp_enqueue_script (
‘gb-block-01-basic’,
plugins_url ( ‘block.js’, __FILE__),
배열 ( ‘wp-blocks’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// 스타일.
wp_enqueue_style (
‘gb-block-01-basic-editor’,
plugins_url ( ‘editor.css’, __FILE__),
배열 ( ‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__. ‘editor.css’))
);
}

기본 편집기의 리소스를 정의합니다. 블록의 경우 CSS 파일 만 필요하며 wp_enqueue_style 함수를 통해 정의됩니다..

block.js 파일은 Gutenberg 편집기에서 블록의 속성을 설명합니다. 다음과 같은 속성과 속성을 정의합니다.

  • title – 블록의 제목
  • icon – 블록에 표시 할 아이콘. 당신은 어떤 아이콘을 선택할 수 있습니다 이 대시 아이콘 모음
  • category – 블록이 속하는 그룹. 블록 그룹의 예는 다음과 같습니다. "흔한," "서식," "끼워 넣다."
  • edit – DOM 요소를 반환하는 JavaScript 함수입니다. wp.element.createElement 함수를 사용하여 사용자 정의 텍스트가 작성된 사용자 정의 단락 DOM 요소 p를 작성합니다. 사용자가 편집기에서 블록을 클릭하면 Gutenberg가이 특성을 호출합니다..

( 함수() {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType ( ‘gb / basic-01’, {
제목 : __ ( ‘GB Basic’, ‘GB’),
아이콘 : ‘shield-alt’,
카테고리 : ‘공통’,

편집 : function (props) {
wp.element.createElement (
‘피’,
{className : props.className},
‘안녕하세요 세계! -에디터에서 (01 Basic Block). ‘
);
},

});
}) ();

마찬가지로 프런트 엔드에서 블록을 선택할 때 호출되는 저장 속성을 만들 수 있습니다.

위의 코드에서 p 요소의 className을 props.className으로 정의했습니다. 그러면 props.className이 시작되고 그 뒤에 wp-block으로 시작하는 클래스 이름이 생성됩니다. 이 구텐베르크 튜토리얼의 다음 섹션에서이 클래스의 스타일을 정의합니다..

4. 블록 사용자 정의

이전 섹션에서 설명한 것처럼이 튜토리얼의 다음 단계는 블록 요소의 속성을 정의하는 것입니다. 배경색, 텍스트 색 및 테두리를 정의하겠습니다.

.wp-block-gb-basic-01 {
색상 : # 000;
배경 : 미스티 로즈;
경계 : 0.2rem 단색 빨강;
}

CSS 파일 대신 SCSS 파일을 추가하고 Node로 컴파일 할 수도 있습니다. 또한 여기에 구텐베르크 요소 스타일링에 대한 튜토리얼 CSS 트릭에서.

첫 구텐베르크 튜토리얼 결과

마지막으로 생성 한 블록을 테스트 할 준비가되었습니다. Gutenberg 플러그인이 활성화 된 경우 + 아이콘을 클릭하고 새로운 블록이 나타나는지 확인하십시오.

새로운 구텐베르크 블록

다음으로 블록을 클릭하면 CSS 파일의 배경색과 테두리가있는 위의 메시지가 표시됩니다.

행동 차단

결론

우리는 첫 구텐베르크 튜토리얼의 끝 부분에 왔습니다. 도움이 되었기를 바랍니다. 물론 여기에 구축 한 것은 매우 복잡하지 않지만 Gutenberg와 함께 작업 할 때 기본 구조와 다음 플러그인을 계획하는 방법에 대한 아이디어를 제공해야합니다..

먼저, 구텐베르크 개발 환경을 설정하는 단계에 대해 논의했습니다. 다음으로 추가 개발에 도움이되는 상용구 플러그인을 소개했습니다. 그런 다음 토론의 초점은 새로운 블록을 등록하고 스타일을 지정하는 다양한 단계로 이동했습니다..

이 구텐베르크 튜토리얼이 처음 구텐베르크 플러그인을 만드는 데 도움이 되었기를 바랍니다.!

궁금한 점이 있으면 아래 의견에서 해고하십시오..

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map