Gutenberg와 호환되는 플러그인을 만드는 방법 : 2 부 (Sidebar API)

Gutenberg와 호환되는 플러그인을 만드는 방법 : 2 부 (Sidebar API)

Gutenberg와 호환되는 플러그인을 만드는 방법 : 2 부 (Sidebar API)
СОДЕРЖАНИЕ
02 июня 2020

플러그인이 Gutenberg와 호환되도록하려면 플러그인의 기능과 기능을 사용자에게 제공하는 방법에 따라 수행 할 수있는 몇 가지 경로가 있습니다..


이 미니 시리즈의 첫 번째 부분에서 Gutenberg의 Block API에 대해 살펴 보았습니다. Gutenberg의 호환성 측면에서 대부분의 플러그인이 필요합니다. 이번에는 구텐베르크 퍼즐의 또 다른 조각을 탐구 할 것입니다. 구텐베르크의 사이드 바 API.

동일한 페이지에 있는지 확인하기 위해 간단한 설명 :

  • Gutenberg의 Block API는 매우 광범위하며 거의 모든 것을 블록으로 구축 할 수 있지만 때로는 충분하지 않습니다..
  • 반면, 사이드 바 API는 플러그인이 사이드 바를 등록 할 수있는 기능을 제공합니다. 사이드 바는 블록 검사기와 유사합니다.

플러그인을 Gutenberg와 호환 가능하게 만들기-사이드 바 API

예를 들어 Yoast SEO에 의해 입증 된 Gutenberg Sidebar API

구텐베르크 사이드 바 API

사이드 바 API를 사용할 수있는 곳?

우리는 최근에 플러그인을 만들었습니다. WP 제품 검토 – 구텐베르크 준비. WP Product Review는 게시물에 리뷰 데이터를 추가하기 위해 메타 필드를 사용했으며 다양한 하위 호환성으로 인해 블록으로 전환 할 수 없었습니다. 따라서 사이드 바 API를 사용했습니다..

다음은 WP Product Review를 Gutenberg 편집기에 통합 한 방법입니다.WP 제품 검토 구텐베르크

사용자가 게시물이 사이드 바 토글을 사용한 리뷰라고 표시하면 사이드 바 옵션에서 리뷰 상자에 대한 모든 것을 구성 할 수 있습니다.

WP 제품 검토는 사이드 바 API가 유용한 예 중 하나입니다. 또 다른 좋은 예는 그거 떨어 뜨려 사용자가 사이드 바를 사용하여 Unsplash 및 Giphy에서 스톡 이미지를 삽입 할 수있는 플러그인.

이 게시물에서는 비슷한 것을 구현하고 사이드 바 API를 통해 플러그인 Gutenberg와 호환되는 프로세스를 안내합니다..

메타 박스는 기본적으로 구텐베르크에 대한 준비가되어 있지만, 그렇지는 않습니다.

메타 박스부터 시작하겠습니다. 간단한 메타 박스를 사용하여 편집기 화면에서 사용자에게 일부 기능을 제공하는 플러그인을 사용하겠습니다..

클래식 편집기에서 다음과 같이 보일 수 있습니다.

클래식 에디터의 메타 박스

다음 코드를 사용하여 이러한 메타 박스를 만들 수 있습니다. 안녕하세요 구텐베르크 저장소:

/ **
* Hello Gutenbert Meta Box 등록
* /
hello_gutenberg_add_meta_box () 함수 {
add_meta_box ( ‘hello_gutenberg_meta_box’, __ ( ‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’);
}
add_action ( ‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* 안녕하세요 구텐베르크 메타 박스 콜백
* /
hello_gutenberg_metabox_callback ($ post) 함수 {
$ value = get_post_meta ($ 포스트->ID, ‘_hello_gutenberg_field’, true);
?>
<?php _e ( ‘이름이 뭐예요?’, ‘hello-gutenberg’) ?>

<?PHP
}

/ **
* Hello Gutenberg Metabox 저장
* /
hello_gutenberg_save_postdata ($ post_id) 함수 {
if (array_key_exists ( ‘hello_gutenberg_field’, $ _POST)) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [ ‘hello_gutenberg_field’]);
}
}
add_action ( ‘save_post’, ‘hello_gutenberg_save_postdata’);

따라서 여기에 물어볼 질문은 다음과 같습니다.

이 구텐베르크를 처음부터 호환시켜야합니까??

이 시점에서 구텐베르크 (Gutenberg)와 호환되는 것이 무엇인지 자문 해보아야합니다. 예를 들어, 구텐베르크에서이 메타 박스를 변경하지 않고 사용하면 여전히 작동합니다..

그러나 구텐베르크 호환성에 대해 이야기 할 때 구텐베르크 환경에서 작동하는 플러그인에 대해서만 말하는 것이 아니라 구텐베르크 *와 같은 작동하는 플러그인에 대해 이야기합니다..

