Get field added via attachment_fields_to_edit filter in Gutenberg

Question

In a plugin I'm building, I've added a field named attribution to attachments via the attachment_fields_to_edit filter.

I'm trying to get this info in the block editor but when I output the variable holding the attachments using console.log, I only see the following props. This is an example:

alt: ""
​​caption: ""
​​id: 25
​​link: "http://example.com/page/1_58image1600x1200/"
​​mime: "image/jpeg"
​​sizes: Object { thumbnail: {…}, medium: {…}, large: {…}, … }
​​subtype: "jpeg"
​​type: "image"
​​url: "http://example.com/wp-content/uploads/2023/07/1_58image1600x1200.jpg"

Is there a way to get the data from attachment fields added via the attachment_fields_to_edit filter in Gutenberg?

UPDATE (Adding some code for completeness):

This is the component that opens a window for selecting attachments:

<MediaPlaceholder
    accept="image/*"
    allowedTypes={['image']}
    onSelect={setItems}
    multiple={true}
    gallery={true}
    addToGallery={true}
    handleUpload={true}
    labels={
        { title: __('My Gallery') }
    }
/>

This is the function that stores the selected attachments in an array attribute named items:

const setItems = (media) => {
    setAttributes({ items: media })
}

This is the function that displays the stored attachments in the items attribute:

const displayItems = (items) => {
    console.log(items);
    return (
        items.map((item, index) => {
            return (
                <div className="attachment" key={index}>
                    <figure>
                        <img src={item.url} alt={item.alt} key={item.id} />
                    </figure>
                </div>
            )
        })
    )
};

The console.log(items) call just returns an array of attachments without the custom attribution field.

As suggested, I registered the meta field using the register_post_meta function in the PHP side with no success:

function register_meta_field() {
    register_post_meta(
        'attachment',
        'attribution',
        array(
            'show_in_rest'      => true,
            'type'              => 'string',
            'single'            => true,
            'sanitize_callback' => 'sanitize_text_field',
            'auth_callback'     => function() {
                return current_user_can( 'edit_posts' );
            },
        )
    );
}
add_action( 'init', 'register_meta_field' );

Answer 1

Yes, you're right that the slimImageObject function is the reason why you're seeing/getting only those limited list of props.

But don't worry, you can use wp.data.select( 'core' ).getMedia( <attachment id> ) to get the attribution meta (and any other meta or props in the full attachment object). Here's an example that worked for me:

items.map((item, index) => {
    // Add this line and the attribution part in the attachment div.
    const attribution = wp.data.select( 'core' ).getMedia( item.id )?.meta?.attribution;

    return (
        <div className="attachment" key={index}>
            <figure>
                <img src={item.url} alt={item.alt} key={item.id} />
            </figure>
            Attribution: { attribution || 'NA' }
        </div>
    )
})