woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/block-settings/index.tsx

39 lines
993 B
TypeScript
Raw Normal View History

Add dismissible compatibility notice to sidebar when editing Cart and Checkout (https://github.com/woocommerce/woocommerce-blocks/pull/6869) * Add default page notice * show notice all inner blocks * support flow when page isnt saved * switch from where we get the current post id * update lock * fix types * Remove old compatibility notices from Cart and Checkout * Move useCompatibilityNotice to sidebar-compatibility-notice directory * Remove old CartCheckoutCompatibilityNotice * Create sidebar compatibility notice hoc * Add isCartOrCheckoutOrInnerBlock function * Refactor defaultNotice to use new isCartOrCheckoutOrInnerBlock func * Remove BlockSettings from checkout edit and export from checkout-shared * Change so component still renders, it is just hidden with display: none This is required because when it returns null the component gets skipped from being added to the Slot, then when it does return a component, then it gets rendered at the bottom of the Slot. By ensuring it always renders we can have it at the top all the time. * Set the priorities of the hoc filters so compat notice renders first * Make isCartOrCheckoutInnerBlock a hook * Remove old compatibility notice related tests * Remove BlockSettings from Cart * Remove withDefaultNotice hoc * Include DefaultNotice in compatibility notice * Remove DefaultNotice from Checkout * Rename withSidebarCompatibilityNotice to withSidebarNotices This is because it includes the sidebar compatibility notice and the default notices * Remove useIsCartOrCheckoutOrInnerBlock hook * Remove compatibility notice code from tests * Revert DefaultNotice back to the old one * Remove unused components * Remove withBlockSettings HOC and fix TS types This is an abstraction that is no longer required, we can just include BlockSettings in the Cart and Checkout blocks * Remove CartCheckoutFeedbackPrompt from BlockSettings It will be included in sidebar-notices instead * Fix TS Types in DefaultNotice * Add BlockSettings to cart and checkout edit * Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881) * Show "Feedback prompt" for all inner blocks * Fix the "feedback" notice position for these blocks The "checkout fields", "checkout billing address" and "checkout shipping address" have the addressFields option which gets rerendered and placed at the bottom of the inspector controls. * Tidy up the address-fields hoc * Use correct block name to check for billing or shipping address * Revert "Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881)" This reverts commit 5f3d6cf15ce08d9c303e62ec3e0d0315ead1281f. * Add hack to get feedback prompt to render last * Fix TS errors for context and attributes * Include CartCheckoutFeedbackPrompt in accountcontrols & addresscontrols * Do not include feedback prompt if on an address block or contact info * Remove unused hoc for address fields Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
2022-08-12 14:23:08 +00:00
/**
* External dependencies
*/
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import type { BlockAttributes } from '@wordpress/blocks';
Add dismissible compatibility notice to sidebar when editing Cart and Checkout (https://github.com/woocommerce/woocommerce-blocks/pull/6869) * Add default page notice * show notice all inner blocks * support flow when page isnt saved * switch from where we get the current post id * update lock * fix types * Remove old compatibility notices from Cart and Checkout * Move useCompatibilityNotice to sidebar-compatibility-notice directory * Remove old CartCheckoutCompatibilityNotice * Create sidebar compatibility notice hoc * Add isCartOrCheckoutOrInnerBlock function * Refactor defaultNotice to use new isCartOrCheckoutOrInnerBlock func * Remove BlockSettings from checkout edit and export from checkout-shared * Change so component still renders, it is just hidden with display: none This is required because when it returns null the component gets skipped from being added to the Slot, then when it does return a component, then it gets rendered at the bottom of the Slot. By ensuring it always renders we can have it at the top all the time. * Set the priorities of the hoc filters so compat notice renders first * Make isCartOrCheckoutInnerBlock a hook * Remove old compatibility notice related tests * Remove BlockSettings from Cart * Remove withDefaultNotice hoc * Include DefaultNotice in compatibility notice * Remove DefaultNotice from Checkout * Rename withSidebarCompatibilityNotice to withSidebarNotices This is because it includes the sidebar compatibility notice and the default notices * Remove useIsCartOrCheckoutOrInnerBlock hook * Remove compatibility notice code from tests * Revert DefaultNotice back to the old one * Remove unused components * Remove withBlockSettings HOC and fix TS types This is an abstraction that is no longer required, we can just include BlockSettings in the Cart and Checkout blocks * Remove CartCheckoutFeedbackPrompt from BlockSettings It will be included in sidebar-notices instead * Fix TS Types in DefaultNotice * Add BlockSettings to cart and checkout edit * Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881) * Show "Feedback prompt" for all inner blocks * Fix the "feedback" notice position for these blocks The "checkout fields", "checkout billing address" and "checkout shipping address" have the addressFields option which gets rerendered and placed at the bottom of the inspector controls. * Tidy up the address-fields hoc * Use correct block name to check for billing or shipping address * Revert "Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881)" This reverts commit 5f3d6cf15ce08d9c303e62ec3e0d0315ead1281f. * Add hack to get feedback prompt to render last * Fix TS errors for context and attributes * Include CartCheckoutFeedbackPrompt in accountcontrols & addresscontrols * Do not include feedback prompt if on an address block or contact info * Remove unused hoc for address fields Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
2022-08-12 14:23:08 +00:00
export const BlockSettings = ( {
attributes,
setAttributes,
}: {
attributes: BlockAttributes;
setAttributes: ( attrs: BlockAttributes ) => void;
} ) => {
const { hasDarkControls } = attributes;
return (
<InspectorControls>
<PanelBody title={ __( 'Style', 'woocommerce' ) }>
Add dismissible compatibility notice to sidebar when editing Cart and Checkout (https://github.com/woocommerce/woocommerce-blocks/pull/6869) * Add default page notice * show notice all inner blocks * support flow when page isnt saved * switch from where we get the current post id * update lock * fix types * Remove old compatibility notices from Cart and Checkout * Move useCompatibilityNotice to sidebar-compatibility-notice directory * Remove old CartCheckoutCompatibilityNotice * Create sidebar compatibility notice hoc * Add isCartOrCheckoutOrInnerBlock function * Refactor defaultNotice to use new isCartOrCheckoutOrInnerBlock func * Remove BlockSettings from checkout edit and export from checkout-shared * Change so component still renders, it is just hidden with display: none This is required because when it returns null the component gets skipped from being added to the Slot, then when it does return a component, then it gets rendered at the bottom of the Slot. By ensuring it always renders we can have it at the top all the time. * Set the priorities of the hoc filters so compat notice renders first * Make isCartOrCheckoutInnerBlock a hook * Remove old compatibility notice related tests * Remove BlockSettings from Cart * Remove withDefaultNotice hoc * Include DefaultNotice in compatibility notice * Remove DefaultNotice from Checkout * Rename withSidebarCompatibilityNotice to withSidebarNotices This is because it includes the sidebar compatibility notice and the default notices * Remove useIsCartOrCheckoutOrInnerBlock hook * Remove compatibility notice code from tests * Revert DefaultNotice back to the old one * Remove unused components * Remove withBlockSettings HOC and fix TS types This is an abstraction that is no longer required, we can just include BlockSettings in the Cart and Checkout blocks * Remove CartCheckoutFeedbackPrompt from BlockSettings It will be included in sidebar-notices instead * Fix TS Types in DefaultNotice * Add BlockSettings to cart and checkout edit * Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881) * Show "Feedback prompt" for all inner blocks * Fix the "feedback" notice position for these blocks The "checkout fields", "checkout billing address" and "checkout shipping address" have the addressFields option which gets rerendered and placed at the bottom of the inspector controls. * Tidy up the address-fields hoc * Use correct block name to check for billing or shipping address * Revert "Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881)" This reverts commit 5f3d6cf15ce08d9c303e62ec3e0d0315ead1281f. * Add hack to get feedback prompt to render last * Fix TS errors for context and attributes * Include CartCheckoutFeedbackPrompt in accountcontrols & addresscontrols * Do not include feedback prompt if on an address block or contact info * Remove unused hoc for address fields Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
2022-08-12 14:23:08 +00:00
<ToggleControl
2023-12-12 23:05:20 +00:00
label={ __( 'Dark mode inputs', 'woocommerce' ) }
Add dismissible compatibility notice to sidebar when editing Cart and Checkout (https://github.com/woocommerce/woocommerce-blocks/pull/6869) * Add default page notice * show notice all inner blocks * support flow when page isnt saved * switch from where we get the current post id * update lock * fix types * Remove old compatibility notices from Cart and Checkout * Move useCompatibilityNotice to sidebar-compatibility-notice directory * Remove old CartCheckoutCompatibilityNotice * Create sidebar compatibility notice hoc * Add isCartOrCheckoutOrInnerBlock function * Refactor defaultNotice to use new isCartOrCheckoutOrInnerBlock func * Remove BlockSettings from checkout edit and export from checkout-shared * Change so component still renders, it is just hidden with display: none This is required because when it returns null the component gets skipped from being added to the Slot, then when it does return a component, then it gets rendered at the bottom of the Slot. By ensuring it always renders we can have it at the top all the time. * Set the priorities of the hoc filters so compat notice renders first * Make isCartOrCheckoutInnerBlock a hook * Remove old compatibility notice related tests * Remove BlockSettings from Cart * Remove withDefaultNotice hoc * Include DefaultNotice in compatibility notice * Remove DefaultNotice from Checkout * Rename withSidebarCompatibilityNotice to withSidebarNotices This is because it includes the sidebar compatibility notice and the default notices * Remove useIsCartOrCheckoutOrInnerBlock hook * Remove compatibility notice code from tests * Revert DefaultNotice back to the old one * Remove unused components * Remove withBlockSettings HOC and fix TS types This is an abstraction that is no longer required, we can just include BlockSettings in the Cart and Checkout blocks * Remove CartCheckoutFeedbackPrompt from BlockSettings It will be included in sidebar-notices instead * Fix TS Types in DefaultNotice * Add BlockSettings to cart and checkout edit * Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881) * Show "Feedback prompt" for all inner blocks * Fix the "feedback" notice position for these blocks The "checkout fields", "checkout billing address" and "checkout shipping address" have the addressFields option which gets rerendered and placed at the bottom of the inspector controls. * Tidy up the address-fields hoc * Use correct block name to check for billing or shipping address * Revert "Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881)" This reverts commit 5f3d6cf15ce08d9c303e62ec3e0d0315ead1281f. * Add hack to get feedback prompt to render last * Fix TS errors for context and attributes * Include CartCheckoutFeedbackPrompt in accountcontrols & addresscontrols * Do not include feedback prompt if on an address block or contact info * Remove unused hoc for address fields Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
2022-08-12 14:23:08 +00:00
help={ __(
'Inputs styled specifically for use on dark background colors.',
'woocommerce'
Add dismissible compatibility notice to sidebar when editing Cart and Checkout (https://github.com/woocommerce/woocommerce-blocks/pull/6869) * Add default page notice * show notice all inner blocks * support flow when page isnt saved * switch from where we get the current post id * update lock * fix types * Remove old compatibility notices from Cart and Checkout * Move useCompatibilityNotice to sidebar-compatibility-notice directory * Remove old CartCheckoutCompatibilityNotice * Create sidebar compatibility notice hoc * Add isCartOrCheckoutOrInnerBlock function * Refactor defaultNotice to use new isCartOrCheckoutOrInnerBlock func * Remove BlockSettings from checkout edit and export from checkout-shared * Change so component still renders, it is just hidden with display: none This is required because when it returns null the component gets skipped from being added to the Slot, then when it does return a component, then it gets rendered at the bottom of the Slot. By ensuring it always renders we can have it at the top all the time. * Set the priorities of the hoc filters so compat notice renders first * Make isCartOrCheckoutInnerBlock a hook * Remove old compatibility notice related tests * Remove BlockSettings from Cart * Remove withDefaultNotice hoc * Include DefaultNotice in compatibility notice * Remove DefaultNotice from Checkout * Rename withSidebarCompatibilityNotice to withSidebarNotices This is because it includes the sidebar compatibility notice and the default notices * Remove useIsCartOrCheckoutOrInnerBlock hook * Remove compatibility notice code from tests * Revert DefaultNotice back to the old one * Remove unused components * Remove withBlockSettings HOC and fix TS types This is an abstraction that is no longer required, we can just include BlockSettings in the Cart and Checkout blocks * Remove CartCheckoutFeedbackPrompt from BlockSettings It will be included in sidebar-notices instead * Fix TS Types in DefaultNotice * Add BlockSettings to cart and checkout edit * Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881) * Show "Feedback prompt" for all inner blocks * Fix the "feedback" notice position for these blocks The "checkout fields", "checkout billing address" and "checkout shipping address" have the addressFields option which gets rerendered and placed at the bottom of the inspector controls. * Tidy up the address-fields hoc * Use correct block name to check for billing or shipping address * Revert "Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881)" This reverts commit 5f3d6cf15ce08d9c303e62ec3e0d0315ead1281f. * Add hack to get feedback prompt to render last * Fix TS errors for context and attributes * Include CartCheckoutFeedbackPrompt in accountcontrols & addresscontrols * Do not include feedback prompt if on an address block or contact info * Remove unused hoc for address fields Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
2022-08-12 14:23:08 +00:00
) }
checked={ hasDarkControls }
onChange={ () =>
setAttributes( {
hasDarkControls: ! hasDarkControls,
} )
}
/>
</PanelBody>
</InspectorControls>
);
};
[Feature] Express Checkout Improvements (#50791) * Add new buttonAttributes API to style express checkout buttons coherently (#47899) * Expose buttonAttributes to the express payment methods * Add size and label attributes to the express checkout area * Remove defaultHeight * default button Label * Remove the button label attribute * Remove px from height * Change large button height to 55px * Load express checkout block with attributes * Add toggle and borderRadius controls and remove getting border radius from the theme * Remove extra border radius text * Only pass buttonAttributes if toggled on * Move express payment block attribute logic into a Provider * Tidy up editor grid and parse attributes into context on frontend * Add px to border-radius input * Express payment methods not selectable * Add a test * lint fixes * default button height is 48 not 4 * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Update docs * Add tests for express payment methods * Center images within the express payment area in the editor * Apply the buttonAttributes to the li container in the editor regardless of showButtonStyles * Fix style issue * fix linting * fix lint again * Update manifest * Update docs manifest * Resize images in editor * lint fix --------- Co-authored-by: github-actions <github-actions@github.com> * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Synchronise the express payment settings between the Cart & Checkout blocks (#50688) * Add express payment methods to sidebar * Only add extra props for express payment methods * Update docs * Make title, description and gatewayId types optional * Update docs * Fix types again and editor side * Add changefile(s) from automation for the following project(s): woocommerce-blocks * handle situation when no methods are active * Update manifest * Add express payment methods to inspector controls for express checkout block (#50983) * Remove forced styles on the editor * Remove the darkMode setting from the buttonAttributes API (#51109) * Remove darkMode from the buttonAttributes API * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Accept supports declarations for express payment style controls + merchant ux improvements in the editor (#51296) * Fix images in editor displaying weird * Fix long express payment names breaking layout * Default to uniform styles off * Use heightControl for border radius and fix height for cart buttons * Move formatting title and description to the config validation * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Fix linting * Fix failing test * Add back the 48px height for images in editor * Fix linting again * Update docs * Update docs manifest * Update docs to fix linting * Add comment to test to better explain why we are expecting a console warning * make strings translatable * Sync cart & checkout directly without option * Remove current styles * Change the beta label * Replace < and > with symbol references in docs * Update docs manifest * Increase padding of beta label * fix linter issues * change to using looger helper * fix CSS --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2024-09-18 19:49:27 +00:00
export { ExpressPaymentControls } from './express-payment-settings';