구텐베르크 블록 패턴에 대한 완전한 안내서(II)

게시 됨: 2020-12-25

이 게시물은 다음 사항을 포함하는 구텐베르크 블록 패턴에 대한 전체 가이드의 두 번째 부분입니다.

블록 패턴 소개
페이지에 패턴 삽입
사전 정의된 패턴 및 기타 디렉토리에서 사용 가능
디렉토리에서 사용 가능한 패턴을 사이트에 추가
처음부터 패턴을 만드는 방법
개발자가 아닌 경우 패턴을 만드는 방법
재사용 가능한 블록을 블록 패턴으로 변환하는 방법
블록 패턴을 사용한 주제
공식 문서.

첫 번째 부분에서 우리는 가이드에서 다루는 모든 주제의 처음 4가지 요점을 보았습니다: 블록 패턴이란 무엇인가, 페이지에 미리 정의된 패턴을 삽입하는 방법, 일부에서 사용 가능한 패턴을 찾고 복사하는 방법 디렉토리. 편집 중인 페이지에 패턴을 붙여넣을 수 있지만 나중에 사용하기 위해 패턴 라이브러리에 저장되지는 않습니다.

Gutenberg 패턴 라이브러리에 새 패턴을 추가하려면 해당 패턴을 생성하고 등록해야 합니다. 몇 가지 기본적인 코딩 기술이 필요하지만 매우 간단합니다. 이것이 귀하의 경우가 아니더라도 걱정하지 마십시오. 나중에 코딩 없이 동일한 결과를 얻는 방법을 배우게 될 것입니다.

5. 새 패턴 만들기

블록 패턴을 생성하려면 블록 패턴 API를 사용해야 합니다. 특히, PHP 함수 register_block_pattern() . 간단한 예를 들어 따라야 하는 여러 단계를 간략하게 살펴보겠습니다.

그러나 시작하기 전에 참고 사항을 추가하겠습니다. 코드 스니펫을 사용하여 WordPress를 사용자 정의할 때 항상 해당 스니펫을 어디에 작성해야 하는지 자문해야 합니다. 대부분의 튜토리얼은 작업을 완료하는 가장 쉬운 솔루션이기 때문에 활성 테마의 functions.php 파일을 권장하지만 David는 모든 사용자 정의를 추적하는 플러그인을 만드는 방법에 대해 이 게시물을 작성했으며 이것이 더 나은 솔루션이라고 주장했습니다. .

이제 블록 패턴은 어떻습니까? 테마에 새 블록 패턴의 정의를 추가하거나(Twenty Twenty-One과 같은 일부 테마에는 이미 고유한 테마가 포함되어 있음) 사용자 정의 플러그인에 추가할 수 있습니다. 나는 당신이 두 솔루션의 옹호자와 비방자를 찾을 것이라고 확신하므로 당신의 필요에 더 잘 맞는 것을 선택하십시오.

#1 패턴을 형성할 블록 디자인하기

이전 포스트에서 이미 언급했듯이 패턴은 원하는 대로 그룹화되는 블록의 집합입니다. 제품의 기본 기능을 설명하는 섹션을 만드는 데 사용할 수 있는 블록 패턴을 만들고 싶다고 가정합니다.

이렇게 하려면 "패턴 만들기"라는 제목의 페이지에서 "6가지 기능 섹션"이라는 제목 블록을 만든 다음 3열 블록을 삽입합니다.

첫 번째 블록에서 이미지를 추가하고 그 아래에 기능의 제목과 설명을 추가합니다.

다음 두 블록의 이미지, 제목 및 설명을 복사합니다. 마지막으로 이 행을 복제하여 6가지 기능에 대한 설명을 포함하는 섹션을 만듭니다.

내 새 패턴을 형성할 블록 세트입니다. — 새 패턴을 형성할 블록 세트를 이미 만들었습니다.

물론 블록 패턴을 두 번 이상 사용할 것이라고 생각하는 경우에만 블록 패턴을 만드는 것이 합리적입니다.

#2 블록의 내용 복사

블록 세트를 정의했으면 마우스로 블록을 선택하고 도구 모음에서 복사 를 클릭하기만 하면 됩니다.

#3 복사된 HTML 콘텐츠 이스케이프

문제를 방지하려면 줄 바꿈, 탭 문자 등과 같은 특수 문자를 컴퓨터에서 이해할 수 있도록 방금 복사한 텍스트를 이스케이프 처리해야 합니다. onlinestringtools.com 또는 JSON Escape/Unescape와 같은 온라인 도구를 사용하여 텍스트를 쉽게 이스케이프 처리할 수 있습니다. 이전에 복사한 코드를 붙여넣기만 하면 올바르게 이스케이프된 텍스트를 얻을 수 있습니다.

