WordPress自定义块问题：无法读取query数组属性，需创建可配置按钮

1. 修正block.json属性配置 #

query类型的属性必须明确指定选择器和子属性的来源，否则无法正确解析存储数据。正确配置示例：

{
  "apiVersion": 3,
  "name": "custom/hero-button",
  "title": "Hero Button",
  "category": "widgets",
  "attributes": {
    "hero_button_1": {
      "type": "array",
      "source": "query",
      "selector": ".hero-button", // 对应渲染的按钮元素类名
      "query": {
        "url": {
          "type": "string",
          "source": "attribute",
          "attribute": "href" // 从a标签的href属性读取URL
        },
        "text": {
          "type": "string",
          "source": "text" // 从a标签内读取文本内容
        }
      }
    }
  },
  "editorScript": "file:./index.js"
}

2. 修复edit.js的属性读写逻辑 #

由于query返回的是数组类型数据，需先取数组第一个元素处理，同时用对应组件分别处理文本和URL：

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText, URLInputButton } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
  const blockProps = useBlockProps();
  // 取数组第一个元素，默认空对象避免报错
  const buttonData = attributes.hero_button_1?.[0] || {};

  // 统一处理按钮数据更新，保持数组结构
  const updateButton = (newData) => {
    setAttributes({
      hero_button_1: [ { ...buttonData, ...newData } ]
    });
  };

  return (
    <div {...blockProps}>
      <RichText
        tagName="a"
        className="hero-button"
        value={buttonData.text || ''}
        onChange={(text) => updateButton({ text })}
        placeholder={__('输入按钮名称...', 'custom-blocks')}
      />
      <URLInputButton
        url={buttonData.url || ''}
        onChange={(url) => updateButton({ url })}
        label={__('设置按钮链接', 'custom-blocks')}
      />
    </div>
  );
}

注意：不要用RichText绑定URL属性，RichText仅用于处理文本内容，URL需用URLInputButton组件处理。

3. 修复save.js的渲染逻辑 #

同样从数组中取第一个元素，确保渲染时读取正确属性值：

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save({ attributes }) {
  const buttonData = attributes.hero_button_1?.[0] || {};
  const blockProps = useBlockProps.save();

  // 无文本时不渲染空按钮
  if (!buttonData.text) return null;

  return (
    <div {...blockProps}>
      <a
        className="hero-button"
        href={buttonData.url || '#'} // 空URL时默认设为#
      >
        {RichText.Content({ value: buttonData.text })}
      </a>
    </div>
  );
}

关键注意点 #

• query类型属性必须配置selector，子属性要对应DOM元素的属性或文本来源
• 始终保持hero_button_1的数组结构，更新时需将数据放入数组第一个元素中
• 区分文本和URL的处理组件，避免用错误组件绑定属性

内容的提问来源于stack exchange，提问作者Patricio