An example Gutenberg block (not for production)

block.json

{
	"apiVersion": 2,
	"name": "my-affiliate-plugin/my-affiliate-block",
	"version": "0.1.0",
	"title": "Affiliate Block",
	"category": "design",
	"icon": "money",
	"keywords": [ "kinsta", "affiliate", "money" ],
	"description": "An example block for Kinsta readers",
	"supports": {
		"html": false
	},
	"textdomain": "my-affiliate-block",
	"styles": [
		{
			"name": "default",
			"label": "Default",
			"isDefault": true
		},
		{
			"name": "outline",
			"label": "Outline"
		},
		{
			"name": "rounded",
			"label": "Rounded"
		}
	],
	"attributes": {
		"content": {
			"type": "string",
			"source": "html",
			"selector": "p"
		},
		"linkText": {
			"type": "string"
		},
		"align": {
			"type": "string",
			"default": "none"
		},
		"backgroundColor": {
			"type": "string"
		},		
		"textColor": {
			"type": "string"
		},
		"affiliateLink": {
			"type": "string",
			"default": ""
		},
		"linkLabel": {
			"type": "string",
			"default": "Check it out!"
		},
		"hasLinkNofollow": {
			"type": "boolean",
			"default": false
		}
	},
	"editorScript": "file:./build/index.js",
	"editorStyle": "file:./build/index.css",
	"style": "file:./build/style-index.css"
}

container.js

import { registerBlockType } from "@wordpress/blocks";
import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [
    [ 'core/column', { templateLock: 'all' }, [
        [ 'core/image' ],
    ] ],
    [ 'core/column', { templateLock: 'all' }, [
        [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ],
    ] ],
] ] ];

registerBlockType('my-affiliate-plugin/my-affiliate-container-block', {
    title: __( 'Container', 'my-affiliate-block' ),
    category: 'design',

	/**
	 * @see ./edit.js
	 */
	edit( { className } ) {
        
        return(
            <div className={ className }>
                <InnerBlocks
                    template={ TEMPLATE }
                    templateLock="all"
                />
            </div>
        )
    },

	/**
	 * @see ./save.js
	 */
	save() {
        const blockProps = useBlockProps.save();
        return(
            <div { ...blockProps }>
                <InnerBlocks.Content />
            </div>
        )
    },
});

edit.js

/**
 * External dependencies
 */
 import classnames from 'classnames';

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/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/packages/packages-block-editor/#useBlockProps
 */
import { 
	useBlockProps, 
	RichText, 
	AlignmentControl, 
	BlockControls,
	InspectorControls,
	PanelColorSettings
} from '@wordpress/block-editor';

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

/**
 * 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/developers/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */
export default function Edit( { attributes, setAttributes } ) {
	
	const { align, content, backgroundColor, textColor, affiliateLink, linkLabel, hasLinkNofollow } = attributes;

	// https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#block-wrapper-props
	const blockProps = useBlockProps( {
		className: classnames( {
			[ `has-text-align-${ align }` ]: align,
		} )
	} );

	const onChangeContent = ( newContent ) => {
		setAttributes( { content: newContent } )
	}

	const onChangeAlign = ( newAlign ) => {
		setAttributes( { 
			align: newAlign === undefined ? 'none' : newAlign, 
		} )
	}
	const onChangeBackgroundColor = ( newBackgroundColor ) => {
		setAttributes( { backgroundColor: newBackgroundColor } )
	}
	const onChangeTextColor = ( newTextColor ) => {
		setAttributes( { textColor: newTextColor } )
	}

	// https://reactjs.org/docs/forms.html#controlled-components
	const onChangeAffiliateLink = ( newAffiliateLink ) => {
		setAttributes( { affiliateLink: newAffiliateLink === undefined ? '' : newAffiliateLink } )
	}

	const onChangeLinkLabel = ( newLinkLabel ) => {
		setAttributes( { linkLabel: newLinkLabel === undefined ? '' : newLinkLabel } )
	}

	const toggleNofollow = () => {
		setAttributes( { hasLinkNofollow: ! hasLinkNofollow } )
	}

	return (
		<>
			<InspectorControls>
				<PanelColorSettings 
					title={ __( 'Color settings', 'my-affiliate-block' ) }
					initialOpen={ false }
					colorSettings={ [
						{
							value: textColor,
							onChange: onChangeTextColor,
							label: __( 'Text color', 'my-affiliate-block' ),
						},
						{
							value: backgroundColor,
							onChange: onChangeBackgroundColor,
							label: __( 'Background color', 'my-affiliate-block' ),
						}
					] }
				/>
				<PanelBody 
					title={ __( 'Link Settings', 'my-affiliate-block' )}
					initialOpen={true}
				>
					<PanelRow>
						<fieldset>
							<TextControl
								label={__( 'Affiliate link', 'my-affiliate-block' )}
								value={ affiliateLink }
								onChange={ onChangeAffiliateLink }
								help={ __( 'Add your affiliate link', 'my-affiliate-block' )}
							/>
						</fieldset>
					</PanelRow>
					<PanelRow>
						<fieldset>
							<TextControl
								label={__( 'Link label', 'my-affiliate-block' )}
								value={ linkLabel }
								onChange={ onChangeLinkLabel }
								help={ __( 'Add link label', 'my-affiliate-block' )}
							/>
						</fieldset>
					</PanelRow>
					<PanelRow>
						<fieldset>
							<ToggleControl
								label="Add rel = nofollow"
								help={
									hasLinkNofollow
										? 'Has rel nofollow.'
										: 'No rel nofollow.'
								}
								checked={ hasLinkNofollow }
								onChange={ toggleNofollow }
							/>
						</fieldset>
					</PanelRow>
				</PanelBody>
			</InspectorControls>
			<BlockControls>
				<AlignmentControl
					value={ align }
					onChange={ onChangeAlign }
				/>
			</BlockControls>
			<div 
				{ ...blockProps }
				style={ { backgroundColor: backgroundColor } }
			>
				<RichText 
					tagName="p"
					onChange={ onChangeContent }
					allowedFormats={ [ 'core/bold', 'core/italic' ] }
					value={ content }
					placeholder={ __( 'Write your text...', 'my-affiliate-block' ) }
					style={ { color: textColor } }
				/>
				<ExternalLink 
					href={ affiliateLink }
					className="affiliate-button"
					rel={ hasLinkNofollow ? "nofollow" : "" }
				>
						{ linkLabel }
				</ExternalLink>

			</div>
		</>
	);
}

