README

这是一个原型，本可以成为一个功能齐全的视觉表单构建器。它过于雄心勃勃，边缘情况和wp.org插件审查团队中的那些人将它扼杀了。

如果我从头开始，我会用React构建组件，而不是用HTML和hack。选择等字段可能比几个选项复杂得多。我可能在构建原型时忘记了optiongroup等的存在，几乎所有内容都基于这样一个想法：你有可以接受一个子元素的元素。

如果你好奇为什么它不像我想的那么简单，请参阅以下限制。

屏幕截图

它是如何工作的

将其视为WP Libre Form的预处理器。它提供了一些内置的构建块，并允许您从任何* HTML创建块。请参阅限制。

所有标准功能都应该运行正常。动态值？检查。Polylang的多语言支持？检查。

术语

很容易混淆某个词的含义。希望这能有所帮助。

• 字段：wplfb-field文章类型中的内容字段。如果使用 wplf()->plugins->Formbuilder->addField()，则与相同键的数组元素匹配。
• 模板：wplfb-field文章类型中的字段模板textarea。同样适用于PHP API。用于为可定制的输入提供包装HTML。

限制

结果是，处理任意HTML相当困难。特别是如果它必须由用户编辑。HTML规范没有使事情变得更容易。像<textarea>这样的元素除了支持value属性外，还接受默认输入值作为子元素。<button>不接受value属性，而是渲染其内部的所有HTML。

这些都是目前存在的限制。一些可能是永久的，但大多数都可以修复。只是我有限的这段时间、资源和动力限制了我修复这些限制的能力。

如果这个列表中缺少了某些内容？添加一个问题或发送带有它的PR。

在字段内部的嵌套HTML标签不工作

示例

<div class="wrapper" doge="cate">
  <div class="test">
    <div class="wplfb-child-container"></div>
  </div>
</div>

div.test 会神奇地消失。修复这个问题可能需要递归，而代码库中已经有了很多递归。 如果你们有想法如何修复它，请贡献。

这是一个与<select>输入等问题相关的问题。

解决方案：告诉我。WPLF的动态值功能？

在字段内部只能自定义第一个HTML标签

与前面的限制相关，但也是一项设计决策。

<div class="wrapper" doge="cate">
  <div class="wplfb-child-container"></div>
</div>

您可以编辑类和doge属性，但不能控制具有wplfb-child-container类的元素。

这可能会永远保持这样，有几个原因

1. 它极大地增加了代码库的环路复杂度
2. 这是一个UI噩梦
3. 可以解决这个问题

修改字段不会同步到表单

这主要是一个设计决定。当你向表单添加一个字段时，它将始终以相同的方式渲染，即使你对底层字段对象进行了更改。

示例

1. 向表单添加包装字段
2. 编辑包装字段并添加新属性
3. 保存表单

表单中的包装字段将不会包含新属性。

可能在后续版本中通过向表单或单个字段添加同步按钮来修复。

这是为了保证此插件的更新可以更改默认设置而不会破坏任何东西。

解决方案：添加一个新字段，选择相同的类型，添加属性，删除旧字段。

如何添加字段

简单的方法

使用 wp-admin：/wp-admin/post-new.php?post_type=wplfb-field

遵循字段元框中的说明。

使用 PHP

这假设您正在运行 WP Libre Form 的最新版本。

wplf()->plugins->Formbuilder->addField([
  'key' => 'U0', // Used to differentiate fields from others, especially when two fields share the same name
  'name' => 'Range', // Name shown to the end user
  'field' => '<input type="range" name="range" value="3" min="1" max="5">', // HTML fragment. Attributes will be editable.
  'template' => '<div class="wrapper-div"><div class="wplfb-field-container"></div></div>', // HTML fragment for wrapping field with
  'label' => 'On a scale of 1 to 5, how did we do?', // Default label for input, leave empty to disable
]);

包装字段

有时您想嵌套字段或将它们分组到逻辑部分。包装字段允许您做到这一点。它们是正常字段，但通常不包含任何输入。

<div>
  <p>Elements before inputs</p>
  <div class="wplfb-child-container">
    <!-- Children can be put here! -->
  </div>
  <p>Elements after inputs</p>
</div>

类 wplfb-child-container 是必需的。

模板

除了有包装字段外，您还可以提供包含字段的模板。这对于在输入周围添加样板文本很有用，允许您利用 Bootstrap、Foundation 或 Pure 等CSS框架的强大功能。模板不能有可配置参数。但您可以使用包装字段来实现这一点。

<div>
  <h3>This is a very important heading</h3>

  <div class="wplfb-field-container">
    <!-- This element will be replaced with the input element! -->
  </div>
</div>

类 wplfb-field-container 是必需的。

等等。模板和包装看起来很相似，对吗？

确实如此，但它们并不相同。模板不能包含多个字段，也就是说，它们不能有子元素。当您使用模板时，您用于模板的标签将被丢弃，并替换为字段，但当你使用包装字段时，您可以将其放入任何字段中，并且包装元素将被保留。

常见问题解答

为什么没有拖放功能？

DnD 接口通常很繁琐。当然，它们在桌面上的单级表单中效果很好，但复杂表单可能具有多个级别。在屏幕空间有限的移动设备上使用它会使元素丢失变得非常容易。

不依赖于 DnD，代码保持相对简单，并在所有设备上工作。当前的移动控制应该感觉直观，添加键盘快捷键后，一切都应该变得容易。

如果有需求，可以实施拖放控制，代码中没有阻止这样做的内容。