W mojej wtyczce blokowej mam plik atrybutów (index.js), aw nim mam plik MediaLinki atrybut gdzie i próbuję użyć wartości domyślnych wraz z procesem zapytania …

My index.js file

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',
            source: 'query',
            selector: '.wp-block-mediagallery-item-media-links ul li',
            default: [
                {
                    link: '
                    icon: 'media-video',
                },
                {
                    link: '
                    icon: 'media-video',
                },
                {
                    link: '
                    icon: 'media-video',
                },
            ],
            query: {
                icon: {
                    source: 'attribute',
                    attribute: 'data-icon',
                },
                link: {
                    source: 'attribute',
                    selector: 'a',
                    attribute: 'href',
                },
            },
        },
    },
    edit: Edit,
    save: Save,
} );

… Ale mimo że powyższe działa początkowo, kiedy odświeżam moją stronę edycji, WordPress nie widzi dopasowania między wpisem a zapisem i zgłasza następujący błąd…

Content generated by `save` function:

<div class="wp-block-mediagallery-item"><button class="vid-img"><img src=" alt="" class="wp-image-409"/></button><h2 class="vid-name">Joe Right</h2><div class="vid-title"><p>Web Dev</p></div><div class="vid-content"><p>Works out of Paris</p></div><div class="wp-block-mediagallery-item-media-links"><ul><li><a href=" href=" href="


Content retrieved from post body:

<div class="wp-block-mediagallery-item"><button class="vid-img"><img src=" alt="" class="wp-image-409"/></button><h2 class="vid-name">Joe Right</h2><div class="vid-title"><p>Web Dev</p></div><div class="vid-content"><p>Works out of Paris</p></div><div class="wp-block-mediagallery-item-media-links"><ul><li><a href=" class="dashicon dashicons dashicons-media-video"></span></a></li><li><a href=" data-icon="media-video"><span class="dashicon dashicons dashicons-media-video"></span></a></li><li><a href=" data-icon="media-video"><span class="dashicon dashicons dashicons-media-video"></span></a></li></ul></div></div>

Uwaga w powyższym oświadczeniu o błędzie, ratować nie widzi <span class="dashicon dashicons dashicons-media-video"></span> i nie widzi data-icon="media-video"

Dlaczego tak miałoby być?

my save.js file

import { useBlockProps} from '@wordpress/block-editor';
import { Icon } from '@wordpress/components';

export default function Save( { attributes } ) {
    const { mediaLinks } = attributes;
    const blockProps = useBlockProps.save({});

    return (
        <div { ...blockProps }>

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

Dziękujemy za wszelkie wskazówki dotyczące prawidłowego korzystania z komponentu ikony i domyślnych atrybutów w celu zapisywania.