맞춤형 구텐베르크 블록 만들기: 최종 블록 개발 튜토리얼

많은 사람들이 Gutenberg 블록 및 앱 구축을 시작하는 데 어려움이 있다고 불평합니다. 학습 곡선은 주로 개발 환경 설치 및 구성의 어려움으로 인해 가파르다. 또한 JavaScript, Node.js, React 및 Redux에 대한 확실한 지식은 이 상당히 복잡한 레시피를 위한 필수 요소입니다.

공식 WordPress 블록 편집기 핸드북은 개발자에게 엄청난 양의 정보를 제공하지만 세부 정보의 바다에서 길을 잃을 수도 있습니다.

Gutenberg 프로젝트의 수석 설계자인 Matias Ventura는 WP Tavern과의 인터뷰에서 다음과 같이 보고했습니다.

그것을 빨리 배울 수 있는 사람들이 있지만 여전히 사람들에게 큰 장벽입니다. 여기에는 여러 계층이 있다고 생각합니다. 문서화는 조직과 프레젠테이션 모두에서 훨씬 더 좋을 수 있습니다. 나는 우리가 그곳에서 더 많은 일을 할 수 있기를 바랍니다.

이를 염두에 두고 독자들이 Gutenberg 블록 개발을 시작할 수 있도록 돕기 위한 단계별 자습서를 제공하기로 결정했습니다.

흥미롭게 들립니까? 뛰어들자!

구텐베르크 블록 개발 전제 조건

이 튜토리얼에서 필요한 유일한 기술은 WordPress 플러그인 개발에 대한 좋은 지식과 최소한 HTML, CSS, JavaScript 및 React에 대한 기본적인 이해입니다.

야심찬 프로젝트가 될까요? 당신은 그것이 될 것이라고 내기!

완전성과 단순성 사이에서 적절한 절충안을 찾거나 포함할 주제와 제외할 주제를 결정하는 것이 쉽지 않았습니다.

중급 및 고급 독자가 React 상태, Redux 저장소, 고차 구성 요소 등과 같은 특정 개념을 깊이 탐구하지 않은 것을 용서해 주기를 바랍니다. 이러한 주제는 추가 공간과 주의가 필요하며 블록 개발을 시작하기에는 너무 고급일 수 있습니다(React 개발자가 아닌 경우).

같은 이유로 동적 블록 및 메타 상자와 같은 구텐베르크 블록 개발과 관련된 고급 주제는 다루지 않습니다.

이 기사를 끝낼 때 얻게 될 지식을 통해 재미와 생산성을 바로 시작할 수 있습니다.

블록 만들기를 시작하면 기술을 더욱 향상시키고 더 고급 구텐베르크 블록을 스스로 만들 수 있습니다.

구텐베르크 블록이란?

2018년 12월에 처음 출시된 이후 블록 편집기는 모든 면에서 크게 개선되었습니다. 더 강력한 API, 고급 사용자 인터페이스, 향상된 사용성, 수많은 새 블록, 전체 사이트 편집의 첫 번째 구현 등 .

간단히 말해서, Gutenberg가 아직 과중한 개발 단계에 있더라도 먼 길을 왔습니다. 그리고 오늘날 블록 편집기는 신뢰할 수 있고 기능적인 페이지 및 사이트 빌더로서 완전한 후보입니다.

개발자의 관점에서 Gutenberg는 WordPress 사용자가 WordPress에서 콘텐츠를 생성, 편집 및 삭제할 수 있도록 하는 React 기반 SPA(단일 페이지 애플리케이션)입니다. 그러나 이것이 기존 콘텐츠 편집기의 향상된 버전을 생각하게 해서는 안 됩니다.

우리는 이것을 분명히 하고 싶습니다:

구텐베르크에서 콘텐츠는 사용자가 게시물과 페이지 또는 전체 웹사이트를 만드는 데 사용할 수 있는 "벽돌"인 블록으로 나뉩니다.

그러나 기술적으로 블록이란 무엇입니까?

우리는 WordPress의 정의를 좋아합니다:

"블록"은 함께 구성되어 웹 페이지의 콘텐츠 또는 레이아웃을 형성하는 마크업 단위를 설명하는 데 사용되는 추상적인 용어입니다. 이 아이디어는 오늘날 WordPress에서 단축 코드, 사용자 정의 HTML을 통해 달성하고 검색을 포함하여 일관된 단일 API 및 사용자 경험에 대한 개념을 결합합니다.

제목, 단락, 열, 이미지, 갤러리 및 사이드바 패널에서 블록 도구 모음 컨트롤에 이르기까지 편집기의 인터페이스를 구성하는 모든 요소는 React 구성 요소입니다.

그렇다면 React 구성 요소는 무엇입니까? W3Schools는 다음 정의를 제공합니다.

구성 요소는 독립적이고 재사용 가능한 코드 비트입니다. JavaScript 함수와 동일한 목적을 제공하지만, 단독으로 작동하고 render() 함수를 통해 HTML을 반환합니다.

Gutenberg가 제공하는 편집 경험은 클래식 WordPress 편집기에 비해 새로운 것이지만 WordPress가 데이터베이스에 콘텐츠를 저장하는 방식은 전혀 변경되지 않습니다. Gutenberg는 WordPress 내에서 작동하지만 핵심에서 CMS가 작동하는 방식을 변경하지 않는 애플리케이션이기 때문입니다.

Gutenberg로 생성된 게시물(게시물, 페이지 및 사용자 정의 게시물 유형 포함)은 여전히 ​​클래식 편집기에서와 마찬가지로 wp_posts 테이블에 저장됩니다.

그러나 Gutenberg로 만든 게시물에서 Classic Editor와 Gutenberg를 통해 만든 게시물 간의 근본적인 차이점을 나타내는 추가 정보를 표에서 찾을 수 있습니다.

이러한 정보는 HTML 주석처럼 보이며 특정 기능이 있습니다. 블록 구분:

블록 구분 기호 는 WordPress에 화면에 렌더링할 블록을 알려줍니다. 또한 JSON 객체의 블록 속성 값을 제공합니다. 이러한 소품은 블록이 화면에 렌더링되는 방식을 지정합니다.

WordPress 개발 환경 설정

최신 JavaScript 개발 환경을 설정하려면 Webpack, React 및 JSX, Babel, ESLint 등과 같은 고급 기술에 대한 확실한 지식이 필요합니다.

협박? 하지마! WordPress 커뮤니티는 번거로운 수동 구성 프로세스를 피할 수 있는 강력한 도구를 제공하여 이미 구출되었습니다.

일을 단순하게 유지하기 위해 이 기사에서는 트랜스파일에 대해 다루지 않을 것입니다(그래도 블록 개발의 기본을 배운 후에는 익숙해지는 것이 좋습니다). 대신 몇 분 안에 최신 JavaScript 개발 환경을 빠르고 쉽게 설정하는 데 사용할 수 있는 두 가지 대체 도구를 소개합니다. 프로젝트에 가장 편리한 것을 선택하는 것은 귀하에게 달려 있습니다.

Gutenberg 블록을 빌드하기 위한 JavaScript 개발 환경 설정은 3단계 프로세스입니다.

1. Node.js 및 npm 설치
2. 개발 환경 설정
3. 차단 플러그인 설정

시작하자.

1. Node.js와 npm 설치

개발 환경을 설치하고 첫 번째 블록을 등록하기 전에 Node.js와 노드 패키지 관리자(npm)를 설치해야 합니다.

여러 가지 방법으로 Node.js와 npm을 설치할 수 있습니다. 그러나 먼저 소프트웨어가 컴퓨터에 이미 설치되어 있는지 확인하고 싶을 수 있습니다.

이렇게 하려면 터미널을 시작하고 다음 명령을 실행합니다.

 node -v

