Block validation – conflict between my attrributes and save.js file

This was a good learning experience. The icon component and defaults are working just fine. My issue in this specific case is getting a grip on my source query within index.js, and making sure my save.js file represents its structure.

Within my save.js file, I had data-icon={ item.icon } on the anchor element. But in my index.js file, I was telling that same query icon attribute to instead be on the li selector. The core of my issue.

Visually speaking, the following structure now helps me understand that I want my data-icon to live on my li element :

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import Edit from './edit';
import Save from './save';

registerBlockType( 'mediagallery/item', {
    title: __( 'Media Gallery Block Item', 'mg-block-item' ),
    description: __(
        'A sub block associated to the Media Gallery parent block',
        'mg-block'
    ),
    category: 'text',
    icon: {
        src: 'controls-play',
        foreground: '#6a5acd',
    },
    parent: [ 'mg-block/mediagallery' ],
    supports: {
        reusable: false,
        html: false,
    },
    attributes: {
        mediaLinks: {
            type: 'array',
            default: [
                {
                    link: 'https://video-one',
                    icon: 'media-video',
                },
                {
                    link: 'https://video-two',
                    icon: 'media-video',
                },
                {
                    link: 'https://video-three',
                    icon: 'media-video',
                },
            ],
            source: 'query',
            selector: '.wp-block-mediagallery-item-media-links ul li',
            query: {
                icon: {
                    source: 'attribute',
                    attribute: 'data-icon',
                },
                link: {
                    source: 'attribute',
                    selector: 'a',
                    attribute: 'href',
                },
            },
        },
    },
    edit: Edit,
    save: Save,
} );

And! I want that same structure reflected in my save.js file…

            { mediaLinks.length > 0 && (
                <div className="wp-block-mediagallery-item-media-links">
                    <ul>
                        { mediaLinks.map( ( item, index ) => {
                            return (
                                <li key={ index } data-icon={ item.icon }>
                                    <a href={ item.link }>
                                        <Icon icon={ item.icon } />
                                    </a>
                                </li>
                            );
                        } ) }
                    </ul>
                </div>
            ) }

As a result the error is gone, and both post and save have a clean match.