fieldify/fields

WordPress自定义字段库。

维护者

详细信息

github.com/fieldifywp/fields

源代码

问题

安装: 10

依赖项: 2

建议者: 0

安全性: 0

星级: 3

关注者: 1

分支: 0

开放问题: 0

0.0.1 2024-01-31 16:38 UTC

GPL-2.0-or-later 0d74523b43c2e9ef5d9f5cb26bfd8b3ad344604d

This package is not auto-updated.

Last update: 2024-09-19 16:13:26 UTC

README

文档

Composer包，用于使用PHP创建WordPress编辑器中的由React驱动的字段、块和设置。

安装

从您的主题或插件目录中

composer require fieldify/fields

目前，此包不在Packagist上可用。要从GitHub安装，请将以下内容添加到您的composer.json文件中

{
	"require": {
		"fieldify/fields": "dev-main"
	},
	"repositories": [
		{
			"type": "git",
			"url": "git@github.com:fieldifywp/fields.git"
		},
		{
			"type": "git",
			"url": "git@github.com:blockifywp/utilities.git"
		}
	]
}

配置

要启用Fieldify包，请将以下内容添加到您的主题或插件中

// Require the Composer autoloader.
require_once __DIR__ . '/vendor/autoload.php';

// Configure main plugin file or theme functions.php.
Fieldify::register( __FILE__ );

用法

块

块注册与WordPress核心块注册相匹配，增加了用于在块侧边栏中分组控件的 'panels' 参数。属性必须指定 'panel' 键以进行分组。

块名称必须包含命名空间，并且以下格式为kebab-case： namespace/my-block。

register_custom_block( 'namespace/my-block', [
	'title'           => __( 'My Block', 'text-domain' ),
	'description'     => __( 'My custom block', 'text-domain' ),
	'category'        => 'custom',
	// Uncomment to use dashicons.
	// 'icon'		  => 'admin-site',
	'icon'            => [
		'src' => get_icon( 'wordpress', 'star-filled' ),
	],
	'keywords'        => [ 'my', 'block' ],
	'render_callback' => static function ( array $attributes, string $content ): string {
		return '<div class="my-block">' . ( $attributes['content'] ?? 'no content' ) . '</div>';
	},
	'style'           => plugin_dir_url( __FILE__ ) . '/assets/my-block.css',
	'supports'        => [
		'color'   => [
			'text'       => true,
			'background' => false,
		],
		'spacing' => [
			'blockGap' => true,
			'margin'   => true,
		],
	],
	'panels'          => [
		'conditional' => [
			'title' => 'Conditional',
		],
		'text'        => [
			'title' => 'Text',
		],
		'number'      => [
			'title' => 'Number',
		],
		'media'       => [
			'title' => 'Media',
		],
		'ui'          => [
			'title' => 'UI',
		],
		'custom'      => [
			'title' => 'Custom',
		],
	],
	// Uncomment to use inner blocks.
	//'template'      => [],
	//'template_lock' => false,
	'attributes'      => [
		'verticalAlign'      => [
			'type'    => 'string',
			'toolbar' => 'BlockVerticalAlignmentToolbar',
		],
		'horizontalAlign'    => [
			'type'    => 'string',
			'toolbar' => 'BlockAlignmentToolbar',
		],
		'hideContentSetting' => [
			'type'    => 'boolean',
			'label'   => 'Hide content setting',
			'control' => 'toggle',
			'default' => false,
			'panel'   => 'conditional',
		],
		'content'            => [
			'type'    => 'string',
			'control' => 'text',
			'default' => 'My block content',
			'panel'   => 'conditional',
			'show_if' => [
				[
					'attribute' => 'hideContentSetting',
					'operator'  => '!==',
					'value'     => true,
				],
			],
		],
		'checkbox'           => [
			'type'    => 'boolean',
			'label'   => __( 'Checkbox', 'text-domain' ),
			'control' => 'checkbox',
			'panel'   => 'ui',
		],
		'number'             => [
			'type'    => 'number',
			'label'   => __( 'Number', 'text-domain' ),
			'control' => 'number',
			'panel'   => 'number',
		],
		'unit'               => [
			'type'    => 'string',
			'label'   => __( 'Unit', 'text-domain' ),
			'control' => 'unit',
			'panel'   => 'number',
		],
		'range'              => [
			'type'    => 'number',
			'label'   => __( 'Range', 'text-domain' ),
			'control' => 'range',
			'min'     => 0,
			'max'     => 100,
			'step'    => 1,
			'panel'   => 'number',
		],
		'dropdown'           => [
			'type'    => 'string',
			'label'   => __( 'Dropdown', 'text-domain' ),
			'control' => 'select',
			'options' => [
				[
					'value' => 'option1',
					'label' => 'Option 1',
				],
				[
					'value' => 'option2',
					'label' => 'Option 2',
				],
				[
					'value' => 'option3',
					'label' => 'Option 3',
				],
			],
			'panel'   => 'ui',
		],
		'paragraphContent'   => [
			'type'    => 'string',
			'label'   => __( 'Paragraph content', 'text-domain' ),
			'control' => 'textarea',
			'panel'   => 'text',
		],
		'hiddenField'        => [
			'type'    => 'string',
			'label'   => __( 'Hidden field', 'text-domain' ),
			'control' => 'hidden',
			'panel'   => 'text',
		],
		'image'              => [
			'type'    => 'string',
			'label'   => __( 'Image picker', 'text-domain' ),
			'control' => 'image',
			'panel'   => 'media',
		],
		'youtubeUrl'         => [
			'type'    => 'string',
			'label'   => __( 'YouTube URL', 'text-domain' ),
			'control' => 'embed',
			'panel'   => 'media',
		],
		'galleryImages'      => [
			'type'    => 'array',
			'label'   => __( 'Gallery images', 'text-domain' ),
			'control' => 'gallery',
			'panel'   => 'media',
		],
		'iconPicker'         => [
			'type'    => 'object',
			'label'   => __( 'Select Icon', 'text-domain' ),
			'control' => 'icon',
			'panel'   => 'custom',
		],
		'colorOrGradient'    => [
			'type'    => 'string',
			'label'   => __( 'Color or Gradient', 'text-domain' ),
			'control' => 'color',
			'panel'   => 'ui',
		],
		'repeater'           => [
			'type'      => 'array',
			'label'     => __( 'Repeater', 'text-domain' ),
			'control'   => 'repeater',
			'panel'     => 'custom',
			'subfields' => [
				'item' => [
					'type'    => 'string',
					'label'   => __( 'Item', 'text-domain' ),
					'control' => 'text',
				],
			],
		],
	],
] );

