Блок Wordpress-Gutenberg не может предварительно просмотреть блок в редакторе после обновления - PullRequest
Новая
       57

Блок Wordpress-Gutenberg не может предварительно просмотреть блок в редакторе после обновления

0 голосов
/ 27 мая 2020

Я делаю блок Wordpress Gutenberg, и на данный момент все отлично работает. Я могу ввести блок в редактор и просмотреть его, я публикую sh страницу, и содержимое отображается, хотя функция сохранения без проблем. Проблема в том, что когда я пытаюсь просмотреть блок в редакторе после refre sh, я получаю эту ошибку. 

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Function.invokeGetter (<anonymous>:1:142)

Я думаю, это как-то связано с тем, как я передаю реквизиты обратно в файл редактора, но я не уверен. Вот часть кода

index. js file 

    attributes: {
    NewIframeCode: {
        type: "string",
        default: "",
        slector: "responsive-iframe",
    },
    staticIframeCode: {
        type: "string",
        default: "",
        selector: "static-iframe",
    },
},

// @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
edit, //imported in from edit.js built in react + ES6
save: function (props) {
    return (
        <Fragment>
            <style>
                .Video iframe,.Video object,.Video embed,.Video video,.Video
                img
                {{
                    position: " absolute",
                    width: "100%",
                    height: "10%",
                    left: " 0",
                    top: " 0",
                }}
            </style>
            <span className="responsive-iframe">
                {props.attributes.NewIframeCode}
            </span>

            <span className="static-iframe">
                {props.attributes.staticIframeCode}
            </span>
        </Fragment>
    );
},

Редактировать файл здесь 

    class App extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            NewIframeCode: this.props.attributes.NewIframeCode,
            linkInput: "hello do",
            responceType: "4",
            renderIframeR: null,
            key_value: 0,
        };
    }
render() {
    if (this.state.renderIframeR === true) {
        return <Fragment>{this.state.NewIframeCode}</Fragment>
    } else {
        return (
            <Fragment>
                <div
                    className="inputUrlDiv">
                    <div>

                    </div>


                    <div className="title-container">
                        <h5
                            className="embed-title"
                        >
                            Embed Player videos
                        </h5>
                    </div>
                    <div
                        className="input-form"

                    >
                        <form style={{ boxSize: "inherit" }}>
                            <input
                                className="input-text"
                                type="text"

                            />
                            <input
                                className="submit-btn"
                                type="submit"
                                value="responsive"
                                onClick={this.trueSplitingLink}

                            />
                            <input
                                className="submit-btn"
                                type="submit"
                                value="static"
                                onClick={this.falseSplitingLink}

                            />
                        </form>
                    </div>
                    <div className="try-links">
                        <p>test video link here</p>
                                            </div>
                </div>
            </Fragment>
        );
    }
}

Другая ошибка, которую я получаю, это 

Block validation: Block validation failed for `ezwebplayer/ezweb-player-embeded` ({name: "ezwebplayer/ezweb-player-embeded", icon: {…}, attributes: {…},....

Content generated by `save` function:

<span class="responsive-iframe"></span><span class="static-iframe"></span>

Content retrieved from post body:

<span class="responsive-iframe"><div class="responsive-iframe" 
style="position:relative;width:100%;height:0;padding-bottom:56%"><iframe class="iframe" 
src="https://d3kedutmscl43l.cloudfront.net/iframe.htm?v=7prbIKQ&amp;w=600&amp;h=338&amp;r" 
scrolling="no" style="border-width:0;position:absolute;width:100%;height:100%;left:0;top:0" 
allowfullscreen></iframe></div></span><span class="static-iframe"></span>
...