"왜?" – 당신은 묻습니다. Gutenberg가 기본 편집기 이후 WordPress를 사용하기 시작한 사용자는 반 직관적 인 방법을 찾을 수 있습니다. 또한 편집기의 모든 것에 대해 더 구텐베르크 스타일을 기대합니다..

사용자에게 기본 느낌을 제공하지 않으면 Gutenberg와 더 잘 맞는 대안을 찾을 것입니다..

마지막으로 코드로 손을 더럽게하자!

사이드 바 API 시작하기

메타 필드를 포함하기 위해 구텐베르크에서 사이드 바 코딩을 시작할 것입니다. 계속 사용할 수 있습니다 구텐베르크 보일러 판 시작 지점으로 저장소.

구텐베르크를위한 메타 박스 준비하기

시작하기 전에 먼저 구텐베르크에서 메타 상자를 사용하지 않을 것이라고 구텐베르크에게 알려야합니다. 다음과 같이 __back_compat_meta_box 인수를 add_meta_box 함수에 전달하면됩니다.

/ **
* Hello Gutenberg Metabox 등록
* /
hello_gutenberg_add_meta_box () 함수 {
add_meta_box ( ‘hello_gutenberg_meta_box’, __ ( ‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’, array (
‘__back_compat_meta_box’=> 그릇된,
));
}
add_action ( ‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

구텐베르크 핸드북에는 PHP 메타 박스를 구텐베르크로 포팅하는 방법에 대한 자세한 내용이 있습니다.여기).

이렇게하면 기존 PHP 메타 박스가 더 이상 구텐베르크에 나타나지 않습니다. 이제 메타 필드를 WordPress REST API에 추가하여 구텐베르크에 대한 메타 필드를 준비해야합니다. REST API로 메타 필드를 등록하기 위해 다음 코드를 추가 할 수 있습니다.

/ **
* Hello Gutenberg Meta Field to Rest API 등록
* /
hello_gutenberg_register_meta () 함수 {
register_meta (
‘post’, ‘_hello_gutenberg_field’, 배열 (
‘유형’=> ‘끈’,
‘단일’=> 진실,
‘show_in_rest’=> 진실,
)
);
}
add_action ( ‘init’, ‘hello_gutenberg_register_meta’);

_hello_gutenberg_field를 메타 REST API의 객체.

이 함수는 REST API에 값을 표시하는 작업 만 수행합니다. 이제 REST API를 사용하여 메타 필드를 업데이트하는 메소드를 추가해야합니다..

다음 코드는 WordPress REST API에 사용자 지정 경로를 추가합니다. / hello-gutenberg / v1 / update-meta /:

/ **
* Hello Gutenberg Metabox를 Rest API에 등록
* /
hello_gutenberg_api_posts_meta_field () 함수 {
register_rest_route (
‘hello-gutenberg / v1’, ‘/ update-meta’, 배열 (
‘방법’=> ‘게시하다’,
‘콜백’=> ‘hello_gutenberg_update_callback’,
‘args’=> 정렬(
‘id’=> 정렬(
‘sanitize_callback’=> ‘절대’,
),
),
)
);
}
add_action ( ‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
Gutenberg에 대한 Hello Gutenberg REST API 콜백
* /
hello_gutenberg_update_callback ($ data) {
return update_post_meta ($ data [ ‘id’], $ data [ ‘key’], $ data [ ‘value’]);
}

이 REST API 경로는 Gutenberg 사이드 바에서 메타 필드를 수정하는 데 사용됩니다. WordPress REST API 및 방법에 대해 자세히 알아볼 수 있습니다. 여기에서 맞춤 경로를 등록하십시오.

마찬가지로 WordPress REST API가 무엇이며 시작하는 방법을 알고 싶다면 블로그 게시물을 읽을 수 있습니다. WordPress REST API : 정의 및 사용 방법.

구텐베르크에 사이드 바 블록 추가

사이드 바 코드부터 시작하겠습니다 구텐베르크 보일러 판:

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

const {Fragment} = wp.element;

const {
플러그인,
플러그인 SidebarMoreMenuItem,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

const 구성 요소 = () => (

{__ ( ‘Gutenberg Boilerplate’)}

{__ ( ‘Hello World!’)}

);

registerPlugin ( ‘gutenberg-boilerplate’, {
아이콘 : ‘admin-site’,
렌더 : 컴포넌트,
});

Gutenberg 편집기에 매우 간단한 사이드 바가 삽입됩니다. 우리는 이것을 출발점으로 삼아 프로젝트를 구축 할 것입니다..

예제 코드는 Gutenberg Boilerplate 리포지토리의 코드이므로 모든 발생 항목을 교체해야합니다. "구텐베르크 보일러 판" 와 "안녕하세요 구텐베르크".

사용 된 구성 요소

사이드 바는 이미 많은 구성 요소를 가져 오지만 더 필요합니다. 코드의 상단 부분을 다음으로 바꿀 수 있습니다.

/ **
* 내부 블록 라이브러리
* /

const {__} = wp.i18n;

const {
플러그인,
플러그인 SidebarMoreMenuItem
} = wp.editPost;

const {
패널 바디,
TextControl
} = wp.components;

const {
구성 요소,
파편
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

가져온 모든 구성 요소에 대해 빠르게 알아 보겠습니다..

  1. 이전 기사에서 설명한 것처럼 __ component는 텍스트를 번역 할 수있게하는 데 사용됩니다.
  2. 그만큼 플러그인 구성 요소는 구텐베르크에 사이드 바를 추가하는 데 사용됩니다.
  3. 플러그인 SidebarMoreMenuItem 사이드 바의 가시성을 전환하는 구텐베르크 메뉴에 버튼을 추가하는 데 사용됩니다.
  4. 그만큼 패널 바디 컴포넌트는 사이드 바에 패널을 추가하는 데 사용됩니다.
  5. TextControl 입력 필드에 사용됩니다.
  6. 그 후, 우리는 구성 요소파편 구성 요소. 둘 다 사이드 바에서 사용하는 React 컴포넌트입니다.
    • Fragment 구성 요소는 DOM에 추가 노드를 추가하지 않고 자식 목록을 그룹화하는 데 사용됩니다. JSX에서는 둘 이상의 부모 노드를 가질 수 없으므로 코드에서 Fragment 구성 요소를 사용해야합니다..
  7. withSelect 고차 부품입니다. 고차 부품이 무엇인지 알아 보려면 다음을 읽으십시오. 이 문서.
  8. 그리고 마지막으로 registerPlugin, 이는 이전 기사에서 사용한 registerBlockType과 유사합니다. registerPlugin은 블록을 등록하는 대신 플러그인을 등록합니다..

컨트롤 추가

지금까지 사이드 바는 컴포넌트 기능 일 뿐이지 만 React의 라이프 사이클 메소드를 사용하므로 다음과 같이이를 React 컴포넌트로 바꿉니다.

Hello_Gutenberg 클래스는 {
render () {
반품 (

{__ ( ‘Hello Gutenberg’)}

{__ ( ‘Hello World!’)}

)
}
}

registerPlugin ( ‘hello-gutenberg’, {
아이콘 : ‘admin-site’,
렌더 : Hello_Gutenberg,
});

이렇게하면 사이드 바가 일반 텍스트로 작동합니다..

이제 사이드 바에 필드를 추가하겠습니다. 컴포넌트를 다음과 같이 만들어야합니다.

Hello_Gutenberg 클래스는 {
render () {
반품 (

{__ ( ‘Hello Gutenberg’)}

)
}
}

먼저 초기 상태를 정의했습니다. 기본 상태는 기본적으로 메타 필드의 핵심입니다. 그런 다음 apiFetch를 사용하여 현재 게시물에서 데이터를 가져옵니다..

$ {this.props.postId} 변수를 사용하여 현재 게시물의 ID를 전달합니다. 나중에이 시점으로 돌아갑니다.

데이터를 가져 오면 REST API의 값으로 상태를 업데이트합니다..

이제 postId 변수로 돌아 갑시다. 현재 게시물의 ID를 알 수 없으므로 다음과 같이 withSelect 고차 구성 요소를 사용합니다.

const HOC = withSelect ((선택) => {
const {getCurrentPostId} = select ( ‘core / editor’);
{
postId : getCurrentPostId (),
};
}) (Hello_Gutenberg);

registerPlugin ( ‘hello-gutenberg’, {
아이콘 : ‘admin-site’,
렌더 : HOC,
});

현재 게시물의 ID를 postId 변수로 전달합니다. 이제 이전 게시물을 실행할 수 있으며 구텐베르크 사이드 바에 메타 필드의 가치가 표시됩니다.

메타 값 업데이트

이제 사이드 바가 메타 값을 업데이트하도록 허용해야합니다. 세부 정보를 가져 오는 것과 유사하게 wp.apiRequest 유용.

상태 값이 변경 될 때마다 REST API로 업데이트합니다. 이를 위해 먼저 다음과 같이 onControl 이벤트를 TextControl에 추가해야합니다.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    
    [초보자를위한 워드 프레스 코스] Udemy vs Lynda vs Treehouse vs Skillshare כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    
    모바일 우선 성능 지향 워드 프레스 테마를 구성하는 방법 [1 부] כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    
    2020 년에 웹 사이트를 안전하게 유지하기위한 25 가지 간단한 워드 프레스 보안 요령 כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    Adblock
    detector