index.js
176 lines
| 1 | import { ToggleControl, Modal, Button, Notice, ExternalLink } from '@wordpress/components'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import { useState, useContext } from '@wordpress/element'; |
| 4 | import { useSelect, useDispatch } from '@wordpress/data'; |
| 5 | import ControlsContext from '../../block-context'; |
| 6 | import { doInnerContainerMigration, doSimpleMigration, shouldMigrateInnerContainer } from './utils'; |
| 7 | |
| 8 | export default function MigrateInnerContainer( props ) { |
| 9 | const { |
| 10 | setAttributes, |
| 11 | attributes, |
| 12 | } = props; |
| 13 | |
| 14 | const { |
| 15 | useInnerContainer, |
| 16 | useGlobalStyle, |
| 17 | isGlobalStyle, |
| 18 | } = attributes; |
| 19 | |
| 20 | const { clientId } = useContext( ControlsContext ); |
| 21 | const [ isInnerContainerMigrateOpen, setIsInnerContainerMigrateOpen ] = useState( false ); |
| 22 | const openModal = () => setIsInnerContainerMigrateOpen( true ); |
| 23 | const closeModal = () => setIsInnerContainerMigrateOpen( false ); |
| 24 | |
| 25 | const { |
| 26 | getBlocksByClientId, |
| 27 | getBlockParentsByBlockName, |
| 28 | getBlock, |
| 29 | isBlockMultiSelected, |
| 30 | } = useSelect( ( select ) => select( 'core/block-editor' ), [] ); |
| 31 | |
| 32 | const { |
| 33 | insertBlocks, |
| 34 | replaceBlocks, |
| 35 | } = useDispatch( 'core/block-editor' ); |
| 36 | |
| 37 | function isInsideGridBlock( blockClientId ) { |
| 38 | return getBlockParentsByBlockName( blockClientId, 'generateblocks/grid', true )[ 0 ]; |
| 39 | } |
| 40 | |
| 41 | function getChildBlock( blockClientId ) { |
| 42 | const currentBlock = getBlock( blockClientId ); |
| 43 | return currentBlock && currentBlock.innerBlocks.length ? getBlock( currentBlock.innerBlocks[ 0 ].clientId ) : ''; |
| 44 | } |
| 45 | |
| 46 | const migrateInnerContainer = shouldMigrateInnerContainer( { |
| 47 | attributes, |
| 48 | insideGridBlock: isInsideGridBlock( clientId ), |
| 49 | childBlock: getChildBlock( clientId ), |
| 50 | } ); |
| 51 | |
| 52 | function migrateInnerContainerButton() { |
| 53 | return <Button |
| 54 | variant={ !! migrateInnerContainer ? 'primary' : 'secondary' } |
| 55 | style={ { marginRight: '5px' } } |
| 56 | onClick={ () => { |
| 57 | doInnerContainerMigration( { |
| 58 | attributes, |
| 59 | setAttributes, |
| 60 | parentBlock: getBlocksByClientId( clientId )[ 0 ], |
| 61 | replaceBlocks, |
| 62 | insertBlocks, |
| 63 | clientId, |
| 64 | } ); |
| 65 | closeModal(); |
| 66 | } } |
| 67 | > |
| 68 | { __( 'Enable new system with inner Container block', 'generateblocks' ) } |
| 69 | </Button>; |
| 70 | } |
| 71 | |
| 72 | function enableNewSystemButton() { |
| 73 | return <Button |
| 74 | variant={ ! migrateInnerContainer ? 'primary' : 'secondary' } |
| 75 | style={ { marginRight: '5px' } } |
| 76 | onClick={ () => { |
| 77 | doSimpleMigration( { attributes, setAttributes } ); |
| 78 | closeModal(); |
| 79 | } } |
| 80 | > |
| 81 | { __( 'Enable new system only', 'generateblocks' ) } |
| 82 | </Button>; |
| 83 | } |
| 84 | |
| 85 | if ( isBlockMultiSelected( clientId ) ) { |
| 86 | return null; |
| 87 | } |
| 88 | |
| 89 | return ( |
| 90 | <> |
| 91 | { !! useInnerContainer && |
| 92 | <ToggleControl |
| 93 | label={ __( 'Use legacy layout system', 'generateblocks' ) } |
| 94 | help={ |
| 95 | <> |
| 96 | { __( 'This Container is using an old layout system. Toggle this to migrate to the new system.', 'generateblocks' ) } |
| 97 | |
| 98 | <ExternalLink |
| 99 | style={ { display: 'block', marginTop: '8px' } } |
| 100 | href={ __( |
| 101 | 'https://docs.generateblocks.com/article/migrating-container-legacy-layout/' |
| 102 | ) } |
| 103 | > |
| 104 | { __( 'Learn more about the new system' ) } |
| 105 | </ExternalLink> |
| 106 | </> |
| 107 | } |
| 108 | checked={ !! useInnerContainer } |
| 109 | onChange={ openModal } |
| 110 | /> |
| 111 | } |
| 112 | |
| 113 | { !! isInnerContainerMigrateOpen && |
| 114 | <Modal title={ __( 'New Layout System', 'generateblocks' ) } onRequestClose={ closeModal }> |
| 115 | <p>{ __( 'Migrating to our new layout system will do the following:', 'generateblocks' ) }</p> |
| 116 | <ul className="gblocks-layout-system-ul"> |
| 117 | <li>{ __( 'Remove the inner div element that was included by default in the old system.', 'generateblocks' ) }</li> |
| 118 | <li>{ __( 'Enable our new layout system for this Container block.', 'generateblocks' ) }</li> |
| 119 | </ul> |
| 120 | <p>{ __( 'We can automatically replace the old inner div element with a Container block if your layout relies on it.', 'generateblocks' ) }</p> |
| 121 | |
| 122 | { !! useGlobalStyle && |
| 123 | <Notice status="warning" isDismissible={ false } className="gblocks-inner-container-notice"> |
| 124 | <strong>{ __( 'Warning:', 'generateblocks' ) }</strong> |
| 125 | { ' ' + __( 'This block is using a Global Style. Make sure the Global Style you are using is also using the new layout system.', 'generateblocks' ) } |
| 126 | |
| 127 | { !! migrateInnerContainer && |
| 128 | <p style={ { marginBottom: 0 } }>{ __( 'You may want to create two new Global Styles for this Container. One for the outer Container block and one for the inner Container block.', 'generateblocks' ) }</p> |
| 129 | } |
| 130 | </Notice> |
| 131 | } |
| 132 | |
| 133 | { !! isGlobalStyle && |
| 134 | <Notice status="warning" isDismissible={ false } className="gblocks-inner-container-notice"> |
| 135 | <strong>{ __( 'Warning:', 'generateblocks' ) }</strong> |
| 136 | { ' ' + __( 'This block is a Global Style. If you migrate the inner container on this block you will need to make sure that all Container blocks using it are migrated as well.', 'generateblocks' ) } |
| 137 | </Notice> |
| 138 | } |
| 139 | |
| 140 | <Notice status="info" isDismissible={ false } className="gblocks-inner-container-notice"> |
| 141 | { !! migrateInnerContainer |
| 142 | ? ( |
| 143 | <> |
| 144 | <p style={ { marginTop: 0 } }><strong>{ __( 'Recommendation:', 'generateblocks' ) }</strong> { __( 'Yes, we recommend you add a new inner Container block to maintain your current layout.', 'generateblocks' ) }</p> |
| 145 | |
| 146 | { migrateInnerContainerButton() } |
| 147 | </> |
| 148 | ) : ( |
| 149 | <> |
| 150 | <p style={ { marginTop: 0 } }><strong>{ __( 'Recommendation:', 'generateblocks' ) }</strong> { __( 'No, we do not believe you need an inner Container block based on your current layout.', 'generateblocks' ) }</p> |
| 151 | { enableNewSystemButton() } |
| 152 | </> |
| 153 | ) |
| 154 | } |
| 155 | </Notice> |
| 156 | |
| 157 | { ! migrateInnerContainer && |
| 158 | migrateInnerContainerButton() |
| 159 | } |
| 160 | |
| 161 | { !! migrateInnerContainer && |
| 162 | enableNewSystemButton() |
| 163 | } |
| 164 | |
| 165 | <Button |
| 166 | variant="secondary" |
| 167 | onClick={ closeModal } |
| 168 | > |
| 169 | { __( 'Cancel', 'generateblocks' ) } |
| 170 | </Button> |
| 171 | </Modal> |
| 172 | } |
| 173 | </> |
| 174 | ); |
| 175 | } |
| 176 |