Блок React Gutenberg не работает, созданный с помощью create-guten-block

Question

Я пытаюсь изучить gutenberg wordpress вместе с реагированием. У меня есть некоторое базовое c понимание реакции, в настоящее время я пытаюсь кодировать плагин Accordion, но не могу сохранить его значения и отобразить их в интерфейсе. Я новичок в этом и использовал для отладки jquery с помощью console.logs, но, похоже, здесь это не работает, также я не могу запустить create-guten-block в режиме разработки. Некоторое руководство, пожалуйста! Спасибо за ваше время и помощь!

import Accordion from 'react-bootstrap/Accordion';
import {Form, Button} from 'react-bootstrap';
import Card from 'react-bootstrap/Card';
/**
 * BLOCK: updated-accordion
 *
 * 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-updated-accordion', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __( 'updated-accordion - 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: [
        __( 'updated-accordion — CGB Block' ),
        __( 'CGB Example' ),
        __( 'create-guten-block' ),
    ],
    attributes:{
        accordList:{    type: 'array',      default: [] },
        counter: {      type: 'integer',    default: 0},
        inputHeading: { type: 'string',     default: ''},
        inputContent: { type: 'string',     default: ''}
    },

    /**
     * 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-updated-accordion'></p>.
        function handleHeadingChange(event){
            props.setAttributes({inputHeading: event.target.value});
        }
        function handleContentChange(event){
            props.setAttributes({inputContent: event.target.value});
        }
        const addItem=(event)=>{
            // event.preventDefault();
            var items={counterheading: '', content: ''};
            props.setAttributes({...accordList,items});
            console.log(props.attributes.accordList);
        }
        const handleClick = (event) => {
            event.preventDefault();
          var items={counter: props.attributes.counter, heading: props.attributes.inputHeading, content: props.attributes.inputContent};
          var num=props.attributes.counter+1;

            var newItems=props.attributes.accordList.concat(items);
            props.setAttributes({accordList: newItems});
            props.setAttributes({counter: num});

        }
        return (
            <div>
            <Form onSubmit={addItem}>
            <Form.Group>
              <Form.Label>Add Accordions Here</Form.Label>
              <Form.Control name='inputHeading' type='text' 
              placeholder='Enter heading here' value={props.attributes.inputHeading} onChange={handleHeadingChange} />

              <Form.Control name='inputContent' as='textarea' 
              row='6' placeholder='Enter accordion content here' 
              value={props.attributes.inputContent} onChange={handleContentChange} />

              <Button variant='primary' type='submit' onClick={handleClick}>
                Add
              </Button>    
            </Form.Group>
          </Form>


       <Accordion defaultActiveKey="0">
          {props.attributes.accordList.forEach(function(items) {

        <Card>
          <Accordion.Toggle as={Card.Header} eventKey={items.counter} >
            {items.heading} 
          </Accordion.Toggle>
          <Accordion.Collapse eventKey={items.counter}>
            <Card.Body>{items.content}</Card.Body>
          </Accordion.Collapse>
        </Card>         
      })} 

        </Accordion>


            </div>
        );
    },

    save: ( props ) => {
        return (
            <div>
        <Accordion defaultActiveKey="0">
                {props.attributes.accordList.forEach(function(items) {

                <Card>
                <Accordion.Toggle as={Card.Header} eventKey={items.counter} >
                    {items.heading} 
                </Accordion.Toggle>
                <Accordion.Collapse eventKey={items.counter}>
                    <Card.Body>{items.content}</Card.Body>
                </Accordion.Collapse>
                </Card>         
            })} 

        </Accordion>
            </div>
        );
    },
} );