update Checkout i2 locks to attributes. (https://github.com/woocommerce/woocommerce-blocks/pull/4571)
* update locks to attributes instead * remove lock from support attribute
This commit is contained in:
Seghir Nadir
GitHub
parent
70ec1f8b31
commit
5a0840506e
|
|
@ -16,21 +16,24 @@ export interface FormStepBlockProps {
|
|||
setAttributes: ( attributes: Record< string, unknown > ) => void;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
lock?: { move: boolean; remove: boolean };
|
||||
}
|
||||
|
||||
/**
|
||||
* Form Step Block for use in the editor.
|
||||
*/
|
||||
export const FormStepBlock = ( {
|
||||
attributes: { title = '', description = '', showStepNumber = true },
|
||||
attributes,
|
||||
setAttributes,
|
||||
className = '',
|
||||
children,
|
||||
}: FormStepBlockProps ): JSX.Element => {
|
||||
const { title = '', description = '', showStepNumber = true } = attributes;
|
||||
const blockProps = useBlockPropsWithLocking( {
|
||||
className: classnames( 'wc-block-components-checkout-step', className, {
|
||||
'wc-block-components-checkout-step--with-step-number': showStepNumber,
|
||||
} ),
|
||||
attributes,
|
||||
} );
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -17,12 +17,11 @@ import {
|
|||
store as blockEditorStore,
|
||||
} from '@wordpress/block-editor';
|
||||
import { isTextField } from '@wordpress/dom';
|
||||
import { store as blocksStore } from '@wordpress/blocks';
|
||||
import { useSelect, subscribe, select as _select } from '@wordpress/data';
|
||||
import { useEffect, useRef } from '@wordpress/element';
|
||||
import { MutableRefObject } from 'react';
|
||||
import { BACKSPACE, DELETE } from '@wordpress/keycodes';
|
||||
|
||||
import { hasFilter } from '@wordpress/hooks';
|
||||
/**
|
||||
* Toggle class on body.
|
||||
*
|
||||
|
|
@ -47,35 +46,31 @@ const toggleBodyClass = ( className: string, add = true ) => {
|
|||
* We use a component so we can react to changes in the store.
|
||||
*/
|
||||
export const addClassToBody = (): void => {
|
||||
subscribe( () => {
|
||||
const blockEditorSelect = _select( blockEditorStore );
|
||||
if ( ! hasFilter( 'blocks.registerBlockType', 'core/lock/addAttribute' ) ) {
|
||||
subscribe( () => {
|
||||
const blockEditorSelect = _select( blockEditorStore );
|
||||
|
||||
if ( ! blockEditorSelect ) {
|
||||
return;
|
||||
}
|
||||
if ( ! blockEditorSelect ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedBlock = blockEditorSelect.getSelectedBlock();
|
||||
const selectedBlock = blockEditorSelect.getSelectedBlock();
|
||||
|
||||
if ( ! selectedBlock ) {
|
||||
return;
|
||||
}
|
||||
if ( ! selectedBlock ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const blockSelect = _select( blocksStore );
|
||||
toggleBodyClass(
|
||||
'wc-lock-selected-block--remove',
|
||||
!! selectedBlock?.attributes?.lock?.remove
|
||||
);
|
||||
|
||||
const selectedBlockType = blockSelect.getBlockType(
|
||||
selectedBlock.name
|
||||
);
|
||||
|
||||
toggleBodyClass(
|
||||
'wc-lock-selected-block--remove',
|
||||
!! selectedBlockType?.supports?.lock?.remove
|
||||
);
|
||||
|
||||
toggleBodyClass(
|
||||
'wc-lock-selected-block--move',
|
||||
!! selectedBlockType?.supports?.lock?.move
|
||||
);
|
||||
} );
|
||||
toggleBodyClass(
|
||||
'wc-lock-selected-block--move',
|
||||
!! selectedBlock?.attributes?.lock?.move
|
||||
);
|
||||
} );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -87,19 +82,22 @@ export const addClassToBody = (): void => {
|
|||
const useLockBlock = ( {
|
||||
clientId,
|
||||
ref,
|
||||
type,
|
||||
attributes,
|
||||
}: {
|
||||
clientId: string;
|
||||
ref: MutableRefObject< Element >;
|
||||
type: string;
|
||||
ref: MutableRefObject< Element | undefined >;
|
||||
attributes: Record< string, unknown >;
|
||||
} ): void => {
|
||||
const { isSelected, blockType } = useSelect(
|
||||
const lockInCore = hasFilter(
|
||||
'blocks.registerBlockType',
|
||||
'core/lock/addAttribute'
|
||||
);
|
||||
const { isSelected } = useSelect(
|
||||
( select ) => {
|
||||
return {
|
||||
isSelected: select( blockEditorStore ).isBlockSelected(
|
||||
clientId
|
||||
),
|
||||
blockType: select( blocksStore ).getBlockType( type ),
|
||||
};
|
||||
},
|
||||
[ clientId ]
|
||||
|
|
@ -108,7 +106,7 @@ const useLockBlock = ( {
|
|||
const node = ref.current;
|
||||
|
||||
return useEffect( () => {
|
||||
if ( ! isSelected || ! node ) {
|
||||
if ( ! isSelected || ! node || lockInCore ) {
|
||||
return;
|
||||
}
|
||||
function onKeyDown( event: KeyboardEvent ) {
|
||||
|
|
@ -120,9 +118,8 @@ const useLockBlock = ( {
|
|||
if ( target !== node || isTextField( target ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Prevent the keyboard event from propogating if it supports locking.
|
||||
if ( blockType?.supports?.lock?.remove ) {
|
||||
if ( attributes?.lock?.remove ) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
|
@ -133,20 +130,21 @@ const useLockBlock = ( {
|
|||
return () => {
|
||||
node.removeEventListener( 'keydown', onKeyDown, true );
|
||||
};
|
||||
}, [ node, isSelected, blockType ] );
|
||||
}, [ node, isSelected, lockInCore, attributes ] );
|
||||
};
|
||||
|
||||
/**
|
||||
* This hook is a light wrapper to useBlockProps, it wraps that hook plus useLockBlock to pass data between them.
|
||||
*/
|
||||
export const useBlockPropsWithLocking = (
|
||||
props?: Record< string, unknown > = {}
|
||||
props: Record< string, unknown > = {}
|
||||
): Record< string, unknown > => {
|
||||
const ref = useRef< Element >();
|
||||
const { attributes } = props;
|
||||
const blockProps = useBlockProps( { ref, ...props } );
|
||||
useLockBlock( {
|
||||
ref,
|
||||
type: blockProps[ 'data-type' ],
|
||||
attributes,
|
||||
clientId: blockProps[ 'data-block' ],
|
||||
} );
|
||||
return blockProps;
|
||||
|
|
|
|||
|
|
@ -7,4 +7,11 @@ export default {
|
|||
type: 'boolean',
|
||||
default: true,
|
||||
},
|
||||
lock: {
|
||||
type: 'object',
|
||||
default: {
|
||||
move: true,
|
||||
remove: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const Edit = ( {
|
|||
};
|
||||
setAttributes: ( attributes: Record< string, unknown > ) => void;
|
||||
} ): JSX.Element => {
|
||||
const blockProps = useBlockPropsWithLocking();
|
||||
const blockProps = useBlockPropsWithLocking( { attributes } );
|
||||
const { cartPageId = 0, showReturnToCart = true } = attributes;
|
||||
const { current: savedCartPageId } = useRef( cartPageId );
|
||||
const currentPostId = useSelect(
|
||||
|
|
|
|||
|
|
@ -23,10 +23,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-actions-block', {
|
|||
multiple: false,
|
||||
reusable: false,
|
||||
inserter: false,
|
||||
lock: {
|
||||
remove: true,
|
||||
move: true,
|
||||
},
|
||||
},
|
||||
parent: [ 'woocommerce/checkout-fields-block' ],
|
||||
attributes,
|
||||
|
|
|
|||
|
|
@ -16,4 +16,11 @@ export default {
|
|||
'woo-gutenberg-products-block'
|
||||
),
|
||||
} ),
|
||||
lock: {
|
||||
type: 'object',
|
||||
default: {
|
||||
move: true,
|
||||
remove: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,10 +28,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-billing-address-block', {
|
|||
multiple: false,
|
||||
reusable: false,
|
||||
inserter: false,
|
||||
lock: {
|
||||
remove: true,
|
||||
move: true,
|
||||
},
|
||||
},
|
||||
parent: [ 'woocommerce/checkout-fields-block' ],
|
||||
attributes,
|
||||
|
|
|
|||
|
|
@ -19,4 +19,11 @@ export default {
|
|||
'woo-gutenberg-products-block'
|
||||
),
|
||||
} ),
|
||||
lock: {
|
||||
type: 'object',
|
||||
default: {
|
||||
remove: true,
|
||||
move: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -30,10 +30,6 @@ registerFeaturePluginBlockType(
|
|||
multiple: false,
|
||||
reusable: false,
|
||||
inserter: false,
|
||||
lock: {
|
||||
remove: true,
|
||||
move: true,
|
||||
},
|
||||
},
|
||||
parent: [ 'woocommerce/checkout-fields-block' ],
|
||||
attributes,
|
||||
|
|
|
|||
|
|
@ -10,8 +10,17 @@ import Block from './block';
|
|||
import './editor.scss';
|
||||
import { useBlockPropsWithLocking } from '../../hacks';
|
||||
|
||||
export const Edit = (): JSX.Element => {
|
||||
const blockProps = useBlockPropsWithLocking();
|
||||
export const Edit = ( {
|
||||
attributes,
|
||||
}: {
|
||||
attributes: {
|
||||
lock: {
|
||||
move: boolean;
|
||||
remove: boolean;
|
||||
};
|
||||
};
|
||||
} ): JSX.Element => {
|
||||
const blockProps = useBlockPropsWithLocking( { attributes } );
|
||||
|
||||
return (
|
||||
<div { ...blockProps }>
|
||||
|
|
|
|||
|
|
@ -27,13 +27,17 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-express-payment-block', {
|
|||
multiple: false,
|
||||
reusable: false,
|
||||
inserter: false,
|
||||
lock: {
|
||||
remove: true,
|
||||
move: true,
|
||||
},
|
||||
},
|
||||
parent: [ 'woocommerce/checkout-fields-block' ],
|
||||
attributes: {},
|
||||
attributes: {
|
||||
lock: {
|
||||
type: 'object',
|
||||
default: {
|
||||
remove: true,
|
||||
move: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
apiVersion: 2,
|
||||
edit: Edit,
|
||||
save: Save,
|
||||
|
|
|
|||
|
|
@ -11,8 +11,17 @@ import Block from './block';
|
|||
import './editor.scss';
|
||||
import { useBlockPropsWithLocking } from '../../hacks';
|
||||
|
||||
export const Edit = (): JSX.Element => {
|
||||
const blockProps = useBlockPropsWithLocking();
|
||||
export const Edit = ( {
|
||||
attributes,
|
||||
}: {
|
||||
attributes: {
|
||||
lock: {
|
||||
move: boolean;
|
||||
remove: boolean;
|
||||
};
|
||||
};
|
||||
} ): JSX.Element => {
|
||||
const blockProps = useBlockPropsWithLocking( { attributes } );
|
||||
return (
|
||||
<div { ...blockProps }>
|
||||
<Disabled>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,15 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-order-note-block', {
|
|||
reusable: false,
|
||||
},
|
||||
parent: [ 'woocommerce/checkout-fields-block' ],
|
||||
attributes: {},
|
||||
attributes: {
|
||||
lock: {
|
||||
type: 'object',
|
||||
default: {
|
||||
move: true,
|
||||
remove: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
apiVersion: 2,
|
||||
edit: Edit,
|
||||
save: Save,
|
||||
|
|
|
|||
|
|
@ -8,4 +8,11 @@ export default {
|
|||
type: 'boolean',
|
||||
default: getSetting( 'displayCartPricesIncludingTax', false ),
|
||||
},
|
||||
lock: {
|
||||
type: 'object',
|
||||
default: {
|
||||
move: true,
|
||||
remove: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,10 +18,14 @@ export const Edit = ( {
|
|||
}: {
|
||||
attributes: {
|
||||
showRateAfterTaxName: boolean;
|
||||
lock: {
|
||||
move: boolean;
|
||||
remove: boolean;
|
||||
};
|
||||
};
|
||||
setAttributes: ( attributes: Record< string, unknown > ) => void;
|
||||
} ): JSX.Element => {
|
||||
const blockProps = useBlockPropsWithLocking();
|
||||
const blockProps = useBlockPropsWithLocking( { attributes } );
|
||||
const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
|
||||
const displayItemizedTaxes = getSetting(
|
||||
'displayItemizedTaxes',
|
||||
|
|
|
|||
|
|
@ -23,10 +23,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-order-summary-block', {
|
|||
multiple: false,
|
||||
reusable: false,
|
||||
inserter: false,
|
||||
lock: {
|
||||
remove: true,
|
||||
move: true,
|
||||
},
|
||||
},
|
||||
parent: [ 'woocommerce/checkout-totals-block' ],
|
||||
attributes,
|
||||
|
|
|
|||
|
|
@ -16,4 +16,11 @@ export default {
|
|||
'woo-gutenberg-products-block'
|
||||
),
|
||||
} ),
|
||||
lock: {
|
||||
type: 'object',
|
||||
default: {
|
||||
move: true,
|
||||
remove: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,10 +28,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-payment-block', {
|
|||
multiple: false,
|
||||
reusable: false,
|
||||
inserter: false,
|
||||
lock: {
|
||||
remove: true,
|
||||
move: true,
|
||||
},
|
||||
},
|
||||
parent: [ 'woocommerce/checkout-fields-block' ],
|
||||
attributes,
|
||||
|
|
|
|||
|
|
@ -16,4 +16,11 @@ export default {
|
|||
'woo-gutenberg-products-block'
|
||||
),
|
||||
} ),
|
||||
lock: {
|
||||
type: 'object',
|
||||
default: {
|
||||
move: true,
|
||||
remove: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,10 +28,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-shipping-address-block', {
|
|||
multiple: false,
|
||||
reusable: false,
|
||||
inserter: false,
|
||||
lock: {
|
||||
remove: true,
|
||||
move: true,
|
||||
},
|
||||
},
|
||||
parent: [ 'woocommerce/checkout-fields-block' ],
|
||||
attributes,
|
||||
|
|
|
|||
|
|
@ -20,4 +20,11 @@ export default {
|
|||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
lock: {
|
||||
type: 'object',
|
||||
default: {
|
||||
move: true,
|
||||
remove: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,10 +28,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-shipping-methods-block', {
|
|||
multiple: false,
|
||||
reusable: false,
|
||||
inserter: false,
|
||||
lock: {
|
||||
remove: true,
|
||||
move: true,
|
||||
},
|
||||
},
|
||||
parent: [ 'woocommerce/checkout-fields-block' ],
|
||||
attributes,
|
||||
|
|
|
|||
|
|
@ -27,12 +27,12 @@
|
|||
|
||||
body.wc-lock-selected-block--move {
|
||||
.block-editor-block-mover__move-button-container,
|
||||
.block-editor-block-mover,
|
||||
.block-editor-block-settings-menu {
|
||||
.block-editor-block-mover {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body.wc-lock-selected-block--remove {
|
||||
.block-editor-block-settings-menu__popover {
|
||||
.components-menu-group:last-child {
|
||||
|
|
|
|||
Loading…
Reference in New Issue