결과가 command not found 이면 Node.js가 컴퓨터에 설치되지 않은 것이므로 설치를 계속할 수 있습니다.

이 기사에서는 가장 쉬운 설치 옵션인 Node Installer를 선택했습니다. 운영 체제에 해당하는 버전을 다운로드하고 설치 마법사를 실행하기만 하면 됩니다.

Node.js를 설치했으면 터미널에서 node -v 명령을 다시 실행합니다. npm -v 명령을 실행하여 npm 패키지를 사용할 수 있는지 확인할 수도 있습니다.

이제 다음 도구가 준비되었습니다.

• npx Node.js 패키지 러너(문서 참조). 이를 통해 npm 명령을 먼저 설치하지 않고 실행할 수 있습니다.
• npm Node.js 패키지 관리자(문서 참조). 이것은 종속성을 설치하고 스크립트를 실행하는 데 사용됩니다.

다음 단계는 개발 환경을 설치하는 것입니다.

2. 개발 환경 설정

로컬 머신에 최신 버전의 Node.js와 npm이 있으면 WordPress용 개발 환경이 필요합니다.

DevKinsta와 같은 로컬 개발 환경을 사용하거나 공식 WordPress 도구를 사용할 수 있습니다. 두 가지 옵션을 모두 살펴보겠습니다.

옵션 1: 로컬 개발 환경(DevKinsta)

몇 번의 클릭만으로 최신 로컬 WordPress 개발 도구인 DevKinsta를 사용하여 WordPress를 로컬에 설치할 수 있습니다. 또는 MAMP 또는 XAMPP와 같은 다른 로컬 개발 도구를 선택할 수 있습니다.

옵션 2: wp-env

명령줄에서 직접 실행할 수 있는 로컬 WordPress 개발 환경을 제공하는 공식 wp-env 도구를 선택할 수도 있습니다. Noah Alen은 이를 다음과 같이 정의합니다.

로컬 WordPress 환경은 이제 단일 명령을 실행하는 것처럼 간단합니다. wp-env 는 고통 없는 로컬 WordPress 환경을 위한 제로 구성 도구입니다. 사용자가 시간을 낭비하지 않고 WordPress를 빠르게 실행할 수 있도록 옵션에 대한 결정을 제공합니다. 실제로 목표는 개발자, 디자이너, 관리자 또는 기타 모든 사람이 이러한 환경에 쉽게 액세스할 수 있도록 하는 것입니다.

시도해 보기로 결정했다면 wp-env 를 설치하는 데 최소한의 노력이 필요합니다. 다음 단계를 따르세요.

1단계: Docker 및 Node.js 설치 확인

기술 요구 사항을 충족하려면 먼저 컴퓨터에 Docker와 Node.js가 모두 설치되어 있어야 합니다. wp-env 는 WordPress 웹 사이트를 실행하는 Docker 인스턴스를 생성하기 때문입니다. 코드에 대한 모든 변경 사항은 WordPress 인스턴스에 즉시 반영됩니다.

2단계: 명령줄에서 @wordpress/env 설치

컴퓨터에서 실행 중인 Docker 및 Node.js를 사용하여 WordPress 개발 환경으로 이동하여 설치할 수 있습니다.

wp-env 는 전역 또는 로컬로 설치할 수 있습니다. 전역적으로 수행하려면 플러그인 디렉토리 내에서 다음 명령을 실행해야 합니다(아래 "중요" 알림 상자에 자세히 설명되어 있음).

 npm install -g @wordpress/env

다음과 같이 분해해 보겠습니다.

• npm install 은 패키지를 설치합니다.
• -g 명령에 추가하면 지정된 패키지를 전역으로 설치합니다.
• @wordpress/env 는 설치할 패키지입니다.

wp-env 가 성공적으로 설치되었는지 확인하려면 다음 명령을 실행합니다.

 wp-env --version

현재 wp-env 버전이 표시되어야 합니다. 즉, 이제 플러그인 폴더에서 다음 명령을 사용하여 환경을 시작할 수 있습니다.

 wp-env start

다음 주소를 사용하여 WordPress 대시보드에 액세스할 수 있습니다.

• http://localhost:8888/wp-admin/

기본 자격 증명은 다음과 같습니다.

• 사용자 이름: admin
• 비밀번호: password

차단 플러그인 설정

이제 구축할 스타터 블록 플러그인이 필요합니다. 그러나 필요한 모든 파일과 폴더로 개발 블록 플러그인을 수동으로 만드는 대신 블록 개발을 시작하는 데 필요한 모든 파일과 구성을 제공하는 dev-tool을 간단히 실행할 수 있습니다.

다시 말하지만, 선택할 수 있는 몇 가지 옵션이 있습니다. 각각에 대해 살펴보겠습니다.

옵션 1: @wordpress/create-block을 사용하여 블록 플러그인 설정

@wordpress/create-block은 구텐베르크 블록 생성을 위한 공식 제로 구성 도구입니다.

블록 생성은 공식적으로 지원되는 WordPress 플러그인용 블록 등록을 위한 블록 생성 방법입니다. 구성이 없는 최신 빌드 설정을 제공합니다. PHP, JS, CSS 코드 및 프로젝트를 시작하는 데 필요한 모든 것을 생성합니다.

create-react-app에서 크게 영감을 받았습니다. @gaearon, 전체 Facebook 팀, React 커뮤니티에 큰 박수를 보냅니다.

로컬 환경이 시작되고 실행되면 npx @wordpress/create-block 명령을 실행하여 스타터 블록을 설정할 수 있습니다. 그러면 플러그인 스캐폴딩을 만들고 새 블록을 등록하는 데 필요한 모든 파일과 폴더가 제공됩니다. .

어떻게 작동하는지 테스트를 실행해 보겠습니다.

명령줄 도구에서 /wp-content/plugins/ 디렉터리로 이동하고 다음 명령을 실행합니다.

 npx @wordpress/create-block my-first-block

확인 메시지가 표시되면 y 를 입력하여 계속 진행합니다.

이 과정은 몇 분 정도 걸립니다. 완료되면 다음 응답을 받아야 합니다.

그리고 그게 다야!

이제 WordPress 개발 환경을 시작하고 WordPress 대시보드의 플러그인 화면으로 이동합니다. "My First Block"이라는 새 플러그인이 플러그인 목록에 추가되어야 합니다.

필요한 경우 플러그인을 활성화하고 새 블로그 게시물을 만들고 블록 삽입기를 위젯 섹션으로 스크롤한 다음 새 블록을 선택합니다.

이제 터미널로 돌아가 현재 디렉토리를 my-first-block 으로 변경합니다.

 cd my-first-block

그런 다음 다음 명령을 실행합니다.

 npm start

이를 통해 개발 모드에서 플러그인을 실행할 수 있습니다. 프로덕션 코드를 생성하려면 다음 명령을 사용해야 합니다.

 npm run build

옵션 2: create-guten-block을 사용하여 블록 플러그인 설정

create-guten-block 은 구텐베르크 블록을 구축하기 위한 타사 개발 도구입니다.

