@wordpress/block-editor
Version:
85 lines (81 loc) • 2.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useListViewImages;
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _store = require("../../store");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// Maximum number of images to display in a list view row.
const MAX_IMAGES = 3;
function getImage(block) {
if (block.name !== 'core/image') {
return;
}
if (block.attributes?.url) {
return {
url: block.attributes.url,
alt: block.attributes.alt,
clientId: block.clientId
};
}
}
function getImagesFromGallery(block) {
if (block.name !== 'core/gallery' || !block.innerBlocks) {
return [];
}
const images = [];
for (const innerBlock of block.innerBlocks) {
const img = getImage(innerBlock);
if (img) {
images.push(img);
}
if (images.length >= MAX_IMAGES) {
return images;
}
}
return images;
}
function getImagesFromBlock(block, isExpanded) {
const img = getImage(block);
if (img) {
return [img];
}
return isExpanded ? [] : getImagesFromGallery(block);
}
/**
* Get a block's preview images for display within a list view row.
*
* TODO: Currently only supports images from the core/image and core/gallery
* blocks. This should be expanded to support other blocks that have images,
* potentially via an API that blocks can opt into / provide their own logic.
*
* @param {Object} props Hook properties.
* @param {string} props.clientId The block's clientId.
* @param {boolean} props.isExpanded Whether or not the block is expanded in the list view.
* @return {Array} Images.
*/
function useListViewImages({
clientId,
isExpanded
}) {
const {
block
} = (0, _data.useSelect)(select => {
const _block = select(_store.store).getBlock(clientId);
return {
block: _block
};
}, [clientId]);
const images = (0, _element.useMemo)(() => {
return getImagesFromBlock(block, isExpanded);
}, [block, isExpanded]);
return images;
}
//# sourceMappingURL=use-list-view-images.js.map