migrations
2 years ago
index.js
1 year ago
withButtonContainerLegacyMigration.js
2 years ago
withButtonLegacyMigration.js
2 years ago
withContainerLegacyMigration.js
2 years ago
withDeviceType.js
3 years ago
withDynamicTag.js
1 year ago
withGridLegacyMigration.js
2 years ago
withHeadlineLegacyMigration.js
2 years ago
withHtmlAttributes.js
1 year ago
withImageLegacyMigration.js
2 years ago
withSetAttributes.js
2 years ago
withStyles.js
1 year ago
withUniqueId.js
2 years ago
withUniqueId.js
77 lines
| 1 | import { useEffect } from '@wordpress/element'; |
| 2 | import getEditorBlocks from '../utils/get-editor-blocks'; |
| 3 | import { useDispatch } from '@wordpress/data'; |
| 4 | import { store as blockEditorStore } from '@wordpress/block-editor'; |
| 5 | |
| 6 | /** |
| 7 | * Search all blocks for uniqueIds |
| 8 | * |
| 9 | * @param {Array} blocks The blocks array |
| 10 | * @return {Array} The array of uniqueIds |
| 11 | */ |
| 12 | export const getUniqueIdFromBlocks = ( blocks ) => blocks |
| 13 | .reduce( ( result, block ) => { |
| 14 | if ( |
| 15 | ( block.name && block.name.includes( 'generateblocks' ) ) && |
| 16 | ( block.attributes && block.attributes.uniqueId ) |
| 17 | ) { |
| 18 | result.uniqueIds.push( block.attributes.uniqueId ); |
| 19 | result.clientIds.push( block.clientId ); |
| 20 | } |
| 21 | |
| 22 | if ( block.innerBlocks ) { |
| 23 | const { uniqueIds, clientIds } = getUniqueIdFromBlocks( block.innerBlocks ); |
| 24 | result.uniqueIds = result.uniqueIds.concat( uniqueIds ); |
| 25 | result.clientIds = result.clientIds.concat( clientIds ); |
| 26 | } |
| 27 | |
| 28 | return result; |
| 29 | }, { uniqueIds: [], clientIds: [] } ); |
| 30 | |
| 31 | /** |
| 32 | * Generates a unique id based on the clientId |
| 33 | * |
| 34 | * @param {string} clientId The block clientId |
| 35 | * @return {string} The uniqueId |
| 36 | */ |
| 37 | export const generateUniqueId = ( clientId ) => clientId.substr( 2, 9 ).replace( '-', '' ); |
| 38 | |
| 39 | /** |
| 40 | * Checks if the array contains duplicates of the value |
| 41 | * |
| 42 | * @param {Array} arr The array to check the values |
| 43 | * @param {any} value The value to check if has duplicates |
| 44 | * @param {number} currentIndex The current index |
| 45 | * @return {boolean} If the array has duplicates |
| 46 | */ |
| 47 | export const hasDuplicates = ( arr, value, currentIndex ) => ( |
| 48 | arr.filter( ( el ) => ( el === value ) ).length > 1 && |
| 49 | currentIndex === arr.lastIndexOf( value ) |
| 50 | ); |
| 51 | |
| 52 | /** |
| 53 | * It will enhance a block component with the attributes.uniqueId property |
| 54 | * |
| 55 | * @param {any} WrappedComponent The component to add the uniqueId |
| 56 | * @return {Function} The wrapped component |
| 57 | */ |
| 58 | export default ( WrappedComponent ) => ( ( props ) => { |
| 59 | const { clientId, attributes } = props; |
| 60 | const { updateBlockAttributes } = useDispatch( blockEditorStore ); |
| 61 | |
| 62 | useEffect( () => { |
| 63 | const { uniqueIds, clientIds } = getUniqueIdFromBlocks( getEditorBlocks() ); |
| 64 | |
| 65 | if ( |
| 66 | ! attributes.uniqueId || |
| 67 | hasDuplicates( uniqueIds, attributes.uniqueId, clientIds.indexOf( clientId ) ) |
| 68 | ) { |
| 69 | const uniqueId = generateUniqueId( clientId ); |
| 70 | |
| 71 | updateBlockAttributes( clientId, { uniqueId } ); |
| 72 | } |
| 73 | }, [ clientId ] ); |
| 74 | |
| 75 | return ( <WrappedComponent { ...props } /> ); |
| 76 | } ); |
| 77 |