如何修复错误自定义块有效......？

问题描述 投票：0回答：1

帮助查找错误。我什至不明白这个错误 很可能是 save.js 的问题，但我只是在学习，没有什么可以帮助我

保存.js：

import { useBlockProps, RichText, MediaUpload } from "@wordpress/block-editor";

export default function save({ attributes }) {
   const { images } = attributes;

   const blockProps = useBlockProps.save();
   // return <div {...blockProps}>{attributes.message}</div>;
   return (
    //{attributes.message}</div>
    <div {...useBlockProps}>
        <button className="swiper_button button_prev">
            <i class="icofont-rounded-left"></i>
        </button>
        <button className="swiper_button button_next">
            <i class="icofont-rounded-right"></i>
        </button>

        {JSON.stringify(attributes)}

        {images.map((element, index) => (
            <div class="slider_container active" key={index}>
                <div className="sliders_image">
                    <img src={element.imageUrl} alt={element.imageAlt} />
                    
                </div>
                <div class="sliders_text">
                    <RichText.Content tagName="p" value={element.text1} />
                    <RichText.Content tagName="p" value={element.text2} />
                </div>
            </div>
        ))}
    </div>
);

}

编辑.js：

    import { __ } from "@wordpress/i18n";

import { useBlockProps, MediaUpload, RichText } from "@wordpress/block-editor";
import { TextControl, Button } from "@wordpress/components";
import "./editor.scss";

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */
export default function Edit({ attributes, setAttributes, isSelected }) {
    const { images } = attributes;
    const addListItem = (newListItem) =>
        setAttributes({ images: [...images, newListItem] });

    // Bad - the images from the existing attribute is modified directly to add the new images item:

    const updateImage = (index, newImage) => {
        const { images } = attributes;
        const updatedImages = [...images];
        updatedImages[index] = { ...updatedImages[index], ...newImage };
        setAttributes({ images: updatedImages });
        console.log('Updated Images:', updatedImages);
    };

    const setImageAttributes = (id, media) => {
        if (!media || !media.url) {
          updateImage(id, {
            imageUrl: null,
            imageId: null,
            imageAlt: null,
          });
        } else {
          updateImage(id, {
            imageUrl: media.url,
            imageId: media.id,
            imageAlt: media.alt || '',
          });
        }
      };
      
  
    return (
        <div {...useBlockProps()}>
            <button className="swiper_button button_prev">
                <i class="icofont-rounded-left"></i>
            </button>
            <button className="swiper_button button_next">
                <i class="icofont-rounded-right"></i>
            </button>
    
            {images.map((element, index) => (
                <div key={index} className="slider_container active">
                    <div className="sliders_image">
                        <MediaUpload
                            onSelect={(media) =>
                                setImageAttributes(index, {
                                    url: media.url,
                                    alt: media?.alt
                                })
                            }
                            type="image"
                            value={element.imageId}
                            render={({ open }) => (
                                <Button onClick={open}>
                                    <div class="text_hover">
                                        {element.imageUrl ? "Change Image" : "Select Image"}
                                    </div>
                                    {element.imageUrl && (
                                        <img src={element.imageUrl} alt={element.imageAlt} />
                                    )}
                                </Button>
                            )}
                        />
                    </div>
                    <div className="sliders_text">
                        <RichText
                            tagName="p"
                            value={element.text1}
                            onChange={(newText1) => updateImage(index, { text1: newText1 })}
                        />

                        <RichText
                            tagName="p"
                            value={element.text2}
                            onChange={(newText2) => updateImage(index, { text2: newText2 })}
                        />
                    </div>
                </div>
            ))}

            {/* Add a button to add a new image */}
            <button
                class="editor-add-button"
                onClick={() =>
                    addListItem({
                        "imageUrl": "",
                        "imageId": "",
                        "imageAlt": "",
                        "text1": "Title",
                        "text2": "Subtitle"
                    })
                }
            >
                Folie hinzufügen
            </button>
        </div>
    );
}

block.json：