create-guten-block 은 React, webpack, ES6/7/8/Next, ESLint, Babel 등을 구성하지 않고도 몇 분 만에 WordPress Gutenberg 블록을 개발하는 제로 구성 dev-toolkit(#0CJS)입니다.

공식 create-block 생성 도구와 마찬가지로 create-guten-block 은 create-react-app을 기반으로 하며 번거로움 없이 첫 번째 블록 플러그인을 생성하는 데 도움이 될 수 있습니다.

이 툴킷은 다음을 포함하여 최신 WordPress 플러그인을 만드는 데 필요한 모든 것을 제공합니다.

• React, JSX 및 ES6 구문 지원.
• webpack 개발/프로덕션 빌드 프로세스 배후에서.
• 객체 확산 연산자와 같은 ES6 이외의 추가 언어.
• 자동 접두사가 붙은 CSS이므로 -webkit이나 다른 접두사가 필요하지 않습니다.
• 소스 맵을 사용하여 프로덕션용 JS, CSS 및 이미지를 번들로 제공하는 빌드 스크립트입니다.
• 단일 종속성 cgb-scripts를 사용하여 위의 도구에 대한 번거로움 없는 업데이트.

다음 주의 사항에 유의하십시오.

단점은 이러한 도구가 특정 방식으로 작동하도록 미리 구성되어 있다는 것입니다. 프로젝트에 더 많은 사용자 지정이 필요한 경우 "꺼내"고 사용자 지정할 수 있지만 이 구성을 유지 관리해야 합니다.

로컬 WordPress 웹 사이트가 있으면 명령줄 도구를 시작하고 설치의 /wp-content/plugins 폴더로 이동한 후 다음 명령을 실행합니다.

 npx create-guten-block my-first-block

프로젝트 구조가 생성되고 종속성이 다운로드되는 동안 1~2분 정도 기다려야 합니다.

프로세스가 완료되면 다음 화면이 표시되어야 합니다.

다음 이미지는 Visual Studio Code에서 터미널이 실행되는 프로젝트 구조를 보여줍니다.

이제 WordPress 대시보드로 돌아갑니다. 플러그인 화면에 새 항목이 나열되어야 합니다. my-first-block 플러그인입니다.

플러그인을 활성화하고 터미널로 돌아갑니다. 현재 디렉토리를 my-first-block 으로 변경한 다음 npm start 를 실행하십시오.

 cd my-first-block npm start

다음 응답을 받아야 합니다.

다시 말하지만, 이를 통해 개발 모드에서 플러그인을 실행할 수 있습니다. 프로덕션 코드를 생성하려면 다음을 사용해야 합니다.

 npm run build

플러그인을 활성화하고 새 게시물 또는 페이지를 만든 다음 블록을 탐색하고 새로운 Gutenberg 블록을 선택하십시오.

더 자세한 개요나 오류가 있는 경우 Ahmad Awais에서 제공하는 문서를 참조하십시오.

스타터 블록 스캐폴딩 연습

두 가지 개발 도구( create-block 또는 create-guten-block ) 중 무엇을 선택하든 이제 블록 플러그인을 빌드하기 위한 시작점으로 사용할 수 있는 블록 스캐폴딩이 있습니다.

그러나 블록 스캐폴딩이란 정확히 무엇입니까?

블록 스캐폴딩은 WordPress가 블록을 인식하는 데 필요한 지원 디렉토리 구조를 설명하는 약어입니다. 일반적으로 해당 디렉토리에는 index.php , index.js , style.css 및 기타 파일과 같은 파일이 포함되어 있으며 이는 차례로 register_block_type 과 같은 호출을 보유합니다.

우리는 블록 편집기 핸드북에서 사용되는 공식 블록 생성 개발 도구를 선택했습니다. 그러나 create-guten-block 과 같은 타사 도구를 사용하기로 결정했더라도 경험은 크게 다르지 않을 것입니다.

이제 create-block 도구에 대해 자세히 알아보겠습니다.

Create Block Dev-Tool 자세히 살펴보기

위에서 언급했듯이 Create Block은 Gutenberg 블록을 만드는 공식 명령줄 도구입니다. 터미널에서 @wordpress/create-block 을 실행하면 새 블록 유형을 등록하는 데 필요한 PHP, JS 및 SCSS 파일과 코드가 생성됩니다.

 npx @wordpress/create-block [options] [slug]

• [slug] (선택 사항) — 블록 슬러그를 할당하고 플러그인을 설치하는 데 사용됩니다.
• [options] (선택 사항) — 사용 가능한 옵션

기본적으로 ESNext 템플릿이 할당됩니다. 이것은 JSX 구문이 추가된 다음 버전의 JavaScript를 얻을 수 있음을 의미합니다.

블록 이름을 생략하면 명령이 대화식 모드에서 실행되어 파일을 생성하기 전에 여러 옵션을 사용자 지정할 수 있습니다.

 npx @wordpress/create-block

아래 이미지는 공식 블록 생성 도구로 생성된 블록 플러그인의 파일 구조를 보여줍니다.

즉, 새로운 블록 플러그인의 기본 파일과 폴더를 살펴보겠습니다.

플러그인 파일

기본 플러그인 파일을 사용하여 서버에 블록을 등록합니다.

 /** * Plugin Name: My First Block * Description: Example block written with ESNext standard and JSX support – build step required. * Requires at least: 5.8 * Requires PHP: 7.0 * Version: 0.1.0 * Author: The WordPress Contributors * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: my-first-block * * @package create-block */ /** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes, it registers also all assets so they can be enqueued * through the block editor in the corresponding context. * * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/ */ function create_block_my_first_block_block_init() { register_block_type( __DIR__ ); } add_action( 'init', 'create_block_my_first_block_block_init' );

register_block_type 함수는 block.json 파일에 저장된 메타데이터를 사용하여 서버에 블록 유형을 등록합니다.

이 함수는 두 개의 매개변수를 사용합니다.

• 네임스페이스를 포함한 블록 유형 이름, block.json 파일이 있는 폴더의 경로 또는 완전한 WP_Block_Type 객체
• 블록 유형 인수의 배열

위의 코드에서 블록 유형 인수는 __DIR__ 매직 상수에 의해 제공됩니다. 즉, block.json 파일은 플러그인 파일과 같은 폴더에 있습니다.

package.json 파일

package.json 파일은 프로젝트에 대한 JavaScript 속성 및 스크립트를 정의합니다. 여기에서 프로젝트 종속성을 설치할 수 있습니다.

이 파일의 의미를 더 잘 이해하려면 즐겨 사용하는 코드 편집기로 파일을 엽니다.

 { "name": "my-first-block", "version": "0.1.0", "description": "Example block written with ESNext standard and JSX support – build step required.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", "main": "build/index.js", "scripts": { "build": "wp-scripts build", "format": "wp-scripts format", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "start": "wp-scripts start", "packages-update": "wp-scripts packages-update" }, "dependencies": { "@wordpress/block-editor": "^7.0.1", "@wordpress/blocks": "^11.0.1", "@wordpress/i18n": "^4.2.1" }, "devDependencies": { "@wordpress/scripts": "^18.0.0" } }

scripts 속성은 npm run [cmd] 를 사용하여 패키지의 수명 주기에서 다양한 시간에 실행되는 명령을 포함하는 사전입니다.

이 문서에서는 다음 명령을 사용합니다.

• npm run build — (압축된) 프로덕션 빌드 생성
• npm run start — (압축되지 않은) 개발 빌드 생성

dependencies 과 devDependencies 는 패키지 이름을 버전에 매핑하는 두 개의 개체입니다. dependencies 은 프로덕션에 필요하지만 devDependences 는 로컬 개발에만 필요합니다(자세히 읽기).

유일한 기본 개발 종속성은 @wordpress/scripts 패키지로, "WordPress 개발에 맞게 조정된 재사용 가능한 스크립트 모음"으로 정의됩니다.

block.json 파일

WordPress 5.8부터 block.json 메타데이터 파일은 블록 유형을 등록하는 표준 방법입니다.

block.json 파일이 있으면 WordPress 플러그인 디렉토리에서 향상된 성능과 가시성을 포함하여 여러 가지 이점이 있습니다.

성능 관점에서 테마가 지연 로드 자산을 지원할 때 block.json 에 등록된 블록은 즉시 최적화된 자산 대기열을 갖게 됩니다. style 또는 script 속성에 나열된 프런트엔드 CSS 및 JavaScript 자산은 페이지에 블록이 있을 때만 대기열에 추가되어 페이지 크기가 줄어듭니다.

@wordpress/create-block 명령을 실행하면 다음 block.json 파일이 생성됩니다.

 { "apiVersion": 2, "name": "create-block/my-first-block", "version": "0.1.0", "title": "My First Block", "category": "widgets", "icon": "smiley", "description": "Example block written with ESNext standard and JSX support – build step required.", "supports": { "html": false }, "textdomain": "my-first-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

다음은 기본 속성의 전체 목록입니다.

• apiVersion — 블록에서 사용하는 API 버전(현재 버전은 2)
• name — 네임스페이스를 포함하는 블록의 고유 식별자
• version — 블록의 현재 버전
• title — 블록의 표시 제목
• category — 블록 카테고리
• icon — Dashicon 슬러그 또는 사용자 정의 SVG 아이콘
• description — 블록 인스펙터에서 볼 수 있는 짧은 설명
• supports — 편집기에서 사용되는 기능을 제어하는 ​​옵션 세트
• textdomain — 플러그인 텍스트 도메인
• editorScript — 편집기 스크립트 정의
• editorStyle — 편집기 스타일 정의
• style — 블록에 대한 대체 스타일 제공

위에 나열된 속성 외에도 블록에 저장된 데이터에 대한 정보를 제공하는 attributes 개체를 정의할 수 있습니다. block.json 에서 키/값 쌍으로 원하는 수의 속성을 설정할 수 있습니다. 여기서 키는 속성 이름이고 값은 속성 정의입니다.

속성 정의의 다음 예를 살펴보십시오.

 "attributes": { "content": { "type": "array", "source": "children", "selector": "p" }, "align": { "type": "string", "default": "none" }, "link": { "type": "string", "default": "https://kinsta.com" } },

이 기사의 뒷부분에서 block.json 파일에 대해 더 자세히 알아볼 것이지만 block.json 메타데이터 및 속성에 대한 자세한 정보는 블록 편집기 핸드북을 확인하는 것이 좋습니다.

src 폴더

src 폴더는 개발이 일어나는 곳입니다. 해당 폴더에서 다음 파일을 찾을 수 있습니다.

• index.js
• 편집.js
• save.js
• Editor.scss
• 스타일.scss

index.js

index.js 파일이 시작점입니다. 여기에서 종속성을 가져오고 클라이언트에 블록 유형을 등록합니다.

 import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; import Edit from './edit'; import save from './save'; registerBlockType('create-block/my-first-block', { edit: Edit, save, });

첫 번째 명령문은 @wordpress/blocks 패키지에서 registerBlockType 함수를 가져옵니다. 다음 import 문은 Edit 및 save 기능과 함께 스타일시트를 가져옵니다.

registerBlockType 함수는 클라이언트에 구성 요소를 등록합니다. 이 함수는 블록 이름 namespace/block-name (서버에 등록된 것과 동일)과 블록 구성 객체라는 두 개의 매개변수를 사용합니다.

Edit 기능은 블록 편집기에서 렌더링된 대로 블록 인터페이스를 제공하는 반면, save 기능은 직렬화되어 데이터베이스에 저장될 구조를 제공합니다(더 읽기).

편집.js

edit.js 는 블록 관리 인터페이스를 빌드할 위치입니다.

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

먼저 @wordpress/i18n 패키지(이 패키지에는 번역 기능의 JavaScript 버전이 포함되어 있음), useBlockProps React 후크 및 editor.scss 파일에서 __ 함수를 가져옵니다.

그런 다음 React 구성 요소를 내보냅니다(import 및 export 문에 대해 자세히 알아보기).

save.js

save.js 파일은 데이터베이스에 저장할 블록 구조를 만드는 곳입니다.

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; export default function save() { return ( <p {...useBlockProps.save()}> {__( 'My First Block – hello from the saved content!', 'my-first-block' )} </p> ); }

editor.scss 및 style.scss

스크립트와는 별도로 두 개의 SASS 파일이 src 폴더에 있습니다. editor.scss 파일에는 편집기 컨텍스트에서 블록에 적용된 스타일이 포함되어 있고 style.scss 파일에는 프런트엔드에 표시할 블록 스타일이 포함되어 있습니다. 이 가이드의 두 번째 부분에서 이러한 파일에 대해 자세히 알아볼 것입니다.

node_modules 및 빌드 폴더

node_modules 폴더에는 노드 모듈과 해당 종속성이 포함됩니다. 노드 패키지는 이 기사의 범위를 벗어나므로 자세히 다루지는 않겠지만 npm이 패키지를 설치하는 위치에 대한 자세한 내용은 이 기사에서 읽을 수 있습니다.

build 폴더에는 빌드 프로세스에서 생성된 JS 및 CSS 파일이 포함되어 있습니다. ESNext 구문 및 JavaScript 빌드 설정 가이드에서 빌드 프로세스에 대해 자세히 알아볼 수 있습니다.

프로젝트: 첫 번째 구텐베르크 블록 건설

손을 더럽힐 시간입니다. 이 섹션에서는 Affiliate Block이라는 CTA 블록을 제공하는 플러그인을 만드는 방법을 알려줍니다.

블록은 왼쪽에 이미지가 있고 오른쪽에 텍스트 단락이 있는 두 개의 열로 구성됩니다. 사용자 정의 가능한 링크가 있는 버튼이 텍스트 아래에 배치됩니다.

이것은 단순한 예일 뿐이지만 구텐베르크 블록 개발의 기본 사항을 다룰 수 있습니다. 기본 사항을 명확하게 이해하고 나면 블록 편집기 핸드북 및 사용 가능한 기타 방대한 리소스의 도움을 받아 점점 더 복잡한 구텐베르크 블록을 생성할 수 있습니다.

로컬 개발 환경에서 실행 중인 최신 버전의 WordPress가 있다고 가정하고 여기에서 배울 내용은 다음과 같습니다.

• 스타터 블록 플러그인을 설정하는 방법
• 직장에서 block.json
• 기본 제공 구성 요소 사용: RichText 구성 요소
• 블록 도구 모음에 컨트롤 추가하기
• 차단 설정 사이드바 사용자화하기
• 외부 링크 추가 및 사용자 정의
• 여러 블록 스타일 추가
• InnerBlocks 구성 요소를 사용하여 블록 중첩
• 추가 개선 사항

준비… 설정… 가!

스타터 블록 플러그인을 설정하는 방법

명령줄 도구를 시작하고 /wp-content/plugins 폴더로 이동합니다.

이제 다음 명령을 실행합니다.

 npx @wordpress/create-block

이 명령은 대화형 모드에서 블록을 등록하기 위한 PHP, SCSS 및 JS 파일을 생성하므로 블록에 필요한 데이터를 쉽게 추가할 수 있습니다. 이 예에서는 다음 세부 정보를 사용합니다.

• 블록 슬러그 : my-affiliate-block
• 내부 네임스페이스 : my-affiliate-plugin
• 블록 표시 제목 : 제휴 블록
• 짧은 블록 설명 : Kinsta 리더를 위한 예제 블록
• 다시콘 : 돈
• 카테고리명 : 디자인
• 플러그인 작성자 : 귀하의 이름
• 라이센스 : –
• 라이선스 텍스트 링크 : –
• 현재 플러그인 버전 : 0.1.0

플러그인과 모든 종속성을 설치하는 데 몇 분 정도 걸립니다. 프로세스가 완료되면 다음 응답이 표시됩니다.

이제 /wp-content/plugins 폴더에서 다음 명령을 실행합니다.

 cd my-affiliate-block

마지막으로 플러그인 폴더(이 예에서는 my-affiliate-block )에서 다음을 사용하여 개발을 시작할 수 있습니다.

 npm start

이제 플러그인 화면을 열어 Affiliate Block 플러그인을 찾아 활성화하십시오.

새 게시물을 만들고 블록 삽입기를 열고 디자인 범주까지 아래로 스크롤합니다. 제휴 블록을 추가하려면 클릭하십시오.

직장에서 block.json

앞에서 언급했듯이 서버 측 블록 등록은 기본 .php 파일에서 발생합니다. 그러나 .php 파일에서 설정을 정의하지 않습니다. 대신 block.json 파일을 사용할 것입니다.

따라서 block.json 을 다시 열고 기본 설정을 자세히 살펴보십시오.

 { "apiVersion": 2, "name": "my-affiliate-plugin/my-affiliate-block", "version": "0.1.0", "title": "Affiliate Block", "category": "design", "icon": "money", "description": "An example block for Kinsta readers", "supports": { "html": false }, "textdomain": "my-affiliate-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

스크립트 및 스타일

editorScript , editorStyle 및 style 속성은 프론트엔드 및 백엔드 스크립트 및 스타일에 대한 상대 경로를 제공합니다.

여기에 정의된 스크립트와 스타일은 자동으로 등록되고 WordPress에 의해 대기열에 추가되기 때문에 수동으로 등록할 필요가 없습니다. 이를 증명하려면 브라우저 검사기를 실행하고 네트워크 탭을 엽니다.

위 이미지에서 볼 수 있듯이 빌드 폴더에 있는 index.js 스크립트는 PHP 코드를 추가하지 않고도 정기적으로 대기열에 추가됩니다.

UI 레이블

title 및 description 속성은 편집기에서 블록을 식별하는 데 필요한 레이블을 제공합니다.

키워드

앞에서 언급했듯이 속성과 속성을 사용하여 블록 설정을 정확하게 구성할 수 있습니다. 예를 들어 사용자가 블록을 검색하는 데 도움이 되도록 하나 이상의 keywords 를 추가할 수 있습니다.

 { "keywords": [ "kinsta", "affiliate", "money" ] }

이제 빠른 삽입기에 "kinsta", "affiliate" 또는 "money"를 입력하면 편집기에서 Affiliate 블록을 제안합니다.

현지화

If you are wondering how the localization of the strings in the JSON file happens, here is the answer:

In JavaScript, you can use now registerBlockTypeFromMetadata method from @wordpress/blocks package to register a block type using the metadata loaded from block.json file. All localized properties get automatically wrapped in _x (from @wordpress/i18n package) function calls similar to how it works in PHP with register_block_type_from_metadata . The only requirement is to set the textdomain property in the block.json file.

Here we are using the registerBlockType function instead of registerBlockTypeFromMetadata , as the latter has been deprecated since Gutenberg 10.7, but the mechanism is the same.

Using Built-In Components: The RichText Component

The elements that make up a Gutenberg block are React components, and you can access these components via the wp global variable. For example, try to type wp.editor into your browser's console. This will give you the full list of the components included in the wp.editor module.

Scroll through the list and guess what components are meant for by their names.

Similarly, you can check the list of components included in the wp.components module:

Now go back to the edit.js file and take a closer look at the script:

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

이 코드는 단순하고 편집할 수 없는 텍스트로 정적 블록을 생성합니다. 하지만 우리는 쉽게 바꿀 수 있습니다.

텍스트를 편집 가능하게 만들려면 현재 <p> 태그를 입력 내용을 편집 가능하게 만드는 구성 요소로 바꿔야 합니다. 이를 위해 Gutenberg는 내장된 RichText 구성 요소를 제공합니다.

블록에 내장 구성요소를 추가하는 것은 5단계 프로세스입니다.

1. WordPress 패키지에서 필요한 구성 요소 가져오기
2. 해당 요소를 JSX 코드에 포함
3. block.json 파일에 필요한 속성 정의
4. 이벤트 핸들러 정의
5. 데이터를 저장

1단계: WordPress 패키지에서 필수 구성 요소 가져오기

이제 edit.js 파일을 열고 다음 import 문을 변경합니다.

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

…에게:

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

이런 식으로 @wordpress/block-editor 패키지에서 useBlockProps 함수와 RichText 구성 요소를 가져옵니다.

useBlockProps

useBlockProps React 후크는 블록의 래퍼 요소를 표시합니다.

API 버전 2를 사용할 때 블록의 래퍼 요소를 표시하려면 블록의 edit 기능에서 새로운 useBlockProps 후크를 사용해야 합니다. 후크는 블록 동작을 활성화하는 데 필요한 속성과 이벤트 핸들러를 삽입합니다. 블록 요소에 전달하려는 모든 속성은 useBlockProps 를 통해 전달되어야 하며 반환된 값은 요소에 분산되어야 합니다.

간단히 말해서 useBlockProps 자동으로 속성과 클래스를 래퍼 요소(이 예에서는 p 요소)에 할당합니다.

래퍼 요소에서 useBlockProps 를 제거하면 블록 기능 및 스타일에 액세스할 수 없는 간단한 텍스트 문자열이 생성됩니다.

나중에 설명하겠지만 속성의 객체를 useBlockProps 에 전달하여 출력을 사용자 정의할 수도 있습니다.

서식 있는 텍스트

RichText 구성 요소는 컨텐츠 편집 가능한 입력을 제공하여 사용자가 컨텐츠를 편집하고 형식을 지정할 수 있도록 합니다.

GitHub에 설명된 구성 요소는 gutenberg/packages/block-editor/src/components/rich-text/README.md에서 찾을 수 있습니다.

2단계: JSX 코드에 해당 요소 포함

 ... const blockProps = useBlockProps(); return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> );

코드를 한 줄씩 주석 처리해 보겠습니다.

• tagName — 편집 가능한 HTML 요소의 태그 이름
• onChange — 요소의 내용이 변경될 때 호출되는 함수
• allowedFormats — 허용되는 형식의 배열입니다. 기본적으로 모든 형식이 허용됩니다.
• value — 편집 가능하게 만들 HTML 문자열
• placeholder — 요소가 비어 있을 때 표시할 자리 표시자 텍스트

3단계: block.json 파일에서 필요한 속성 정의

속성은 풍부한 콘텐츠, 배경색, URL 등과 같이 블록에 저장된 데이터에 대한 정보를 제공합니다.

키/값 쌍의 attributes 개체 내에서 임의의 수의 속성을 설정할 수 있습니다. 여기서 키는 속성 이름이고 값은 속성 정의입니다.

이제 block.json 파일을 열고 다음 attributes 소품을 추가하십시오.

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" } },

content 속성을 사용하면 편집 가능한 필드에 사용자가 입력한 텍스트를 저장할 수 있습니다.

• type 은 속성에 의해 저장된 데이터의 유형을 나타냅니다. enum 속성을 정의하지 않는 한 유형은 필수입니다.
• source 는 속성 값이 게시물 콘텐츠에서 추출되는 방법을 정의합니다. 이 예에서는 HTML 콘텐츠입니다. 소스 속성을 제공하지 않으면 데이터가 블록 구분 기호에 저장됩니다(자세히 읽기).
• selector HTML 태그이거나 클래스 이름이나 id 속성과 같은 다른 선택자입니다.

속성의 개체 Edit 기능을 전달합니다. 따라서 edit.js 파일로 돌아가서 다음과 같이 변경합니다.

 export default function Edit( { attributes, setAttributes } ) { ... }

4단계: 이벤트 핸들러 정의

RichText 요소에는 요소의 내용이 변경될 때 호출할 함수를 제공하는 onChange 속성이 있습니다.

해당 함수를 정의하고 전체 edit.js 스크립트를 살펴보겠습니다.

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> ); }

