自定义WordPress区块编辑器按钮组件：如何绑定站内页面URL？

问题根源 #

默认的链接工具栏按钮是为选中的文本内容添加链接，所以会将链接插入到按钮内部文本中，而非设置按钮自身<a>标签的href属性。要实现需求，必须自定义工具栏控件，直接绑定到按钮的href属性上。

步骤1：隐藏默认链接按钮 #

在注册区块时，通过supports配置禁用默认链接支持，即可自动隐藏默认的链接工具栏按钮：

registerBlockType('custom/button-block', {
  // ...其他区块配置
  supports: {
    link: false, // 禁用默认链接功能，隐藏默认链接按钮
  },
});

步骤2：用官方组件实现“搜索或输入URL”功能 #

WordPress区块编辑器提供了两个内置组件，可直接实现需求，无需自行开发搜索逻辑：

选项1：使用URLInput组件（轻量化工具栏版）

URLInput是轻量化的工具栏输入组件，自带站内页面搜索、自定义URL输入，以及链接打开方式设置：

import { useBlockProps, BlockControls, ToolbarGroup, URLInput, RichText } from '@wordpress/block-editor';
import { registerBlockType } from '@wordpress/blocks';

registerBlockType('custom/button-block', {
  title: '自定义按钮',
  icon: 'button',
  category: 'common',
  attributes: {
    href: {
      type: 'string',
      default: '',
    },
    text: {
      type: 'string',
      source: 'html',
      selector: 'a',
    },
    target: {
      type: 'string',
      default: '',
    },
  },
  supports: {
    link: false,
  },
  edit: ({ attributes, setAttributes }) => {
    const blockProps = useBlockProps();
    const { href, text, target } = attributes;

    return (
      <>
        <BlockControls>
          <ToolbarGroup>
            <URLInput
              value={href}
              onChange={(newHref) => setAttributes({ href: newHref })}
              placeholder="输入URL或搜索页面"
              onTargetChange={(newTarget) => setAttributes({ target: newTarget })}
              target={target}
            />
          </ToolbarGroup>
        </BlockControls>
        <div {...blockProps}>
          <a 
            href={href} 
            target={target} 
            rel={target === '_blank' ? 'noopener noreferrer' : undefined}
          >
            <RichText
              tagName="span"
              value={text}
              onChange={(newText) => setAttributes({ text: newText })}
              placeholder="输入按钮文本"
            />
          </a>
        </div>
      </>
    );
  },
  save: ({ attributes }) => {
    const blockProps = useBlockProps.save();
    const { href, text, target } = attributes;
    return (
      <div {...blockProps}>
        <a
          href={href}
          target={target}
          rel={target === '_blank' ? 'noopener noreferrer' : undefined}
        >
          {text}
        </a>
      </div>
    );
  },
});

选项2：使用LinkControl组件（弹窗版，匹配官方按钮交互）

如果需要和官方按钮组件一致的“点击图标弹出弹窗”交互，可使用LinkControl组件：

import { useBlockProps, BlockControls, ToolbarGroup, ToolbarButton, LinkControl, RichText } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import { registerBlockType } from '@wordpress/blocks';

registerBlockType('custom/button-block', {
  // ...其他配置同选项1
  edit: ({ attributes, setAttributes }) => {
    const blockProps = useBlockProps();
    const { href, text, target } = attributes;
    const [isModalOpen, setIsModalOpen] = useState(false);

    return (
      <>
        <BlockControls>
          <ToolbarGroup>
            <ToolbarButton
              icon="admin-links"
              label="设置按钮链接"
              onClick={() => setIsModalOpen(true)}
            />
          </ToolbarGroup>
        </BlockControls>
        {isModalOpen && (
          <LinkControl
            value={{ url: href, target: target }}
            onChange={(link) => {
              setAttributes({
                href: link.url,
                target: link.target,
              });
              setIsModalOpen(false);
            }}
            onClose={() => setIsModalOpen(false)}
          />
        )}
        <div {...blockProps}>
          <a 
            href={href} 
            target={target} 
            rel={target === '_blank' ? 'noopener noreferrer' : undefined}
          >
            <RichText
              tagName="span"
              value={text}
              onChange={(newText) => setAttributes({ text: newText })}
              placeholder="输入按钮文本"
            />
          </a>
        </div>
      </>
    );
  },
  // save函数同选项1
});

核心逻辑说明 #

• 把链接属性（href、target）作为区块的自定义属性存储，而非操作按钮内部的文本内容。
• 渲染按钮时，直接将href绑定到<a>标签的对应属性上，确保选择页面后URL直接作用于按钮本身。

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