WordPress一直是非常灵活和可定制的。块和站点编辑者正在扩大我们创建自定义体验的能力,而创建自定义块的能力只能增强该功能。

目前,create-block实用程序仅允许一次创建一个块,并且不能为多块设置提供选项。例如,如果您想创建两个或多个相关的块,尤其是一个自定义块会使用另一个块来策划用户的体验,该怎么办?如果您的目标是使用Post Meta为用户提供额外的上下文怎么办?这些是常见的用例,也是WordPress始终出色的领域。 

下面,您将学习如何使用create-block公用事业。

目录

  1. 设置多块插件
    1. 脚手架插件文件
    2. 脚手架
    3. 构建块并激活插件
  2. 注册后元
  3. 建立评分块
    1. 添加基本CSS
    2. 添加属性和使用context到block.json文件
    3. 更新edit.js文件
    4. 更新Render.php文件
  4. 构建评论卡块
    1. 更新block.json文件
    2. edit.js中的innerblocks
    3. 编辑save.js文件
  5. 测试块
  6. 限制评级块的使用
  7. 包起来
  8. 了解更多的资源 

让我们通过设置使用评分系统来查看帖子或自定义帖子类型(CPT)的能力来保持这一点,并将其包含在可以在查询循环中使用的另一个自定义块中。当创作者发布评论(书籍,电影,产品)时,可以将其与您的内容一起使用,并且需要评级系统来显示其帖子。最终结果应该看起来像这样:

The finished blocks include the Review Card block and the Rating block.

