Blog

블록 에디터는 post_content 필드에 직접 기록된다. 그리고 기본적으로 블록의 내용 또한 이 필드 안에 본문으로서 기록된다.

예를 들어, ESNext #2: 블록 제작에서 작성한 Hello, World! 블록은 다음처럼 텍스트로 기록된다.

<!-- wp:wp-esnext-study/wes02-hello-world -->
<p class="wp-block-wp-esnext-study-wes02-hello-world">WP ES Next #2 안녕, 세상!</p>
<!-- /wp:wp-esnext-study/wes02-hello-world -->

HTML 코드로 기록되는 것이 보인다. 그리고 주석으로 이것이 워드프레스 블록임을, 또 어떤 블록 타입인지를 기록하는 것이 보인다. wp:로 시작하고 /wp:로 닫는 것으로 보인다. ‘wp-esnext-study/wes02-hello-world‘는 내가 지정한 블록 타입 이름이다.

블록은 워낙 단순해서 어떤 상태나 속성을 가지지 않지만, 이제 간단한 속성을 지정해 보도록 하자. 이것을 활용하면 블록 에디터에 값을 저장하고, 불러와 쓸 수 있게 된다.

Github 리포지터리에 04-attributes 디렉토리로 예제 코드를 작성하였다. 아래부터는 이 예제 코드에 대한 설명을 덧붙인다.

속성값에 대한 설명은 블록 에디터 문서에서 찾을 수 있다. 이 개념은 마치 리액트의 콤포넌트의 state와 약간 비슷한 느낌이다. registerBlockType() 함수의 옵션 인자로 주어지며, 해당 블록 타입 내 속성값의 키-값 쌍들의 목록이다.

registerBlockType('foo/bar', {
  ...
  attributes: {
    name: {
      type: 'string',
      default: 'John',
    }
  }
  ...
});

키는 해당 속성의 이름, 값은 속성의 성격을 정의한다.

‘type’은 필수적으로 지정해야 하며 다음 문자열 중 하나여야 한다.

• null
• boolean
• object
• array
• number
• string
• integer

‘source’는 이 속성값이 블록 내 어떤 곳에서 오는지 지정한다.

• 생략: source를 생략할 수 있다. 이 때 블록의 주석에 인코딩된다. 명시적으로 주는 방법도 있을 텐데 정확히 알 수가 없다.
• attribute: 속성에서 가져온다.
• html: HTML 코드를 취한다.
• text: 텍스트를 취한다.
• children: 내부 자식 요소에서 취한다.
• meta: 메타 값에서 온다.
• query: 속성 값에 여러 군데에서 값을 가져와야 할 경우 유용하다.

‘source’와 더불어 ‘selector’, ‘attribute’ 속성을 더할 수 있다. ‘selector’는 CSS 선택자로 내부 요소를 선택할 때 쓰고, ‘attribute’는 검색된 노드에서 어트리뷰트 값을 취할 때 쓴다.

{
...
attributes: {
  ingredients: {
    type: 'array',
    source: 'children',
    selector: '.ingredients',
  },
  url: {
    type: 'string',
    source: 'attribute',
    selector: 'img',
    attribute: 'src',
  },
  comment: {
    type: 'string',
    source: 'meta',
    meta: '_my_comment'
  }
}
...
}
// attributes의 예제. 'ingredients' 클래스를 가진 자식 노드의 텍스트를 가져온다.
// img 노드의 src 속성에서 url 속성값을 채운다.
// comment 속성은 메타 필드 '_my_commnet' 로부터 온다.

예제에서 나는 두 개의 입력 필드를 삽입했다. 이 입력 필드를 통해 위젯의 내용을 동적으로 표현한다. 하나는 주석에 저장하고, 하나는 메타 필드로부터 가져온다.

{
...
attributes: {
    name: {
        type: 'string',
        default: 'John',
    },
    anotherName: {
        type: 'string',
        source: 'meta',
        meta: '_another_name',
        default: 'Jane',
    }
},
...
}

나머지 edit(), save() 메소드를 완성한다.

