Support viewportWidth for pattern #22216
Conversation
manooweb
requested review from
ellatrix,
TimothyBJacobs and
youknowriad
as code owners
| 'content' => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">Button One</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">Button Two</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->", | ||
| 'title' => __( 'Two Buttons', 'gutenberg' ), | ||
| 'content' => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">Button One</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">Button Two</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->", | ||
| 'viewportWidth' => 500, |
There was a problem hiding this comment.
Any thoughts on the property name @mtias @enriquesanchez ?
There was a problem hiding this comment.
i don't feel strongly either way personally but some clarifications here:
- The prop for block preview is named
viewportWidthwhich i believe is the reason this was chosen here. - This is not the "preview width" as the preview width is stable (inserter width) but the base width used before scaling the preview down.
previewWidthcould work though.
There was a problem hiding this comment.
@manooweb can we update this to "previewWidth" and ship?
There was a problem hiding this comment.
If you think we should remain consistent with the prop name, that's also fine.
There was a problem hiding this comment.
I'm on the fence personally. I'm going to merge and we'll see.
Also cc @aduth as my go to person for naming things :P
There was a problem hiding this comment.
If I understand correctly, it's a bit strange to me to consider preview configurations as top-level properties of a pattern, especially when not notated as such. Is there a purpose for viewportWidth outside just the preview? Do we foresee needing to have any additional configuration for preview?
Wondering if it's something where preview could be a nested object of settings relevant for the preview.
preview.width, preview.viewportWidth, etc.
There was a problem hiding this comment.
The actual preview width doesn't really matter, it's in general dependent on the wrapper but in order to show a block preview (or a template preview), we need to define a width for the canvas (editor) and then scale it down.
Fixes #22147
Add support of viewportWidth for each pattern.
Test: