如何在块编辑器中阻止链接使用图像的URL?

时间:2019-01-03 作者:OpensaurusRex

我正在为一个客户端开发插件,在保存和重新加载页面后遇到了一个有趣的问题。由于我很难找到任何实际的文档,我一直在修改以下示例:https://github.com/WordPress/gutenberg-examples/. 因此,我得到以下错误:

块。min.js?版本=6.0.4:2块验证:的块验证失败library-plugin/feature-snapshot ({名称:“库插件/功能快照”,标题:“功能快照”,图标:{…},类别:“布局”,属性:{…},…})。

预期:

<div class="wp-block-library-plugin-feature-snapshot undefined file-wrapper"><a class="icon-snapshot-btn large" href="https://library.plugin.testing/wp-content/plugins/library-plugin/assets/images/snapshot-100x100.jpg" target="_blank"><img src="https://library.plugin.testing/wp-content/plugins/library-plugin/assets/images/snapshot-100x100.jpg"/><h2>Feature Snapshot</h2><p>A summary listing of new features and functionality. This is a great toolto determine what changes apply to your organization</p></a></div>

实际值:

<div class="wp-block-library-plugin-feature-snapshot undefined file-wrapper"><a class="icon-snapshot-btn large" href="https://library.plugin.testing/wp-content/uploads/Plugin-Indirect-18.3-Release-Preview.pdf" target="_blank"><img src="https://library.plugin.testing/wp-content/plugins/library-plugin/assets/images/snapshot-100x100.jpg"/><h2>Feature Snapshot</h2><p>A summary listing of new features and functionality. This is a great toolto determine what changes apply to your organization</p></a></div>

代码如下:

(function (blocks, editor, i18n, element, components, _) {
    let el = element.createElement;
    let RichText = editor.RichText;
    let MediaUpload = editor.MediaUpload;

    blocks.registerBlockType(\'library-plugin/feature-snapshot\', {
        title: i18n.__(\'Feature Snapshot\', \'library-plugin\'),
        icon: \'index-card\',
        category: \'layout\',
        attributes: {
            mediaID: {
                type: \'number\',
            },
            mediaURL: {
                type: \'string\',
                source: \'attribute\',
                selector: \'img\',
                attribute: \'src\',
            },
        },
        edit: function (props) {
            let attributes = props.attributes;

            let onSelectFile = function (media) {
                return props.setAttributes({
                    mediaURL: media.url,
                    mediaID: media.id,
                });
            };

            return (
                el(\'div\', {className: props.className + \' file-wrapper\'},
                    el(\'a\', {
                            className: \'icon-snapshot-btn large\',
                            href: attributes.mediaURL,
                            target: \'_blank\'
                        },
                        el(\'img\', {
                            src: window.featureSnapshotBlocks.pluginUrl
                                + \'/assets/images/snapshot-100x100.jpg\'
                        }),
                        el(\'h2\', {}, i18n.__(\'Feature Snapshot\', \'library-plugin\')),
                        el(\'p\', {}, i18n.__(\'A summary listing of new features and functionality. This is a great tool\'
                            + \'to determine what changes apply to your organization\')),
                        el(MediaUpload, {
                            onSelect: onSelectFile,
                            value: attributes.mediaURL,
                            render: function (obj) {
                                return el(
                                    components.Button,
                                    {
                                        className: \'button button-large\',
                                        onClick: obj.open
                                    },
                                    !attributes.mediaURL
                                        ? i18n.__(\'Upload/Select File\', \'library-plugin\')
                                        : i18n.__(\'Change File\', \'library-plugin\')
                                );
                            }
                        }),
                    )
                )
            );
        },
        save: function (props) {
            let attributes = props.attributes;

            return (
                el(\'div\', {className: props.className + \' file-wrapper\'},
                    el(\'a\', {
                            className: \'icon-snapshot-btn large\',
                            href: attributes.mediaURL,
                            target: \'_blank\'
                        },
                        el(\'img\', {
                            src: window.featureSnapshotBlocks.pluginUrl
                                + \'/assets/images/snapshot-100x100.jpg\'
                        }),
                        el(\'h2\', {}, i18n.__(\'Feature Snapshot\', \'library-plugin\')),
                        el(\'p\', {}, i18n.__(\'A summary listing of new features and functionality. This is a great tool\'
                            + \'to determine what changes apply to your organization\')),
                    )
                )
            );
        },
    });
})(
    window.wp.blocks,
    window.wp.editor,
    window.wp.i18n,
    window.wp.element,
    window.wp.components,
    window._,
);

1 个回复
最合适的回答,由SO网友:OpensaurusRex 整理而成

我发现我向属性传递了错误的信息。我把它改成这个,它开始工作了:

attributes: {
    mediaID: {
        type: \'number\',
    },
    mediaURL: {
        type: \'string\',
        source: \'attribute\',
        selector: \'a\',
        attribute: \'href\',
    },
},

相关推荐

如何清理wp-content/plugins/wordpress-seo中不必要的文件?

我目前维护Wordpress网站7年。磁盘使用率最近已满,因此我需要定期检查自动备份并保存这些备份,然后将其从服务器中删除。当我检查时,插件文件夹中的wordpress seo文件夹(这是Yoast seo默认插件文件夹)占用了太多空间。据我所知,它充满了各种版本的插件文件。确切地说,它位于wordpress seo插件的js/dist文件夹中。它包含几种类型的小型javascript,每个名称的末尾都有某种序列或版本号,总容量约为250-300 MB。我可以清理这些文件吗?如果是,是否安全?如果我从以前