Add a basic product category block

[ryelle]

This PR creates a basic, early iteration of the "Products by Category" block. This adds a basic preview UI, the inspector controls, and the alignment controls. This does not add the "edit state"/initial view. This also uses the core TreeSelect for picking a category, not the custom search/checkboxes. Both of those will be done in future PRs.

Fixes #116, also adds support for menu_order ordering, so fixes #125. This is build upon #135.

Screenshots

The whole block with all settings sections:

An example of full-width in Gutenberg

These use the shortcode to display on the frontend, and in Twenty Nineteen look like this:

I've also added basic support for "loading" and "empty" states:

Code notes

I've introduced some utilities that I think will be shared across blocks. shared-attributes has definitions for rows, columns, etc; and I'll use these plus block-specific settings like this. I've also introduced getQuery and getShortcode, which are used to generate the API query and shortcode string respectively.

How to test the changes in this Pull Request:

1. Build this branch
2. Expect: you now have another Product block, "Products by Category"
3. Add "Products by Category" – initially an empty state
4. Choose a category (or multiple)
5. Your products should display in the preview
6. Edit the Layout (rows/columns), this should update the preview
7. Edit the ordering, this should update the preview
8. Save the block
9. View on the front end of your site, preview and frontend should match (unless you have draft products, see Draft products are shown in the block preview #124 )
10. Run the tests, npm test, for the added component & getQuery tests (a shortcode test suite will be added later).

There are probably edge cases I'm not testing with, so feel free to use strange combinations of settings 😆

[LevinMedia]

Great start, testing well for me!

[tiagonoronha]

Nice work, looking good! 👍