块编辑器开发文档

💡 云策文档标注

概述

本文档介绍了 WordPress 中 Block Patterns 的高级用法,包括如何为不同内容类型和模板创建优先显示的起始模式,以及如何锁定模式元素和从 Pattern Directory 注册模式。这些功能旨在提升用户的编辑体验,适用于 WordPress 开发者进行主题和插件开发。

关键要点

  • 为内容类型优先显示起始模式:通过在模式中声明 core/post-content 的 Block Types 和 Post Types 选项,可以在创建新内容时弹出模式选择模态框,需至少添加两个此类模式。
  • 为模板创建优先显示起始模式:通过指定 templateTypes 属性(数组形式),模式可以在创建匹配模板时显示,提供空白或当前回退选项。
  • 锁定模式元素:使用 Locking APIs 可以锁定模式中的块,以保护设计关键部分,防止用户修改。
  • 从 Pattern Directory 注册模式:在 WordPress 6.0 及以上版本,主题可以通过 theme.json 中的 patterns 字段注册 Pattern Directory 中的模式,使用模式 slug 进行指定。

代码示例

<?php
 /**
  * Title: New Event Announcement
  * Slug: twentytwentytwo/new-event-announcement
  * Block Types: core/post-content
  * Post Types: post
  * Categories: featured, text
  */
?>

<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
<h2>Details</h2>
<!-- /wp:heading -->

<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
<h2>Directions</h2>
<!-- /wp:heading -->

<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
<h2>RSVP</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
<p>To RSVP, please join the #fse-outreach-experiment in Make Slack. </p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"lock":{"move":true,"remove":false}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Learn more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":80,"overlayColor":"primary","contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color has-background-dim-80 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">We hope to see you there!</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
register_block_pattern(
  'wp-my-theme/404-template-pattern',
  array(
      'title'         => __( '404 Only template pattern', 'wp-my-theme' ),
      'templateTypes' => array( '404' ),
      'content'       => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} --><p class="has-text-align-center has-x-large-font-size">404 pattern</p><!-- /wp:paragraph -->',
  )
);
{
    "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
}

注意事项

  • 默认情况下,WordPress 不包含任何 core/post-content 或 templateTypes 模式,需开发者自行添加至少两个模式才能触发模态框显示。
  • 模式锁定功能需结合 Locking APIs 使用,确保在编辑器中正确配置锁定选项后再注册模式。
  • 从 Pattern Directory 注册模式时,需使用正确的模式 slug,可从 Pattern Directory 的单个模式视图 URL 中提取。
  • 相关功能在 WordPress 6.0、6.1 和 6.3 版本中引入,建议参考官方开发说明文档以获取最新信息。

📄 原文内容

Block patterns are one of the best ways to provide users with unique and curated editing experiences.

Prioritize starter patterns for any post type

When a user creates new content, regardless of post type, they are met with an empty canvas. However, that experience can be improved thanks to the option to have patterns from a specific type prioritized upon creation of a new piece of content. The modal appears each time the user creates a new item when there are patterns on their website that declare support for the core/post-content block types. By default, WordPress does not include any of these patterns, so the modal will not appear without at least two of these post content patterns being added.

To opt into this, include core/post-content in the Block Types for your pattern. From there, you can control which post types the pattern should show up for via the Post Types option. Here’s an example of a pattern that would appear when creating a new post.

<?php
 /**
  * Title: New Event Announcement
  * Slug: twentytwentytwo/new-event-announcement
  * Block Types: core/post-content
  * Post Types: post
  * Categories: featured, text
  */
?>

<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
<h2>Details</h2>
<!-- /wp:heading -->

<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
<h2>Directions</h2>
<!-- /wp:heading -->

<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
<h2>RSVP</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
<p>To RSVP, please join the #fse-outreach-experiment in Make Slack. </p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"lock":{"move":true,"remove":false}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Learn more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":80,"overlayColor":"primary","contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color has-background-dim-80 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">We hope to see you there!</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Read more about this functionality in the Page creation patterns in WordPress 6.0 dev note and note that WordPress 6.1 brought this functionality to all post types.

Prioritize starter patterns for template creation

In the same way patterns can be prioritized for new posts or pages, the same experience can be added to the template creation process. When patterns declare support for the ‘templateTypes’ property, the patterns will appear anytime a template that matches the designation is created, along with the options to start from a blank state or use the current fallback of the template. By default, WordPress does not include any of these patterns.

To opt into this, a pattern needs to specify a property called templateTypes, which is an array containing the templates where the patterns can be used as the full content. Here’s an example of a pattern that would appear when creating a 404 template:

register_block_pattern(
  'wp-my-theme/404-template-pattern',
  array(
      'title'         => __( '404 Only template pattern', 'wp-my-theme' ),
      'templateTypes' => array( '404' ),
      'content'       => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} --><p class="has-text-align-center has-x-large-font-size">404 pattern</p><!-- /wp:paragraph -->',
  )
);

Read more about this functionality in the Patterns on the create a new template modal in the WordPress 6.3 dev note.

Lock patterns

As mentioned in the prior section on Locking APIs, aspects of patterns themselves can be locked so that the important aspects of the design can be preserved. Here’s an example of a pattern with various blocks locked in different ways. You can build these patterns in the editor itself, including adding locking options, before following the documentation to register them.

Prioritize specific patterns from the Pattern Directory

With WordPress 6.0 themes can register patterns from Pattern Directory through theme.json. To accomplish this, themes should use the new patterns top level key in theme.json. Within this field, themes can list patterns to register from the Pattern Directory. The patterns field is an array of pattern slugs from the Pattern Directory. Pattern slugs can be extracted by the url in a single pattern view at the Pattern Directory. Example: This url https://wordpress.org/patterns/pattern/partner-logos the slug is partner-logos.

{
    "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
}

The content creator will then find the respective Pattern in the inserter “Patterns” tab in the categories that match the categories from the Pattern Directory.

Additional resources