importowanie Gutenberga skopiowanego html do wtyczki Block
Chciałbym utworzyć blok w edytorze, skopiować surowy kod HTML Gutenberga lub wyeksportować jego kod JSON i użyć go jako szablonu, jak pokazano na rysunku template.js
:
import { parse } from '@wordpress/block-serialization-default-parser';
const handleParseWordpress = rawHtml => {
const convertedTag = parse(rawHtml.trim());
console.log('Parsed Template:', convertedTag);
return convertedTag;
};
const rawHtml = `
`;
export const MY_TEMPLATE = handleParseWordpress(rawHtml);
// console.log(MY_TEMPLATE); // Add this line to log the parsed template
(part cut out cause it was too long with all these vertical and horizontal groups (stacks and rows))
with this edit.js
:
/**
* Retrieves the translation of text.
*
* @see
*/
import { __ } from '@wordpress/i18n';
/**
* Import files for loading meta data and for importing block template data
*/
// import {registerBlockType} from '@wordpress/blocks';
import { MY_TEMPLATE } from './template-w-conversion';
/**
* React hook that is used to mark the block wrapper element.
* It provides all the necessary props like the class name.
*
* @see
*/
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
/**
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
* Those files can contain any CSS code that gets applied to the editor.
*
* @see
*/
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
*
* @return {Element} Element to render.
*/
export default function Edit( { attributes, setAttributes } ) {
const ALLOWED_BLOCKS = [
'core/image',
'core/paragraph',
'core/columns',
'core/cover',
'core/group',
'core/heading',
];
/**
* The useBlockProps hook provides properties that are necessary for the block's
* wrapper element, such as class names and other editor-specific attributes.
* @llink
*/
const blockProps = useBlockProps();
const { menuHeadline, menuItemTitle, menuItemPrice } = attributes;
return (
);
}
Ale chociaż otrzymuję tablicę z danymi
Parsed Template:
Array (1)
0 {blockName: "create-block/cafe-restaurant-menu-block", attrs: {}, innerBlocks: Array, innerHTML: "↵↵", innerContent: ["↵", null, "↵"]}
Dostaję błąd
TypeError: undefined is not a function (near '...[t,r,n]...')
W wp-includes/js/dist/blocks.min.js?ver=0d232d232463200f5cfd
co wydaje się być związane z mapowaniem:
return t ? t.map((([t, r, n], o) => {
Próbowałem również z pakietem podstawowym @wordpress/blocks
i surowy JSON, ale we wszystkich tych przypadkach otrzymuję pusty blok. Przynajmniej z @wordpress/block-serialization-default-parser
W logu konsoli pojawia się pełny blok.
Jak mogę zaimportować istniejące dane bloku do wtyczki utworzonej za pomocą npx @wordpress/create-block cafe-restaurant-menu-block
?