Gutenberg Block fail to save block metadata

I try to copy the headline in order to create a custom one.

Unfortunately the block does not save the meta data.

Why is the content correctly saved but not backgroundColor?

index.js

/**
 * External dependencies
 */
import { isEmpty } from 'lodash';

/**
 * WordPress dependencies
 */
import { heading as icon } from 'WPBeginner - WordPress Tutorials/icons';
import { __, sprintf } from 'WPBeginner - WordPress Tutorials/i18n';

/**
 * Internal dependencies
 */
import deprecated from './deprecated';
import edit from './edit';
import metadata from './block.json';
import save from './save';
import transforms from './transforms';

const { name } = metadata;

export { metadata, name };

export const settings = {
    title: __( 'Heading' ),
    description: __(
        'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.'
    ),
    icon,
    keywords: [ __( 'title' ), __( 'subtitle' ) ],
    example: {
        attributes: {
            content: __( 'Code is Poetry' ),
            level: 2,
        },
    },
    __experimentalLabel( attributes, { context } ) {
        if ( context === 'accessibility' ) {
            const { content, level } = attributes;

            return isEmpty( content )
                ? sprintf(
                        /* translators: accessibility text. %s: heading level. */
                        __( 'Level %s. Empty.' ),
                        level
                  )
                : sprintf(
                        /* translators: accessibility text. 1: heading level. 2: heading content. */
                        __( 'Level %1$s. %2$s' ),
                        level,
                        content
                  );
        }
    },
    transforms,
    deprecated,
    merge( attributes, attributesToMerge ) {
        return {
            content:
                ( attributes.content || '' ) +
                ( attributesToMerge.content || '' ),
        };
    },
    edit,
    save,
};

block.json

{
    "name": "afs/heading",
    "category": "text",
    "attributes": {
        "align": {
            "type": "string"
        },
        "backgroundColor": {
            "type": "string",
            "source": "meta"
        },
        "content": {
            "type": "string",
            "source": "html",
            "selector": "h1,h2,h3,h4,h5,h6",
            "default": ""
        },
        "level": {
            "type": "number",
            "default": 2
        },
        "placeholder": {
            "type": "string"
        }
    },
    "supports": {
        "anchor": true,
        "className": false,
        "lightBlockWrapper": true,
        "__experimentalColor": {
            "linkColor": true
        },
        "__experimentalFontSize": true,
        "__experimentalLineHeight": true,
        "__experimentalSelector": {
            "afs/heading/h1": "h1",
            "afs/heading/h2": "h2",
            "afs/heading/h3": "h3",
            "afs/heading/h4": "h4",
            "afs/heading/h5": "h5",
            "afs/heading/h6": "h6"
        },
        "__unstablePasteTextInline": true
    }
}

edit.js

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

/**
 * WordPress dependencies
 */
import { __ } from 'WPBeginner - WordPress Tutorials/i18n';
import { createBlock } from 'WPBeginner - WordPress Tutorials/blocks';
import {
    AlignmentToolbar,
    BlockControls,
    RichText,
    InspectorControls,
    __experimentalBlock as Block,
} from 'WPBeginner - WordPress Tutorials/block-editor';
import { ToolbarGroup } from 'WPBeginner - WordPress Tutorials/components';
const {
    PanelColorSettings,
} = wp.editor;
/**
 * Internal dependencies
 */
import HeadingLevelDropdown from './heading-level-dropdown';

function HeadingEdit( {
    attributes,
    setAttributes,
    mergeBlocks,
    onReplace,
    mergedStyle,
} ) {
    const { align, content, level, placeholder, backgroundColor } = attributes;
    const tagName = 'h' + level;

    const onChangeBackgroundColor = ( colorValue ) => {
        setAttributes( { backgroundColor: colorValue } );
    };

    return (
        <div>
            {
            <InspectorControls>
                <PanelColorSettings
                    title={ __( 'Color Settings' ) }
                    colorSettings={ [
                        {
                            value: backgroundColor,
                            onChange: onChangeBackgroundColor,
                            label: __( 'Background Color' ),
                        }
                    ] }
                >

                </PanelColorSettings>
            </InspectorControls>
            }
            <BlockControls>
                <ToolbarGroup>
                    <HeadingLevelDropdown
                        selectedLevel={ level }
                        onChange={ ( newLevel ) =>
                            setAttributes( { level: newLevel } )
                        }
                    />
                </ToolbarGroup>
                <AlignmentToolbar
                    value={ align }
                    onChange={ ( nextAlign ) => {
                        setAttributes( { align: nextAlign } );
                    } }
                />
            </BlockControls>

            <RichText
                identifier="content"
                tagName={ Block[ tagName ] }
                value={ content }
                onChange={ ( value ) => setAttributes( { content: value } ) }
                onMerge={ mergeBlocks }
                onSplit={ ( value ) => {
                    if ( ! value ) {
                        return createBlock( 'core/paragraph' );
                    }

                    return createBlock( 'afs/heading', {
                        ...attributes,
                        content: value,
                    } );
                } }
                onReplace={ onReplace }
                onRemove={ () => onReplace( [] ) }
                className={ classnames( {
                    [ `has-text-align-${ align }` ]: align,
                } ) }
                placeholder={ placeholder || __( 'Write heading…' ) }
                textAlign={ align }
                style={ mergedStyle }
                allowedFormats={ [ 'afs/light', 'core/link', 'core/code', 'core/image', 'core/strikethrough', 'core/subscript', 'core/superscript', 'core/text-color' ] }
            />
        </div>
    );
}

export default HeadingEdit;

save.js

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

/**
 * WordPress dependencies
 */
import { RichText } from 'WPBeginner - WordPress Tutorials/block-editor';


export default function save( { attributes } ) {
    const { align, content, level } = attributes;
    const tagName = 'h' + level;

    const className = classnames( {
        [ `has-text-align-${ align }` ]: align,
    } );

    return (
        <RichText.Content
            className={ className ? className : undefined }
            tagName={ tagName }
            value={ content }
        />
    );
}