이제 파일을 저장하고 터미널 창에서 npm run start 를 실행합니다. 그런 다음 WordPress 대시보드로 돌아가서 새 게시물 또는 페이지를 만들고 Affiliate 블록을 추가합니다.

일부 텍스트를 추가하고 코드 보기로 전환합니다. 코드는 다음과 같아야 합니다.

 <!-- wp:my-affiliate-plugin/my-affiliate-block --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable Gutenberg block </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

이제 페이지를 저장하고 프론트엔드 결과를 확인하면 변경 사항이 사이트에 영향을 미치지 않기 때문에 약간 실망할 수 있습니다. 게시물이 저장될 때 데이터베이스에 사용자 입력을 저장하려면 save.js 파일을 수정해야 하기 때문입니다.

5단계: 데이터 저장

이제 save.js 파일을 열고 스크립트를 다음과 같이 변경합니다.

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } /> ); }

이것이 우리가 여기서 하는 일입니다:

• block-editor 패키지에서 RichText 구성 요소를 가져옵니다.
• 객체 인수를 통해 여러 속성을 save 함수에 전달합니다(이 예에서는 attributes 속성만 전달합니다).
• RichText 구성 요소의 콘텐츠 반환

블록 편집기 핸드북에서 RichText 구성 요소에 대한 자세한 내용을 읽고 Github에서 전체 소품 목록을 찾을 수 있습니다.

이제 한 단계 더 나아가 보겠습니다. 다음 섹션에서는 블록 도구 모음에 컨트롤을 추가하는 방법을 배웁니다.

블록 도구 모음에 컨트롤 추가하기

블록 도구 모음에는 사용자가 블록 콘텐츠의 일부를 조작할 수 있는 컨트롤 세트가 포함되어 있습니다. 각 도구 모음 컨트롤에 대해 구성 요소를 찾을 수 있습니다.

예를 들어, 블록에 대한 텍스트 정렬 컨트롤을 추가할 수 있습니다. @wordpress/block-editor 패키지에서 두 개의 구성 요소를 가져오기만 하면 됩니다.

이전 예와 동일한 단계를 거칩니다.

1. WordPress 패키지에서 필수 구성 요소 가져오기
2. JSX 코드에 해당 요소 포함
3. block.json 파일에 필요한 속성 정의
4. 이벤트 핸들러 정의
5. 데이터를 저장

1단계: @wordpress/block-editor에서 BlockControls 및 AlignmentControl 구성 요소 가져오기

블록 도구 모음에 정렬 컨트롤을 추가하려면 두 가지 구성 요소가 필요합니다.

• BlockControls 는 제어의 동적 도구 모음을 렌더링합니다(문서화되지 않음).
• AlignmentControl 은 선택한 블록에 대한 정렬 옵션을 표시하는 드롭다운 메뉴를 렌더링합니다(자세히 읽기).

