Hydrate initial product for add/edit product pages

[joshuatf]

The product editor will need to be hydrated with a product prior to initializing the editor. The editor requires a product and the entity configuration to be loaded prior to being able to load edits (dirty state) into its state.

While core hydrates this server-side, we are a bit more restricted since we are using React router and may not initally load the add product page, meaning we need to dynamically create the product when visiting this path.

This might look something like this for the add product page, while the edit product page should fetch the product by the provided product ID.

Depends on #36991 being finished.

const { saveEntityRecord } = useDispatch( 'core' );
const [ product, setProduct ] = useState< Product | undefined >(
    undefined
);
 
useEffect( () => {
    saveEntityRecord( 'postType', 'product', {
        title: AUTO_DRAFT_NAME,
    } ).then( ( autoDraftProduct: Product ) => {
        setProduct( autoDraftProduct );
    } );
}, [] );
 
if ( ! product ) {
    return <Spinner />;
}
 
return <Editor product={ product } settings={ {} } />;

Acceptance criteria

• The add product page makes a network request to create a new auto-draft product
• The add product page renders the editor
• The edit product page fetches the product by product ID
• The edit product page renders the editor
• Create a follow up issue on how to clean up auto draft products that aren't saved.

[joshuatf]

Estimate: 2

I noticed some oddities around saving the product as an "auto-draft" status, but this may be related to the v2 endpoint which should be resolved when this issue is ready to tackle.

[louwie17]

Note that this will depend on #36991 being finished.

One follow up question and something to think about while working on this, is how do we clean up auto-draft products if the user never decides to save a product. @joshuatf does core have a solution for this?
This can be a follow up issue, please create one as you work on this.

[joelclimbsthings]

Is the intention to have this create entities with the post status of auto-draft, such as the drafts managed automatically when composing standard page posts? With the above code they're just set to draft status, and I'm uncertain of the logic around the auto-draft status (need to look into this).

@joshuatf @louwie17 If you have any thoughts on the above ^.

[louwie17]

@joelclimbsthings I would have a look at what Core is doing with posts and pages and follow their approach ( I am not to familiar with that, so can't say without diving in).
We can double check with @joshuatf when he is back from AFK.

[louwie17]

Actually looping back on this as I am looking at the code @joshuatf linked above, I think we want to use auto-draft if that is supported by products. It does seem like this is explicitly done for the posts as well, as you can see in the get_default_post_to_edit function: https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-admin/includes/post.php#L713-L731 called in the post-new.php page here: https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-admin/post-new.php#L66

It also looks like it schedules an auto draft clean up event if one is not scheduled, it be interesting to know if this is also done with our current product API, or if this is auto triggered when creating a new Product. It looks like the auto delete specifically looks for post statuses of auto-draft and deletes it after 7 days. So we probably want to use auto-draft as well if we want to make use of this logic.