add initial guide for using @wordpress packages on the frontend

[fabiankaegy]

This is the first draft of the best practice guide for working with @wordpress/packages on the frontend.

I have some questions for @nicholasio on how we can actually achieve what I am talking about here within 10up-toolkit

[fabiankaegy]

I chatted about this initial draft with @nicholasio and his main points are:

The main issue is that it feels like those packages are great for admin apps but not really websites as they aren’t very optimized

If there are a list of packages that we deem “safe” I’d be more comfortable strictly allowing them instead of being more general about using the @wordpress packages

He also uncovered that at least currently the api-fetch package depends on the url package that uses lodash which would make it not so nice to use. I will create an upstream ticket for that and see whether we can get that removed.

I will also revise the first draft to be much more conservative.

[fabiankaegy]

I have created an issue on the Gutenberg repo for the API Fetch package relying on lodash: WordPress/gutenberg#39495

[fabiankaegy]

@nicholasio I have reworded the guide to what we had talked about. Would love to get your review.

[nicholasio]

Overall this is looking good and aligned with what we discussed.

Left two minor comments,

[nicholasio]

This package seems to be "safe" to use on the front-end.

However, I'm not sure about the suggested use case, since the raw value that comes from the API does not include the rendered blocks AND doesn't go through WP filters it feels like this might not be a real use case. Thoughts?

[nicholasio]

Thoughts on including a dependency for such simple utility functions versus adding it in the scaffold?

Additionally, do you know the benefits of the additional checks? I'm guessing it's accounting for a situation where the DOM is already loaded by the time your script runs so you don't need to add the callback.

[fabiankaegy]

@nicholasio Yeah that exactly was my understanding of the checks.

And from my perspective, the reason why I like to use the package is just 100% consistency. I've gotten used to it in the editor and instead of having to manually use different approaches just using this simple helper just reduces the mental overload.