edit.js 파일을 열고 아래와 같이 import 문을 편집합니다.

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

2단계: BlockControls 및 AlignmentControl 요소 추가

Edit 기능으로 이동하여 <BlockControls /> 요소를 <RichText /> 와 같은 수준에 삽입하십시오. 그런 다음 <BlockControls /> <AlignmentControl /> 을 추가합니다.

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

위의 코드에서 <> 및 </> 는 React 프래그먼트를 선언하기 위한 짧은 구문으로, React에서 여러 요소를 반환하는 방법입니다.

이 예에서 AlignmentControl 에는 두 가지 속성이 있습니다.

• value 은 요소의 현재 값을 제공합니다.
• onChange 는 값이 변경될 때 실행할 이벤트 핸들러를 제공합니다.

RichText 요소에 대한 추가 속성도 정의했습니다(예제를 통해 속성의 전체 목록 확인).

3단계: block.json에서 align 속성 정의

이제 block.json 파일로 이동하여 align 속성을 추가합니다.

 "align": { "type": "string", "default": "none" }

터미널로 돌아가 ^C 로 현재 프로세스를 중지하고 npm run start 로 스크립트를 다시 시작합니다. 그런 다음 블록 편집기로 돌아가 페이지를 새로 고친 다음 블록을 선택합니다. 정렬 컨트롤이 있는 블록 도구 모음이 표시되어야 합니다.

이제 새 정렬 컨트롤을 사용하여 블록 콘텐츠의 형식을 지정하려고 하면 아무 일도 일어나지 않는 것을 볼 수 있습니다. 아직 이벤트 핸들러를 정의하지 않았기 때문입니다.

4단계: 이벤트 처리기 정의

이제 onChangeAlign 을 정의하십시오.

 const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) }

newAlign 이 undefined 경우 newAlign 을 none 으로 설정합니다. 그렇지 않으면 newAlign 을 사용합니다.

edit.js 스크립트가 완료되어야 합니다(지금은):

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

이제 편집기로 돌아가서 블록 콘텐츠를 정렬할 수 있습니다.

블록 내용과 속성을 데이터베이스에 저장하려면 저장 기능을 수정해야 합니다.

5단계: 데이터 저장

save.js 를 열고 save 기능을 다음과 같이 변경합니다.

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } style={ { textAlign: attributes.align } } /> ); }

마지막으로 코드를 더 읽기 쉽게 만들기 위해 구조 해제 할당 구문을 사용하여 attribute 개체에서 개별 속성을 추출할 수 있습니다.

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align } } /> ); }

파일을 저장하고 프로세스를 다시 시작한 다음 코드 편집기 모드에서 편집기로 돌아갑니다. 코드는 다음과 같아야 합니다.

 <!-- wp:my-affiliate-plugin/my-affiliate-block {"align":"right"} --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable <strong><em>Gutenberg</em></strong> <em>block</em> </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

그리고 그게 다야! 블록 도구 모음에 정렬 컨트롤을 추가했습니다.

블록 편집기 핸드북에서 블록 도구 모음 컨트롤에 대해 자세히 읽을 수 있습니다.

차단 설정 사이드바 사용자화하기

블록 설정 사이드바에 컨트롤을 추가할 수도 있습니다(또는 애플리케이션에 대한 새 사이드바를 생성할 수도 있음).

API는 이를 위한 InspectorControls 구성 요소를 제공합니다.

블록 편집기 핸드북은 설정 사이드바를 사용하는 방법을 설명합니다:

설정 사이드바는 자주 사용하지 않는 설정이나 더 많은 화면 공간이 필요한 설정을 표시하는 데 사용됩니다. 설정 사이드바는 블록 수준 설정에만 사용해야 합니다.

블록 내에서 선택한 콘텐츠에만 영향을 주는 설정이 있는 경우(예: 단락 내에서 선택한 텍스트에 대한 "굵게" 설정): 설정 사이드바 안에 배치하지 마십시오. 설정 사이드바는 HTML 모드에서 블록을 편집할 때도 표시되므로 블록 수준 설정만 포함해야 합니다.

다시:

1. WordPress 패키지에서 필수 구성 요소 가져오기
2. JSX 코드에 해당 요소 포함
3. block.json 파일에 필요한 속성 정의
4. 이벤트 핸들러 정의
5. 데이터를 저장

1단계. @wordpress/block-editor에서 InspectorControls 및 PanelColorSettings 구성 요소 가져오기

사용자가 블록의 특정 측면을 사용자 지정할 수 있도록 여러 컨트롤을 추가할 수 있습니다. 예를 들어 색상 제어판을 제공할 수 있습니다. 이렇게 하려면 block-editor 모듈에서 InspectorControls 및 PanelColorSettings 구성 요소를 가져와야 합니다.

 import { useBlockProps, RichText, AlignmentControl, BlockControls, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';

2단계: JSX 코드에 해당 요소 포함

이제 Edit 함수에서 반환된 JSX에 해당 요소를 추가할 수 있습니다.

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <InspectorControls> <PanelColorSettings title={ __( 'Color settings', 'my-affiliate-block' ) } initialOpen={ false } colorSettings={ [ { value: textColor, onChange: onChangeTextColor, label: __( 'Text color', 'my-affiliate-block' ), }, { value: backgroundColor, onChange: onChangeBackgroundColor, label: __( 'Background color', 'my-affiliate-block' ), } ] } /> </InspectorControls> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> </> ); }

RichText 요소의 style 속성도 업데이트했습니다.

 <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } />

