This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Cart and Checkout block transforms for classic shortcodes #11228
Conversation
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
mikejolley
added
the
type: enhancement
mikejolley
changed the title
woocommercebot
requested review from
a team and
wavvves
and removed request for
a team
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThe
This comment was automatically generated by the TypeScript Errors Report
assets/js/blocks/cart/edit.js
assets/js/blocks/cart/index.js assets/js/blocks/checkout/index.tsx assets/js/blocks/classic-shortcode/index.tsx assets/js/editor-components/incompatible-extension-notice/index.tsx |
|
Size Change: +60.7 kB (+4%) Total Size: 1.54 MB
ℹ️ View Unchanged
|
mikejolley
force-pushed
the
add/checkout-block-to-shortcode-transform
branch
from
926f974 to
0314cea
Compare
mikejolley
changed the title
…item should display
senadir
reviewed
Oct 18, 2023
senadir
reviewed
Oct 18, 2023
senadir
reviewed
Oct 18, 2023
assets/js/editor-components/incompatible-extension-notice/index.tsx
Outdated
Show resolved
Hide resolved
senadir
reviewed
Oct 18, 2023
assets/js/editor-components/incompatible-extension-notice/index.tsx
Outdated
Show resolved
Hide resolved
|
I've tested the experience with a keyboard.
|
Seems to only affect TT1 non blocks. Fixed by adding a wrapper class: a43da7d
I added a tabbable container; you can use arrow keys to navigate to the button area and tab to switch between the buttons. Not sure if this is the optimal solution but how tabbing between items in the editor works is not clear. Ref: https://developer.wordpress.org/block-editor/reference-guides/components/navigable-container/
Fixed in 6d8673e
Untested at present but I added 3 events in 659926a:
Other changes: |
Yes! Do we have some logic in place to take the user to one or the other if either cart or checkout is not present? I want to make sure we're accommodating use cases where the user only has block checkout, but not cart (and the other way around). And kudos for adding keyboard navigation! Everything looks good to me. |
@jarekmorawski Right now its is setup to default to cart if the cart page contains either a cart block, or the classic cart placeholder. If it does not, it will fallback to checkout. |
11 tasks
|
Thanks, @mikejolley. I'm testing the flow and though I'm seeing the warning message in the inspector, there's no task on the Home screen. What did I miss? There's one small copy change to make in the inspector notice. I'll ping you in Figma. |
|
@jarekmorawski The task is coded to only show up if you've got a cart/checkout page setup and that page contains the blocks. So under pages, it should look like this: And then those pages need to contain the blockified cart/checkout. |
|
Wow! Thank you, I've learned something new today. I couldn't see the task because I went straight to the editor and added the blocks directly to the cart and checkout templates. Is there a reason why the default pages don't use them? |
|
@jarekmorawski The defaults will change in the next release, its being worked on separately! |
@mikejolley thanks! I'm assuming that each event will have a prop to identify the block (cart or checkout), right? |
senadir
approved these changes
Oct 19, 2023
ralucaStan
approved these changes
Oct 19, 2023
|
@pmcpinto yes each event will have a prop named shortcode be cart or checkout |
Thanks for the confirmation |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
This PR improves the incompatibility flow for cart and checkout blocks when non compatible extensions are detected.
Task List
Adds a task list item to review the cart/checkout blocks. This notice is only visible if using blocks on the cart/checkout pages, and will redirect to either the checkout page, or cart page, on click.
Incompatibility notices
The notice wording is updated, and a convenient switch button is introduced to revert to classic shortcodes:
Clicking the switch button opens a confirmation model to make sure the merchant understands the ramifications of reverting to shortcodes:
Confirming will replace the blocks with the classic shortcode. There is a snackbar shown giving the option to undo the action:
Block Transforms
This PR also includes transforms to convert from block->shortcode even if the notice is hidden:
Fixes #10848
Why
This allows easier switching back to shortcodes if the block based checkout is not working or suitable for a store, and encourages merchants to check their pages are correctly configured.
Follow ups
cc @ralucaStan Creating some follow ups so we can at least ship something in time in case these turn out to be complex tasks.
Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Prerequisite: Ensure you're already using cart and checkout blocks and you have an incompatible extension installed. You can use
WooCommerce Checkout Field Editoras an example.Screenshots or screencast
Screen.Recording.2023-10-17.at.16.24.13.mov
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog