Recipes Block: Primary issue

[jeherve]

This issue lists the remaining items to address before the recipe block introduced in #24343 can be launched.

• [ ] Transform the recipe shortcode into the recipe block.
• [ ] Ensure strings in templates can be translated.
• [ ] Handle focus better when entering ingredients or directions #24904

  When adding ingredients, ideally when hitting enter after adding my first ingredient, I'd like a second ingredient to be automatically created, and the focus be moved there so I can keep adding ingredients, one at a time, without having to rely on my mouse, just like I would if I were using a list block.

• [ ] Add formatting options (italic, bold, ...) to the ingredient list if possible.
• [ ] Add icons for block and inner blocks. #24904
• [ ] Add keywords for better block discoverability. #24904
• [ ] Add tests for the block. See other blocks (e.g. Subscriptions) for some examples.

---

Internal references:

• pdF78r-hm-p2
• pdqkMK-fe-p2

Previous references:

• https://github.com/Automattic/jetpack/pull/10270
• https://github.com/Automattic/wp-calypso/pull/27665

[jeherve]

@that-mike-bal Feel free to edit the issue above and add to the list if you have more items you'd like to address.

[that-mike-bal]

Hey @jeherve - where would the keywords go? I'm happy to write those up.

[jeherve]

@that-mike-bal Keywords are added here: https://github.com/Automattic/jetpack/blob/9c9687a314168185133e50d11cd2bcef84fc5239/projects/plugins/jetpack/extensions/blocks/recipe/index.js#L38

[that-mike-bal]

Hey @magnificode - here are some keywords I think cover the basic/most common uses.

recipes, recipe block, recipe patterns, cooking instructions, ingredients, baking instructions, cooking, food

[magnificode]

Hey @that-mike-bal @jeherve and @kraftbj -

#24904 should handle a few of the items above, specifically the following:

• Handle focus better when entering ingredients or directions
• Add formatting options (italic, bold, ...) to the ingredient list if possible. (this functionality was actually already included with the original PR).
• Add icons for block and inner blocks.
• Add keywords for better block discoverability.

I spoke with Mike, and I believe the remaining tasks within this issue may be better suited for an a8c team member to handle. Specifically the block tests. I've not written Jest or PHP Unit tests myself before, and would be concerned about the quality of those tests if I wrote them using contextual knowledge from other blocks. I'm more than happy to pair with an a8c team member who has experience writing these tests if that would be helpful! I'd just hate to write sub-par tests myself 😬 .

Let me know if this satisfies those few parameters above that I mentioned. Happy to discuss anything else further if necessary!

[supernovia]

Hi! I just happened across this block. I'm excited! And I have a few issues.

1. I was testing to see if this would import into recipe apps. Can we add hrecipe or Recipe microdata to this?

2. The print recipe button printed the blog post, my logo, weird headers at the top of each page and what not... I think if we get the microdata in place, we can use that to make a recipe-friendly print style.