plugins - How do I prevent the link from using url of the image in Block Editor?

admin管理员组

文章数量:1130349

I am working on a plugin for a client and am coming across an interesting issue after saving and reloading the page. Since I have had a hard time finding any actual documentation, I have been modifying examples from: /. As a result, I get this error:

blocks.min.js?ver=6.0.4:2 Block validation: Block validation failed for library-plugin/feature-snapshot ({name: "library-plugin/feature-snapshot", title: "Feature Snapshot", icon: {…}, category: "layout", attributes: {…}, …}).

Expected:

<div class="wp-block-library-plugin-feature-snapshot undefined file-wrapper"><a class="icon-snapshot-btn large" href="/wp-content/plugins/library-plugin/assets/images/snapshot-100x100.jpg" target="_blank"><img src="/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>

Actual:

<div class="wp-block-library-plugin-feature-snapshot undefined file-wrapper"><a class="icon-snapshot-btn large" href="/wp-content/uploads/Plugin-Indirect-18.3-Release-Preview.pdf" target="_blank"><img src="/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>

The code is as following:

(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.wpponents,
    window._,
);

I am working on a plugin for a client and am coming across an interesting issue after saving and reloading the page. Since I have had a hard time finding any actual documentation, I have been modifying examples from: https://github/WordPress/gutenberg-examples/. As a result, I get this error:

blocks.min.js?ver=6.0.4:2 Block validation: Block validation failed for library-plugin/feature-snapshot ({name: "library-plugin/feature-snapshot", title: "Feature Snapshot", icon: {…}, category: "layout", attributes: {…}, …}).

Expected:

<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>

Actual:

<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>

The code is as following:

(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.wpponents,
    window._,
);

• plugins
• block-editor

Share Improve this question edited Jan 3, 2019 at 14:50 OpensaurusRex asked Jan 3, 2019 at 14:38 OpensaurusRexOpensaurusRex 1631212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I figured out that I was passing the wrong information to the attributes. I changed it to this and it started working:

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

I am working on a plugin for a client and am coming across an interesting issue after saving and reloading the page. Since I have had a hard time finding any actual documentation, I have been modifying examples from: /. As a result, I get this error:

blocks.min.js?ver=6.0.4:2 Block validation: Block validation failed for library-plugin/feature-snapshot ({name: "library-plugin/feature-snapshot", title: "Feature Snapshot", icon: {…}, category: "layout", attributes: {…}, …}).

Expected:

<div class="wp-block-library-plugin-feature-snapshot undefined file-wrapper"><a class="icon-snapshot-btn large" href="/wp-content/plugins/library-plugin/assets/images/snapshot-100x100.jpg" target="_blank"><img src="/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>

Actual:

<div class="wp-block-library-plugin-feature-snapshot undefined file-wrapper"><a class="icon-snapshot-btn large" href="/wp-content/uploads/Plugin-Indirect-18.3-Release-Preview.pdf" target="_blank"><img src="/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>

The code is as following:

(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.wpponents,
    window._,
);

I am working on a plugin for a client and am coming across an interesting issue after saving and reloading the page. Since I have had a hard time finding any actual documentation, I have been modifying examples from: https://github/WordPress/gutenberg-examples/. As a result, I get this error:

blocks.min.js?ver=6.0.4:2 Block validation: Block validation failed for library-plugin/feature-snapshot ({name: "library-plugin/feature-snapshot", title: "Feature Snapshot", icon: {…}, category: "layout", attributes: {…}, …}).

Expected:

<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>

Actual:

<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>

The code is as following:

(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.wpponents,
    window._,
);

• plugins
• block-editor

Share Improve this question edited Jan 3, 2019 at 14:50 OpensaurusRex asked Jan 3, 2019 at 14:38 OpensaurusRexOpensaurusRex 1631212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I figured out that I was passing the wrong information to the attributes. I changed it to this and it started working:

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

本文标签： pluginsHow do I prevent the link from using url of the image in Block Editor