@wordpress/block-editor
Version:
79 lines (76 loc) • 2.03 kB
JavaScript
/**
* WordPress dependencies
*/
import { useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';
// 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.
*/
export default function useListViewImages({
clientId,
isExpanded
}) {
const {
block
} = useSelect(select => {
const _block = select(blockEditorStore).getBlock(clientId);
return {
block: _block
};
}, [clientId]);
const images = useMemo(() => {
return getImagesFromBlock(block, isExpanded);
}, [block, isExpanded]);
return images;
}
//# sourceMappingURL=use-list-view-images.js.map