index.js
47 lines
| 1 | /** |
| 2 | * WordPress dependencies |
| 3 | */ |
| 4 | const { __ } = wp.i18n; |
| 5 | const { InnerBlocks } = wp.blockEditor; |
| 6 | const { useEffect } = wp.element; |
| 7 | const { select, dispatch } = wp.data; |
| 8 | |
| 9 | const edit = ( { isSelected, clientId } ) => { |
| 10 | // When adding a new Multi-Form Goal block, select the inner Progress Bar block by default |
| 11 | useEffect( () => { |
| 12 | if ( isSelected ) { |
| 13 | selectProgressBar(); |
| 14 | } |
| 15 | }, [] ); |
| 16 | |
| 17 | const selectProgressBar = () => { |
| 18 | const parentBlock = select( 'core/editor' ).getBlocksByClientId( clientId )[ 0 ]; |
| 19 | const progressBarBlock = parentBlock.innerBlocks[ parentBlock.innerBlocks.length - 1 ]; |
| 20 | dispatch( 'core/block-editor' ).selectBlock( progressBarBlock.clientId ); |
| 21 | }; |
| 22 | |
| 23 | const blockTemplate = [ |
| 24 | [ 'core/media-text', { |
| 25 | imageFill: true, |
| 26 | }, [ |
| 27 | [ 'core/heading', { |
| 28 | placeholder: __( 'Heading', 'give' ), |
| 29 | } ], |
| 30 | [ 'core/paragraph', { |
| 31 | placeholder: __( 'Summary', 'give' ), |
| 32 | } ], |
| 33 | ] ], |
| 34 | [ 'give/progress-bar', {} ], |
| 35 | ]; |
| 36 | |
| 37 | return ( |
| 38 | <div className="give-multi-form-goal-block"> |
| 39 | <InnerBlocks |
| 40 | template={ blockTemplate } |
| 41 | templateLock="all" |
| 42 | /> |
| 43 | </div> |
| 44 | ); |
| 45 | }; |
| 46 | export default edit; |
| 47 |