hola he hecho un plugin en React para Gutemberg, lo he hecho con https://github.com/ahmadawais/create-guten-block pero no me funciona...
Si pongo el Componente en en la Parte del Edit: funciona correctamente , pero si lo pongo en el Save: da un error de Manifest 321 react y no funciona y no se porque
import { Calculator } from '../Calculator';
import { Service } from '../components/Service';
/**
* BLOCK: pricing-beauty
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*/
// Import CSS.
import './editor.scss';
import './style.scss';
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
/**
* Register: aa Gutenberg Block.
*
* Registers a new block provided a unique name and an object defining its
* behavior. Once registered, the block is made editor as an option to any
* editor interface where blocks are implemented.
*
* @link https://wordpress.org/gutenberg/handbook/block-api/
* @param {string} name Block name.
* @param {Object} settings Block settings.
* @return {?WPBlock} The block, if it has been successfully
* registered; otherwise `undefined`.
*/
registerBlockType( 'cgb/block-pricing-beauty', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'pricing-beauty - CGB Block' ), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
__( 'pricing-beauty — CGB Block' ),
__( 'CGB Example' ),
__( 'create-guten-block' ),
],
/**
* 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.
*
* The "edit" property must be a valid function.
*
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*
* @param {Object} props Props.
* @returns {Mixed} JSX Component.
*/
edit: ( props ) => {
// Creates a <p class='wp-block-cgb-block-pricing-beauty'></p>.
return (
<div className={ props.className }>
<Calculator />
</div>
);
},
/**
* The save function defines the way in which the different attributes should be combined
* into the final markup, which is then serialized by Gutenberg into post_content.
*
* The "save" property must be specified and must be a valid function.
*
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*
* @param {Object} props Props.
* @returns {Mixed} JSX Frontend HTML.
*/
save: ( props ) => {
return (
<div className={ props.className }>
<Calculator />
</div>
);
},
} );
Contenido solo visible a usuarios registrados
Respondido : 19/09/2021 5:03 pm
