README

WordPress 主题的块库。

安装

composer require kunoichi/block-library

激活

首先，在你的主题的 functions.php 文件中加载自动加载器。

require __DIR__ . '/vendor/autoload.php';

2. 启用块库。

Kunoichi\BlockLibrary::enable();

选择块

如果你想显式启用某些块，请声明类名。

Kunoichi\BlockLibrary::enable( [
	\Kunoichi\BlockLibrary\Blocks\PostList::class,
	\Kunoichi\BlockLibrary\Blocks\BubbleBlock::class,
] );

可用的块类位于 src/Kunoichi/BlockLibrary/Blocks。

否则，你可以使用第二个参数排除不需要的块。

// 1st param is inclusive, 2nd param is exclusive.
Kunoichi\BlockLibrary::enable( [], [
	\Kunoichi\BlockLibrary\Blocks\PriceTable::class,
] );

块的工作原理

所有块都通过相应的 PHP 类和 JavaScript 注册，因此每个块至少有一个 PHP 文件和一个 JS 文件。

PHP 文件位于 src/Kunoichi/BlockLibrary/Blocks，JavaScript 文件也位于 assts/js/blocks;

已注册的块

有 18 个块可用。

警报 kunoichi/alert

带样式的警报块。

气泡 kunoichi/bubble

带头像的气泡。

卡片 kunoichi/card

卡片样式链接。
父级: 仅在 kunoichi/cards 中可用

卡片 kunoichi/cards

显示卡片样式链接。有助于分类链接列表等。

剪贴板 kunoichi/clipboard

用于复制文本的剪贴板按钮。

号召性用语 kunoichi/cta

显示用于引发用户操作的 UI 部分。
动态块: 查看 CallToAction

术语 kunoichi/dt

定义术语。
父级: 仅在 kunoichi/definition-list 中可用

描述 kunoichi/dd

定义描述。
父级: 仅在 kunoichi/definition-list 中可用

定义列表 kunoichi/definition-list

定义列表。

内部链接 kunoichi/internal-link

与 Oembed 链接块相同，但此链接以帖子 ID 引用。
动态块: 查看 InternalLink

优惠列表 kunoichi/offer-list

显示带价格、链接和规格的产品优惠列表。

优惠内容 kunoichi/offer-content

优惠的标题、价格和规格。
父级: 仅在 kunoichi/offer 中可用

优惠操作 kunoichi/offer-action

优惠块的行动链接。
父级: 仅在 kunoichi/offer 中可用

优惠 kunoichi/offer

带价格、链接和规格的产品优惠。有助于推广外部产品。
父级: 仅在 kunoichi/offer-list 中可用

面板 kunoichi/panel

用于强调和分离内容的面板块。

帖子列表 kunoichi/posts

以各种格式显示帖子列表。
动态块: 查看 PostList

价格表 kunoichi/price-table

显示价格表。插入 3 或 4 个项目。

价格项 kunoichi/price

价格表中的价格项。
父级: 仅在 kunoichi/price-table 中可用

部分 kunoichi/section

支持背景的增强分组块。

步骤 kunoichi/step

步骤块
父级：仅在 kunoichi/steps 中可用

如何使用 kunoichi/steps

逐步操作指南。已准备好 JSON-LD 格式。

评价 kunoichi/testimonials

显示评价列表。
动态块：请参阅 评价

瓷砖 kunoichi/tile

在网格中的瓷砖项目。
父级：仅在 kunoichi/tiled-grid 中可用

网格布局 kunoichi/tiled-grid

面板项目的网格样式布局。已准备好文本和背景颜色。

目录 kunoichi/toc

显示从文章内容中提取的标题标签的目录。

小工具

您可以通过与块相同的方式启用小工具。

\Kunoichi\BlockLibrary::widgets();

此方法还具有 $includes 和 $excludes 参数。

开发

此库不是插件，因此它本身不会产生影响。请创建一个空主题并从中加载。

构建资源

此库使用 npm 构建资源。

# Install npm.
npm install
# Build assets.
npm run package
# Watch changes.
npm run watch

许可协议

此库根据 GPL 3.0 及以后版本许可。

© 2019 Kunoichi INC.