Improve editor placeholder for the Order received template

[wavvves]

Part of Epic: Cart/Checkout/Order Received Templates #9288

p1682578579143099-slack-C04NWH6NDHA

Currently, as part of the POC for the Order Received, we render a generic placeholder for the Order Received block which will not be editable at this point, as blockifying it will be the result of the next phase of work with templates.

Current placeholder:

(Note: the placeholder title is wrongly declared as "Classic Product template", this will be updated soon)

This issue serves to evaluate the need to have some parity between what we see in the editor and frontend vs using a more basic representation taking into account that this will be upgraded into a full editable component.

[mikejolley]

Since this task is blocked by design it should probably not be in the current sprint, unless we are coming up with a temporary placeholder due to the intention to blockify the page in the near future cc @ralucaStan

[ralucaStan]

@shaunandrews how soon can we discuss on a proposal for the placeholder?

@mikejolley @wavvves what can we display now? Can we share this to kickstart the discussion?

[mikejolley]

@ralucaStan I think there are some existing blocks we could base a solution of. For example the legacy products placeholder:

[ralucaStan]

Thank you @mikejolley !

@shaunandrews can't we proceed with this pattern, used on other templates, instead of creating a default placeholder just for the Order received template? This has multiple benefits:

• it aligns with the other templates used and creates consistency
• it's not work we'll need to redo once we blockify the content for this template later in the year
• we can use the time invested in researching the implementation in making progress on impactful areas if this project

If the current placeholder (shared above) is something that you think should be improved @shaunandrews we can do this for all templates outside of this project.

cc @pmcpinto

[kellychoffman]

[description to be submitted]

What exactly is the issue/scope/task? Ideally, its laid out in the first comment so design is clear on what to do.

[shaunandrews]

We could use a generic UI skeleton, or forgo that visual representation in favor of a much smaller footprint using only text:

---

However, my instinct is that this placeholder should look like an Order Received template, and not some UI abstraction. Maybe the resting state of the block shows (generally) how the default WooCommerce thankyou.php template most commonly appears. Extra points if we can bring in typography and color from Global Styles. Selecting the block would blur this example and display a message explaining the block and its limitations.

[wavvves]

@mikejolley do you think it's possible to mock an order object, load up thankyou.php HTML with global styles applied, and implement this idea by @shaunandrews ? 🤔