#4 패턴 등록

이 시점에서 남은 것은 register_block_pattern() 함수를 사용하는 것뿐입니다. 이 함수는 패턴 이름과 속성 배열이라는 두 개의 인수를 받습니다. 이 게시물의 끝에서 패턴에서 정의할 수 있는 속성에 대한 자세한 내용을 제공하지만 먼저 패턴을 만드는 데 필요한 단계를 살펴보겠습니다.

이것은 우리의 예입니다:

 register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "<!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">6 Features Section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) );

이전 스니펫에서 볼 수 있듯이 먼저 패턴을 식별하기 위해 고유한 이름( ruth-gutenberg-blocks-patterns/section-with-six-features )을 지정한 다음 몇 가지 속성이 있는 배열을 지정합니다. title ("6가지 기능이 있는 섹션") 패턴 사용자는 content 자체를 보게 됩니다. content 은 이전 단계에서 이스케이프 처리한 텍스트입니다.

#5 등록된 패턴으로 플러그인 만들기

패턴을 편집기에 등록하려면 플러그인을 만들거나 활성 테마에 넣을 수 있습니다. 플러그인을 만드는 경우 다음이 필요합니다.

 <?php /** * Plugin Name: Ruth's Block Patterns * Description: My personal block patterns * Version: 1.0.0 */ defined( 'ABSPATH' ) or die(); function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

그리고 짜잔! 이제 편집기를 새로 고치면(물론 플러그인을 활성화했다고 가정) 새 패턴이 표시됩니다.

그러나 불행히도 Uncathegorized 아래에 나열됩니다. 이는 우리 블록이 기존 범주에 속하는지 새로운 범주에 속하는지 표시하지 않았기 때문입니다.

#6 패턴의 새 범주 추가

기존 카테고리에 새로운 블록 패턴을 추가하거나 register_block_pattern_category 함수를 사용하여 완전히 새로운 카테고리를 생성할 수 있습니다. 이 함수는 또한 범주 이름과 옵션 배열이라는 두 개의 인수를 취합니다. 익숙한 소리?

다음은 예입니다.

 function ruth_patterns_register_block_pattern_category() { if ( ! class_exists( 'WP_Block_Patterns_Registry') ) { return; } register_block_pattern_category ( 'ruth-features', array( 'label' => _x( 'Features', 'Block pattern category', 'nelio' ) ) ); } add_action( 'init', 'ruth_patterns_register_block_pattern_category' );

새 범주가 준비되면 블록 패턴을 업데이트하여 이 새 범주 아래에 나열되어야 함을 명시적으로 지정하는 것을 잊지 마십시오.

 function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", 'categories' => [ 'ruth-features' ], ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

그리고 당신은 그것을 가지고 있습니다 :

표시된 범주로 생성된 블록 패턴입니다. — 블록 패턴이 생성되어 표시된 범주와 함께 사용 가능합니다.

이제 새로운 제품 출시를 위해 새 페이지에 생성된 섹션에서 볼 수 있듯이 생성하는 새 페이지에 추가한 다음 적절하다고 생각되는 수정을 할 수 있습니다.

블록 패턴 속성

이 예에서는 블록 패턴의 title , content 및 categories 속성을 정의했지만 더 많은 것이 있습니다. register_block_pattern 함수를 설명하는 문서에서 자세한 내용을 찾을 수 있지만 요약은 다음과 같습니다.

title (필수): 패턴의 제목입니다.
content (필수): 패턴의 내용입니다.
description : 삽입기의 패턴을 설명하는 데 사용되는 시각적으로 숨겨진 텍스트입니다. 설명은 선택 사항이지만 제목이 패턴이 하는 일을 완전히 설명하지 못하는 경우 강력히 권장됩니다.
categories : 블록 패턴을 그룹화하는 데 사용되는 일련의 패턴 범주. 블록 패턴은 여러 범주로 표시될 수 있습니다.
keywords : 사용자가 검색하는 동안 패턴을 발견하는 데 도움이 되는 별칭 또는 키워드의 집합입니다.
viewportWidth : 삽입기에서 패턴의 너비를 지정하는 정수입니다.

카테고리 등록의 경우 더 이상 props가 없기 때문에 label 속성만 정의하면 됩니다.

오늘 우리는 웹사이트에서 항상 사용할 수 있도록 블록 패턴을 만드는 것이 매우 쉽다는 것을 확인했습니다. 다음 포스트에서는 코드에 대해 전혀 몰라도 패턴을 만드는 방법을 알아보겠습니다. 놓치지 마세요!

Unsplash의 John Cameron의 특집 이미지.