Блог

Здравствуйте, уважаемые разработчики,

Мне нужна небольшая помощь с редактором блоков WordPress Гутенберга, так как я сделал блок, который работал довольно хорошо.

Одной вещи не хватало, я решил добавить метку привязки » между одной из моих переменных реквизита в функции сохранения.

Сначала я добавил новый тег ввода в функцию редактирования, чтобы обновить атрибут href моего якоря.

на фронте все работает нормально. Единственная проблема, с которой я сталкиваюсь, заключается в том, что в редакторе статей backoffice Gutenberg мой блок возвращает HTML-код функции сохранения вместо функции редактирования.

Поэтому WordPress выдает мне ошибку, и мне всегда нужно нажимать кнопку разрешить, чтобы увидеть html-код функции сохранения.

Я даю вам свой код, я хочу знать, видите ли вы что-то странное, или, может быть, вы знаете о проблеме :

 const {registerBlockType} = wp.blocks
const {InspectorControls, MediaUpload} = wp.editor

registerBlockType('astra/ingreds', {
    title: 'Ligne d'Ingrédient',
    category: 'widgets',
    icon: 'smiley',
    attributes: {
        ingName: {type: "string"},
        ingQtt: {type: "string"},
        mediaID: {type: "string"},
        mediaURL: {type: "string"},
        bgurl: {type: "string"},
        ingLink: {type: "string"}
    },
    edit: function(props) {
        function updateIngName(e){
            props.setAttributes({ingName : e.target.value})
        }
        function updateIngQtt(e){
            props.setAttributes({ingQtt : e.target.value})
        }
        function updateLink(e){
            props.setAttributes({ingLink : e.target.value})
        }
    return (
            <div className="anton-cont-recette" id="container-recipe">
                <div className="ing-row">
                    <input className="ing-link" type="text" placeholder="Lien du produit" onChange={updateLink} value={props.attributes.ingLink}/>
                    <div className="ing-picto" style={{backgroundImage: props.attributes.bgurl}}></div>
                    <input className="ing-name" type="text" placeholder="Ingrédient" onChange={updateIngName} value={props.attributes.ingName}/>
                    <input className="ing-qtt"  type="text" placeholder="Quantité" onChange={updateIngQtt} value={props.attributes.ingQtt}/>
                </div>
                <InspectorControls>
                    <h2>Sélectionnez une image pour l'ingrédient {props.attributes.ingName}</h2>
                    <MediaUpload
                     type="image"
                     onSelect={image => props.setAttributes({mediaID: image.id, mediaURL: image.sizes.full.url, bgurl: "url('" image.sizes.full.url "')"})}
                     value={ props.attributes.mediaID }
                     render={
                        ({open}) =>(
                            <button onClick={open}>Choisir une image</button>
                            )
                     }
                    />          
                </InspectorControls>
            </div>
        )
    },
    save: function (props) {
        const backgroundImg = 'background-image: url(' props.attributes.mediaURL ')'; 
        return (
                 <div className="row ing-line">
                     <div className="ing-picto" style={backgroundImg}></div>
                     <div className="ing-holder">
                         <span className="ingName"><a href={props.attributes.ingLink} target="_blank">{props.attributes.ingName}</a></span>
                         <span className="ingQtt">{props.attributes.ingQtt}</span>
                     </div>
                 </div>)
    }
})
 

После рекомендаций Фила я увидел в консоли эти строки с ошибками:

 blocks.min.js?ver=e2b6602c7ebbe8ce93832ce35d81be1c:2 Block validation: Block validation failed for `astra/ingreds` ({name: 'astra/ingreds', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<div class="wp-block-astra-ingreds row ing-line"><div class="ing-picto" style="background-image: url(undefined)"></div><div class="ing-holder"><span class="ingName"><a target="_blank"></a></span><span class="ingQtt"></span></div></div>

Content retrieved from post body:

<div class="wp-block-astra-ingreds row ing-line"><div class="ing-picto" style="background-image: url(undefined)"></div><div class="ing-holder"><span class="ingName"><a target="_blank" rel="noopener"></a></span><span class="ingQtt"></span></div></div>
 

Единственное, что отличалось между этими двумя, — это атрибут rel из тега привязки, который я не объявлял и/или который был создан по умолчанию телом сообщения.

поэтому я просто написал в своей функции сохранения «rel = noopener», и знаете что? Это сработало !

Спасибо Филу и его знаниям о том, как отлаживать блоки Гутенберга!

Хорошего дня!