具体来说,您将构建:

  1. 带有三个特定内部块的评论卡块:
    1. 标题 (core/post-title
    2. 评分块(我们也将建立一个块)
    3. 摘录(core/post-excerpt
  2. 一个评分块,将:
    1. 将职位(或CPT)从一到五星或心脏评级
    2. 使用后元存储评级
    3. 使用邮政查询块中的块显示每个帖子的评分。

您需要建立本地环境,并带有一个终端 安装了nodejs 运行命令。如果您还没有设置本地环境,则可以使用 WP-NOWlocalwp,或列出的另一个选项 这里 那将适合您的需求。

如果您想遵循完成的代码,则可以在 这个github回购 并将根据需要进行更新;欢迎PR!

设置多块插件

让我们从设置我们的项目结构开始。在您的终端中,CD进入您的wp-content/plugins目录。如果您正在使用wp-now您可以从喜欢的任何目录中工作。

脚手架插件文件

跑步npx @wordpress/create-block@latest post-review-blocks。这将在一个名称的目录中脚打个插件post-review-blocks。进入该目录并在您选择的代码编辑器中打开它。你应该看到一个post-review-blocks.php文件。打开它,您的代码应该看起来如下(没有默认注释):

/**
 * Plugin Name:       Post Review Blocks
 * Description:       Example block scaffolded with Create Block tool.
 * Requires at least: 6.1
 * 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:       post-review-blocks
 *
 * @package CreateBlock
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

function create_block_post_review_blocks_block_init() {
	register_block_type( __DIR__ . '/build );
}
add_action( 'init', 'create_block_post_review_blocks_block_init' );

插件本身应该具有这样的文件结构:

- build/
- src/
- .editorconfig
- .gitignore
- .package-lock.json
- .package.json
- post-review-blocks.php
- readme.md

您将在post-review-blocks.php文件和src本教程的目录和build目录将自动构建。

脚手架

接下来,删除所有文件src目录使得src是空的,cd进入src如果您还没有那里。

运行以下两个命令:

npx @wordpress/create-block@latest review-card-block --no-plugin
npx @wordpress/create-block@latest rating-block --no-plugin --variant dynamic

这将创建我们多块设置所需的两个自定义块。注意 --no-plugin两个命令。标志表明这只是创建块文件,而不是所有所需的插件文件。另外,您可以看到rating-block将是一个“动态”块,呈现为PHP。为什么?这使您可以练习两者 静态和动态块

现在,我们有两个街区src文件夹:

  • rating-block
  • review-card-block

您可以照顾好几件事:

  • 进入block.json文件rating-block并更改“icon”财产来自smiley“ 到 ”star-filled”。
  • 在两个block.json每个块的文件,添加“keywords”财产"keywords": ["rating", "review"]。您的用户在搜索时会更容易发现新块。  
  • 在里面post-review-blocks.php文件,更新create_block_post_review_blocks_block_init要注册两个块,这样:
function create_block_post_review_blocks_block_init() {
	register_block_type( __DIR__ . '/build/rating-block' );
	register_block_type( __DIR__ . '/build/review-card-block' );
}
add_action( 'init', 'create_block_post_review_blocks_block_init' );

构建块并激活插件

现在,从post-review-blocks插件(“根”与package.json文件),运行npm start,这些块应在自己的子目录中建立build。您可以在本教程的其余部分中将此脚本运行。另外,如果要运行其他命令或更改文件,则可以停止并重新启动它block.json。该脚本需要运行以使其出现在编辑器中的任何更改。

构建成功后,请在WordPress仪表板中或通过WP-CLI激活插件wp plugin activate post-review-blocks

在这一点上,您可以通过创建新帖子并在我们使用的关键字之一中键入一个块来检查块正在注册并检查块:

The Review Card and Rating blocks are loaded.

成功!🎉

现在,您知道如何设置多块插件的结构。您可以在src文件夹create-block并在build目录。

现在是时候添加元功能,分配内部块并限制可以使用块的位置了。

注册后元

打开post-review-blocks.php再次,粘贴以下create_block_post_review_blocks_block_init功能:

// Add some post meta
function register_review_rating_post_meta() {
	$post_meta = array(
		'_rating'      => array( 'type' => 'integer'	),
		'_ratingStyle' => array( 'type' => 'string'	),
	);

	foreach ( $post_meta as $meta_key => $args ) {
		register_post_meta(
			'post',
			$meta_key,
			array(
				'show_in_rest'  => true,
				'single'        => true,
				'type'          => $args['type'],
				'auth_callback' => function() {
					return current_user_can( 'edit_posts' );
				}
			)
		);
	}
}
add_action( 'init', 'register_review_rating_post_meta' );

此函数会登记两个您需要的元密钥:

  • _rating
  • _ratingStyle

这些需要注册。否则,当您更新我们的评分块时,将不会保存数据。您还会注意到这两个元密钥都带有下划线:_。这“保护”了元的元素免于在邮政自定义字段部分中使用,并可能被该元框中的值覆盖。

最后,请注意show_in_rest设置为真,auth_callback检查以确保用户至少具有edit_posts特权。如果META未在WordPress REST API中显示,则无法在块编辑器中进行编辑。

本教程范围之外的快速注意:要谨慎对待 REST API。如果您需要从公共API中过滤数据,请在其他地方使用PHP或选择其他方法来使用敏感数据。

建立评分块

该评分块使您的用户可以将帖子评分为1到5,并在显示星形表情符号(⭐)或心脏表情符号(❤️)之间进行选择。您可以将这些表情符号复制到您的代码中。通过此功能,该块实现了两个目标:

  1. 演示如何从元后拯救和拉出
  2. 允许在查询循环邮政模板中使用后元数据

许多应用程序 对于使用CPT的这种功能,包括:

  • 员工目录与email或者position
  • rating或者ISBN
  • 配方索引tastiness或者prep_time

可能性很多!

好的,本节中的所有编辑都将在src/rating-block目录。

添加基本​​CSS

以下CSS用于styles.scss文件。打开该文件,删除其中的任何CSS,然后粘贴以下内容,从而在块周围增加填充物并确保恒星为黄色,心脏是红色的。

.wp-block-create-block-rating-block {
	padding: 1rem 0;
}

.wp-block-create-block-rating-block span.rating-star {
	color: yellow;
}

.wp-block-create-block-rating-block span.rating-heart {
	color: red;
}

将其调整到您的喜好并保存文件。

添加属性和使用context到block.json文件

打开block.json归档额定块并添加以下属性:

"usesContext": ["postId", "postType"],
"attributes": {
	"rating": {
		"type": "integer",
		"default": 5
	},
	"ratingStyle": {
		"type": "string",
		"default": "star"
	}
},
"example": {
	"attributes": {
		"rating": 4,
		"ratingStyle": "star"
	}
}

上面的JSON执行以下操作:

  • usesContext:允许我们获得帖子ID和类型的值
  • attributes:标识要保存在块上的属性
  • example:提供添加时块的外观的预览

单击此处查看决赛block.json文件。

更新edit.js文件

有很多要解决的问题。您可以将其分为三个部分: 

  • 导入和作业
  • 检索和存储后元的功能
  • 编辑侧栏中的组件的返回方法
     

可以找到完整的文件 在github上

删除文件中当前的内容。然后,在edit.js文件,添加以下内容:

import { __ } from "@wordpress/i18n";
import { useEffect } from "@wordpress/element";
import { useBlockProps, InspectorControls } from "@wordpress/block-editor";
import { PanelBody, RangeControl, SelectControl } from "@wordpress/components";
import { useEntityProp } from "@wordpress/core-data";

import "./editor.scss";

本节设置了我们的导入:

  • __是我们的国际化方法
  • useEffect允许您更新元数据
  • useBlockProps为您提供与之合作的块属性
  • InspectorControls允许您将控件添加到检查员的侧栏
  • PanelBodyRangeControl,和SelectControl都是为块的属性设置用户控件的所有组件
  • useEntityProp提供对元元的访问权限
  • 最后,导入SCSS文件

接下来,添加以下内容: 

export default function Edit( {
	attributes: { rating, ratingStyle },
	setAttributes,
	context: { postType, postId },
} ) {
	const [meta, updateMeta] = useEntityProp(
		"postType",
		postType,
		"meta",
		postId,
	);

	// Add functionality code here

	// Add return() method here
	
	// Other code will go here, don't forget or delete the closing curly brace!
}

这是Edit方法,它控制块编辑器中显示的内容。首先,您传递并分配以下内容:

  • ratingratingStyle传递并分配到属性状态对象
  • setAttributes是一种方法attributes状态对象更新
  • postType和邮政的通过usesContext您在上面定义

接下来,您会看到状态对象metaupdateMeta方法正在从useEntityProp方法,是 块使用以获取或更改元值

好,到目前为止很好?现在用于功能! 

代替“此处添加功能代码”的评论,添加以下方法:

useEffect( () => {

const initStyle = meta?._ratingStyle ? meta?._ratingStyle : "star";

setAttributes( {

rating: meta?._rating || 0,

ratingStyle: initStyle,

} );

}, [] );

const onChangeRating = ( val ) => {

updateMeta( {

...meta,

_rating: val,

} );

setAttributes( { rating: val } );

};

const onChangeRatingStyle = ( val ) => {

updateMeta( {

...meta,

_ratingStyle: val,

} );

setAttributes( { ratingStyle: val } );

};

const getRatingEmojis = () => {

let ratingEmojis = "";

for (let i = 0; i < rating; i++) {

ratingEmojis += ratingStyle === "star" ? "⭐" : "❤️";

}

return ratingEmojis;

};

这些方法中的每一种

  • useEffect在负载上运行(给定第二个参数为[])并检查并从存储的元元中分配值的值ratingratingStyle,默认为星(⭐)
  • onChangeRating在检查员中更改评级时将更新评级的价值
  • onChangeRatingStyleratingStyle
  • getRatingEmojis是一个循环,可以返回评级的正确数量和风格的星星或心脏。

最后,添加以下评论“在此处添加return()方法”:

return (
    <>
        <InspectorControls>
            <PanelBody title={ __( "Rating", "multiblock-plugin" ) }>
                <RangeControl
                    label={ __( "Rating", "multiblock-plugin") }
                    value={ rating }
                    onChange={ onChangeRating }
                    min={ 1 }
                    max={ 5 }
		/>
                <SelectControl
                    label={ __( "Rating Style", "multiblock-plugin" ) }
                    onChange={ onChangeRatingStyle }
                    value={ ratingStyle }
                    options={ [
                        {
                            label: __( "Star" , "multiblock-plugin" ),
                            value: "star",
                        },
                        {
                            label: __( "Heart", "multiblock-plugin" ),
                            value: "heart",
                        },
                    ] }
                />
            </PanelBody>
        </InspectorControls>
        <div { ...useBlockProps() }>
            <p>
                <strong>Rating:</strong>{ " " }
                <span className={ `rating-${ratingStyle}` }> { getRatingEmojis() }</span>
            </p>
        </div>
    </>
);

返回功能这里有两个主要部分:InspectorControls以及编辑器块的实际输出。

之内InspectorControls,我们创建一个PanelBody其中包含一个RangeControlSelectControl。这RangeControl确定给出帖子或CPT给出的评级的1-5个值。这SelectControl确定是显示星星还是心脏表情符号。

决赛div是我们显示标签“评分”的输出,然后传递正确的恒星或心脏数量。

保存下来并将块添加到帖子中后,您应该看到以下内容:

Rating block is loaded.

如果您滑动范围滑块或在心脏和恒星之间切换,则应该看到星星或心脏实时更新。

有关添加和使用元后的更多信息,请查看 这个很棒的教程

更新Render.php文件

由于您创建了此块作为动态块,因此您需要实现额定值将如何在前端显示。您可以在render.php文件并添加以下内容:

<?php
global $post;

$ratingEmojis = '';

// Get the rating and rating style from the post meta
$rating      = get_post_meta( get_the_ID(), '_rating', true );
$ratingStyle = get_post_meta( get_the_ID(), '_ratingStyle', true );

// If the rating style is not set, default to star
if ( ! $ratingStyle ) {
    $ratingStyle = 'star';
}
// Generate the rating emojis.
for ( $i = 0; $i < $rating; $i++ ) {
    $ratingEmojis .= $ratingStyle === 'star' ? '⭐️' : '❤️';
}

?>
<p <?php echo get_block_wrapper_attributes(); ?>>
		<?php echo wp_kses_post( '<strong>Rating:</strong> <span class="rating-' . $ratingStyle . '">' . $ratingEmojis . '</span>', 'multiblock-plugin' ); ?>
</p>

这里有几件事:

  • 这是在帖子的背景下出现的,因此我们可以使用get_the_ID()
  • 该块用类和其他属性包裹get_block_wrapper_attributes()

这意味着您现在在前端也有一个功能性评分块:

Rating block is rendered.

极好的! 

如果您想检查工作,可以看到最终文件 在github上。否则,是时候进入我们的多块设置中的下一个块了。

构建评论卡块

该块将涉及的代码少得多,而更多的是配置。我们想用这个区块做一些事情:

  • 将特定块作为“内部块”分配给评论卡
  • 仅在评论卡中允许某些块
  • 限制可以使用此卡的位置,即作为查询循环块中的邮政模板

该块不需要样式,因此请删除.scss文件或样式的样式。

本节中的所有代码将在src/review-card-block目录。

更新block.json文件

您需要首先设置一些属性block.json file。打开它并添加以下内容:

"parent": ["core/post-template"],
"allowedBlocks": [
	"core/post-title",
	"create-block/rating-block",
	"core/post-excerpt"
]

首先,添加父块属性,指示仅在core/post-template堵塞。其次,在审阅卡块本身中仅允许使用三个块。您将在下面看到这一点。

如果需要,请在此处将您的设置与文件中的文件进行比较 Github仓库

edit.js中的innerblocks

在里面edit.js文件,用以下内容替换所有代码:

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

const REVIEW_TEMPLATE = [
	[ "core/post-title", { isLink: true, placeholder: "The Post Title" } ],
	[ "create-block/rating-block", {} ],
	[ "core/post-excerpt", { placeholder: "The pose content..." } ],
];

export default function Edit() {
	return <InnerBlocks template={REVIEW_TEMPLATE} templateLock="all" />;
}

该文件的主要区别在于您正在导入InnerBlocks并将块模板作为内部块分配给评论卡块。

下一个,REVIEW_TEMPLATE是数组数组,第一个索引是您要使用的块,第二个索引是带有任何要通过的配置的对象。例如,您可以看到core/post-titleBlock正在占两个默认值:

  • isLink被设定为true,这意味着标题是可单击的,将带您进入帖子
  • placeholder如果由于某种原因没有标题

然后,您可以看到InnerBlocks组件用于Edit功能,通过REVIEW_TEMPLATE并锁定块。这只是为了向您展示,如果情况需要,则如何将模板锁定在模板中,但这不是必需的。

编辑save.js文件

自从post-review-block是一个静态块,您需要编辑save.js文件以允许将块保存到数据库中。打开该文件,删除内容,并添加以下内容:

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

export default function save( { attributes } ) {
	return (
		<div { ...useBlockProps.save() }>
			<InnerBlocks.Content />
		</div>
	);
}

在这种情况下,由于InnerBlocks被设置和使用,所需的只是传递InnerBlocks.Content。保存文件后,返回到块编辑器。

测试块

如果您还没有,请使用新的评分块为每个帖子创建两个或三个帖子。发布这些帖子。

然后,在仪表板上打开一个新页面,并为该页面添加标题。“帖子的评论……”是下面的屏幕截图。接下来,添加一个查询循环块。选择 开始空白 然后选择一个选项 标题和日期。 

打开列表视图,您应该看到这样的东西:

An open list view of the Query Loop block.

现在:

  • 单击“帖子模板”中的标题块,以便突出显示
  • 然后单击插入器(蓝色“+”按钮),然后搜索评论卡块
  • 在列表中看到它后,单击它,然后返回列表视图,您应该在其中查看评论卡块 
The Review Card block in the Query Loop.

节省 或者 发布 这一页。 

您会注意到,块编辑器中没有评分出现。这是因为评级块用PHP渲染并动态构建,因此需要刷新。在刷新页面时,您应该看到不同帖子的不同评论:

Finished Review Card and Review blocks

惊人的!

要注意的一件事,如果您打开 列表显示,您将看到评论卡块的内部块上的锁。这些是早些时候的templateLock="all"并且不能四处移动或删除。

同样,如果您尝试将评论卡块移出邮政模板块,您将看到它也不允许,因为该块要求其父级是邮政模板块。

出色的!现在,您有一个使用元元的多块插件,InnerBlocks并且明确有关内部框架内允许哪些块。做得好!

还有一件事要涵盖,您应该正在阻止自定义幸福。

限制评级块的使用

您可能已经在考虑这一点,但是当前的评级块设置应实际上仅限于帖子或其他CPT。为了实现这一目标,打开post-review-blocks.php再添加以下时间:

function limit_rating_block_to_post_type( $allowed_block_types, $editor_context ) {
	// Only allow paragraphs, headings, lists, and the rating block in the post editor for Posts.
	if ( 'post' === $editor_context->post->post_type ) {
		return array(
			'core/paragraph',
			'core/heading',
			'core/list',
			'create-block/rating-block'
		);
	}

	return $allowed_block_types;
}
add_filter( 'allowed_block_types_all', 'limit_rating_block_to_post_type', 10, 2 );

使用此过滤器,您可以指定何时何地将额定块插入。在这种情况下,该代码仅在帖子中使用段落,标题,列表和评分块。如果您打开新帖子并单击蓝色 + 插入器或键入“/”以插入块,您会看到选项现在非常有限:

Limit the rating block to only be used in Posts.

这是要考虑的事情,尤其是对于CPT,您可能只希望有限数量的核心或自定义块作为用户的选项显示。

包起来

构建多个自定义块时有很多要考虑的事情。希望该教程帮助组织了一些方法,并为您提供了多块蓝图,以推动自己的自定义进行。

这是带代码的存储库 如果您想克隆它或为您的需求分叉。

祝好运并玩得开心点!

了解更多的资源 

这些是用于开发本教程的一些有用资源。探索这些以加深您的障碍知识:

道具 @BPH@rmartinezduque@NDIEGO,和 @韦尔奇 用于校对和所有有用的建议!

By zhuon

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注