3단계: block.json에 필요한 속성 정의

이제 block.json 파일에서 backgroundColor 및 textColor 속성을 정의합니다.

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" }, "align": { "type": "string", "default": "none" }, "backgroundColor": { "type": "string" }, "textColor": { "type": "string" } },

4단계: 이벤트 처리기 정의

이제 사용자 입력에서 backgroundColor 및 textColor 를 업데이트하는 두 가지 함수를 정의해야 합니다.

 const onChangeBackgroundColor = ( newBackgroundColor ) => { setAttributes( { backgroundColor: newBackgroundColor } ) } const onChangeTextColor = ( newTextColor ) => { setAttributes( { textColor: newTextColor } ) }

5단계: 데이터 저장

마지막 단계: save.js 파일을 열고 스크립트를 다음과 같이 변경합니다.

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align, backgroundColor, textColor } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> ); }

이제 프로세스를 중지하고(^C) npm run start 를 다시 실행합니다. 페이지를 새로고침하고 블록의 인스턴스를 삭제한 다음 게시물에 다시 추가합니다.

변경하고 게시물을 저장한 다음 프런트엔드에서 봅니다. 블록 편집기에서 변경한 사항은 전면 사이트에 반영되어야 합니다.

외부 링크 추가 및 사용자 정의

이 섹션에서는 블록 유형에 새 구성요소를 추가합니다.

• 사용자가 Affiliate 블록에 사용자 지정 가능한 링크를 추가할 수 있는 ExternalLink 구성 요소
• 사용자가 링크 설정을 사용자화할 수 있는 여러 사이드바 컨트롤

1단계. @wordpress/components에서 구성 요소 가져오기

이제 @wordpress/components 에서 여러 구성 요소를 가져와야 합니다. edit.js 파일을 열고 다음 import 문을 추가합니다.

 import { TextControl, PanelBody, PanelRow, ToggleControl, ExternalLink } from '@wordpress/components';

• PanelBody 는 설정 사이드바에 접을 수 있는 컨테이너를 추가합니다.
• PaneRow 는 사이드바 컨트롤에 대한 일반 컨테이너를 생성합니다.
• TextControl 은 텍스트 입력 컨트롤을 제공합니다.
• ToggleControl 은 사용자가 특정 옵션을 활성화/비활성화할 수 있는 토글을 제공합니다.
• ExternalLink 는 외부 링크를 추가하는 간단한 구성 요소입니다.

2단계. 해당 요소를 JSX 코드에 포함

먼저 div 컨테이너에서 동일한 수준의 RichText 에 ExternalLink 요소를 추가합니다.

 <div { ...blockProps }> <RichText ... /> <ExternalLink href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "" } > { linkLabel } </ExternalLink> </div>

ExternalLink 구성 요소는 문서화되어 있지 않으므로 구성 요소 자체를 참조하여 사용 가능한 속성 목록을 가져왔습니다. 여기서는 href , className 및 rel 속성을 사용하고 있습니다.

기본적으로 rel 속성 값은 noopener noreferrer 로 설정됩니다. 우리 코드는 토글 컨트롤이 켜져 있을 때 결과 태그 a rel 속성에 nofollow 키워드를 추가합니다.

이제 차단 사이드바에 링크 설정을 추가할 수 있습니다.

먼저 PanelColorSettings 와 동일한 수준에서 InspectorControls 내부에 PanelBody 요소를 추가합니다.

 <InspectorControls> <PanelColorSettings ... /> <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > ... </PanelBody> </InspectorControls>

이 작업을 수행하는 방법은 다음과 같습니다.

1. title 속성은 패널 제목을 제공합니다.
2. initialOpen 은 패널이 처음에 열려 있는지 여부를 설정합니다.

다음으로 PanelBody 내부에 두 개의 PanelRow 요소를 추가하고 각 PanelBody 내부에 TextControl 요소를 PanelRow 합니다.

 <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > <PanelRow> <fieldset> <TextControl label={__( 'Affiliate link', 'my-affiliate-block' )} value={ affiliateLink } onChange={ onChangeAffiliateLink } help={ __( 'Add your affiliate link', 'my-affiliate-block' )} /> </fieldset> </PanelRow> <PanelRow> <fieldset> <TextControl label={__( 'Link label', 'my-affiliate-block' )} value={ linkLabel } onChange={ onChangeLinkLabel } help={ __( 'Add link label', 'my-affiliate-block' )} /> </fieldset> </PanelRow> </PanelBody>

위의 코드는 이제 매우 간단해 보입니다. 두 개의 텍스트 컨트롤을 통해 사용자는 링크 레이블과 URL을 설정할 수 있습니다.

또한 속성을 포함할지 여부와 같은 특정 옵션을 켜고 끄기 위해 ToggleControl 이 있는 추가 PanelRow 를 추가합니다.

 <PanelRow> <fieldset> <ToggleControl label="Add rel = nofollow" help={ hasLinkNofollow ? 'Has rel nofollow.' : 'No rel nofollow.' } checked={ hasLinkNofollow } onChange={ toggleNofollow } /> </fieldset> </PanelRow>

3단계: block.json에 필요한 속성 정의

이제 block.json 파일에서 affiliateLink Link , linkLabel 및 hasLinkNofollow 속성을 정의합니다.

 "affiliateLink": { "type": "string", "default": "" }, "linkLabel": { "type": "string", "default": "Check it out!" }, "hasLinkNofollow": { "type": "boolean", "default": false }

여기에 더 추가할 사항이 없습니다! 이벤트 처리 기능을 정의하는 방법으로 넘어갑시다.

4단계: 이벤트 처리기 정의

edit.js 파일로 돌아가서 다음 기능을 추가하십시오.

 const onChangeAffiliateLink = ( newAffiliateLink ) => { setAttributes( { affiliateLink: newAffiliateLink === undefined ? '' : newAffiliateLink } ) } const onChangeLinkLabel = ( newLinkLabel ) => { setAttributes( { linkLabel: newLinkLabel === undefined ? '' : newLinkLabel } ) } const toggleNofollow = () => { setAttributes( { hasLinkNofollow: ! hasLinkNofollow } ) }

이러한 함수는 사용자 입력 시 해당 속성 값을 업데이트합니다.

5단계: 데이터 저장

마지막으로 save.js 에서 save 함수를 업데이트해야 합니다.

 export default function save( { attributes } ) { const { align, content, backgroundColor, textColor, affiliateLink, linkLabel, hasLinkNofollow } = attributes; const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <RichText.Content tagName="p" value={ content } style={ { backgroundColor: backgroundColor, color: textColor } } /> <p> <a href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "noopener noreferrer" } > { linkLabel } </a> </p> </div> ); }

여기서는 ExternalLink 대신 일반 요소를 사용 a .

이제 데이터를 저장하고 환경을 다시 시작하십시오.

여러 블록 스타일 추가

이전 섹션에서 사용자가 사용자 입력을 정렬할 수 있도록 블록 도구 모음 컨트롤을 추가하는 방법을 배웠습니다. 블록 도구 모음에 더 많은 스타일 컨트롤을 추가할 수 있지만 사용자가 한 번의 클릭으로 선택할 수 있는 미리 정의된 블록 스타일 세트를 제공할 수도 있습니다.

이를 위해 Block API의 유용한 기능인 Block Styles를 사용할 것입니다.

block.json styles 속성을 정의하고 스타일시트에서 해당 스타일을 선언하기만 하면 됩니다.

예를 들어 다음과 같은 스타일 배열을 추가할 수 있습니다.

 "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name": "border", "label": "Border" } ],

이것으로 기본 스타일과 border 라는 추가 스타일을 추가했습니다. 이제 블록 편집기로 돌아가십시오.

사용자는 블록 전환기를 클릭한 다음 블록 설정 사이드바 에서 스타일 패널 을 찾아 스타일을 사용할 수 있습니다.

