WordPress 6.0 PlatoBlockchain Data Intelligence에서 블록 테마 패턴을 만드는 방법. 수직 검색. 일체 포함.

WordPress 6.0에서 블록 테마 패턴을 만드는 방법

타임 스탬프 : 1 년 2022 월 11 일 30:XNUMX AM

블록 패턴, 라고도 합니다. 섹션, 에 도입되었습니다. 워드 프레스 5.5 사용자가 미리 정의된 블록 레이아웃을 만들고 공유할 수 있도록 패턴 디렉토리. 디렉토리는 WordPress 커뮤니티에서 디자인한 다양한 선별된 패턴의 홈입니다. 이러한 패턴은 간단한 복사 및 붙여넣기 형식으로 제공되며 코딩 지식이 필요하지 않으므로 사용자의 시간을 크게 절약할 수 있습니다.

패턴에 대한 많은 기사에도 불구하고 최신 향상된 기능을 다루는 패턴 생성에 대한 포괄적이고 최신 기사가 부족합니다. 이 기사는 등록 없이 패턴을 생성하는 것과 같이 최근에 향상된 기능에 중점을 두고 격차를 채우고 초보자와 숙련된 작성자를 위해 블록 테마를 생성하고 사용하기 위한 최신 단계별 가이드를 제공하는 것을 목표로 합니다.

출시 이후 워드 프레스 5.9 그리고 스물 스물 둘 (TT2) 기본 테마, 블록 테마에서 블록 패턴의 사용이 확산되었습니다. 나는 의 열렬한 팬이었다 블록 패턴 내 블록 테마에서 만들고 사용했습니다.

새로운 워드 프레스 6.0 이벤트 세 가지 주요 패턴은 작성자에게 향상된 기능을 제공합니다.:

  • 통해 패턴 등록 허용 /patterns 폴더(비슷한 /parts, /templates및 /styles 등록).
  • 다음을 사용하여 공개 패턴 디렉토리에서 패턴 등록 theme.json.
  • 새 페이지를 만들 때 사용자에게 제공할 수 있는 패턴을 추가합니다.

입문에서 WordPress 6.0 비디오 탐색, Automattic 제품 연락 담당자 Ann McCathy는 새로 향상된 패턴 기능(15:00부터 시작)을 강조하고 향후 패턴 향상 계획에 대해 논의합니다. 단면 요소로서의 패턴, 옵션 제공 페이지 생성 시 패턴 선택, 통합 패턴 디렉토리 검색 등.

사전 조건

이 기사는 독자가 WordPress 전체 사이트 편집(FSE) 인터페이스 및 블록 테마에 대한 기본 지식이 있다고 가정합니다. 그만큼 블록 편집기 핸드북 와 전체 사이트 편집 웹 사이트는 이 기사에서 논의된 블록 테마 및 패턴을 포함하여 모든 FSE 기능을 배울 수 있는 최신 튜토리얼 가이드를 제공합니다.

섹션 1: 블록 패턴 생성을 위한 진화하는 접근 방식

블록 패턴을 생성하기 위한 초기 접근 방식은 블록 패턴 API를 사용자 정의 플러그인으로 사용하거나 직접 등록해야 했습니다. functions.php 블록 테마와 함께 묶을 파일입니다. 새로 출시된 WordPress 6.0은 /patterns 폴더와 페이지 생성 패턴 모달.

배경을 위해 먼저 패턴 등록 워크플로가 등록 패턴 API를 사용하는 것에서 등록 없이 직접 로드하는 방식으로 발전한 방법을 간략하게 살펴보겠습니다.

사용 사례 1: 트웬티 트웬티원

기본값은 스물 스물한 테마 (TT1) 및 TT1 블록 테마 (TT1의 형제) 테마에 블록 패턴을 등록하는 방법을 보여줍니다. functions.php. TT1 Blocks 실험 테마에서 이 싱글은 블록 패턴.php 포함하는 파일 여덟 블록 패턴이 추가됩니다. functions.php 로 include 여기에 표시된대로.

사용자 정의 블록 패턴 등록해야합니다 를 사용하여 register_block_pattern 두 개의 인수를 받는 함수 — title (패턴의 이름) 및 properties (패턴의 속성을 설명하는 배열).

다음은 여기에서 간단한 "Hello World" 단락 패턴을 등록하는 예입니다. 테마 셰이퍼 기사:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

