import { rawHandler, serialize } from '@wordpress/blocks'; export const walkAndUpdateImageDetails = (inputs, newImage) => { const blocks = rawHandler({ HTML: inputs.previousContent }); const parser = new DOMParser(); const walk = (blocks) => blocks.map((block) => { if (['core/image', 'core/cover'].includes(block.name)) { const attrs = { ...block.attributes }; const url = inputs.url.includes('unsplash.com') ? inputs.url.split('?')[0] // For unsplash just match the base URL : inputs.url; const isMatchingId = attrs.id === inputs.imageId; const isMatchingUrl = attrs.url.startsWith(url); if (!isMatchingId && !isMatchingUrl) { // Not our image, return as is return { ...block, attributes: attrs }; } attrs.url = newImage.source_url || newImage.url; attrs.id = newImage.id; // Remove import class if present if (attrs.className) { attrs.className = attrs.className .split(' ') .filter((cn) => cn !== 'extendify-image-import') .join(' '); } // originalContent needs wp-image-{id} to match the new ID const originalContentDoc = parser.parseFromString( attrs.originalContent || block.originalContent || '', 'text/html', ); const img = originalContentDoc.querySelector('img'); if (!img) return { ...block, attributes: attrs }; // cover block wont have an image here img.setAttribute('src', newImage.source_url || newImage.url); const classList = img.className .split(' ') .filter((cn) => cn !== `wp-image-${inputs.imageId}`); classList.push(`wp-image-${newImage.id}`); img.className = classList.join(' '); attrs.originalContent = originalContentDoc.body.innerHTML; return { ...block, attributes: attrs }; } if (['core/media-text'].includes(block.name)) { const attrs = { ...block.attributes }; const url = inputs.url.includes('unsplash.com') ? inputs.url.split('?')[0] // For unsplash just match the base URL : inputs.url; // media-text block may not have all the attributes if the image was external. const isMatchingId = attrs?.mediaId === inputs.imageId; const isMatchingMediaLink = attrs?.mediaLink?.startsWith(url); const isMatchingMediaUrl = attrs?.mediaUrl?.startsWith(url); if (!isMatchingId && !isMatchingMediaLink && !isMatchingMediaUrl) { // Not our image, return as is return { ...block, attributes: attrs }; } attrs.mediaLink = newImage.source_url || newImage.url; attrs.mediaUrl = newImage.source_url || newImage.url; attrs.mediaId = newImage.id; // Remove import class if present if (attrs.className) { attrs.className = attrs.className .split(' ') .filter((cn) => cn !== 'extendify-image-import') .join(' '); } return { ...block, attributes: attrs }; } if (block.innerBlocks && block.innerBlocks.length > 0) { return { ...block, innerBlocks: walk(block.innerBlocks), }; } return block; }); const updatedBlocks = walk(blocks); return serialize(updatedBlocks); };