기본 블록을 넘어: 향상된 워드프레스 기능을 위한 맞춤형 구텐베르크 블록 제작

요약

워드프레스 블록 편집기인 구텐베르크는 모듈식 블록 시스템으로 콘텐츠 제작 방식을 혁신했습니다. 핵심 블록은 다재다능함을 제공하지만, 고유한 기능과 브랜딩을 위해서는 맞춤형 블록이 필수적입니다. 이 글은 블록 등록, 속성 및 렌더링과 같은 필수 개념을 다루면서 자신만의 구텐베르크 블록을 개발하는 과정을 안내합니다. 실용적인 예제를 살펴보고, 코드 구성 및 보안을 위한 모범 사례를 논의하며, 맞춤형 블록이 워드프레스의 아키텍처 및 훅과 어떻게 통합되는지 강조할 것입니다. 맞춤형 블록 개발을 마스터하면 워드프레스 사이트의 기능과 사용자 경험을 크게 향상시킬 수 있습니다.

기본 블록을 넘어: 향상된 워드프레스 기능을 위한 맞춤형 구텐베르크 블록 제작

워드프레스 5.0에 구텐베르크 블록 편집기가 도입되면서 콘텐츠 생성 및 관리 방식에 중요한 변화가 있었습니다. 기존 편집기의 선형 방식에서 벗어나 구텐베르크는 "블록"이라는 개별 단위로 콘텐츠를 구축하는 모듈식 시스템을 도입했습니다. 기본 블록 세트는 광범위한 일반적인 요구 사항을 충족하지만, 많은 웹사이트는 즉시 사용 가능한 것 이상의 고유한 기능, 특정 디자인 요소 또는 통합을 필요로 합니다. 바로 여기서 맞춤형 구텐베르크 블록 개발이 등장하며, 워드프레스의 기능을 확장하고 프로젝트 요구 사항에 정확하게 맞춤 설정할 수 있는 강력한 방법을 제공합니다.

맞춤형 블록을 개발하면 재사용 가능한 구성 요소를 만들어 편집자의 콘텐츠 제작을 간소화하고, 브랜드 일관성을 보장하며, 복잡한 기능을 편집기 인터페이스 내에서 직접 구현할 수 있습니다. 이 가이드에서는 기본 개념 이해부터 강력하고 유지 관리 가능한 맞춤형 블록을 위한 모범 사례 구현까지의 과정을 안내합니다.

블록 편집기 아키텍처 이해

개발에 뛰어들기 전에 구텐베르크와 그 블록이 워드프레스 생태계 내에서 어떻게 작동하는지 이해하는 것이 중요합니다. 워드프레스 자체는 모듈식 PHP 및 MySQL 아키텍처를 기반으로 구축됩니다. 테마는 프레젠테이션을 제어하고 플러그인은 기능을 추가합니다. 핵심 워드프레스 기능인 구텐베르크는 이 구조에 원활하게 통합됩니다. 동적이고 브라우저 내 편집 경험을 위해 JavaScript(주로 React)를 활용하며, PHP는 서버 측 등록 및 렌더링을 처리합니다.

맞춤형 블록은 본질적으로 워드프레스에 등록되는 JavaScript 구성 요소입니다. 사용자가 게시물이나 페이지에 맞춤형 블록을 추가하면 구텐베르크는 해당 구성(속성)을 데이터베이스에 저장합니다. 프런트엔드에서 게시물을 렌더링할 때 워드프레스는 PHP를 사용하여 이 구성을 해석하고 적절한 HTML을 출력하며, 종종 동일한 JavaScript 구성 요소 또는 별도의 PHP 템플릿을 사용합니다.

맞춤형 블록의 핵심 구성 요소

모든 맞춤형 구텐베르크 블록은 본질적으로 몇 가지 주요 부분으로 구성됩니다.

