Creating WordPress Block Plugins

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */

import { 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 https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
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 https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */

import { InspectorControls, RichText } from '@wordpress/block-editor';

import { PanelBody, TextControl } from '@wordpress/components';

import { __experimentalNumberControl as NumberControl } from '@wordpress/components';



export default function Edit( { attributes, setAttributes } ) {

	const { rowCount, content } = attributes;
	const blockProps = useBlockProps();

	function updateArray(arr, attributes){
		if(arr < 0){
		  //return if accidently set invalid number
			setAttributes({rowCount : 0});
			return;
		}
		if(arr === ""){
		  //return is no value entered
			return;
		}
		{blockProps}
		console.log(arr + " - " + attributes.rowCount);
		
		var oldArr = attributes.content;
		//check whether new input is bigger or less then do action on array
		if(arr > attributes.content.length){
			var diff = arr - attributes.content.length;
			for(let i = 0; i < parseInt(diff); i++){
				oldArr.push("");
			}
			setAttributes({ content: oldArr });
		} else if(arr < attributes.content.length) {
			var diff = attributes.content.length - arr;
			setAttributes({ content: oldArr.slice(0, -diff) });
		}
		//update the row number
		setAttributes({rowCount : arr});
	}

	function updateText(index, text, attributes){
		{blockProps}
		console.log(index + " = " + text);
		var oldArr = attributes.content;		
		oldArr[index] = text;
		setAttributes( { content: oldArr });
	}

	return (
		<>
			<InspectorControls>
				<PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
					<NumberControl
                        __next40pxDefaultSize
						spinControls='native'
						label = { __('Configure row count')}
						isShiftStepEnabled={ true }
						onChange={ ( value ) =>
                            updateArray(value, attributes) }
						shiftStep={ 1 }
						value={ parseInt(rowCount) }
					/>
                </PanelBody>
            </InspectorControls>
			
			<div { ...blockProps }>
					
						{ content.map((item, index) => {
							return (
							
							<RichText
								className= { "blah_" + index }
								tagName="p" 
								value={ item } 
								allowedFormats={ [ 'core/bold', 'core/italic' ] } 
								onChange={ ( value ) => updateText(index, value, attributes) } 
								placeholder={ __( '?...' ) } 
							/>
							
							)
								})
						}
						
					
			</div>
			
		</>
		
	);
}