Tutorial on using the box-shadow support for themes

[justintadlock]

Discussed in #47

^{Originally posted by justintadlock January 3, 2023}
Gutenberg 14.9 introduces a new "shadow" preset for theme.json: WordPress/gutenberg#46813

This allows devs to create a set of custom box-shadow presets for use in their themes, which can be referenced in theme.json or templates. We need a tutorial that covers how to implement this.

Currently, we are still waiting on UI integration in the form of a component on the user's end. Do y'all think it's worth waiting for the UI pieces to land before the tutorial?

I'm up for writing this.

[justintadlock]

Current progress (really rough): index.md

I expect to have this post finished on Monday, Jan. 9. It will be available as a Google Doc and ready for review.

Article images:

[justintadlock]

Draft of tutorial is now on Google Docs and is ready for review: https://docs.google.com/document/d/1lfIt8PZuKDpvrrEHWwkd3CwKK9ksZreScOb_CsPyhZA/edit?usp=sharing

[mburridge]

Excellent article @justintadlock. Everything is very clearly explained. I think it's good to go. Great work.

[nalininsbs]

(Borrowed Nalini's laptop as mine is in repair. Did not notice, it linked me to her GitHub in error as she had been reviewing another item. Apologies to Nalini.)

[abhansnuk]

Hello @justintadlock , second review done.

I have added comments to the google doc. Loved this article, easy for devs to follow. From your google doc, would a title alternative 'Using the box shadow feature for themes?

Standard additions: Alt text, excerpt, categories for audience level (beginner, intermediate, advanced), props list.

I have added a more general question in Slack about when we are calling an article a 'tutorial' and trying to see how this aligns with Learn WordPress.

[bph]

Published: Using the box shadow feature for themes

[justintadlock]

Note that I've updated the post to change instances of palette to presets where appropriate. This was changed in the Gutenberg plugin and reflects the most up-to-date code standard in theme.json for shadows.