WordPress

importowanie Gutenberga skopiowanego html do wtyczki Block

  • 9 sierpnia, 2024
  • 2 min read
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 ?



Źródło

Warto przeczytać!  Jak przekierować stronę lub adres URL w WordPress (2 metody)