Ошибка проверки блока WordPress Gutenberg: несоответствие атрибутов при повторном редактировании ⇐ Php

[Anonymous]

Я разрабатываю собственный блок Гутенберга для WordPress, используя пакет @wordpress/create-block. Блок позволяет пользователям добавлять отзыв с изображением, именем, должностью и текстом отзыва. Блок работает нормально при первоначальном создании, но когда я пытаюсь его отредактировать снова, я сталкиваюсь с ошибкой проверки блока.
Сообщение об ошибке:

Код: Выделить всё

Block validation: Block validation failed for create-block/testimonial (Object1).
Expected attributes Array(1), instead saw Array(2)

Array(1)

Код: Выделить всё

["class", "testimonial-image", true]

Array(2)

Код: Выделить всё

["class", "testimonial-image", true]

["src", "http://test-1.local/wp-content/uploads/2024/06/some_profile_picture.jpeg", true]

Объект
block.json:

Код: Выделить всё

{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "create-block/testimonial",
"version": "0.1.0",
"title": "Testimonial",
"category": "widgets",
"icon": "smiley",
"description": "Example block scaffolded with Create Block tool.",
"attributes": {
"imageUrl": {
"type": "string",
"source": "attribute",
"selector": "img.testimonial-image",
"attribute": "src"
},
"testimonial": {
"type": "string",
"source": "html",
"selector": "blockquote.testimonial-quote p"
},
"name": {
"type": "string",
"source": "html",
"selector": "div.testimonial-name"
},
"position": {
"type": "string",
"source": "html",
"selector": "div.testimonial-position"
}
},
"supports": {
"html": false
},
"textdomain": "testimonial",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"viewScript": "file:./view.js"
}

edit.tsx:

Код: Выделить всё

import { __ } from '@wordpress/i18n';
import { useBlockProps, MediaUpload, MediaUploadCheck, RichText } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
const { imageUrl, testimonial, name, position } = attributes;

const onSelectImage = (media) => {
setAttributes({ imageUrl: media.url });
};

const onChangeTestimonial = (value) => {
setAttributes({ testimonial: value });
};

const onChangeName = (value) => {
setAttributes({ name: value });
};

const onChangePosition = (value) =>  {
setAttributes({ position: value });
};

return (






{imageUrl ? (
[img]{imageUrl}
/>
) : (


 (

{__('Upload Image', 'testimonial')}

)}
/>


)}
{imageUrl && (

  (

{__('Change Image', 'testimonial')}

)}
/>

)}




















);
}

save.tsx:

Код: Выделить всё

import { useBlockProps, RichText } from '@wordpress/block-editor';
import React from 'react';

export default function save({ attributes }) {
const { imageUrl, testimonial, name, position } = attributes;

return (






[img]{imageUrl || [/img]
                                    alt=""
/>




















);
}

Описание ошибки:

• При первоначальном создании блок работает должным образом.< /li>
  При попытке редактирования блока проверка блока завершается неудачно, и все сохраненные атрибуты отсутствуют.
• Ошибка указывает на несоответствие атрибута, в частности, с классом. Атрибут для изображения.

Предпринятые шаги:

• Гарантированные атрибуты правильно определены в block.json.
• Проверено, что структура вывода HTML с помощью функции сохранения соответствует сохраненному содержимому.< /li>
  Добавлено ведение журнала для проверки атрибутов, которое подтверждает отсутствие атрибутов при повторном редактировании.

Вопрос:
Как устранить эту ошибку проверки блока и обеспечить правильное сохранение и сопоставление атрибутов при повторном редактировании? Любые идеи и предложения приветствуются.

Подробнее здесь: https://stackoverflow.com/questions/785 ... on-re-edit