{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "create-block/swiper",
"version": "0.1.0",
"title": "Swiper",
"category": "widgets",
"icon": "smiley",
"description": "Example block scaffolded with Create Block tool.",
"example": {},
"supports": {
    "html": false
},
"attributes": {
    "images": {
        "type": "array",
        "source": "query",
        "default": [
            {
                "imageUrl": "",
                "imageAlt": "",
                "imageId": "",
                "text1": "Title",
                "text2": "Subtitle"
            }
        ],

        "query": {
            "imageUrl": {
                "type": "string"
            },
            "imageAlt": {
                "type": "string"
            },
            "imageId": {
                "type": "string"
            },
            "text1": {
                "type": "string"
            },
            "text2": {
                "type": "string"
            }
        }
    }
},
"textdomain": "swiper",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",

"viewScript": "file:./view.js"}

错误： logger.js:17 块验证：

create-block/swiper
块验证失败（{name: 'create-block/swiper', icon: {...}, keywords: Array(0), attribute: {...}, ProvidesContext: {... }, ...})。

save
函数生成的内容：

<div><button class="swiper_button button_prev"><i class="icofont-rounded-left"></i></button><button class="swiper_button button_next"><i class="icofont-rounded-right"></i></button>{"images":[]}</div>

从帖子正文检索的内容：

<div><button class="swiper_button button_prev"><i class="icofont-rounded-left"></i></button><button class="swiper_button button_next"><i class="icofont-rounded-right"></i></button>{"images":[{"imageUrl":"https://localhost/doctor.local/wp-content/uploads/2023/08/Download-1.jpeg","imageAlt":"","text1":"Titlegfh jghf fgh jfghj fg","text2":"Subtitlehj fghj fghj gfhj fghj fghj"}]}<div class="slider_container active"><div class="sliders_image"><img src="https://localhost/doctor.local/wp-content/uploads/2023/08/Download-1.jpeg" alt=""/></div><div class="sliders_text"><p>Titlegfh jghf fgh jfghj fg</p><p>Subtitlehj fghj fghj gfhj fghj fghj</p></div></div></div>
wordpress wordpress-theming wordpress-gutenberg
1个回答
0
投票

您在设置一个块来添加带有按钮/文本的多个图像方面付出了很大的努力。我建议查看核心 Gallery Block JSON 的源代码，作为使用查询将 

attributes.images
设置为数组的示例。

解决区块验证错误的步骤

  1. 在 
    block.json
    中，您的 
    attributes.images
    缺少 用于查询 工作的选择器。在 
    save.js
    中，图像包含在 
    <div className="slider_container" ...>
    中，因此您可以使用 
    .slider_container
    作为选择器，例如：

block.json

"attributes": {
        "images": {
            "type": "array",
            "source": "query",
            "selector": ".slider_container", // added
            "default":[] // added
            ...
  1. 为了让查询加载图像的正确属性，选择器和属性必须在保存的内容中找到有效的匹配项。由于
    attributes.imageUrl
    将是
    <img src="{imageUrl}"...>
    的值，选择器是img，属性是src，例如：
"query": {
    "imageUrl": {
        "type": "string",
        "source": "attribute",
        "selector": ".sliders_image img", // updated
        "attribute": "src"
    },
...

以相同的方式更新

query.imageAlt
和
query.imageId
，属性分别为alt和id。

  1. 对于
    text1
    和
    text2
    ，在
    save()
    中添加一个className，以用作作为block.json
    中查询的选择器
    ：

保存.js

...
<div className="sliders_text">
    <RichText.Content className="text1" tagName="p" value={element.text1} />
    <RichText.Content className="text2" tagName="p" value={element.text2} />
</div>
...

block.json

"query": {
    ...
    "text1": {
        "type": "string",
        "source": "text", // added
        "selector": ".sliders_text .text1" // added
        },
    "text2": {
        "type": "string",
        "source": "text", // added
        "selector": ".sliders_text .text2" // added
    }
...
  1. 块验证错误表示查询无法找到映射到属性的正确源。这可以通过更改
    .slider_container
    内映射的图像来解决，例如：

保存.js

<div className="slider_container active" >
    {images.map((element, index) => (
        <div className="sliders_image" key={index}>
            <img src={element.imageUrl} alt={element.imageAlt} />
        </div>
        ...
    ))}
</div>

此外，在您的 

edit.js
和 
save.js
中，CSS 类有时会应用为 
class="...
；它应该始终是 
className="...
，因为“class”是保留词。虽然这不会导致块验证错误，但应该在调试时将其纠正为存在的错误，并且会减少“噪音”并使您能够看到真正的问题。

希望这有助于指导您朝着正确的方向构建块并解决错误。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.