属性

块属性定义为键名为属性名称的关联数组，值为选项数组。

元框

register_custom_meta_box( 'my-meta-box', [
	'title'      => 'My Meta Box',
	'post_types' => [ 'post' ],
	'context'    => 'side',
	'priority'   => 'default',
	'fields'     => [
		'hideContentSetting' => [
			'default' => false,
			'control' => 'toggle',
		],
		'content' => [
			'label'   => 'Content',
			'control' => 'text',
			'default' => 'My meta box content',
			'show_if' => [
				[
					'field'    => 'hideContentSetting',
					'operator' => '!==',
					'value'    => true,
				],
			],
		],
	],
] );

字段

元框字段定义为键名为字段名称的关联数组，值为选项数组。

设置

register_custom_settings('my-settings', [
	'title' => 'My Settings',
	'fields' => [
		'content' => [
			'type' => 'string',
			'default' => 'My settings content',
		],
	],
]);

支持的控件

核心控件

大多数WordPress核心控件组件类型都受支持。每个组件在WordPress块编辑器参考指南中都有可用的props。

https://developer.wordpress.org/block-editor/reference-guides/components/

  • 文本
  • 切换
  • 复选框
  • 数字
  • 单位
  • 范围
  • 多行文本框
  • 选择 - (支持额外的React Select属性，例如 creatable、searchable、multiple 等.)

自定义控件

  • 图片
  • 嵌入
  • 画廊
  • 图标
  • 颜色
  • 重复器
    • 子字段： 数组
    • 可排序： 布尔值
    • 方向： 字符串 (行|列)

实用函数

  • register_block: 字符串 $id, 数组 $args
    • 注册具有给定id和选项的块。
  • register_meta_box: 字符串 $id, 数组 $args
    • 注册具有给定id和选项的元框。
  • register_settings: 字符串 $id, 数组 $args
    • 注册具有给定id和选项的设置面板。
  • get_icon: 字符串 $set, 字符串 $name, $size = null
    • 返回svg图标标记。
  • block_is_rendering_preview
    • 在块渲染回调中使用，以确定块是否在编辑器预览中渲染。