模板

区块模板被定义为一组区块项目的列表。这类区块可以包含预定义的属性、占位符内容，并且可以是静态或动态的。区块模板允许为编辑器会话指定默认的初始状态。

模板的适用范围包括：

在客户端动态设置默认状态（例如 defaultBlock）
注册为特定文章类型的默认模板

计划新增功能：

保存并作为“页面模板”分配给页面
在 template.php 文件中定义，或从站点特定的自定义文章类型（wp_templates）中拉取
作为主题层级的等效方案

API

模板可以在 JS 或 PHP 中声明为一个 blockTypes 数组（区块名称和可选属性）。

以下第一个 PHP 示例为文章创建了一个包含图片区块的模板，您可以根据需要向模板中添加任意数量的区块。

PHP 示例：

<?php
function myplugin_register_template() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = array(
        array( 'core/image' ),
    );
}
add_action( 'init', 'myplugin_register_template' );

以下 JavaScript 示例使用 InnerBlocks 和模板创建了一个新区块，插入时会基于模板生成一组区块。

const el = React.createElement;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;

const BLOCKS_TEMPLATE = [
	[ 'core/image', {} ],
	[ 'core/paragraph', { placeholder: '图片详情' } ],
];

registerBlockType( 'myplugin/template', {
	title: '我的模板区块',
	category: 'widgets',
	edit: ( props ) => {
		return el( InnerBlocks, {
			template: BLOCKS_TEMPLATE,
			templateLock: false,
		} );
	},
	save: ( props ) => {
		return el( InnerBlocks.Content, {} );
	},
} );

有关实际使用模板的完整示例，请参阅元区块教程。

区块属性

要查找可在模板中定义的所有区块属性的完整列表，请查阅区块的 block.json 文件，并查看 attributes 和 supports 值。

例如，packages/block-library/src/heading/block.json 显示该区块具有 level 属性，并支持 anchor 参数。

如果您没有安装 Gutenberg 插件，可以在 wp-includes/blocks/heading/block.json 中找到 block.json 文件。

自定义文章类型

自定义文章类型可以在注册过程中注册自己的模板：

function myplugin_register_book_post_type() {
	$args = array(
		'public' => true,
		'label'  => '书籍',
		'show_in_rest' => true,
		'template' => array(
			array( 'core/image', array(
				'align' => 'left',
			) ),
			array( 'core/heading', array(
				'placeholder' => '添加作者...',
			) ),
			array( 'core/paragraph', array(
				'placeholder' => '添加描述...',
			) ),
		),
	);
	register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

锁定

有时可能需要在用户界面锁定模板，使得呈现的区块无法被操作。这可以通过 template_lock 属性实现。

function myplugin_register_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/paragraph', array(
			'placeholder' => '添加描述...',
		) ),
	);
	$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_template' );

选项：

contentOnly — 阻止所有操作。此外，没有内容的区块类型会从列表视图中隐藏，并且无法在区块列表中获得焦点。与其他锁定类型不同，此设置不能被子级覆盖。
all — 阻止所有操作。无法插入新区块、移动现有区块或删除区块。
insert — 阻止插入或移除区块，但允许移动现有区块。

锁定设置可以由 InnerBlocks 继承。如果未在 InnerBlocks 区域中设置 templateLock，则使用父级 InnerBlocks 区域的锁定设置。如果区块是顶级区块，则使用当前文章类型的锁定配置。

单个区块锁定

除了模板级锁定之外，您还可以锁定单个区块；您可以在属性级别使用 lock 属性来实现这一点。区块级锁定的优先级高于 templateLock 功能。目前，您可以锁定移动和删除区块的操作。

attributes: {
  // 防止区块被移动或移除。
  lock: {
    remove: true,
    move: true,
  }
}

选项：

remove — 锁定区块，防止其被移除。
move — 锁定区块，防止其被移动。

您可以将此功能与 templateLock 结合使用，通过将 remove 或 move 设置为 false 来锁定除单个区块之外的所有区块。

$template = array(
	array( 'core/image', array(
		'align' => 'left',
	) ),
	array( 'core/heading', array(
		'placeholder' => '添加作者...',
	) ),
	// 允许移动或移除段落区块。
	array( 'core/paragraph', array(
		'placeholder' => '添加描述...',
		'lock' => array(
			'move'   => false,
			'remove' => false,
		),
	) ),
);

嵌套模板

像列区块这样的容器区块也支持模板。这是通过为区块分配嵌套模板来实现的。

$template = array(
	array( 'core/paragraph', array(
		'placeholder' => '添加根级段落',
	) ),
	array( 'core/columns', array(), array(
		array( 'core/column', array(), array(
			array( 'core/image', array() ),
		) ),
		array( 'core/column', array(), array(
			array( 'core/paragraph', array(
				'placeholder' => '添加内部段落'
			) ),
		) ),
	) )
);

5.6 KiB Raw Blame History Unescape Escape

模板

API

区块属性

自定义文章类型

锁定

单个区块锁定

嵌套模板

5.6 KiB

Raw Blame History