This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 219
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add dismissible compatibility notice to sidebar when editing Cart and…
… Checkout (#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 (#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 (#6881)" This reverts commit 5f3d6cf. * 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 <[email protected]> Co-authored-by: Saad Tarhi <[email protected]>
- Loading branch information
3 people
authored
Aug 12, 2022
1 parent
27fc1e0
commit c5bdcff
Showing
27 changed files
with
2,380 additions
and
934 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
assets/js/blocks/cart-checkout-shared/block-settings/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { InspectorControls } from '@wordpress/block-editor'; | ||
| import { PanelBody, ToggleControl } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { BlockAttributes } from '@wordpress/blocks'; | ||
|
|
||
| export const BlockSettings = ( { | ||
| attributes, | ||
| setAttributes, | ||
| }: { | ||
| attributes: BlockAttributes; | ||
| setAttributes: ( attrs: BlockAttributes ) => void; | ||
| } ) => { | ||
| const { hasDarkControls } = attributes; | ||
| return ( | ||
| <InspectorControls> | ||
| <PanelBody title={ __( 'Style', 'woo-gutenberg-products-block' ) }> | ||
| <ToggleControl | ||
| label={ __( | ||
| 'Dark mode inputs', | ||
| 'woo-gutenberg-products-block' | ||
| ) } | ||
| help={ __( | ||
| 'Inputs styled specifically for use on dark background colors.', | ||
| 'woo-gutenberg-products-block' | ||
| ) } | ||
| checked={ hasDarkControls } | ||
| onChange={ () => | ||
| setAttributes( { | ||
| hasDarkControls: ! hasDarkControls, | ||
| } ) | ||
| } | ||
| /> | ||
| </PanelBody> | ||
| </InspectorControls> | ||
| ); | ||
| }; |
11 changes: 11 additions & 0 deletions
11
assets/js/blocks/cart-checkout-shared/default-notice/editor.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .wc-block-cart__page-notice { | ||
| margin: 0; | ||
| padding-right: 16px; | ||
| .components-notice__dismiss { | ||
| min-width: 24px; | ||
| } | ||
| svg { | ||
| width: 16px; | ||
| height: 16px; | ||
| } | ||
| } |
58 changes: 58 additions & 0 deletions
58
assets/js/blocks/cart-checkout-shared/default-notice/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
| import { Notice } from '@wordpress/components'; | ||
| import { createInterpolateElement } from '@wordpress/element'; | ||
| import { getAdminLink } from '@woocommerce/settings'; | ||
| import { CART_PAGE_ID, CHECKOUT_PAGE_ID } from '@woocommerce/block-settings'; | ||
| import { useSelect } from '@wordpress/data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import './editor.scss'; | ||
|
|
||
| /** | ||
| * Shows a notice about setting the default Cart and Checkout pages.. | ||
| * | ||
| */ | ||
| export function DefaultNotice( props: { | ||
| block: 'cart' | 'checkout'; | ||
| } ): JSX.Element | null { | ||
| const idToCheck = props.block === 'cart' ? CART_PAGE_ID : CHECKOUT_PAGE_ID; | ||
| const currentPostId = useSelect( ( select ) => { | ||
| return select( 'core/editor' ).getCurrentPostId(); | ||
| } ); | ||
|
|
||
| return currentPostId !== idToCheck ? ( | ||
| <Notice | ||
| className="wc-block-cart__page-notice" | ||
| isDismissible={ false } | ||
| status="warning" | ||
| > | ||
| { createInterpolateElement( | ||
| sprintf( | ||
| /* translators: %s is the block name. It will be cart or checkout. */ | ||
| __( | ||
| 'If you would like to use this block as your default %s you must update your <a>page settings in WooCommerce</a>.', | ||
| 'woo-gutenberg-products-block' | ||
| ), | ||
| props.block | ||
| ), | ||
| { | ||
| a: ( | ||
| // eslint-disable-next-line jsx-a11y/anchor-has-content | ||
| <a | ||
| href={ getAdminLink( | ||
| 'admin.php?page=wc-settings&tab=advanced' | ||
| ) } | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| /> | ||
| ), | ||
| } | ||
| ) } | ||
| </Notice> | ||
| ) : null; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
assets/js/blocks/cart-checkout-shared/sidebar-notices/editor.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .wc-default-page-notice.is-dismissible { | ||
| margin: 0; | ||
| padding-right: 16px; | ||
| .components-notice__dismiss { | ||
| min-width: 24px; | ||
| } | ||
| svg { | ||
| width: 16px; | ||
| height: 16px; | ||
| } | ||
| } |
100 changes: 100 additions & 0 deletions
100
assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { createHigherOrderComponent } from '@wordpress/compose'; | ||
| import { | ||
| InspectorControls, | ||
| store as blockEditorStore, | ||
| } from '@wordpress/block-editor'; | ||
| import { addFilter, hasFilter } from '@wordpress/hooks'; | ||
| import type { StoreDescriptor } from '@wordpress/data'; | ||
| import { CartCheckoutSidebarCompatibilityNotice } from '@woocommerce/editor-components/sidebar-compatibility-notice'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import './editor.scss'; | ||
| import { DefaultNotice } from '../default-notice'; | ||
|
|
||
| declare module '@wordpress/editor' { | ||
| let store: StoreDescriptor; | ||
| } | ||
|
|
||
| declare module '@wordpress/core-data' { | ||
| let store: StoreDescriptor; | ||
| } | ||
|
|
||
| declare module '@wordpress/block-editor' { | ||
| let store: StoreDescriptor; | ||
| } | ||
|
|
||
| const withSidebarNotices = createHigherOrderComponent( | ||
| ( BlockEdit ) => ( props ) => { | ||
| const addressFieldOrAccountBlocks = [ | ||
| 'woocommerce/checkout-shipping-address-block', | ||
| 'woocommerce/checkout-billing-address-block', | ||
| 'woocommerce/checkout-contact-information-block', | ||
| 'woocommerce/checkout-fields-block', | ||
| ]; | ||
| const { clientId } = props; | ||
| const { isCart, isCheckout, isAddressFieldBlock } = useSelect( | ||
| ( select ) => { | ||
| const { getBlockParentsByBlockName, getBlockName } = | ||
| select( blockEditorStore ); | ||
| const parent = getBlockParentsByBlockName( clientId, [ | ||
| 'woocommerce/cart', | ||
| 'woocommerce/checkout', | ||
| ] ).map( getBlockName ); | ||
| const currentBlockName = getBlockName( clientId ); | ||
| return { | ||
| isCart: | ||
| parent.includes( 'woocommerce/cart' ) || | ||
| currentBlockName === 'woocommerce/cart', | ||
| isCheckout: | ||
| parent.includes( 'woocommerce/checkout' ) || | ||
| currentBlockName === 'woocommerce/checkout', | ||
| isAddressFieldBlock: | ||
| addressFieldOrAccountBlocks.includes( | ||
| currentBlockName | ||
| ), | ||
| }; | ||
| } | ||
| ); | ||
| return ( | ||
| <> | ||
| { ( isCart || isCheckout ) && ( | ||
| <InspectorControls> | ||
| <CartCheckoutSidebarCompatibilityNotice | ||
| block={ isCheckout ? 'checkout' : 'cart' } | ||
| /> | ||
| <DefaultNotice | ||
| block={ isCheckout ? 'checkout' : 'cart' } | ||
| /> | ||
| { isAddressFieldBlock ? null : ( | ||
| <CartCheckoutFeedbackPrompt /> | ||
| ) } | ||
| </InspectorControls> | ||
| ) } | ||
|
|
||
| <BlockEdit { ...props } /> | ||
| </> | ||
| ); | ||
| }, | ||
| 'withSidebarNotices' | ||
| ); | ||
|
|
||
| if ( | ||
| ! hasFilter( | ||
| 'editor.BlockEdit', | ||
| 'woocommerce/add/sidebar-compatibility-notice' | ||
| ) | ||
| ) { | ||
| addFilter( | ||
| 'editor.BlockEdit', | ||
| 'woocommerce/add/sidebar-compatibility-notice', | ||
| withSidebarNotices, | ||
| 11 | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.