输入字段

该区块是实验性的，可能会在没有通知的情况下更改或被移除。

表单的基本构建块。

• Name: core/form-input
• Category: widgets
• API Version: 3
• Block Type: Hybrid（静态保存 + 服务器增强）
• Keywords: input, form

区块关系

Ancestor 区块：
– core/form

属性

通过 block.json 中的 attributes 属性定义。

属性	类型	默认值	描述
type	string	"text"	—
name	string	—	—
label	rich-text	"Label"	Source: rich-text. Selector: .wp-block-form-input__label-content. Role: content
inlineLabel	boolean	false	—
required	boolean	false	Source: attribute. Selector: .wp-block-form-input__input. HTML attr: required
placeholder	string	—	Source: attribute. Selector: .wp-block-form-input__input. HTML attr: placeholder. Role: content
value	string	""	Source: attribute. Selector: input. HTML attr: value
visibilityPermissions	string	"all"	—

支持功能

通过 block.json 中的 supports 属性定义。

• anchor: true
• reusable: false
• spacing:
  • margin: ["top","bottom"]

区块标记

这是一个 混合区块。它保存静态标记，服务器在渲染时可能会对其进行增强。

<!-- wp:form-input -->
<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div>
<!-- /wp:form-input -->

<!-- wp:form-input {"type":"email"} -->
<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="email" name="label" aria-required="false"/></label></div>
<!-- /wp:form-input -->

<!-- wp:form-input {"type":"number"} -->
<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="number" name="label" aria-required="false"/></label></div>
<!-- /wp:form-input -->

<!-- wp:form-input {"type":"tel"} -->
<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="tel" name="label" aria-required="false"/></label></div>
<!-- /wp:form-input -->

<!-- wp:form-input {"type":"url"} -->
<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="url" name="label" aria-required="false"/></label></div>
<!-- /wp:form-input -->

来源

• block.json (参考)
• 源代码目录 — 浏览 edit 和 save 源文件、index.php 等。