editor.scss

/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-my-affiliate-plugin-my-affiliate-block {
	padding: 12px;
	color: #000;
	background-color: #fff;
	border-radius: 0px;
	//&.has-border {
	//	border: 1px solid #000;
	//}
	&.is-style-default{
		border: 0;
	}
	&.is-style-outline{
		border: 1px solid currentColor;
	}
	&.is-style-rounded{
		border: 1px solid currentColor;
		border-radius: 6px;

	}
}

index.js

/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
import { registerBlockType } from '@wordpress/blocks';

import './container';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * All files containing `style` keyword are bundled together. The code used
 * gets applied both to the front of your site and to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './style.scss';

/**
 * Internal dependencies
 */
import Edit from './edit';
import save from './save';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType('my-affiliate-plugin/my-affiliate-block', {
	/**
	 * @see ./edit.js
	 */
	edit: Edit,

	/**
	 * @see ./save.js
	 */
	save,
});

my-affiliate-block.php

<?php
/**
 * Plugin Name:       Affiliate Block
 * Description:       An example block for Kinsta readers
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            Carlo
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       my-affiliate-block
 *
 * @package           my-affiliate-plugin
 */

/**
 * Registers the block using the metadata loaded from the `block.json` file.
 * Behind the scenes, it registers also all assets so they can be enqueued
 * through the block editor in the corresponding context.
 *
 * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/
 */
function my_affiliate_plugin_my_affiliate_block_block_init() {
	register_block_type( __DIR__ );
}
add_action( 'init', 'my_affiliate_plugin_my_affiliate_block_block_init' );

package.json

{
	"name": "my-affiliate-block",
	"version": "0.1.0",
	"description": "An example block for Kinsta readers",
	"author": "Carlo",
	"license": "GPL-2.0-or-later",
	"main": "build/index.js",
	"scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"start": "wp-scripts start",
		"packages-update": "wp-scripts packages-update"
	},
	"dependencies": {
		"@wordpress/block-editor": "^7.0.1",
		"@wordpress/blocks": "^11.0.1",
		"@wordpress/i18n": "^4.2.1"
	},
	"devDependencies": {
		"@wordpress/scripts": "^18.0.0"
	}
}

save.js

/**
 * External dependencies
 */
 import classnames from 'classnames';

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/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/packages/packages-block-editor/#useBlockProps
 */
import { useBlockProps, RichText } from '@wordpress/block-editor';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
 *
 * @return {WPElement} Element to render.
 */
export default function save( props ) {

	const { align, content, backgroundColor, textColor, affiliateLink, linkLabel, hasLinkNofollow } = props.attributes;

	// https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/
	const blockProps = useBlockProps.save({
		className: classnames( {
			[ `has-text-align-${ align }` ]: align,
		} )
	});

	return (
		<div 
			{ ...blockProps }
			style={ { backgroundColor: backgroundColor } }
		>
			<RichText.Content 
				tagName="p" 
				value={ content } 
				style={ { color: textColor } }
			/>
			<p>
				<a 
					href={ affiliateLink }
					className="affiliate-button"
					rel={ hasLinkNofollow ? "nofollow" : "noopener noreferrer" }
				>
					{ linkLabel }
				</a>
			</p>
		</div>
	);
}

style.scss

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-my-affiliate-plugin-my-affiliate-block {
	padding: 12px;
	color: #000;
	background-color: #fff;
	border-radius: 0px;
	//&.has-border {
	//	border: 1px solid #000;
	//}
	&.is-style-default{
		border: 0;
	}
	&.is-style-outline{
		border: 1px solid currentColor;
	}
	&.is-style-rounded{
		border: 1px solid currentColor;
		border-radius: 6px;

	}
}

.affiliate-button {
	align-items: center;
	-webkit-appearance: none;
	background: none;
	border: 0;
	border-radius: 2px;
	box-sizing: border-box;
	color: #1e1e1e;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 400;
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
	height: 36px;
	margin: 6px 0;
	padding: 6px 12px;
	text-decoration: none;
	transition: box-shadow .1s linear;	
	box-shadow: inset 0 0 0 1px #cc1818;
    outline: 1px solid transparent;
}

This code is obsolete. Please, check this gist: https://gist.github.com/carlodaniele/5f3dba8fff19d8ea836bdef5a2be7556