1. 등록: 이는 워드프레스에 새 블록에 대해 알리는 과정입니다. 블록의 이름, 제목, 아이콘 및 기타 메타데이터를 정의하는 것이 포함됩니다. 이는 주로 JavaScript의 registerBlockType 함수를 사용하여 수행됩니다.
2. 속성: 이는 블록과 관련된 데이터 필드입니다. 블록의 특정 인스턴스에 대해 사용자가 수정할 수 있는 설정 또는 속성(예: 텍스트 콘텐츠, 이미지 URL, 색상 선택)으로 생각할 수 있습니다. 속성은 블록의 JavaScript 등록에서 정의됩니다.
3. 편집 함수: 이 JavaScript 함수는 구텐베르크 편집기 내에서 블록이 어떻게 표시되고 작동하는지를 정의합니다. 콘텐츠 제작자가 블록을 구성하는 데 사용할 대화형 UI를 구축하는 곳입니다.
4. 저장 함수: 이 JavaScript 함수는 데이터베이스에 저장되고 웹사이트의 프런트엔드에 렌더링될 정적 HTML 마크업을 정의합니다. 블록 속성의 현재 상태를 반영해야 합니다.

단계별: 첫 맞춤형 블록 만들기

헤드라인과 버튼이 있는 "Call to Action"(CTA)을 표시하는 간단한 맞춤형 블록을 만들어 보겠습니다. 이 예제는 블록 등록 및 편집을 위한 필수 JavaScript 측면에 중점을 두며, 기본적인 워드프레스 개발 환경이 설정되어 있다고 가정합니다.

사전 요구 사항:

• 로컬 워드프레스 개발 환경.
• JavaScript, React 및 PHP에 대한 기본적인 이해.
• 에셋 컴파일을 위해 Node.js 및 npm(또는 yarn) 설치.

1. 프로젝트 설정:

맞춤형 블록은 일반적으로 플러그인의 일부로 개발됩니다. 새 플러그인 파일(예: my-custom-blocks/my-custom-blocks.php)과 블록용 JavaScript 파일(예: src/index.js)을 만듭니다. JavaScript를 컴파일하기 위한 빌드 프로세스도 필요합니다. 일반적인 접근 방식은 컴파일을 편리하게 처리하는 @wordpress/scripts를 사용하는 것입니다.

플러그인의 루트 디렉터리에서 package.json 파일을 만듭니다.

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "A plugin for custom Gutenberg blocks.",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": ["wordpress", "gutenberg", "block"],
  "author": "Your Name",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0" 
  }
}

종속성을 설치합니다: npm install.

2. 블록 등록 (JavaScript):

src/index.js 파일에서 @wordpress/blocks 패키지의 registerBlockType을 사용합니다.

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

// Import components for the editor
import { Edit } from './edit';
import { Save } from './save';

registerBlockType( 'my-custom-blocks/cta', {
    title: __( 'Call to Action', 'my-custom-blocks' ),
    icon: 'megaphone',
    category: 'widgets',
    attributes: {
        headline: {
            type: 'string',
            default: '',
        },
        buttonText: {
            type: 'string',
            default: 'Learn More',
        },
        buttonUrl: {
            type: 'string',
            default: '#',
        },
    },
    edit: Edit,
    save: Save,
} );

3. 편집기 인터페이스 정의 (src/edit.js):

이 구성 요소는 편집기 내에서 블록이 어떻게 보이고 작동하는지를 처리합니다.

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

export const Edit = ( { attributes, setAttributes } ) => {
    const blockProps = useBlockProps();

    const onChangeHeadline = ( newHeadline ) => {
        setAttributes( { headline: newHeadline } );
    };

    const onChangeButtonText = ( newButtonText ) => {
        setAttributes( { buttonText: newButtonText } );
    };

    const onChangeButtonUrl = ( newButtonUrl ) => {
        setAttributes( { buttonUrl: newButtonUrl } );
    };

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Button Settings', 'my-custom-blocks' ) }>
                    <TextControl
                        label={ __( 'Button Text', 'my-custom-blocks' ) }
                        value={ attributes.buttonText }
                        onChange={ onChangeButtonText }
                    />
                    <TextControl
                        label={ __( 'Button URL', 'my-custom-blocks' ) }
                        value={ attributes.buttonUrl }
                        onChange={ onChangeButtonUrl }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Enter your headline here...', 'my-custom-blocks' ) }
                    value={ attributes.headline }
                    onChange={ onChangeHeadline }
                    allowedFormats={ [ 'core/bold', 'core/italic' ] }
                />
                <a href={ attributes.buttonUrl } className="wp-element-button">
                    { attributes.buttonText }
                </a>
            </div>
        </>
    );
};

