Automattic / Automattic/block-experiments

Sketch Block: Viewbox settings

Open
#257 0 comments 0 reactions 0 assignees View on GitHub
[Block] Sketch
Dominant language
JavaScript
Stars
131
Forks
18
PR merge metrics
No merged PRs in 30d

Description

Currently, the svg element for the sketch block only includes the `role="image"` attribute, and the containing element has an inline style to control the height. This works ok, except that the svg is then not responsive to different widths (screenshots below).

My blog has a special side margin area on desktop for notes that move into the main column on mobile, so it might be a more extreme case, but it's easy to draw something on desktop and have it end up too large to fit on mobile, where the drawing is just cut off.

This could be mitigated with the `viewbox` attribute, which sets the internal artboard size. Maybe this manifests as a "responsive" toggle? You'd probably need to be able to adjust both the height and width, but I'm not sure how this would interact with the current height adjuster. I would personally prefer that the height and width only affect the veiwport and let the image be the full width of the container, but that doesn't account for the alignment options. Perhaps it makes sense for the "viewport" size to be separate from the "image" size.

![Screen Shot 2022-01-06 at 10 25 52 AM](https://user-images.githubusercontent.com/304784/148408663-9e3abe14-7447-459e-8f8c-d76d545cca7c.png)
![Screen Shot 2022-01-06 at 10 26 12 AM](https://user-images.githubusercontent.com/304784/148408683-73743ce4-5867-4ea4-b27b-900d1729671a.png)
![Screen Shot 2022-01-06 at 10 26 29 AM](https://user-images.githubusercontent.com/304784/148408702-b4a94d80-bc02-4542-b0fa-15504eb7b450.png)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.