重新加载块编辑器后出现“尝试块恢复”消息

Question

我创建了一个包含两个图像的自定义古腾堡块。 这些块工作正常，直到您重新加载编辑器页面或我关闭它并返回并且我的块有这条消息：“此块包含意外或无效的内容。” 当我点击“解决”时，它在 img 标签中标记了结束标签。 在此处输入图像描述

export default function save({ attributes}) {
  
      const blockProps = useBlockProps.save();
      return (
  
      <div  { ...blockProps }>
          
      <div className='col-text col'>
          <div className='name-icon'>
          <figure className='icon'>
          <a href={attributes.customUrl}>
          <img
                  className="icon-app"
                  src={ attributes.mediaURL }
                  alt="icono app"
              />
              </a>
          </figure>
          <h4>{attributes.softwareName}</h4>
          </div>
          <p>{attributes.softwareDescription}</p>
      </div>
      <figure className='col col-image'>
          <a href={attributes.customUrl}>
              <img src={ bannerImg } alt='imagen banner descarga' style='width: 100%;'></img>
          </a>
      </figure>
      
      </div>
  
      );
  
}

export default function Edit({attributes, setAttributes}) {
    

    return (
        <div className='banner-bsc' { ...useBlockProps() }>
        <div className='col-text col'>
            <div className='col-icon'>
        <MediaUpload
                    onSelect={
                        ( media ) => setAttributes( { mediaURL: media.url,
                                                        mediaID: media.id, })
                      }
                    allowedTypes="image"
                    value={ attributes.mediaID }
                    render={ ( { open } ) => (
                        <Button
                            className={
                                attributes.mediaID ? 'image-button' : 'button button-large'
                            }
                            onClick={ open }
                        >
                            { ! attributes.mediaID ? (
                                __( 'Sube el icono de la app', 'bsc-blocks' )
                            ) : (
                                <img
                                    className='icon-app'
                                    src={ attributes.mediaURL }
                                    alt={ __(
                                        'Sube el icono de la app',
                                    ) }
                                />
                            ) }
                        </Button>
                    ) }
                />
                </div>
        <RichText
                tagName="h4"
                placeholder={ __(
                    'CYPE Architecture'
                ) }
                value={ attributes.softwareName }
                onChange={( val ) => setAttributes( { softwareName: val }) }
                className="nombre-programa"
            />
            <RichText
                tagName="p"
                placeholder={ __(
                    '3D architectural modelling program, specifically designed for multidisciplinary collaboration.'
                ) }
                value={ attributes.softwareDescription }
                onChange={( val ) => setAttributes( { softwareDescription: val }) }
                className="descripcion-programa"
            />
        
            
        </div>
        <figure className='col col-image'>
        <TextControl
            label="Url banner"
            value={ attributes.customUrl }
            onChange={ ( val ) => setAttributes( {customUrl: val} ) }
        />
            <img src={ bannerImg } />
        </figure>
        </div>
    );
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "create-block/banner-descarga",
    "version": "0.1.0",
    "title": "Banner descarga",
    "category": "bimservercenter-categories",
    "icon": "smiley",
    "description": "Example block scaffolded with Create Block tool.",
    "supports": {
        "html": false
    },
    "textdomain": "banner-descarga",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css", 
    "attributes": {
        "softwareName": {
            "type": "string",
            "source": "text",
            "selector": "div",
            "default": "CYPE Architecture"
        },
        "softwareDescription": {
            "type": "string",
            "source": "text",
            "selector": "div",
            "default": "3D architectural modelling program, specifically designed for multidisciplinary collaboration."
        }, 
        "customUrl" : {
            "type": "string",
            "source": "attribute",
            "selector": "a",
            "attribute": "href",
            "default": "https://store.bimserver.center/en/"

        },
        "mediaID": {
            "type": "number"
        },
        "mediaURL": {
            "type": "string",
            "source": "attribute",
            "selector": "img",
            "attribute": "src"
        }
        
    }
}

Answer 1

在你的block.json中，属性softwareName和softwareDescription都有"source": "text"和"selector": "div"匹配最外层<div>...</div>的文本内容。 由于<div>...</div>的内容已更改，因此Edit()对任何属性值的任何更改都会使该块无效。

您的save()函数也存在不匹配，因为属性选择器与生成的内容不匹配，参考：

export default function save({ attributes}) {
    ...
      <div className='col-text col'>
          <div className='name-icon'>
          ...
          <h4>{attributes.softwareName}</h4> // softwareName selector should be "h4"
          </div>
          <p>{attributes.softwareDescription}</p> // softwareDescription selector should be "p"
      </div>
    ...
    ); 
}

<div>有多个选择器匹配，选择器<a>和<img>有多个匹配。

要解决这个问题，每个属性选择器都应该是特定且唯一的。 在您的Edit()函数中，您已经为 RichText 组件分配了唯一的类名； 所以您可以将它们用作属性选择器。

例如。 对于softwareName名称：

编辑（）

<RichText
    tagName="h4"
    ...
    className="nombre-programa"
/>

救球（）

<h4 className="nombre-programa">{attributes.softwareName}</h4>

块.json

"softwareName": {
    "type": "string",
    "source": "text",
    "selector": ".nombre-programa",
    "default": "CYPE Architecture"
},

更新属性和 save() 函数后，save() 生成的输出应映射到属性并正确保存块。