등록 후, register_block_pattern() 함수는 연결된 핸들러에서 호출되어야 합니다. init 설명된 후크 여기에서 지금 확인해 보세요..

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

블록 패턴이 등록되면 블록 편집기에서 볼 수 있습니다. 더 자세한 문서는 다음에서 찾을 수 있습니다. 블록 패턴 등록.

블록 패턴 속성

필요한 것 외에 title 와 content 속성, 블록 편집기 핸드북 다음과 같은 선택 사항을 나열합니다. 패턴 속성:

  • title (필수): 사람이 읽을 수 있는 패턴의 제목입니다.
  • content (필수): 패턴에 대한 HTML 마크업을 차단합니다.
  • description (선택 사항): 삽입기의 패턴을 설명하는 데 사용되는 시각적으로 숨겨진 텍스트입니다. 설명은 선택 사항이지만 제목이 패턴이 하는 일을 완전히 설명하지 않을 때 강력하게 권장됩니다. 설명은 사용자가 검색하는 동안 패턴을 찾는 데 도움이 됩니다.
  • categories (선택 사항): 블록 패턴을 그룹화하는 데 사용되는 등록된 패턴 범주의 배열입니다. 블록 패턴은 여러 범주에 표시될 수 있습니다. 여기에서 사용하려면 카테고리를 별도로 등록해야 합니다.
  • keywords (선택 사항): 사용자가 검색하는 동안 패턴을 발견하는 데 도움이 되는 별칭 또는 키워드의 배열입니다.
  • viewportWidth (선택 사항): 삽입기에서 패턴의 크기가 조정된 미리보기를 허용하기 위해 패턴의 의도된 너비를 지정하는 정수입니다.
  • blockTypes (선택 사항): 패턴이 사용되도록 의도된 블록 유형의 배열입니다. 각 값은 선언된 블록의 name.
  • inserter (선택 사항): 기본적으로 모든 패턴이 삽입기에 나타납니다. 프로그래밍 방식으로만 삽입할 수 있도록 패턴을 숨기려면 inserter 에 false.

다음은 인용 패턴 플러그인 코드 조각의 예입니다. WordPress 블로그.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

템플릿 파일에서 패턴 사용

패턴이 생성되면 다음 블록 마크업과 함께 테마 템플릿 파일에서 사용할 수 있습니다.

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

의 예 이 GitHub 저장소 "의 사용을 보여줍니다.footer-with-background" 패턴 슬러그 "tt2gopher" TT2 Gopher 블록 테마의 접두사.

블록 테마와 구텐베르크 플러그인의 얼리 어답터는 클래식 테마의 패턴도 활용했습니다. 기본값 스물 스물 그리고 내가 가장 좋아하는 Eksell 테마( 데모 사이트 여기) 패턴 기능을 클래식 테마에 추가할 수 있는 방법을 보여주는 좋은 예입니다.

사용 사례 2: 스물 둘

테마에 몇 가지 패턴만 포함되어 있으면 개발 및 유지 관리가 상당히 관리 가능합니다. 그러나 블록 테마에 TT2 테마와 같이 많은 패턴이 포함된 경우 pattern.php 파일이 매우 커지고 읽기 어려워집니다. 번들로 제공되는 기본 TT2 테마 60개 이상의 패턴, 리팩터링된 패턴 등록 워크플로를 보여줍니다. 구조 읽기 및 유지 관리가 더 쉽습니다.

TT2 테마의 예를 들어 이 간소화된 워크플로가 어떻게 작동하는지 간략하게 논의해 보겠습니다.

2.1: 패턴 카테고리 등록하기

데모 목적으로 TT2 자식 테마를 만들고 일부 더미 콘텐츠와 함께 로컬 테스트 사이트에 설정했습니다. TT2에 이어 등록했습니다. footer-with-background 다음 패턴 범주 배열 목록에 추가되었습니다. block-patterns.php 파일.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

이 코드 예제에서 나열된 각 패턴은 $block_patterns = array() 에 의해 호출 foreach() 기능 require의 patterns 다음 단계에서 추가할 배열에 나열된 패턴 이름을 가진 디렉토리 파일입니다.

2.2: 패턴 파일 추가하기 /inc/patterns 폴더

다음으로 나열된 모든 패턴 파일이 $block_patterns = array(). 다음은 패턴 파일 중 하나의 예입니다. footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

의 패턴을 참조하자. footer.html 템플릿 부분:

