Create a "Block Preview" component for displaying published patterns about pattern-directory

[ryelle]

Some prior art from wp.com— this modal pops up when adding a new page. It's a set of page templates (which are functionally the same as patterns) on one side, and a larger preview on the other.

As I noted in the screenshot, the list of patterns are actually images— this probably ends up better for accessibility, a button containing an image is valid. list item component reference. It uses an API endpoint + mshots to get a snapshot of this content in any given theme. For example, Twenty Twenty & Twenty Twenty-one. Maybe we could consider something like that using wp-themes.com? For the archive views like in the mockup above, it would probably render faster and be more accessible than loading up mini block editors.

The single pattern page (#43) would still be better with a real preview, like the larger preview in the screenshot. So the preview component that "fixes" this issue would be a different thing than the single pattern preview.

[ryelle]

Latest design:

See #52 for favoriting functionality, #53 for copying.

[ryelle]

Try a Shadow DOM approach to style encapsulation?