스타일을 선택하고 p 요소에 적용된 클래스를 확인합니다. 블록을 마우스 오른쪽 버튼으로 클릭하고 검사 . 다음과 같이 구성된 이름으로 새 클래스가 추가되었습니다.

 is-style-{style-name}

"Border" 스타일을 선택했다면 is-style-border 클래스가 p 요소에 추가됩니다. "기본" 스타일을 선택한 경우 대신 is-style-default 클래스가 추가됩니다.

이제 CSS 속성만 선언하면 됩니다. editor.scss 파일을 열고 현재 스타일을 다음으로 바꿉니다.

 .wp-block-my-affiliate-plugin-my-affiliate-block { padding: 2px; &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

이제 style.scss 에서도 동일한 작업을 수행할 수 있습니다.

 .wp-block-my-affiliate-plugin-my-affiliate-block { &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

프로세스를 중지하고(^C) npm run start 를 다시 실행합니다.

그리고 그게 다야! 페이지를 새로 고치고 새로운 블록 스타일로 즐거운 시간을 보내십시오.

InnerBlocks 구성 요소를 사용하여 Gutenberg 블록 중첩

완벽하게 작동하지만 당사의 제휴 블록은 여전히 ​​매력적이지 않습니다. 청중을 더 매력적으로 만들기 위해 이미지를 추가할 수 있습니다.

이것은 블록에 복잡성을 추가할 수 있지만 다행히도 Gutenberg는 중첩 블록 구조를 만드는 데 사용할 수 있는 특정 구성 요소를 제공하기 때문에 바퀴를 다시 만들 필요가 없습니다.

InnerBlocks 구성 요소는 다음과 같이 정의됩니다.

InnerBlocks 는 중첩된 블록 콘텐츠를 활성화하기 위해 블록 구현에 사용할 수 있는 한 쌍의 구성 요소를 내보냅니다.

먼저 src 폴더에 새 .js 파일을 만들어야 합니다. 이 예에서는 이 파일을 container.js 라고 합니다.

이제 새 리소스를 index.js 파일로 가져와야 합니다.

 import './container';

container.js 로 돌아가 필요한 구성 요소를 가져옵니다.

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

다음 단계는 블록이 배치될 구조를 제공하는 템플릿을 정의하는 것입니다. 다음 예에서는 핵심 Image 블록과 사용자 지정 Affiliate 블록을 포함하는 두 개의 열로 구성된 템플릿을 정의합니다.

 const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ];

템플릿은 blockTypes(블록 이름 및 선택적 속성)의 배열로 구성됩니다.

위의 코드에서는 여러 속성을 사용하여 Columns 및 Column 블록을 구성했습니다. 특히 templateLock: 'all' 속성은 사용자가 기존 블록을 추가, 재정렬 또는 삭제하지 않도록 열 블록을 잠급니다. templateLock 은 다음 값 중 하나를 사용할 수 있습니다.

• all — InnerBlocks 가 잠겨 있고 블록을 추가, 재정렬 또는 제거할 수 없습니다.
• insert — 블록은 재정렬하거나 제거할 수만 있습니다.
• false — 템플릿이 잠겨 있지 않습니다.

그런 다음 템플릿이 InnerBlocks 요소에 할당됩니다.

 <InnerBlocks template={ TEMPLATE } templateLock="all" />

호환성 문제를 방지하기 위해 InnerBlocks 구성 요소에 templateLock 속성도 추가했습니다(문제 #17262 및 pull #26128 참조).

다음은 최종 container.js 파일입니다.

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ]; registerBlockType('my-affiliate-plugin/my-affiliate-container-block', { title: __( 'Container', 'my-affiliate-block' ), category: 'design', edit( { className } ) { return( <div className={ className }> <InnerBlocks template={ TEMPLATE } templateLock="all" /> </div> ) }, save() { const blockProps = useBlockProps.save(); return( <div { ...blockProps }> <InnerBlocks.Content /> </div> ) }, });

추가 개선 사항

우리 블록은 완벽하게 작동하지만 약간의 변경으로 약간 개선할 수 있습니다.

RichText 구성 요소에 의해 생성된 단락에 backgroundColor 속성을 할당했습니다. 그러나 컨테이너 div 에 배경색을 할당하는 것을 선호할 수 있습니다.

따라서 edit.js 파일과 save.js div 를 다음과 같이 변경합니다.

 <div { ...blockProps } style={ { backgroundColor: backgroundColor } } > ... </div>

이렇게 하면 사용자가 전체 블록의 배경을 변경할 수 있습니다.

반면에 더 관련성이 높은 변경은 useBlockProps 메서드와 관련됩니다. 원래 코드에서 상수 blockProps 를 다음과 같이 정의했습니다.

 const blockProps = useBlockProps();

그러나 속성 집합을 전달하는 useBlockProps 를 더 효과적으로 사용할 수 있습니다. 예를 들어, classnames 모듈에서 classnames 이름을 가져오고 그에 따라 래퍼 클래스 이름을 설정할 수 있습니다.

다음 예제에서는 align 속성( edit.js )의 값을 기반으로 클래스 이름을 할당합니다.

 import classnames from 'classnames'; ... export default function Edit( { attributes, setAttributes } ) { ... const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ align }` ]: align, } ) } ); ... }

save.js 파일에서 동일한 변경을 수행합니다.

 import classnames from 'classnames'; ... export default function save( { attributes } ) { ... const blockProps = useBlockProps.save({ className: classnames( { [ `has-text-align-${ align }` ]: align, } ) }); ... }

그리고 그것은 포장입니다! 이제 프로덕션용 빌드를 실행할 수 있습니다.

요약

그리고 이 놀라운 여정의 끝에 우리가 있습니다! 개발 환경 구성부터 시작하여 완전한 블록 유형을 만들었습니다.

소개에서 언급했듯이 Node.js, Webpack, Babel 및 React에 대한 확실한 지식은 고급 Gutenberg 블록을 만들고 시장에서 전문적인 Gutenberg 개발자로 자리매김하는 데 필수적입니다.

하지만 블록 개발을 즐기기 위해 React 경험을 쌓을 필요는 없습니다. 블록 개발은 구텐베르크 블록 이면의 기술에서 점점 더 광범위한 기술을 습득하기 위한 동기와 목표를 제공할 수 있습니다.

따라서 이 가이드는 완전하지 않습니다. 이것은 단지 여러분이 최초의 구텐베르크 블록을 만드는 데 도움이 될 다양한 주제에 대한 소개일 뿐입니다.

이러한 이유로 온라인 설명서 및 가이드를 주의 깊게 읽고 지식을 심화할 것을 권장합니다. 사용 가능한 많은 리소스 중에서 다음을 권장합니다.

• 초보자를 위한 공식 블록 만들기 튜토리얼
• 중급 개발자를 위한 공식 블록 튜토리얼
• 동적 블록
• 메타 박스
• 플러그인용 사이드바 만들기

WordPress 개발을 막 시작하는 경우 프론트엔드 개발의 기본 개념을 이해하고 싶을 수 있습니다. 다음은 시작하는 데 도움이 될 수 있는 리소스의 빠른 목록입니다.

• WordPress를 로컬로 설치하는 방법(무료 전자책)
• 관리형 WordPress 호스팅의 진정한 가치(무료 전자책)
• 자바스크립트란?
• HTML 대 HTML5
• WordPress에서 CSS를 편집하는 방법
• PHP란?
• WordPress Hooks Bootcamp: 작업, 필터 및 사용자 정의 후크를 사용하는 방법

그리고 이 가이드 예제의 전체 코드는 Gist에서 사용할 수 있습니다.

이제 당신 차례입니다. 구텐베르크 블록을 개발했습니까? 지금까지 겪었던 주요 어려움은 무엇입니까? 의견에 귀하의 경험에 대해 알려주십시오!