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
Template Placeholder Design for the Order Received Template #9602
Merged
mikejolley
merged 10 commits into
add/9288_cart-checkout-order-received_fse_templates
from
add/placeholders
May 30, 2023
Merged
Template Placeholder Design for the Order Received Template #9602
mikejolley
merged 10 commits into
add/9288_cart-checkout-order-received_fse_templates
from
add/placeholders
May 30, 2023
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
status: needs review
block: checkout
Issues related to the checkout block.
labels
May 25, 2023
woocommercebot
requested review from
a team and
nielslange
and removed request for
a team
May 25, 2023 14:33
mikejolley
changed the base branch from
trunk
to
add/9288_cart-checkout-order-received_fse_templates
May 25, 2023 14:34
The release ZIP for this PR is accessible via:
Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
assets/js/blocks/classic-template/constants.ts
assets/js/blocks/classic-template/index.tsx assets/js/blocks/classic-template/test/utils.ts assets/js/editor-components/template-notice/index.tsx |
Size Change: +2.09 kB (0%) Total Size: 1.1 MB
ℹ️ View Unchanged
|
wavvves
approved these changes
May 30, 2023
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! @shaunandrews can we merge this?
github-actions
bot
added
status: ready to merge
and removed
status: needs review
labels
May 30, 2023
@wavvves implemented fake order data. want to review? |
wavvves
approved these changes
May 30, 2023
mikejolley
merged commit May 30, 2023
19b3ca3
into
add/9288_cart-checkout-order-received_fse_templates
tarunvijwani
added
the
type: enhancement
The issue is a request for an enhancement.
label
Jun 5, 2023
mikejolley
added a commit
that referenced
this pull request
Jun 20, 2023
* Load frontend styles in editor iframe * Update placeholder to include skeleton and updated icons * Update classic template configs * 1px border for .wp-block-woocommerce-classic-template__placeholder-copy * Show copy on focus * Sample data --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
mikejolley
added a commit
that referenced
this pull request
Jun 26, 2023
* Load frontend styles in editor iframe * Update placeholder to include skeleton and updated icons * Update classic template configs * 1px border for .wp-block-woocommerce-classic-template__placeholder-copy * Show copy on focus * Sample data --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
mikejolley
added a commit
that referenced
this pull request
Jun 28, 2023
* Load frontend styles in editor iframe * Update placeholder to include skeleton and updated icons * Update classic template configs * 1px border for .wp-block-woocommerce-classic-template__placeholder-copy * Show copy on focus * Sample data --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
wavvves
added a commit
that referenced
this pull request
Jun 29, 2023
* WIP: dirty attempt to dry run Cart & Checkout templates * Added Cart and Checkout to the template hierarchies * Merge branch 'trunk' into poc/cart_and_checkout_fse_templates * Updated cart & Checkout templates * Order Received FSE template (#8937) * Order Received template bootstrap * typo * WIP: new block * add logic here * Order received classic template * reverted constants.ts * Added the post title (buggy) * Corrected page title * Updated constants.ts * Fixed template typo * removed placeholder for order received block * add order-received template description * updated placeholder description * Formatting fixes * Template description. * replaced hardcoded string with OrderReceivedTemplate::SLUG --------- Co-authored-by: Luigi <gigitux@gmail.com> * Code formatting (#8350) * Code formatting * page_template_hierarchy priority to 1 (#9323) Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Migrate Cart and Checkout Pages to the Template Editor when using a FSE theme (#9339) * Introduce woocommerce_blocks_template_content hook * Migrate cart and checkout page content to the template editor * Add redirection from edit page to edit template --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Removed header and footer from checkout template. (#9378) * Removed header and footer from checkout template. * Removed header and footer from checkout template migration * Permalink solution for the checkout endpoint/template (#9406) * Checkout endpoint work * Move setting field to util * Include link to edit the template * Remove todo * Refactor checkout templates to share logic (#9411) * Sync endpoints with pages (#9426) * Switch to page syncing * Update settings descriptions --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Migrate pages to templates once (#9488) * Migrate content on init, once * Skip migration if page does not exist * Put back HTML for header and footer parts * Fix page redirect due to wrong ID * fix loading template part * Removed unnecessary var * update cart and checkout html templates --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Include a notice to redirect user to template editor (#9508) * Template Placeholder Design for the Order Received Template (#9602) * Load frontend styles in editor iframe * Update placeholder to include skeleton and updated icons * Update classic template configs * 1px border for .wp-block-woocommerce-classic-template__placeholder-copy * Show copy on focus * Sample data --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Add simplified header on checkout template (#9607) * Added simplified header on checkout template * Moved simplified header to template part * updated constants.ts * added template part to checkout.html * Add missing translation * frontpage_template_hierarchy no longer needed * Allow plugin based template parts (#9667) * Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates * Synced templates on blockified folder * Add blockified order-received.html * removed WooCommerce prefix * Refactor/rebrand order received template to order confirmation (#9734) * rebrand order received to order confirmation * updated descriptions for templates * updated descriptions for order confirmation placeholder * Resolve merge conflict * Resolve merge conflicts * Resolve more merge conflicts after rebase * Fix formatting * Use patterns for localisation (#9883) * e2e tests for cart and checkout templates (#9939) * Merge branch 'trunk' into poc/cart_and_checkout_fse_templates * Merge branch 'trunk' into add/9288_cart-checkout-order-received_fse_templates * Resolve merge conflicts * Add e2e for permalink settings * Test that templates exist * Add test to check that templates can be edited * Add tests to confirm templates can be edited * Ensure cart has contents before running tests on frontend views * Commend out problem test * Make sure search has multiple results * Remove useThrottle - bad rebase * Revert changes to docs after rebase * Revert function call for noReviewsPlaceholder * Bad rebase * Reverts * Remove revertTemplate * Spacing * Wait for networkidle after navigation * Always wait for network * Use button roles in site editor * More specific button locator * Update option comparison * Fix template content * Disable failing tests * Disable failing classic template tests * Use enterEditMode * More enterEditMode usage * enterEditMode * Use test.skip * More robust selectors * Alt iframe selector --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> * Skip flakey test --------- Co-authored-by: Luigi <gigitux@gmail.com> Co-authored-by: Mike Jolley <mike.jolley@me.com>
7 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Labels
block: checkout
Issues related to the checkout block.
type: enhancement
The issue is a request for an enhancement.
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.
Implements a new design for classic templates, making them more generic, to support the order received template. The design was taken from #9292 and adapted to use existing icons.
The design change show the placeholders appear in the editor, showing a large preview of what the block may render, with a box overlaid on top explaining that the template cannot be edited. Templates that can be blockified continue to show a button to convert to blocks (but this does not apply to the order received template).
In the case of the order received template, we're using a HTML skeleton instead of an SVG/image, although both are supported.
There are a few things I didn't implement from the design:
cc @shaunandrews
Because we implemented this on top of the classic template block, existing classic template boxes inherit the new design. See screenshots below.
Fixes #9292
Screenshots
Testing
Automated Tests
User Facing Testing
WooCommerce Visibility