Gutenberg에 플러그인을 적용하는 방법 : 1 부 (블록 API)

"플러그인이 있습니다," 너에게 말한다, "구텐베르크를 어떻게 만들 수 있습니까??"


이야기는 간단합니다. 구텐베르크 (Gutenberg)는 워드 프레스의 새로운 편집자 경험으로, 다음 주요 릴리스에서 핵심으로 통합 될 예정입니다. 이것에 맞지 않는 많은 플러그인 쓸모 없게 될 것이다. 따라서 너무 늦기 전에 구텐베르크에 플러그인을 적용해야합니다..

누가 영향을 받습니까?

거의 모든 플러그인 포스트 에디터와 관련이있는 것은 Gutenberg의 영향을받습니다. 예를 들어, 플러그인에서 TinyMCE에 버튼을 추가 한 다음 편집기에 단축 코드를 넣으면 나쁜 소식입니다. 그것의 끝이 될 것이다.
Gutenberg를위한 플러그인 적응 : Part 1 (Block API)

"구텐베르크에 플러그인을 적용해야합니까?"

구텐베르크를 위해 어떤 플러그인을 업데이트해야합니까? 다음과 호환되는 모든 플러그인 :

  • 맞춤 메타 박스
  • 단축
  • TinyMCE 버튼
  • 또는 편집기 기능

예를 들어 간단한 메타 박스를 추가하는 플러그인과 같은 일부 플러그인은 여전히 ​​구텐베르크에서 작동하지만 사용자에게는 그다지 익숙하지 않습니다..

단축 코드조차도 이전과 같이 작동하지만 편집기에서 일반 텍스트 노드 일 뿐이며 Gutenberg의 모든 단축 코드 플러그인은 블록 UI를 따르므로 사용자가 더 쉽게 사용할 수 있습니다.

예, 사용자는 구텐베르크 경험을 위해 만들어진 플러그인을 선호합니다. 그리고 남은 것은 경쟁자 플러그인으로 대체됩니다..

아이디어를 드리기 위해 사용자의 표준 이전 편집자 환경이 플러그인으로 보이는 모습의 예입니다. (ㅏ), 그리고 구텐베르크의 모습 (비) – 최적화 된 플러그인.

(비)Feedzy RSS 피드-플러그인 Gutenberg-ready

두려워 말라! 플러그인 구텐베르크 (Gutenberg-ready)를 만드는 데 도움을드립니다. 플러그인이 작동하는 방식에 따라 Gutenberg에 플러그인을 통합하는 방법은 여러 가지가 있습니다.이 기사에서 논의 할 것입니다..

Gutenberg는 React로 작성되었습니다. 그리고 구텐베르크 플러그인은 JavaScript로 코딩되어 있으며 PHP로만 코딩하는 개발자에게는 어려운 전환이 될 수 있습니다. Gutenberg 용 플러그인을 만들기 위해 React에 대한 지식이 필요하지는 않지만 JavaScript에 대한 기본 지식이 필요합니다. 이전에 React 및 JSX에서 작업 한 경우 비슷한 근거가됩니다..

충분하지 않은 동안 구텐베르크 공식 문서, Github 저장소에는 개발자에게 유용한 정보가 많이 있습니다. 구텐베르크 개발에 대해 깊이 배우고 싶다면 구텐베르크의 GitHub 리포지토리에서 진행되는 모든 작업에 눈을 뜨고 있어야합니다..

구텐베르크에 플러그인을 적용하는 방법

Gutenberg의 API는 Block API, Shortcode API 등과 같이 편집기를 확장 할 수있는 여러 가지 방법을 제공합니다. 사용할 API는 우리가 빌드하는 플러그인 유형에 따라 다릅니다..

플러그인이 간단한 단축 코드 플러그인 인 경우 Block API를 사용하여 편집기를위한 아름다운 블록을 만들 수 있습니다. 그러나 플러그인으로 블록이 충분하지 않은 복잡한 메타 박스를 사용하는 경우 사이드 바 API를 사용할 수 있습니다.

또한 NodeJS, NPM, webpack 및 ESNext와 같은 최신 JavaScript 개발 도구 스택을 사용합니다. 예제 파일이 제공되므로 개발 환경 설정에 대해 걱정할 필요가 없습니다..

이 글에서 우리는 Block API를 사용하여 플러그인 Gutenberg 호환 방법. 다른 방법 (사이드 바 API, 게시 패널, 상태 표시 줄)으로 들어가겠습니다. & 필요한 경우 두 번째 부분의 유사한 API).

언급 된 모든 예제는 이 GitHub 리포지토리.

구텐베르크 개발 환경

Gutenberg를 개발하려면 NPM, webpack, Babel 및 JSX와 같은 여러 도구를 설정해야합니다. 많은 시간과 노력이 필요하므로 환경을 준비했습니다..

Gutenberg Boilerplate는 최소한의 Gutenberg 개발 설정 및 예제가 포함 된 플러그인입니다. 하나의 블록과 사이드 바 예제가 포함되어 있습니다. 이를 사용하여 사용자 정의 블록으로 확장 할 수 있습니다.

구텐베르크 보일러 판

포크하거나 복제 할 수 있습니다 구텐베르크 보일러 판 저장소 너의 ~에게 / wp-content / plugins / 개발 환경으로 사용하십시오..

그런 다음 시작하려면 시스템에 NodeJS를 설치해야합니다. Gutenberg Boilerplate 폴더로 이동하여 npm install을 실행하십시오.

이제부터는 개발 과정에서 사용할 세 가지 명령을 알아야합니다.

  • npm install – 프로젝트를 복제 할 때 프로젝트 종속성 설치.
  • npm run dev – 개발 프로세스 중 코드를 컴파일합니다. 한 번만 실행하면 변경 사항을 계속 지켜 볼 것입니다..
  • npm run build – 개발 프로세스가 완료되면 최적화 된 빌드를위한 코드 컴파일.

블록 API

블록은 구텐베르크의 기본 요소이며 블록 기반 편집기입니다. Block API를 사용하면 Gutenberg에 대한 블록을 만들 수 있습니다. 기본 HTML, 짧은 코드를 렌더링 할 수있는 블록을 만들거나 최신 게시물과 같이 동적 블록을 표시 할 수도 있습니다..

기존 플러그인을 기반으로하는 프로세스

이 예에서는 Gutenberg 블록에 대한 Click to Tweet 단축 코드를 채택합니다. 이 Click to Tweet 단축 코드는 텍스트가 포함 된 트윗 상자와 해당 텍스트를 트윗하는 버튼을 렌더링합니다. 이처럼 :

트윗 레이아웃을 클릭하십시오

단축 코드는 다음과 같습니다.

[clicktotweet tweet ="표시 할 텍스트" 트윗 ="트위트 할 텍스트" 버튼 ="트위터" 테마 ="클릭 투 트윗"]

우리의 단축 코드에는 네 가지 매개 변수가 있습니다.

  • 트윗 : 사이트에 나타나는 텍스트.
  • 트윗 : 트위터로 이동하는 텍스트.
  • 버튼 : 트윗 버튼 텍스트.
  • 테마 : 상자 테마로 클릭 투 트위트 또는 클릭 투 트위트 대체.

Block API를 사용하여 Gutenberg 용 플러그인 적용

Gutenberg에는 HTML을 프런트 엔드로 렌더링하거나 Gutenberg 블록을 사용하여 단축 코드를 프런트 엔드로 렌더링하는 두 가지 방법이 있습니다. 이 기사에서는 후자를 할 것입니다..

모든 코드는 GitHub의 Hello Gutenberg 플러그인 저장소. 저장소를 복제하여 플러그인이 작동 중인지 확인하거나 코드를 수정할 수 있습니다..

구텐베르크의 큐잉 스크립트 / 스타일

먼저, enqueue_block_assets를 사용하여 스크립트와 스타일을 Gutenberg 편집기에 대기열에 추가해야합니다.

/ **
* Enqueue 프론트 엔드 및 편집기 JavaScript 및 CSS
* /
hello_gutenberg_scripts () 함수 {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// 번들 블록 JS 파일을 큐에 넣습니다
wp_enqueue_script (
‘hello-gutenberg-block-js’,
plugins_url ($ blockPath, __FILE__),
[ ‘wp-i18n’, ‘wp-blocks’, ‘wp-editor’, ‘wp-components’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// 큐 엔드 프론트 엔드 및 에디터 블록 스타일
wp_enqueue_style (
‘hello-gutenberg-block-css’,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// 스크립트 기능을 블록 편집기 후크에 연결
add_action ( ‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

블록에 사용할 스크립트에 4 가지 종속성을 추가했습니다. 이러한 종속성에 대해 먼저 알아 봅시다.

wp-i18n은 다음과 같은 구텐베르크의 국제화 기능 버전입니다. __ (). wp-blocks는 블록을 등록하는 registerBlockType 함수에 사용됩니다. 우리는 블록의 다양한 구성 요소에 wp-editor 및 wp-components 스크립트를 사용합니다..

자산을 대기열에 넣었으므로 이제 블록 작성을 시작할 수 있습니다 /src/block.js 파일.

의존성 가져 오기

Gutenberg Boilerplate을 사용하는 경우 block.js 파일에는 Gutenberg 용 플러그인을 빌드하는 데 사용할 수있는 기본 블록 구조가 있어야합니다.

/ **
* 내부 블록 라이브러리
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* 레지스터 블록
* /
기본 registerBlockType ( ‘gutenberg-boilerplate / block’내보내기, {
// 제목 차단
제목 : __ ( ‘Gutenberg Boilerplate’),
// 블록 설명
설명 : __ ( ‘예제 블록.’),
// 블록 카테고리
카테고리 : ‘공통’,
// 차단 아이콘
아이콘 : ‘admin-site’,
// 키워드 차단
키워드 : [
__ ( ‘보일러 판’),
__ ( ‘안녕하세요 세계’),
__( ‘예’ ),
],
속성 : {
},
// 편집 인터페이스 정의
편집 : 소품 => {
반품 (

{__ ( ‘Hello Backend’)}

);
},
// 프론트 엔드 인터페이스 정의
저장 : 소품 => {
반품 (

{__ ( ‘Hello Frontend’)}

);
},
});

npm run dev를 실행하여 실시간으로 코드 컴파일을 시작할 수 있습니다..

먼저 맨 위에 블록에 필요한 모든 구성 요소와 라이브러리를 가져옵니다.

/ **
* 블록 의존성
* /

‘classnames’에서 클래스 이름을 가져옵니다.

/ **
* 내부 블록 라이브러리
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

const {
RichText,
인스펙터 컨트롤,
블록 컨트롤,
} = wp.editor;

const {
패널 바디,
텍스트 영역 컨트롤,
TextControl,
대시 콘,
툴바,
단추,
툴팁,
} = wp.components;

첫 수입품 클래스 이름 JSX는 요소에 여러 클래스를 허용하지 않으므로 npm을 사용하여 코드에서 여러 클래스를 사용하도록 설치했습니다..

사용하면서 가져온 다른 구성 요소에 대해 알아 봅니다..

속성 정의

이제 우리는 단축 코드와 같이 Gutenberg 블록에 대해 네 가지 속성을 정의 할 것입니다.

속성 : {
트위터: {
유형 : ‘string’,
},
트윗 : {
유형 : ‘string’,
},
버튼 : {
유형 : ‘string’,
기본값 : __ ( ‘Tweet’),
},
주제 : {
유형 : ‘부울’,
기본값 : false,
},
},

보시다시피 모든 속성은 단축 코드와 동일합니다. 모든 속성에는 유형 키가있어 Gutenberg에 데이터 유형을 알려줍니다. 문자열, 숫자, 부울을 사용할 수 있습니다 & 허용되는 유형으로 객체.

일부 속성에는 기본값이 포함되어 있습니다. 속성에는 소스 및 선택기와 같은 다른 속성도있을 수 있지만이 예에서는 사용하지 않지만 여기에서 그들에 대해 더 배우십시오.

인터페이스 편집

이제 블록의 편집 인터페이스를 구축 할 것입니다.이 인터페이스는 디스플레이가됩니다. 사용자는 Gutenberg에서 블록을 편집하는 동안 볼 수 있습니다..

기본 아이디어를 얻으려면 먼저 코드에서 다음 영역을 대체하여 블록을 하드 코딩하고 빌드 할 수 있습니다.

// 편집 인터페이스 정의
편집 : 소품 => {
반품 (

{__ ( ‘Hello Backend’)}

);
},

다음 코드로

// 편집 인터페이스 정의
편집 : 소품 => {
반환 [

호박과 펭귄

트위터

];
},

이를 통해 최종 결과에 대한 아이디어를 얻을 수 있습니다. 다음과 같이 보일 것입니다 :

구텐베르크 플러그인

블록의 첫 번째 요소는 트윗 텍스트 영역입니다. 구텐베르크의 제목 블록과 유사한 편집 가능한 텍스트 필드로 대체합니다..

우리는 사용할 것이다 RichText 하드 코딩 된 텍스트를 대체하기 위해 이전에 가져온 구성 요소.

우리의 RichText 컴포넌트에는 다섯 개의 인수가 있습니다. 짧은 코드를 사용하여 프런트 엔드에 요소를 표시하므로 format은 문자열입니다. 속성에서 선택자를 사용하려면 형식이 배열이되었을 것입니다.

RichText에는 기본적으로 굵게 및 기울임 꼴과 같은 일부 서식 옵션이 있으며, formatControls 인수에 빈 배열을 전달하여 비활성화했습니다..

자리 표시자는 필드에 텍스트가 없을 때 자리 표시 자 텍스트이며 변경 이벤트가 발생하면 onChange가 onChangeTweet 함수를 트리거합니다..

마지막으로, value는 필드의 값이 될 것이며, 이전에 정의한 트윗 속성에서 가져옵니다..

RichText 영역을 정의한 후에는 텍스트 필드에서 값이 변경 될 때 트리거되는 onChangeTweet 함수를 빌드해야합니다..

// 편집 인터페이스 정의
편집 : 소품 => {
const onChangeTweet = 값 => {
props.setAttributes ({트윗 : value});
};
반환 [
…나머지 코드

RichText 필드의 값을 onChangeTweet 함수에 전달합니다. props.setAttributes 트윗 속성 값을 업데이트하는 기능.

블록을 사용할 때 구텐베르크의 힘을 볼 수 있습니다..

구텐베르크의 RichField

굉장하지 않습니까?

블록 인스펙터

구텐베르크 용 플러그인을 빌드 할 때마다 플러그인 옵션 패널을 만들 때마다 바퀴를 다시 만들 필요는 없습니다. Gutenberg는 블록 커스터마이제이션을 가능하게하는 간단한 방법을 제공하고 모든 사용자가 내장 UI 패턴에 대해 일관된 경험을 갖도록합니다..

RichText 구성 요소와 마찬가지로 InspectorControls 구성 요소는 블록을 선택할 때 사이드 바를 추가합니다. 이 같은:

구텐베르크 인스펙터 컨트롤

또한 TextareaControl 및 TextControl을 사용하여 Inspector 영역에 텍스트 영역 및 텍스트 입력 필드를 추가합니다..

반환 코드에 다음 코드를 추가하겠습니다.

!! props.isSelected && (

),

props.isSelected는 블록을 선택할 때만 인스펙터가 나타나는지 확인합니다.

RichText와 유사하게 TextareaControl 및 TextControl 구성 요소에는 값과 onChange 메소드가 있습니다..

또한 새로운 변경 사항을 수용하기 위해 블록 디스플레이의 코드를 변경해야합니다. 이 경우 트윗 텍스트가 링크에 추가되므로 버튼 텍스트 만 블록에 추가하면되므로 백엔드에 표시 할 필요가 없습니다..

초기 코드의 하이퍼 링크를 다음과 같이 바꿀 수 있습니다.


{props.attributes.button}

앞에서 언급했듯이 백엔드에 하이퍼 링크를 표시 할 필요가 없기 때문에 코드에서 하이퍼 링크를 제거합니다. 이렇게하면 블록이 다음과 같이 보입니다.

Gutenberg Click to Tweet 인스펙터 컨트롤

블록 검사기는 블록에 강력한 도구가 될 수 있습니다. 플러그인에 에디터 영역에 비해 너무 복잡한 고급 옵션이있는 경우 인스펙터 영역에 넣을 수 있습니다.

다음 섹션에서 JavaScript 부분을 완성하기 위해 마지막 옵션 하나를 블록에 추가합니다..

블록 툴바

블록 도구 모음은 블록에 더 많은 옵션을 추가하는 데 사용할 수있는 사전 구축 된 또 다른 UI 구성 요소입니다. 선택하면 블록 위에 나타납니다. 예:

구텐베르크 블록 툴바

이상적으로, 블록 도구 모음에는 블록의 기본 컨트롤이 포함되어야하며 검사기가 보조 컨트롤을 호스팅해야합니다. 그러나 그것은 논쟁의 여지가 있으며 귀하의 블록에 달려 있습니다.

대체 툴바 영역을 사용하여 대체 스타일 컨트롤을 호스팅 할 것입니다.

Block Inspector와 마찬가지로 블록 툴바를 블록에 추가하려면 return 문에 다음 코드를 추가해야합니다.

!! props.isSelected && (

),

BlockControls 및 Toolbar 구성 요소를 사용하여 블록에 도구 모음을 추가합니다. Block Inspector와 유사하게 props.isSelected는 블록에 초점을 둘 때만 툴바가 표시되도록합니다..

또한 컨트롤에 툴팁 및 버튼 구성 요소를 사용합니다. 더 많은 컨텍스트를 제공하기 위해 컨트롤 위에 마우스를 놓을 때 툴팁이 있는지 확인하기 위해 툴팁 구성 요소가 버튼 구성 요소로 둘러싸여 있습니다..

버튼 구성 요소는 기사의 앞부분에서 가져온 클래스 이름 모듈을 사용하고 있습니다. 우리는 classnames 함수를 사용하여 세 가지 클래스를 제어했습니다. 세 번째 클래스 is-active는 테마 속성 값이 true 인 경우에만 나타납니다..

onChange 함수는 테마 속성을 true / false로 전환합니다. 결국 Dashicon 구성 요소는 컨트롤 아이콘을 표시하는 데 사용됩니다.

또한 변경 사항을 처리하려면 블록 코드를 변경해야합니다. 다음 줄을 바꿔야합니다.

와:

테마 속성이 참인지 거짓인지 확인하고 그에 따라 클래스를 블록에 할당합니다.

이제 블록은 다음과 같아야합니다.

Tweet to 툴바

Gutenberg 블록의 JavaScript 부분을 완성했습니다. 파일의 전체 소스 코드를 찾을 수 있습니다 여기.

이제 서버 측 출력을 처리하여 블록을 완성하겠습니다..

서버 측 렌더링

Gutenberg를 사용하면 서버 측 렌더링을 사용하여 프런트 엔드에 블록을 표시 할 수 있습니다. 서버 측 렌더링을 통해 단축 코드 용 블록을 만들 수 있습니다.

먼저 save 메소드를 null로 반환하여 다음 코드로 대체합니다.

// 프론트 엔드 인터페이스 정의
저장() {
// PHP로 렌더링
null을 돌려줍니다.
},

register_block_type PHP 함수를 사용하여 블록 타입을 PHP에 등록합니다 :

if (function_exists ( ‘register_block_type’)) {
// 서버 측 렌더링을 렌더 콜백에 연결
register_block_type (
‘hello-gutenberg / 클릭 투 트윗’, [
‘render_callback’=> ‘hello_gutenberg_block_callback’,
‘속성’=> 정렬(
‘트위트’=> 정렬(
‘유형’=> ‘끈’,
),
‘tweetsent’=> 정렬(
‘유형’=> ‘끈’,
),
‘button’=> 정렬(
‘유형’=> ‘끈’,
‘default’=> ‘트위터’,
),
‘테마’=> 정렬(
‘유형’=> ‘부울’,
‘default’=> 그릇된,
),
),
]
);
}

register_block_type 함수 먼저 인수 배열과 함께 블록 이름을 전달합니다..

첫 번째 인수는 render_callback 함수이며 서버 측 렌더링을 위해 hello_gutenberg_block_callback 함수를 호출합니다..

렌더 콜백 후, 우리는 render 콜백 함수에서 사용하는 block.js 파일과 유사한 속성을 배열로 전달합니다..

렌더 콜백 함수는 다음과 같습니다.

hello_gutenberg_block_callback ($ attr) 함수 {
추출 ($ attr);
if (isset ($ tweet)) {
$ theme = ($ theme === true? ‘click-to-tweet-alt’: ‘click-to-tweet’);
$ shortcode_string = ‘[clicktotweet 트윗 ="%에스" 트윗 ="%에스" 버튼 ="%에스" 테마 ="%에스"] ‘;
return sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ button, $ theme);
}
}

모든 속성을 추출한 다음 단축 코드 안에 반환합니다. 그게 구텐베르크에 대한 단축 코드 플러그인을 적응시키는 데 필요한 전부입니다.

이 기사에서 사용 된 모든 코드는 다음에서 찾을 수 있습니다. 헬로 구텐베르크 저장소.

다음 부분에서는 사이드 바 API를 포함하여 구텐베르크의 기존 플러그인을 조정하는 다른 방법을 살펴 보겠습니다..

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