| 1 |
import { useBlockProps } from '@wordpress/block-editor'; |
| 2 |
import { __ } from '@wordpress/i18n'; |
| 3 |
import { Placeholder, Button, Disabled } from '@wordpress/components'; |
| 4 |
import ServerSideRender from '@wordpress/server-side-render'; |
| 5 |
import { useSelect } from '@wordpress/data'; |
| 6 |
import Icon from './icon'; |
| 7 |
|
| 8 |
const disallowedThemesSSR = [ |
| 9 |
'twentytwentyone', |
| 10 |
'twentytwenty', |
| 11 |
'twentynineteen', |
| 12 |
'twentyeighteen', |
| 13 |
'twentyseventeen', |
| 14 |
'twentysixteen', |
| 15 |
'twentyfifteen', |
| 16 |
'twentyfourteen', |
| 17 |
]; |
| 18 |
|
| 19 |
export const BlockEdit = ({ isSelected }) => { |
| 20 |
const blockProps = useBlockProps(); |
| 21 |
const isDisallowedThemeSSR = useSelect((select) => { |
| 22 |
const currentTheme = select('core').getCurrentTheme(); |
| 23 |
if (!currentTheme || (!'template') in currentTheme) { |
| 24 |
return false; |
| 25 |
} |
| 26 |
return disallowedThemesSSR.includes(currentTheme.template); |
| 27 |
}); |
| 28 |
|
| 29 |
return ( |
| 30 |
<div {...blockProps}> |
| 31 |
{isSelected || isDisallowedThemeSSR ? ( |
| 32 |
<Placeholder |
| 33 |
icon={Icon} |
| 34 |
label={__('Mailchimp Block', 'mailchimp')} |
| 35 |
instructions={__('Great work! Your block is ready to go.', 'mailchimp')} |
| 36 |
> |
| 37 |
<div> |
| 38 |
<Button |
| 39 |
style={{ paddingLeft: 0 }} |
| 40 |
variant="link" |
| 41 |
href={window.MAILCHIMP_ADMIN_SETTINGS_URL} |
| 42 |
> |
| 43 |
{__( |
| 44 |
"Head over here if you'd like to adjust your settings.", |
| 45 |
'mailchimp', |
| 46 |
)} |
| 47 |
</Button> |
| 48 |
</div> |
| 49 |
</Placeholder> |
| 50 |
) : ( |
| 51 |
<Disabled> |
| 52 |
<ServerSideRender block="mailchimp/mailchimp" /> |
| 53 |
</Disabled> |
| 54 |
)} |
| 55 |
</div> |
| 56 |
); |
| 57 |
}; |
| 58 |
|
