Move the switch to classic shortcode block button to separate component (#42724)
* Move the switch to classic shortcode block button to separate component - Move modal component file from incompatible-extension-notice component folder to switch-to-classic-shortcode-button folder. - Rename modal component file to model-content component file. - Move the switch to classic shortcode block button to separate component folder * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Update class names in switch-to-classic-shortcode-button component * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Update plugins/woocommerce-blocks/assets/js/editor-components/switch-to-classic-shortcode-button/editor.scss Co-authored-by: Niels Lange <info@nielslange.de> * Refactor SwitchToClassicShortcodeButton component * Fix css lint erros --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Niels Lange <info@nielslange.de>
This commit is contained in:
Tarun Vijwani
GitHub
parent
055b1429fe
commit
82a6611144
|
|
@ -70,34 +70,3 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
ul.cross-list {
|
||||
list-style: none outside;
|
||||
margin: 0 0 24px 1em;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none outside;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
li::before {
|
||||
content: "❌";
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-blocks-incompatible-extensions-notice-modal-content {
|
||||
max-width: 480px;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-blocks-incompatible-extensions-notice-modal-actions {
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
margin-left: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,33 +2,16 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import { __, _n, sprintf } from '@wordpress/i18n';
|
||||
import {
|
||||
Notice,
|
||||
ExternalLink,
|
||||
Button,
|
||||
TabbableContainer,
|
||||
Modal,
|
||||
} from '@wordpress/components';
|
||||
import {
|
||||
createInterpolateElement,
|
||||
useEffect,
|
||||
useState,
|
||||
} from '@wordpress/element';
|
||||
import { Notice, ExternalLink } from '@wordpress/components';
|
||||
import { createInterpolateElement, useEffect } from '@wordpress/element';
|
||||
import { Alert } from '@woocommerce/icons';
|
||||
import { Icon, chevronDown } from '@wordpress/icons';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { createBlock, BlockInstance } from '@wordpress/blocks';
|
||||
import { store as noticesStore } from '@wordpress/notices';
|
||||
import { store as coreStore } from '@wordpress/core-data';
|
||||
import { store as blockEditorStore } from '@wordpress/block-editor';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { findBlock } from '@woocommerce/utils';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useCombinedIncompatibilityNotice } from './use-combined-incompatibility-notice';
|
||||
import { ModalContent } from './modal';
|
||||
import { SwitchToClassicShortcodeButton } from '../switch-to-classic-shortcode-button';
|
||||
import './editor.scss';
|
||||
|
||||
interface ExtensionNoticeProps {
|
||||
|
|
@ -57,17 +40,6 @@ export function IncompatibleExtensionsNotice( {
|
|||
incompatibleExtensions,
|
||||
incompatibleExtensionsCount,
|
||||
] = useCombinedIncompatibilityNotice( block );
|
||||
const [ isOpen, setOpen ] = useState( false );
|
||||
const openModal = () => setOpen( true );
|
||||
const closeModal = () => setOpen( false );
|
||||
const { createInfoNotice } = useDispatch( noticesStore );
|
||||
const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
|
||||
const { undo } = useDispatch( coreStore );
|
||||
const { getBlocks } = useSelect( ( select ) => {
|
||||
return {
|
||||
getBlocks: select( blockEditorStore ).getBlocks,
|
||||
};
|
||||
}, [] );
|
||||
|
||||
useEffect( () => {
|
||||
toggleDismissedStatus( ! isVisible );
|
||||
|
|
@ -77,16 +49,6 @@ export function IncompatibleExtensionsNotice( {
|
|||
return null;
|
||||
}
|
||||
|
||||
const switchButtonLabel =
|
||||
block === 'woocommerce/cart'
|
||||
? __( 'Switch to classic cart', 'woocommerce' )
|
||||
: __( 'Switch to classic checkout', 'woocommerce' );
|
||||
|
||||
const snackbarLabel =
|
||||
block === 'woocommerce/cart'
|
||||
? __( 'Switched to classic cart.', 'woocommerce' )
|
||||
: __( 'Switched to classic checkout.', 'woocommerce' );
|
||||
|
||||
const noticeContent = (
|
||||
<>
|
||||
{ incompatibleExtensionsCount > 1
|
||||
|
|
@ -120,18 +82,6 @@ export function IncompatibleExtensionsNotice( {
|
|||
</>
|
||||
);
|
||||
|
||||
const selectClassicShortcodeBlock = () => {
|
||||
const classicShortcodeBlock = findBlock( {
|
||||
blocks: getBlocks(),
|
||||
findCondition: ( foundBlock: BlockInstance ) =>
|
||||
foundBlock.name === 'woocommerce/classic-shortcode',
|
||||
} );
|
||||
|
||||
if ( classicShortcodeBlock ) {
|
||||
selectBlock( classicShortcodeBlock.clientId );
|
||||
}
|
||||
};
|
||||
|
||||
const entries = Object.entries( incompatibleExtensions );
|
||||
const remainingEntries = entries.length - 2;
|
||||
|
||||
|
|
@ -191,108 +141,10 @@ export function IncompatibleExtensionsNotice( {
|
|||
</ul>
|
||||
</details>
|
||||
) }
|
||||
|
||||
<Button
|
||||
variant={ 'secondary' }
|
||||
onClick={ () => {
|
||||
recordEvent( 'switch_to_classic_shortcode_click', {
|
||||
shortcode:
|
||||
block === 'woocommerce/checkout'
|
||||
? 'checkout'
|
||||
: 'cart',
|
||||
} );
|
||||
openModal();
|
||||
} }
|
||||
>
|
||||
{ switchButtonLabel }
|
||||
</Button>
|
||||
{ isOpen && (
|
||||
<Modal
|
||||
size="medium"
|
||||
title={ switchButtonLabel }
|
||||
onRequestClose={ closeModal }
|
||||
className="wc-blocks-incompatible-extensions-notice-modal-content"
|
||||
>
|
||||
<ModalContent blockType={ block } />
|
||||
<TabbableContainer className="wc-blocks-incompatible-extensions-notice-modal-actions">
|
||||
<Button
|
||||
variant="primary"
|
||||
isDestructive={ true }
|
||||
onClick={ () => {
|
||||
replaceBlock(
|
||||
clientId,
|
||||
createBlock(
|
||||
'woocommerce/classic-shortcode',
|
||||
{
|
||||
shortcode:
|
||||
block ===
|
||||
'woocommerce/checkout'
|
||||
? 'checkout'
|
||||
: 'cart',
|
||||
}
|
||||
)
|
||||
);
|
||||
recordEvent(
|
||||
'switch_to_classic_shortcode_confirm',
|
||||
{
|
||||
shortcode:
|
||||
block ===
|
||||
'woocommerce/checkout'
|
||||
? 'checkout'
|
||||
: 'cart',
|
||||
}
|
||||
);
|
||||
selectClassicShortcodeBlock();
|
||||
createInfoNotice( snackbarLabel, {
|
||||
actions: [
|
||||
{
|
||||
label: __(
|
||||
'Undo',
|
||||
'woocommerce'
|
||||
),
|
||||
onClick: () => {
|
||||
undo();
|
||||
recordEvent(
|
||||
'switch_to_classic_shortcode_undo',
|
||||
{
|
||||
shortcode:
|
||||
block ===
|
||||
'woocommerce/checkout'
|
||||
? 'checkout'
|
||||
: 'cart',
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
type: 'snackbar',
|
||||
} );
|
||||
closeModal();
|
||||
} }
|
||||
>
|
||||
{ __( 'Switch', 'woocommerce' ) }
|
||||
</Button>{ ' ' }
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={ () => {
|
||||
recordEvent(
|
||||
'switch_to_classic_shortcode_cancel',
|
||||
{
|
||||
shortcode:
|
||||
block ===
|
||||
'woocommerce/checkout'
|
||||
? 'checkout'
|
||||
: 'cart',
|
||||
}
|
||||
);
|
||||
closeModal();
|
||||
} }
|
||||
>
|
||||
{ __( 'Cancel', 'woocommerce' ) }
|
||||
</Button>
|
||||
</TabbableContainer>
|
||||
</Modal>
|
||||
) }
|
||||
<SwitchToClassicShortcodeButton
|
||||
block={ block }
|
||||
clientId={ clientId }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Notice>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
.wc-blocks-switch-to-classic-shortcode-modal-content {
|
||||
max-width: 480px;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-blocks-switch-to-classic-shortcode-modal-actions {
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
margin-left: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
ul.cross-list {
|
||||
list-style: none outside;
|
||||
margin: 0 0 24px 1em;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
list-style: none outside;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
|
||||
&::before {
|
||||
content: "❌";
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button, TabbableContainer, Modal } from '@wordpress/components';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { createBlock, BlockInstance } from '@wordpress/blocks';
|
||||
import { store as noticesStore } from '@wordpress/notices';
|
||||
import { store as coreStore } from '@wordpress/core-data';
|
||||
import { store as blockEditorStore } from '@wordpress/block-editor';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { findBlock } from '@woocommerce/utils';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { ModalContent } from './modal-content';
|
||||
import './editor.scss';
|
||||
|
||||
interface SwitchToClassicShortcodeButtonProps {
|
||||
block: 'woocommerce/cart' | 'woocommerce/checkout';
|
||||
clientId: string;
|
||||
}
|
||||
|
||||
export function SwitchToClassicShortcodeButton( {
|
||||
block,
|
||||
clientId,
|
||||
}: SwitchToClassicShortcodeButtonProps ): JSX.Element {
|
||||
const { createInfoNotice } = useDispatch( noticesStore );
|
||||
const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
|
||||
|
||||
const [ isOpen, setOpen ] = useState( false );
|
||||
const openModal = () => setOpen( true );
|
||||
const closeModal = () => setOpen( false );
|
||||
const { undo } = useDispatch( coreStore );
|
||||
|
||||
const switchButtonLabel =
|
||||
block === 'woocommerce/cart'
|
||||
? __( 'Switch to classic cart', 'woocommerce' )
|
||||
: __( 'Switch to classic checkout', 'woocommerce' );
|
||||
|
||||
const snackbarLabel =
|
||||
block === 'woocommerce/cart'
|
||||
? __( 'Switched to classic cart.', 'woocommerce' )
|
||||
: __( 'Switched to classic checkout.', 'woocommerce' );
|
||||
|
||||
const { getBlocks } = useSelect( ( select ) => {
|
||||
return {
|
||||
getBlocks: select( blockEditorStore ).getBlocks,
|
||||
};
|
||||
}, [] );
|
||||
|
||||
const selectClassicShortcodeBlock = () => {
|
||||
const classicShortcodeBlock = findBlock( {
|
||||
blocks: getBlocks(),
|
||||
findCondition: ( foundBlock: BlockInstance ) =>
|
||||
foundBlock.name === 'woocommerce/classic-shortcode',
|
||||
} );
|
||||
|
||||
if ( classicShortcodeBlock ) {
|
||||
selectBlock( classicShortcodeBlock.clientId );
|
||||
}
|
||||
};
|
||||
|
||||
const handleSwitchToClassicShortcodeClick = () => {
|
||||
recordEvent( 'switch_to_classic_shortcode_click', {
|
||||
shortcode: block === 'woocommerce/checkout' ? 'checkout' : 'cart',
|
||||
} );
|
||||
openModal();
|
||||
};
|
||||
|
||||
const handleUndoClick = () => {
|
||||
undo();
|
||||
recordEvent( 'switch_to_classic_shortcode_undo', {
|
||||
shortcode: block === 'woocommerce/checkout' ? 'checkout' : 'cart',
|
||||
} );
|
||||
};
|
||||
|
||||
const handleSwitchClick = () => {
|
||||
replaceBlock(
|
||||
clientId,
|
||||
createBlock( 'woocommerce/classic-shortcode', {
|
||||
shortcode:
|
||||
block === 'woocommerce/checkout' ? 'checkout' : 'cart',
|
||||
} )
|
||||
);
|
||||
recordEvent( 'switch_to_classic_shortcode_confirm', {
|
||||
shortcode: block === 'woocommerce/checkout' ? 'checkout' : 'cart',
|
||||
} );
|
||||
selectClassicShortcodeBlock();
|
||||
createInfoNotice( snackbarLabel, {
|
||||
actions: [
|
||||
{
|
||||
label: __( 'Undo', 'woocommerce' ),
|
||||
onClick: handleUndoClick,
|
||||
},
|
||||
],
|
||||
type: 'snackbar',
|
||||
} );
|
||||
closeModal();
|
||||
};
|
||||
|
||||
const handleCancelClick = () => {
|
||||
recordEvent( 'switch_to_classic_shortcode_cancel', {
|
||||
shortcode: block === 'woocommerce/checkout' ? 'checkout' : 'cart',
|
||||
} );
|
||||
closeModal();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant={ 'secondary' }
|
||||
onClick={ handleSwitchToClassicShortcodeClick }
|
||||
>
|
||||
{ switchButtonLabel }
|
||||
</Button>
|
||||
{ isOpen && (
|
||||
<Modal
|
||||
size="medium"
|
||||
title={ switchButtonLabel }
|
||||
onRequestClose={ closeModal }
|
||||
className="wc-blocks-switch-to-classic-shortcode-modal-content"
|
||||
>
|
||||
<ModalContent blockType={ block } />
|
||||
<TabbableContainer className="wc-blocks-switch-to-classic-shortcode-modal-actions">
|
||||
<Button
|
||||
variant="primary"
|
||||
isDestructive={ true }
|
||||
onClick={ handleSwitchClick }
|
||||
>
|
||||
{ __( 'Switch', 'woocommerce' ) }
|
||||
</Button>{ ' ' }
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={ handleCancelClick }
|
||||
>
|
||||
{ __( 'Cancel', 'woocommerce' ) }
|
||||
</Button>
|
||||
</TabbableContainer>
|
||||
</Modal>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: enhancement
|
||||
|
||||
Move the switch to classic shortcode block button to separate component.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: enhancement
|
||||
|
||||
Move the switch to classic shortcode block button to separate component.
|
||||
Loading…
Reference in New Issue