I am constructing a number of customized blocks and have come throughout one thing I’m not positive is both doable on the present time (as there doesn’t appear to be docs on it), or it’s one thing individuals are nonetheless determining.
I am questioning is it doable to entry the picture srcsets in a customized blocks. That is my present markup which is accessing the sizes array to get my chosen picture dimension. Which is okay, however clearly not perfect while you get all the way down to a cell dimension.
attributes: {
mediaID: {
sort: "number",
},
mediaURL: {
sort: "string",
supply: "attribute",
selector: "img.promogroupitem__media--img",
attribute: "src",
},
mediaAlt: {
sort: 'string',
supply: 'attribute',
selector: 'img.promogroupitem__media--img',
attribute: 'alt'
},
mediaWidth: {
sort: 'quantity',
supply: 'attribute',
selector: 'img.promogroupitem__media--img',
attribute: 'width',
},
mediaHeight: {
sort: 'quantity',
supply: 'attribute',
selector: 'img.promogroupitem__media--img',
attribute: 'top',
},
},
guardian: 'wpboiler-core/promo-group',
edit: perform(props) {
const { attributes, setAttributes } = props;
const {
mediaID,
mediaURL,
mediaAlt,
mediaWidth,
mediaHeight,
} = attributes;
const onSelectImage = media => setAttributes({
mediaID: media.id,
mediaURL: (media.sizes.promo ? media.sizes.promo.url : media.url),
mediaAlt: media.alt,
mediaWidth: (media.sizes.promo ? media.sizes.promo.width : media.width),
mediaHeight: (media.sizes.promo ? media.sizes.promo.top : media.top),
});
return el(
'article',
useBlockProps(attributes),
el(
InspectorControls,
null,
// IMAGE UPLOAD BEGIN
el(
PanelBody,
{
title: "Background Image",
},
el(MediaUpload, {
onSelect: onSelectImage,
allowedTypes: "image",
worth: mediaID,
render: (obj) => {
return el(
Button,
{
className: "components-button is-primary",
onClick: obj.open,
},
!mediaID
? __("Upload Image", "card-group")
: __("Replace Image", "card-group")
);
},
}),
mediaID
? el(
Button,
{
className: "components-button is-tertiary",
fashion: { marginLeft: "5px" },
onClick: () => setAttributes({
mediaID: "",
mediaURL: "",
mediaAlt: "",
mediaHeight: "",
mediaWidth: "",
}),
},
"Remove Image"
)
: ""
)
// IMAGE UPLOAD END
),
el(
'div',
{ className: 'promogroupitem__container' },
mediaURL ?
el(
'div',
{ className: 'promogroupitem__media' },
el(
'img',
{
className: 'promogroupitem__media--img',
src: mediaURL,
loading: 'lazy',
width: mediaWidth,
top: mediaHeight,
alt: mediaAlt,
}
),
) : '',
)
);
},
save: perform(props) {
const { attributes } = props;
const {
mediaURL,
mediaAlt,
mediaHeight,
mediaWidth,
} = attributes;
return el(
'article',
{ className: 'promogroupitem' },
el(
'div',
{ className: 'promogroupitem__container' },
mediaURL ?
el(
'div',
{ className: 'promogroupitem__media' },
el(
'img', {
className: 'promogroupitem__media--img',
src: mediaURL,
loading: 'lazy',
width: mediaWidth,
top: mediaHeight,
alt: mediaAlt,
}
),
) : '',
),
);
},
Its one thing I’m not fairly positive how you can resolve. Has anybody come throughout this and developed/discovered an answer for it?