4. 저장 함수 정의 (src/save.js):

이 함수는 프런트엔드에 대한 HTML 출력을 결정합니다.

import { useBlockProps, RichText } from '@wordpress/block-editor';

export const Save = ( { attributes } ) => {
    const blockProps = useBlockProps.save();

    return (
        <div { ...blockProps }>
            <RichText.Content
                tagName="h3"
                value={ attributes.headline }
            />
            <a href={ attributes.buttonUrl } className="wp-element-button">
                { attributes.buttonText }
            </a>
        </div>
    );
};

5. 블록 스크립트 연결 (PHP):

주요 플러그인 파일(my-custom-blocks.php)에서 컴파일된 JavaScript 파일을 등록하고 연결해야 합니다.

<?php
/**
 * Plugin Name: My Custom Blocks
 * Description: Adds custom Gutenberg blocks.
 * Version: 1.0
 * Author: Your Name
 */

function my_custom_blocks_register_block() {
    // Automatically loads the block.json file and enqueues the script.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. 에셋 빌드:

플러그인 디렉터리에서 npm run build를 실행합니다. 이렇게 하면 JavaScript가 build 폴더로 컴파일됩니다.

이제 워드프레스에서 플러그인을 활성화하세요. 편집기에서 "Call to Action" 블록을 사용할 수 있어야 합니다!

맞춤형 블록 개발 모범 사례

맞춤형 블록 개발은 단순히 기능을 작동시키는 것 이상입니다. 모범 사례를 따르면 블록이 안전하고 성능이 뛰어나며 접근 가능하고 유지 관리 가능하도록 보장할 수 있습니다.

• 네임스페이싱: 항상 블록에 고유한 네임스페이스를 사용하세요(예: my-custom-blocks/cta). 이렇게 하면 다른 블록과의 충돌을 방지할 수 있습니다. registerBlockType 함수가 이를 처리합니다.
• 코드 구성: JavaScript 및 PHP 코드를 깔끔하고 잘 구성된 상태로 유지하세요. 복잡한 블록의 경우 JavaScript를 더 작고 재사용 가능한 구성 요소로 분할하는 것을 고려하세요.
• 보안:
  • 정화: 데이터베이스에 데이터를 저장할 때(특히 사용자 생성 콘텐츠) 항상 정화하세요. 워드프레스는 sanitize_text_field, esc_url 등과 같은 함수를 제공합니다.
  • 이스케이핑: 브라우저에 데이터를 출력할 때는 항상 이스케이프하여 사이트 간 스크립팅(XSS) 공격을 방지하세요. esc_html, esc_attr, esc_url과 같은 함수를 사용합니다.
  • Nonce: 블록과 관련된 모든 AJAX 요청 또는 양식 제출의 경우, 요청이 합법적인 워드프레스 소스에서 발생했는지 확인하기 위해 nonce를 사용합니다.
• 국제화 (i18n): JavaScript의 모든 사용자 대상 문자열에는 __() 및 _x() 함수( @wordpress/i18n에서 제공)를 사용하세요. 이렇게 하면 블록을 번역할 수 있습니다.
• 접근성: 모든 사람이 블록을 사용할 수 있도록 하세요. 의미론적 HTML을 사용하고, 필요한 경우 ARIA 속성을 제공하며, 스크린 리더로 테스트하세요.
• 성능:
  • 지연 로딩: 무거운 에셋이나 복잡한 데이터를 로드하는 블록의 경우 지연 로딩 기술을 구현하는 것을 고려하세요.
  • 효율적인 렌더링: save 함수 및 모든 서버 측 렌더링을 가능한 한 효율적으로 최적화하세요.
  • 에셋 연결: 블록에 필요한 스크립트와 스타일만 연결하세요. 블록별 에셋에는 enqueue_block_style 및 enqueue_block_script_handle을 사용합니다.
• 모듈성 및 확장성: PHP에서 워드프레스 훅(액션 및 필터)을 사용하여 다른 플러그인이나 테마가 블록의 동작이나 출력을 수정하도록 허용하세요.
• block.json: 더 복잡한 블록의 경우 block.json 파일을 사용하여 블록 메타데이터, 종속성, 스타일 및 스크립트 핸들을 선언하세요. 이것은 블록 개발의 최신 표준이며 에셋 관리를 단순화합니다.

워드프레스 아키텍처와의 통합

맞춤형 블록은 독립적인 개체가 아닙니다. 워드프레스의 핵심 아키텍처와 깊이 통합됩니다.

• 훅: 플러그인에서 PHP 액션 및 필터를 사용하여 블록 등록을 수정하거나, 사용자 정의 스타일 또는 스크립트를 조건부로 추가하거나, 핵심 블록의 렌더링된 출력을 변경할 수도 있습니다. 예를 들어, block_type_metadata_settings 필터를 사용하여 등록된 블록의 설정을 수정할 수 있습니다.
• 테마 통합: 블록 기반 테마 및 전체 사이트 편집(FSE)은 블록에 크게 의존합니다. 맞춤형 블록은 FSE 템플릿에 원활하게 통합되도록 설계될 수 있으며, 사용자는 일관된 블록 기반 워크플로를 사용하여 전체 사이트를 구축할 수 있습니다.
• 플러그인 상호 운용성: 맞춤형 블록은 다른 플러그인과 상호 작용할 수 있습니다. 예를 들어, 맞춤형 제품 블록은 전자 상거래 플러그인에서 데이터를 가져올 수 있고, 맞춤형 갤러리 블록은 특정 미디어 라이브러리 플러그인과 통합될 수 있습니다.

고급 개념 및 고려 사항

• 서버 측 렌더링 (SSR): 동적 데이터 또는 서버에서 처리하는 것이 가장 좋은 복잡한 논리가 필요한 블록의 경우 서버 측 렌더링을 구현할 수 있습니다. 여기에는 블록을 등록할 때 PHP에서 render_callback 함수를 정의하는 것이 포함됩니다.
• 동적 블록: SSR을 사용하는 블록은 종종 동적 블록이라고 합니다. 데이터베이스에 정적 HTML을 저장하지 않습니다. 대신 속성만 저장하고 render_callback이 각 페이지 로드 시 HTML을 생성합니다.
• 블록 스타일: 사용자가 편집기 내에서 선택할 수 있는 블록에 대한 사용자 정의 스타일을 정의할 수 있습니다.
• 블록 변형: 기본 블록의 변형을 만들어 다른 기본 설정 또는 모양을 가진 사전 구성된 버전을 제공합니다.
• 편집기 대 프런트엔드 차이점: edit 및 save 함수가 다른 시나리오를 처리해야 할 수 있다는 점에 유의하세요. edit 함수는 대화형 편집기 경험을 위한 것이고, save 함수는 정적 HTML 출력을 위한 것입니다. 때로는 동적 프런트엔드 렌더링을 위해 별도의 render_callback이 필요할 수 있습니다.

결론

맞춤형 구텐베르크 블록 개발은 워드프레스 웹사이트에 대한 사용자 정의 및 기능의 새로운 수준을 여는 강력한 기술입니다. 핵심 구성 요소(등록, 속성, 편집 및 저장 함수)를 이해하고 보안, 성능 및 접근성에 대한 모범 사례를 따르면 강력하고 재사용 가능하며 사용자 친화적인 블록을 만들 수 있습니다. 클라이언트를 위한 맞춤형 플러그인을 구축하든 자신의 사이트를 개선하든, 맞춤형 블록을 마스터하면 워드프레스 개발 기능이 크게 향상되어 표준 제공 기능을 넘어 진정으로 독특한 디지털 경험을 만들 수 있습니다.