README

使用WordPress Block Framework，您可以使用PHP创建WordPress块，而无需编写任何JavaScript代码。适用于创建简单的块和将短代码转换为块。将其视为ACF的可插入版本。

实际上，这个仓库是一个可工作的插件，演示了如何在插件中实现块框架。有关详细信息，请参阅 block-framework-example.php。

如何使用

步骤1A - 安装（使用composer）

composer require pramodjodhani/wp-block-framework

步骤1B - 安装（手动）

将整个仓库复制到您的主题或插件中。然后包含 block-framework/class-block-framework.php 文件。

include "./wp-block-framework/block-framework/class-block-framework.php";

步骤2

像调用WordPress函数 register_block_type 一样调用 WP_Block_Framework::register_block_type()。

WP_Block_Framework::register_block_type(
	'wpbf-example/team-member',
	array(
		'title'    => 'Team member',
		'icon'     => 'groups',
		'category' => 'widgets',
		'keywords' => array( __( 'team' ), __( 'member' ), __( 'crew' ) ),
	)
);

您只需要包含 wpbf 参数，并在其中包含 template 和 fields 参数。

WP_Block_Framework::register_block_type(
	'wpbf-example/team-member',
	array(
		'title'    => 'Team member',
		'icon'     => 'groups',
		'category' => 'widgets',
		'keywords' => array( __( 'team' ), __( 'member' ), __( 'crew' ) ),
		'wpbf'     => array(
			'template' => dirname( __FILE__ ) . '/templates/team-member.php',
			'fields'   => array(
				array(
					'id'          => 'name',
					'type'        => 'text',
					'title'       => 'Name',
					'desc'        => 'Team Member name',
					'placeholder' => 'Name',
				),
				array(
					'id'          => 'position',
					'type'        => 'textarea',
					'title'       => 'Bio',
					'desc'        => 'Position in the company',
					'placeholder' => 'Ex. Head of marketing..',
				),
				array(
					'id'    => 'image',
					'type'  => 'image',
					'title' => 'Image',
					'desc'  => 'A nice Headshot.',
				),
			),
		),
	),
);

步骤3 创建模板

WPBF将加载我们在步骤2中提到的 template（/templates/team-member.php）。在您的主题/插件中创建此文件。

数据以 $attributes 变量的形式提供给模板。$attribute 是一个关联值数组，可以使用字段 id 来检索字段值，例如：$attributes['name']。

<div class="team-member-wrap">
	<div class="team-member">
		<div class="team-member__photo">
			<?php if ( isset( $attributes['image'][0] ) ) { ?>
			<img src="<?php echo $attributes['image'][0]['sizes']['medium']['url']; ?>" alt="Team member photo">
			<?php } ?>
		</div>
		<div class="team-member__details">
			<h2><?php echo $attributes['name']; ?></h2>
			<small><?php echo $attributes['position']; ?></small>
		</div>
	</div>
</div>

就是这样 🕺

这里是这个块的工作状态

支持的字段类型

• textarea
• text
• Password
• date
• select
• toggle
• radio
• checkboxes
• file
• image
• color
• group（重复字段 🔁 ）

即将推出功能

• 支持 block.json
• 条件字段
• 改进UX