<!-- wp:template-part {"slug":"footer"} /-->

이는 템플릿 파일에 머리글 또는 바닥글 부분을 추가하는 것과 유사합니다.

패턴은 유사하게 추가할 수 있습니다. parts/footer.html 참조하도록 수정하여 템플릿 slug 테마의 패턴 파일(footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

이제 블록 편집기의 패턴 삽입기를 방문하면 Footer with background 우리가 사용할 수 있어야 합니다:

배경이 있는 바닥글 패턴의 스크린샷.
WordPress 6.0에서 블록 테마 패턴을 만드는 방법

다음 스크린샷은 프런트 엔드에 배경 패턴이 있는 새로 생성된 바닥글을 보여줍니다.

사이트에 렌더링된 것처럼 보이는 바닥글 배경의 스크린샷.
WordPress 6.0에서 블록 테마 패턴을 만드는 방법

패턴이 블록 테마의 필수적인 부분이 되었기 때문에 많은 패턴이 블록 테마에 번들로 제공됩니다. 공목, 시드렛, 메이랜드, 동물 학자, 지질 학자 — 위에서 설명한 워크플로를 따릅니다. 다음은 Quadrat 테마의 예입니다. /inc/patterns 폴더 블록 패턴 등록 파일 및 파일 목록 콘텐츠 소스 및 필수 패턴 헤더 포함 이내 return array() 기능.

섹션 2: 등록 없이 패턴 생성 및 로드

이 기능을 사용하려면 사이트에 WordPress 6.0 또는 Gutenberg 플러그인 13.0 이상이 설치되어 있어야 합니다.

이 새로운 WordPress 6.0 기능 표준 파일 및 폴더를 통한 패턴 등록 허용 – /patterns, 다음과 같은 유사한 규칙을 가져옴 /parts, /templates및 /styles.

에 설명된 대로 프로세스 이 WP 선술집 이 문서에는 다음 세 단계가 포함됩니다.

  • 테마 루트에 패턴 폴더 만들기
  • 플러그인 스타일 패턴 헤더 추가
  • 패턴 소스 콘텐츠

기사에서 가져온 일반적인 패턴 헤더 마크업은 다음과 같습니다.

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

이전 섹션에서 설명한 대로, Title 와 Slug 필드는 필수이고 다른 필드는 선택 사항입니다.

최근 출시된 테마의 예제를 참조하여 에서 패턴 등록을 리팩토링했습니다. 이 TT2 고퍼 블록 데모 테마, 준비 CSS 트릭에 대한 이전 기사.

다음 단계에서는 footer-with-background.php 무늬 PHP에 등록 에서 사용 footer.html 템플릿이 리팩토링됩니다.

2.1: 만들기 /patterns 테마의 루트에 있는 폴더

첫 번째 단계는 /patterns TT2 Gopher 테마의 루트에 있는 폴더로 이동하고 footer-with-background.php 패턴 파일 /patterns 폴더 및 리팩터링.

2.2: 파일 헤더에 패턴 데이터 추가

다음으로 다음 패턴 헤더 등록 필드를 생성합니다.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

패턴 파일에는 PHP 주석으로 작성된 상단 제목 필드가 있습니다. 이어 블록 콘텐츠 HTML 형식으로 작성되었습니다.

2.3: 파일에 패턴 콘텐츠 추가

콘텐츠 섹션의 경우 작은 따옴표 (예 : '...')의 콘텐츠 섹션에서 footer-with-background 교체 <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

전체 코드 스니펫 patterns/footer-with-background.php 파일을 볼 수 있습니다 여기 GitHub에서.

점을 유의하시기 바랍니다 /inc/patterns 와 block-patterns.php are 추출물, WordPress 6.0에서는 필요하지 않으며 데모 목적으로만 포함됩니다.

2.4: 템플릿에서 패턴 슬러그 참조하기

위의 리팩토링 추가 footer-with-background.php 패턴 footer.html 템플릿은 이전 섹션(섹션 1, 2.2)에서 설명한 것과 정확히 동일합니다.

이제 블록 편집기에서 사이트의 바닥글 부분을 보거나 브라우저에서 사이트의 프론트 엔드를 보면 바닥글 섹션이 표시됩니다.

패턴 카테고리 및 유형 등록(선택 사항)

블록 패턴을 분류하기 위해서는 패턴 카테고리와 종류를 테마에 등록해야 합니다. functions.php 파일.

예를 들어 보겠습니다. 블록 패턴 카테고리 등록 TT2 Gopher 테마에서.

등록 후 패턴은 핵심 기본 패턴과 함께 패턴 삽입기에 표시됩니다. 패턴 삽입기에 테마별 카테고리 레이블을 추가하려면 테마 네임스페이스를 추가하여 이전 스니펫을 수정해야 합니다.

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

XNUMXD덴탈의 footer-with-background 패턴은 미리보기와 함께 삽입된 패턴에서 볼 수 있습니다(선택한 경우):

패턴 삽입기(왼쪽 패널)에 표시된 패턴 범주와 편집기(오른쪽 패널)에 표시된 해당 기본 바닥글 패턴을 보여주는 스크린샷.
WordPress 6.0에서 블록 테마 패턴을 만드는 방법

이 프로세스는 블록 테마에서 블록 패턴을 만들고 표시하는 것을 크게 단순화합니다. Gutenberg 플러그인을 사용하지 않고 WordPress 6.0에서 사용할 수 있습니다.

패턴 등록이 없는 테마의 예

얼리 어답터는 이미 블록 테마에서 이 기능을 사용하기 시작했습니다. 다음에서 사용할 수 있는 테마의 몇 가지 예 테마 디렉토리, 등록 없이 로드 패턴은 다음과 같습니다.

섹션 3: 로우 코드로 패턴 생성 및 사용

XNUMXD덴탈의 공식 패턴 디렉토리 콘텐츠를 만들기 위해 원하는 대로 복사 및 사용자 정의할 수 있는 커뮤니티에서 제공한 창의적인 디자인이 포함되어 있습니다. 블록 편집기에서 패턴을 사용하는 것이 그 어느 때보다 쉬워졌습니다!

계속 증가하는 디렉토리의 모든 패턴은 단순히 "복사하여 붙여넣기"로 테마를 차단하기 위해 추가하거나 theme.json 디렉토리를 참조하여 파일 패턴 슬러그. 다음으로, 매우 제한된 코딩으로 이것이 얼마나 쉽게 달성될 수 있는지 간략하게 설명하겠습니다.

패턴 디렉토리에서 패턴 추가 및 사용자 정의

3.1: 디렉토리에서 페이지로 패턴 복사

여기, 내가 사용하는 이 바닥글 섹션 패턴 패턴 디렉토리에서 FirstWebGeek에 의해. "패턴 복사" 버튼을 선택하여 패턴을 복사하고 새 페이지에 직접 붙여넣습니다.

3.2: 원하는 사용자 정의 만들기s

글꼴과 버튼 배경색을 약간만 변경했습니다. 그런 다음 전체 코드를 복사했습니다. 코드 편집기 클립보드로 넘어갑니다.

수정된 패턴(왼쪽 패널)과 코드 편집기의 해당 코드를 보여주는 스크린샷(오른쪽 패널)
WordPress 6.0에서 블록 테마 패턴을 만드는 방법

코드 편집기 사용에 익숙하지 않은 경우 옵션(오른쪽 상단, 점 XNUMX개)으로 이동하여 코드 편집기 버튼을 클릭하고 여기에서 전체 코드를 복사합니다.

3.3: /patterns 폴더에 새 파일 만들기

먼저 새 항목을 생성해 보겠습니다. /patterns/footer-pattern-test.php 파일에 필요한 패턴 헤더 섹션을 추가합니다. 그런 다음 전체 코드를 붙여넣습니다(위의 3단계). 패턴은 바닥글 영역(줄: 5)으로 분류되며, 패턴 삽입기에서 새로 추가된 것을 볼 수 있습니다.

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: 삽입기에서 새 패턴 보기

새로 추가된 내용을 보려면 Footer pattern from patterns library 패턴, 게시물 또는 페이지로 이동하여 삽입 아이콘(파란색 더하기 기호, 왼쪽 상단)을 선택한 다음 "TT2 Gopher – 바닥글" 범주를 선택합니다. 새로 추가된 패턴은 다른 바닥글 패턴과 함께 왼쪽 패널에 표시되고 오른쪽에는 미리보기가 표시됩니다(선택한 경우).

새 바닥글 패턴(왼쪽 패널)과 미리보기(오른쪽 패널)를 보여주는 스크린샷.
WordPress 6.0에서 블록 테마 패턴을 만드는 방법

패턴을 직접 등록 theme.json 파일

워드프레스 6.0에서는 패턴 디렉토리에서 원하는 패턴을 등록할 수 있습니다. theme.json 다음 구문을 사용하여 파일을 만듭니다. 그만큼 6.0 개발자 노트 상태, "패턴 필드는 [패턴 슬러그] 패턴 디렉토리에서. 패턴 슬러그는 패턴 디렉토리의 단일 패턴 보기에서 [URL]로 추출할 수 있습니다."

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

이 짧은 WordPress 6.0 기능 비디오 패턴이 어떻게 등록되는지 보여줍니다. /patterns 폴더(3분 53초)에 패턴 디렉터에서 원하는 패턴을 theme.json 파일(3:13에서).

그러면 등록된 패턴이 패턴 삽입기 검색창에 나타나며 테마 묶음 패턴 라이브러리처럼 사용할 수 있습니다.

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

이 예에서 패턴 슬러그 footer-section-design-with-3-column-description-social-media-contact-and-newsletter 인사말 이전 예 통해 등록됩니다 theme.json.

페이지 생성 패턴 모델

"의 일환으로패턴으로 건물" 이니셔티브, WordPress 6.0 패턴 모달 옵션 제공 테마 작성자에게 페이지 레이아웃 패턴을 블록 테마에 추가하여 사이트 사용자가 페이지를 생성하는 동안 페이지 레이아웃 패턴(예: 정보 페이지, 연락처 페이지, 팀 페이지 등)을 선택할 수 있습니다. 다음은 에서 가져온 예입니다. 개발자 노트:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

이 기능은 현재 페이지 게시물 유형에 한함 아직 "게시물 유형"에는 해당되지 않습니다.

XNUMXD덴탈의 페이지 생성 패턴 모달 모든 패턴의 post-content 블록 유형을 제거하여 완전히 비활성화할 수도 있습니다. 예제 샘플 코드 여기에서 확인할 수 있습니다.

아래 리소스 섹션에 나열된 링크에서 GitHub의 토론을 팔로우하고 참여할 수 있습니다.

패턴 디렉토리를 사용하여 페이지 빌드

디렉토리의 패턴을 사용하여 페이지 빌더와 유사한 원하는 게시물 또는 페이지 레이아웃을 만들 수도 있습니다. 그만큼 구텐베르크허브 팀이 만들었습니다 실험적인 온라인 페이지 빌더 앱 디렉토리에서 직접 패턴 사용(소개 비디오). 그런 다음 앱의 코드를 복사하여 사이트에 붙여넣을 수 있으므로 코딩 없이 복잡한 페이지 레이아웃을 구축하는 과정이 크게 간소화됩니다.

In 이 짧은 비디오, Jamie Marsland는 디렉토리의 원하는 페이지 섹션을 사용하여 페이지 빌더와 유사한 전체 페이지 레이아웃을 만드는 데 앱을 사용하는 방법을 보여줍니다(1:30).

최대 포장

패턴을 통해 사용자는 일반적으로 사용되는 콘텐츠 레이아웃(예: 히어로 페이지, 콜아웃 등)을 모든 페이지에서 다시 만들고 이전에는 코딩 기술 없이는 불가능했던 스타일로 콘텐츠를 표현하는 장벽을 낮출 수 있습니다. 마치 플러그인 와 테마 디렉토리, 새로운 패턴 디렉토리는 사용자에게 패턴 디렉토리에서 선택한 다양한 패턴을 사용하고 스타일로 내용을 작성하고 표시할 수 있는 옵션을 제공합니다.

과연, 블록 패턴은 모든 것을 바꿀 것입니다 그리고 확실히 이것은 게임 체인저 WordPress 테마 랜드스케이프의 기능. 잠재력이 충분히 발휘될 때 패턴으로 건물 노력이 가능해지면 블록 테마를 디자인하는 방식이 바뀌고 로우 코드 지식으로도 아름다운 콘텐츠를 만들 수 있습니다. 많은 크리에이티브 디자이너에게 패턴 디렉토리는 자신의 창의력.

자료

워드 프레스 6.0

패턴 만들기

패턴 향상(GitHub)

블로그 기사

WordPress 6.0에서 블록 테마 패턴을 만드는 방법 원래에 게시 CSS 트릭. 너는해야한다. 뉴스레터 받기.

타임 스탬프 :

더보기 CSS 트릭