Получить URL-адрес вложения с помощью атрибута идентификатора вложения в бэкэнд-представлении блока Гутенберга - PullRequest
Новая
       12

Получить URL-адрес вложения с помощью атрибута идентификатора вложения в бэкэнд-представлении блока Гутенберга

0 голосов
/ 09 января 2020

Если в блоке Гутенберга хранится атрибут идентификатора вложения, есть ли способ динамически получить URL заданного c размера миниатюры с использованием этого идентификатора?

Атрибут будет сохранен в блоке как это: 

 imageID: {
     type: 'integer',
 },

И идея состоит в том, чтобы динамически показывать это изображение в представлении редактора Гутенберга.

1 Ответ

1 голос
/ 09 января 2020

Я столкнулся с этой проблемой несколько недель go. Это на некоторое время поставило меня в тупик, но вы можете сделать это, используя withSelect () () и getMedia(). В скорлупе нам нужно получить медиа-объект из идентификатора, который у нас есть. Посмотрите внутри этого объекта для миниатюры объекта. Тогда мы получим свойство source_url. Ваш файл должен выглядеть примерно так: 

// Block image preview
const blockEdit = createElement("div", null, 

    // If image defined, get the source_url
    const imageThumbURL = props.imageObj ? props.imageObj.media_details.sizes.thumbnail.source_url : null

    createElement("img", {
        src: imageThumbURL
    })
)

// Use withSelect(x)(y) to load image url on page load
const fieldData = withSelect( (select, props) => {
    // Get the image ID
    const imageId = props.attributes.imageID

    // Create "props.imageObj"
    return { 
        // If image defined, get the image "media" object
        imageObj: imageId ? select("core").getMedia(imageId) : null
    }
})(blockEdit)

wp.blocks.registerBlockType('plugin-namespace/block-name', {
    attributes: {
        imageID: {
            type: 'Number'
        }
    },
    edit: fieldData
}

Выше не протестировано, но я использовал это решение, чтобы разрешить загрузку медиа-элемента при загрузке страницы с использованием его идентификатора. Надеюсь, это поможет.

...