edit({setAttributes, attributes}) {
    return (
        <>
            <p>{__('Hello, World!', 'wp-esnext-study')}, {attributes.name}, {attributes.anotherName}!</p>
            {/* 첫번째 입력 요소. Hello, World!, {이름}을 출력하게 합니다.
             이 요소는 HTML 주석에 JSON 인코드 됩니다. */}
            <TextControl
                label={__('Your Name', 'wp-esnext-study')}
                value={attributes.name}
                onChange={value => {
                    setAttributes({name: value});
                }}
            />
            <TextControl
                label={__('Another Name', 'wp-esnext-study')}
                value={attributes.anotherName}
                onChange={value => {
                    setAttributes({anotherName: value});
                }}
            />
        </>
    );
},
save({attributes}) {
    return (
        <>
            <p>{__('Hello, World!', 'wp-esnext-study')}, {attributes.name}, {attributes.anotherName}!</p>
        </>
    );
}

이렇게 하면, name은 본문 블록의 주석에 저장되고, anotherName은 메타 값으로 저장된다. 단, 메타 값을 REST API에 노출하기 위해 index.php에 register_meta() 함수를 호출해 _another_name 필드를 지정한다.

<?php
...

register_meta(
	'post',
	'_another_name',
	[
		'type'              => 'string',
		'description'       => 'Another name.',
		'default'           => 'Jane',
		'single'            => true,
		'sanitize_callback' => function ( $value ) {
			return sanitize_text_field( $value );
		},
		/**
		 * apply_filters( "auth_{$object_type}_meta_{$meta_key}", $allowed, $meta_key, $object_id, $user_id, $cap, $caps );
		 *
		 * @see map_meta_cap()
		 */
		'auth_callback'     => function ( $allowed, $meta_key, $object_id, $user_id ) {
			return user_can( $user_id, 'edit_post', $object_id );
		},
		'show_in_rest'      => true,
	]
);

편집기에서 값을 저장하고 저장된 상태를 확인해 본다. 값이 잘 저장되는 것을 확인했다.

단, 값이 잘 저장된 것처럼 보이지만 헛점이 하나 있다. 이 글을 코드 에디터로 봐서 본문을 날것 그대로 보면 아래 그림처럼 나온다.

메타 값으로 지정한 Ashly는 그저 텍스트로 출력되어 있다. 만약 다른 곳에서 메타 값을 Ashly에서 Simpson으로 변경한다 하더라도, 이 텍스트는 변경되지 않는다. 이렇게 DB로 저장된 값을 가져와 표시하려면 지금처럼 정적인 렌더링은 알맞지 않다. 이것은 차후 동적 렌더링에서 따로 알아보도록 하자.

이번에는 사이드바의 제어에 대해 예제 코드를 작성해본다. 사이드바는 문서 전체나 일부 블록, 혹은 플러그인이 확장할 수 있도록 되어 있다. 처음에는 사이드바가 휙휙 변해서 혼동이 많았지만, 몇 번 보고 그 동작에 대해 이해하기 시작하니 나쁘지 않다.

이 사이드바는 이제 매우 중요한 의미가 있다. 클래식 에디터에서는 글 편집 이외의 여러 제어 요소들을 메타 박스로 처리했다. 이 메타 박스들은 여전히 유효하고 때때로는 여전히 현역으로 동작하지만 새로운 블록 에디터를 사용하는 경우, 메타 박스보다는 사이드바 쪽의 동작이 더 필요할 수 있을 것 같다. 특히 블록을 제작하는 경우는 여지없이 사이드바를 익혀야 할 듯.

우선 사이드바에 대한 Hello, World! 출력하는 코드를 작성해 본다. 완성된 코드는 마찬가지로 Github 레포지터리에 코드를 올려 두었다.

서버 사이드 코드 (PHP)

서버에서는 단순하게 js 코드를 큐잉하기 위한 코드로만 되어 있다. 늘 그렇듯 ‘init‘ 액션과 ‘enqueue_block_editor_assets‘ 액션을 사용하고 index.asset.php 파일에서 생성된 정보를 활용해 스크립트를 등록하는 구현이 있다.

