帮助查找错误。我什至不明白这个错误 很可能是 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 Block validation: Block validation failed for `create-block/swiper` ({name: 'create-block/swiper', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).
Content generated by `save` function:
<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>
Content retrieved from post body:
<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>
您在设置一个块来添加带有按钮/文本的多个图像方面付出了很大的努力。我建议查看核心 Gallery Block JSON 的源代码,作为使用查询将
attributes.images
设置为数组的示例。
解决区块验证错误的步骤
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
...
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。
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": "html", // added
"selector": ".sliders_text .text1" // added
},
"text2": {
"type": "string",
"source": "html", // added
"selector": ".sliders_text .text2" // added
}
...
.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”是保留词。虽然这不会导致块验证错误,但应该在调试时将其纠正为存在的错误,并且会减少“噪音”并使您能够看到真正的问题。
希望这有助于指导您朝着正确的方向构建块并解决错误。