WordPress自定义块编辑时无法读取已保存链接问题求助

问题描述 #

我正在开发首个WordPress自定义块，该块包含两个带链接的按钮。文章更新后链接能正常保存并在前端显示，但再次进入文章编辑页面时，链接输入框为空，无法读取已保存的链接。新链接可正常保存更新，但旧链接无法编辑，给编辑工作造成困扰。

问题原因 #

问题出在属性定义的source配置上。你为link1和link2设置了source: 'attribute'，这意味着WordPress会尝试从保存的HTML内容中提取链接值，而不是直接存储和读取属性值。但编辑组件（Edit）并未渲染出与保存组件（save）结构完全匹配的HTML，导致编辑器无法正确解析已保存的链接。

解决方案 #

1. 调整属性定义，直接存储链接值 #

移除属性中的source、selector、attribute字段，让WordPress直接将链接值作为块属性存储，而非从HTML中提取。同时为属性添加默认值，避免初始状态下出现undefined。

2. 规范块注册与组件结构 #

• 块的registerBlockType只需执行一次，不要在save.js中重复注册
• 在save组件中使用useBlockProps.save()保持根元素属性的一致性

修改后的edit.js代码 #

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

import './editor.scss';

registerBlockType( 'my-custom-block', {
    // 保留你的其他配置（title, icon, category等）
    attributes: {
        link1: {
            type: 'string',
            default: ''
        },
        link2: {
            type: 'string',
            default: ''
        }
    },
} );

export default function Edit({ attributes, setAttributes }) {
    const { link1, link2 } = attributes;

    return (
        <div { ...useBlockProps() }>
            <div className="card-afil">
                <div className="btn-afil">
                    <span className="btn-afil-img">
                        <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/amazon.webp" />
                    </span>
                    <span className="btn-afil-text-card">
                        <URLInputButton
                            url={ link1 }
                            onChange={ ( newUrl ) => setAttributes( { link1: newUrl } ) }
                        />
                    </span>
                </div>

                <div className="btn-afil">
                    <span className="btn-afil-img">
                        <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/beleza-na-web.webp" />
                    </span>
                    <span className="btn-afil-text-card">
                        <URLInputButton
                            url={ link2 }
                            onChange={ ( newUrl ) => setAttributes( { link2: newUrl } ) }
                        />
                    </span>
                </div>
            </div>
        </div>
    );
}

修改后的save.js代码 #

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

export default function save({ attributes }) {
    const { link1, link2 } = attributes;

    return (
        <div { ...useBlockProps.save() }>
            <div className="card-afil">
                <div className="btn-afil">
                    <span className="btn-afil-img">
                        <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/amazon.webp" />
                    </span>
                    <span className="btn-afil-text-card">
                        <a href={ link1 } className="btn-afil-text">Ver Preço</a>
                    </span>
                </div>

                <div className="btn-afil">
                    <span className="btn-afil-img">
                        <img src="https://www.adoromaquiagem.com.br/wp-content/uploads/2023/05/beleza-na-web.webp" />
                    </span>
                    <span className="btn-afil-text-card">
                        <a href={ link2 } className="btn-afil-text">Ver Preço</a>
                    </span>
                </div>
            </div>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者Marcos Nóbrega