사이드바에 대해

사이드바에 ‘플러그인’을 넣어 보자. 플러그을 등록하면 플러그인만의 사이드바를 가지게 되고 거기에 원하는 대로 위젯을 꾸밀 수 있게 된다.

플러그인에 등록되면 아래 그림처럼 … 메뉴를 눌렀을 때 플러그인 섹션에 표시된다.

이것이 선택되면 우측 사이드바에는 플러그인만의 위젯이 출력된다. 또한 가장 위 우측에 보면 별 아이콘이 있는데, 선택하면 … 메뉴 좌측, 톱니바퀴 아이콘 우측으로 사이드바를 여닫을 수 있는 아이콘이 고정된다. 앞으로는 생성된 아이콘을 눌러 사이드바를 열었다 닫았다를 할 수 있다.

물론 새 사이드바를 만드는 것도 가능하지만, 기존의 ‘문서’ 사이드바에 요소를 추가하는 것도 가능하다. 이것은 차후에 진행하기로 하고 여기서는 새 플러그인을 위한 사이드바 생성만 다룬다.

클라이언트 사이드 코드 (JavaScript)

우선 플러그인을 등록한다. 등록을 위해서는 ‘registerPlugin’ 함수를 사용한다. 이것은 ‘@wordpress/plugins’ 패키지에 있다. packages.json 에 등록하고 import 한다.

registerPlugin 함수는 두 개의 인자를 가진다. 첫번째는 고유한 이름. 두번째는 설정 객체이다. 간단하게 두 개의 키 ‘icon’, ‘render’를 필요로 한다. icon은 간단히 dashicons에서 찾을 수 있는 이름으로 할 수 있다.

render는 함수로서 플러그인의 내용을 그린다. 여기에 사이드바 내용을 넣으려면 PluginSidebarMoreMenuItem, PluginSidebar 둘이 필요하다. 이 둘은 ‘@wordpress/edit-post’에서 찾을 수 있다.

PluginSidebarMoreMenuItem은 … 메뉴 클릭시 ‘플러그인’ 섹션에서 만든 사이드바가 선택될 수 있도록 하는 객체이며, PluginSidebar는 사이드바의 내용을 직접 선언한다.

즉, PluginSidebarMoreMenuItem을 사용하면 아래처럼 결과가 작성된다.

그리고 해당 메뉴를 클릭하면 좌측 사이드바에 나올 내용은 PluginSidebar를 이용해 작성한다.

registerPlugin('wes3-plugin-hello-world', {
    icon: 'welcome-view-site',
    render() {
        return (
            <>
                <PluginSidebarMoreMenuItem target="wes3-plugin-hello-world">
                    {__('Hello, World!', 'wp-esnext-study')}
                </PluginSidebarMoreMenuItem>
                <PluginSidebar name="wes3-plugin-hello-world"
                               title="Hello, World!"
                               icon="welcome-view-site">
                </PluginSidebar>
            </>
        )
    }
});

PluginSidebarMoreMenuItem의 target 속성과 PluginSidebar name 속성은 서로 같게 이어준다. title 속성은 사이드바 최상단 제목을 위한 텍스트이고, icon은 사이드바가 즐겨찾기 추가되었을 때 보여질 아이콘이다.

좀 더 레이아웃에 맞춰 내용 출력하기

나머지 사이드바에 넣을 내용들은 <PluginSidebar> 안에 넣으면 된다. 그러나 레이아웃이 잘 정돈되어 나오지 않는다. 레이아웃은 좀 맞춰서 넣어 보자. 이 때 ‘@wordpress/components’ 패키지의 Panel을 이용한다.

<PluginSidebar name="wes3-plugin-hello-world"
               title="Hello, World!"
               icon="welcome-view-site">
    <Panel header="Hello, World! Panel" >
        <PanelBody title="Hello, World! Body"
                   icon="welcome-view-site"
                   initialOpen={true}>
            <PanelRow>
                <p>Hello, World! Content.</p>
            </PanelRow>
        </PanelBody>
    </Panel>
</PluginSidebar>

결과는 아래와 같다.