Cancel button for product category block

[mikejolley]

I wanted to have a quick go at #172 to see how far I could get. This is mainly for my own learning but hopefully I can get it good enough to merge :)

I will add inline comments for things I'm unsure of.

Screenshots

How to test the changes in this Pull Request:

1. Edit a category block
2. Make some changes
3. Click cancel. Changes won't persist.
4. Edit again. Changes didn't persist.
5. Make more changes. Click done. Changes did persist.

[Aljullu]

This is looking really great @mikejolley! I answered some of your inline questions and added one comment that was blocking me to edit the block right after adding it.

[Aljullu]

I think you will need to set changedAttributes to an empty object {} too, otherwise changes are not applied because this check always returns false.

Suggested change

	this.setState( { products: [], loaded: true, isEditing: true } );
	this.setState( { products: [], loaded: true, isEditing: true, changedAttributes: {} } );

[ryelle]

I've made a few comments, but this is a good start 👍

I did notice that the Product Category panel in the sidebar isn't working anymore – IMO that should stay working as it does currently (updating the preview as the categories are selected, no cancel button).

[mikejolley]

Thanks for the feedback. 🤦‍♂ I didn't even notice that sidebar panel.

[ryelle]

I'm still triggering a state where the items can't be selected. If I clear all categories (next to 'X categories selected'), then click done, it resets into the editing state but the categories are un-selectable unless I click done/cancel and back into edit. (screen recording)

It's also a little odd to me that I can trigger the "editing" state by clearing categories from the sidebar, can select new categories there, but then need to click done in the main section to see the preview (screen recording)

I also think a designer should look through this, so I'm ccing @josemarques @jwold

[mikejolley]

Thanks, I think I've tackled that now;

• Updating sidebar saves right away and overwrites and changes in edit mode
• Fixed the initial state so attributes can be changed

I do have to fix merge conflicts now however since the server side changes also changed the behaviour.

[mikejolley]

The nothing found view was missing also. Putting it back (8f7e8c0) - that shows some text when no cats are selected, instead of showing all products. This matches how it worked previously before server side rendering was introduced.

[ryelle]

Looks good from a dev perspective, could still use a designer ✅ though so I'm not marking Ready to Merge yet.

[jwold]

Just following up that I plan to take a look at this shortly. Thanks!

[jwold]

Just reviewed the screenshots and looked at the original issue this is based off of. The main thing I was looking at was how the cancel button works, and adding that functionality looks good.

cc @mikejolley