Pattern preview is distorted

  • Resolved Kovas

    (@zerocore)


    1 year, 7 months ago

    Looks like the pattern preview iframe does not have access to the required styles. I use GenerateBlocks and the pattern preview looks like this:

    In the editor it’s displayed almost correctly:

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    Hi @zerocore,

    Thanks for letting us know about that! We’re working on that in the next several weeks.

    Plugin Contributor Phil Johnston

    (@johnstonphilip)

    @zerocore Would you be able to paste the block code that you’re using in this situation? We can then test it on our end to make sure it shows correctly in the previews.

    Thread Starter Kovas

    (@zerocore)

    Sure:

    <!-- wp:generateblocks/container {"uniqueId":"2e06c66d","backgroundColor":"var(\u002d\u002dpaletteColor6, #f3f2f2)","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"align":"full","shapeDividers":[],"isDynamic":true,"blockVersion":3,"sizing":{},"opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[],"globalStyleId":"outer-medium","advBackgrounds":[]} -->
<!-- wp:generateblocks/container {"uniqueId":"ad6a4622","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"shapeDividers":[],"isDynamic":true,"blockVersion":3,"sizing":{"width":"var(\u002d\u002dcontainer-width)"},"useGlobalMaxWidth":true,"marginRight":"auto","marginLeft":"auto","paddingTop":"140","paddingBottom":"140","opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[],"globalStyleId":"inner","advBackgrounds":[]} -->
<!-- wp:generateblocks/grid {"uniqueId":"5a79554d","columns":3,"horizontalGap":60,"verticalGapTablet":60,"verticalGapMobile":30,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"c5b36277","isGrid":true,"gridId":"5a79554d","isDynamic":true,"blockVersion":3,"display":"flex","flexDirection":"column","rowGap":"40px","rowGapMobile":"30px","orderTablet":1,"sizing":{"width":"33.33%","widthMobile":"100%","widthTablet":"50%"}} -->
<!-- wp:generateblocks/container {"uniqueId":"928c3801","isDynamic":true,"blockVersion":3,"columnGap":"16px","marginTopMobile":"30"} -->
<!-- wp:generateblocks/headline {"uniqueId":"c313afb5","element":"h3","blockVersion":2,"display":"flex","alignItems":"center","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","hasIcon":true,"iconColor":"var(\u002d\u002dpaletteColor2, #1559ed)","iconPaddingRight":"15","iconPaddingUnit":"px","iconSize":30,"iconSizeUnit":"px","useTransition":true,"transitions":[{"state":"normal","target":"icon","customSelector":"","timingFunction":"ease","property":"all","duration":0.3,"delay":""}],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"icon","translateX":4}]} -->
<h3 class="gb-headline gb-headline-c313afb5"><span class="gb-icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.3 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36zM140.3 436.9l33.5-141.6 9.3-39.4h-150L63 32h125.9l-38.7 118-13.8 42h145.7L140.3 436.9z"></path></svg></span><span class="gb-headline-text">Headline</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"a7cbeb7c","element":"p","blockVersion":2,"marginBottom":"0","marginLeft":"45","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":""} -->
<p class="gb-headline gb-headline-a7cbeb7c gb-headline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque mollis lacus, ac viverra nisi bibendum sit amet.</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"e0afdb53","isDynamic":true,"blockVersion":3,"columnGap":"16px","marginTopMobile":"30"} -->
<!-- wp:generateblocks/headline {"uniqueId":"3f7549d2","element":"h3","blockVersion":2,"display":"flex","alignItems":"center","sizing":{},"backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","hasIcon":true,"iconColor":"var(\u002d\u002dpaletteColor2, #1559ed)","iconPaddingRight":"15","iconPaddingUnit":"px","iconSize":30,"iconSizeUnit":"px","opacities":[],"useTransition":true,"transitions":[{"state":"normal","target":"icon","customSelector":"","timingFunction":"ease","property":"all","duration":0.3,"delay":""}],"boxShadows":[],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"icon","translateX":4}],"textShadows":[],"filters":[]} -->
<h3 class="gb-headline gb-headline-3f7549d2"><span class="gb-icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M546.2 9.7c-2.9-6.5-8.6-9.7-14.3-9.7-5.3 0-10.7 2.8-14 8.5C486.9 62.4 431.4 96 368 96h-80C182 96 96 182 96 288c0 20.9 3.4 40.9 9.6 59.7C29.3 413 1.4 489.4.9 490.7c-2.9 8.3 1.5 17.5 9.8 20.4 7.9 2.8 17.4-1.1 20.4-9.8.4-1.2 23.9-65.1 87.6-122.7C151.1 438.9 214.7 480 288 480c6.9 0 13.7-.4 20.4-1.1C465.5 467.5 576 326.8 576 154.3c0-50.2-10.8-102.2-29.8-144.6zM305 447.1c-5.9.6-11.6.9-17 .9-63.3 0-117.6-37.2-143.5-90.6C196.3 319 268.6 288 368 288c8.8 0 16-7.2 16-16s-7.2-16-16-16c-102.8 0-179 31-234.8 70.4-3.1-12.4-5.2-25.1-5.2-38.4 0-88.2 71.8-160 160-160h80c63.3 0 121-28.4 159.7-77.2 10.5 32.3 16.3 68.7 16.3 103.5 0 159.6-100.1 282.7-239 292.8z"></path></svg></span><span class="gb-headline-text">Headline</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"2420ef3f","element":"p","blockVersion":2,"sizing":{},"marginBottom":"0","marginLeft":"45","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[]} -->
<p class="gb-headline gb-headline-2420ef3f gb-headline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque mollis lacus, ac viverra nisi bibendum sit amet.</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"9357803c","isDynamic":true,"blockVersion":3,"columnGap":"16px","marginTopMobile":"30"} -->
<!-- wp:generateblocks/headline {"uniqueId":"44dbee09","element":"h3","blockVersion":2,"display":"flex","alignItems":"center","sizing":{},"backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","hasIcon":true,"iconColor":"var(\u002d\u002dpaletteColor2, #1559ed)","iconPaddingRight":"15","iconPaddingUnit":"px","iconSize":30,"iconSizeUnit":"px","opacities":[],"useTransition":true,"transitions":[{"state":"normal","target":"icon","customSelector":"","timingFunction":"ease","property":"all","duration":0.3,"delay":""}],"boxShadows":[],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"icon","translateX":4}],"textShadows":[],"filters":[]} -->
<h3 class="gb-headline gb-headline-44dbee09"><span class="gb-icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 504c137 0 248-111 248-248S393 8 256 8 8 119 8 256s111 248 248 248zM40 256c0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216zm331.7-18l-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8 0-42zM192 335.8V176.9c0-4.7 5.1-7.6 9.1-5.1l134.5 81.7c3.9 2.4 3.8 8.1-.1 10.3L201 341c-4 2.3-9-.6-9-5.2z"></path></svg></span><span class="gb-headline-text">Headline</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"d51b2179","element":"p","blockVersion":2,"sizing":{},"marginBottom":"0","marginLeft":"45","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[]} -->
<p class="gb-headline gb-headline-d51b2179 gb-headline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque mollis lacus, ac viverra nisi bibendum sit amet.</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"7de833db","isGrid":true,"gridId":"5a79554d","backgroundColor":"#eee","isDynamic":true,"blockVersion":3,"display":"flex","flexDirection":"column","flexDirectionTablet":"column","justifyContent":"center","sizing":{"width":"33.33%","widthMobile":"100%","height":"100%","widthTablet":"100%","heightTablet":"","heightMobile":""},"borderRadiusTopRight":"12","borderRadiusBottomRight":"12","borderRadiusBottomLeft":"12","borderRadiusTopLeft":"12"} -->
<!-- wp:generateblocks/image {"uniqueId":"6e14fe59","mediaId":35948,"sizeSlug":"full","width":"100%","widthTablet":"100%","height":"100%","heightTablet":"100%","objectFit":"cover","objectFitTablet":"cover","objectFitMobile":"cover","borderRadiusTopRight":"12","borderRadiusBottomRight":"12","borderRadiusBottomLeft":"12","borderRadiusTopLeft":"12"} -->
<figure class="gb-block-image gb-block-image-6e14fe59"><img class="gb-image gb-image-6e14fe59" src="https://elidenta.local/wp-content/themes/elidenta/patterns/images/video-300-200.svg" alt="" title="video-300-200"/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"962fbe78","isGrid":true,"gridId":"5a79554d","isDynamic":true,"blockVersion":3,"display":"flex","flexDirection":"column","rowGap":"40px","rowGapMobile":"30px","orderTablet":1,"sizing":{"width":"33.33%","widthMobile":"100%","widthTablet":"50%"}} -->
<!-- wp:generateblocks/container {"uniqueId":"10d087dd","isDynamic":true,"blockVersion":3,"columnGap":"16px","marginTopMobile":"30"} -->
<!-- wp:generateblocks/headline {"uniqueId":"0e621212","element":"h3","blockVersion":2,"display":"flex","alignItems":"center","sizing":{},"backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","hasIcon":true,"iconColor":"var(\u002d\u002dpaletteColor2, #1559ed)","iconPaddingRight":"15","iconPaddingUnit":"px","iconSize":30,"iconSizeUnit":"px","opacities":[],"useTransition":true,"transitions":[{"state":"normal","target":"icon","customSelector":"","timingFunction":"ease","property":"all","duration":0.3,"delay":""}],"boxShadows":[],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"icon","translateX":4}],"textShadows":[],"filters":[]} -->
<h3 class="gb-headline gb-headline-0e621212"><span class="gb-icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M80 352c26.467 0 48 21.533 48 48s-21.533 48-48 48-48-21.533-48-48 21.533-48 48-48m0-32c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80zm367.996 147.615c-6.448-237.848-198.06-429.164-435.61-435.61C5.609 31.821 0 37.229 0 44.007v8.006c0 6.482 5.146 11.816 11.626 11.994 220.81 6.05 398.319 183.913 404.367 404.367.178 6.48 5.512 11.626 11.994 11.626h8.007c6.778 0 12.185-5.609 12.002-12.385zm-144.245-.05c-6.347-158.132-133.207-284.97-291.316-291.316C5.643 175.976 0 181.45 0 188.247v8.005c0 6.459 5.114 11.72 11.567 11.989 141.134 5.891 254.301 119.079 260.192 260.192.269 6.453 5.531 11.567 11.989 11.567h8.005c6.798 0 12.271-5.643 11.998-12.435z"></path></svg></span><span class="gb-headline-text">Headline</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"d13e6e1d","element":"p","blockVersion":2,"sizing":{},"marginBottom":"0","marginLeft":"45","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[]} -->
<p class="gb-headline gb-headline-d13e6e1d gb-headline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque mollis lacus, ac viverra nisi bibendum sit amet.</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"95a6db12","isDynamic":true,"blockVersion":3,"columnGap":"16px","marginTopMobile":"30"} -->
<!-- wp:generateblocks/headline {"uniqueId":"d1d34768","element":"h3","blockVersion":2,"display":"flex","alignItems":"center","sizing":{},"backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","hasIcon":true,"iconColor":"var(\u002d\u002dpaletteColor2, #1559ed)","iconPaddingRight":"15","iconPaddingUnit":"px","iconSize":30,"iconSizeUnit":"px","opacities":[],"useTransition":true,"transitions":[{"state":"normal","target":"icon","customSelector":"","timingFunction":"ease","property":"all","duration":0.3,"delay":""}],"boxShadows":[],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"icon","translateX":4}],"textShadows":[],"filters":[]} -->
<h3 class="gb-headline gb-headline-d1d34768"><span class="gb-icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M32 58V38c0-3.3 2.7-6 6-6h116c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6zm344 230c0-66.2-53.8-120-120-120s-120 53.8-120 120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88zm-120 0c0-17.6 14.4-32 32-32 8.8 0 16-7.2 16-16s-7.2-16-16-16c-35.3 0-64 28.7-64 64 0 8.8 7.2 16 16 16s16-7.2 16-16zM512 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h136l33.6-44.8C226.7 39.1 240.9 32 256 32h208c26.5 0 48 21.5 48 48zM224 96h240c5.6 0 11 1 16 2.7V80c0-8.8-7.2-16-16-16H256c-5 0-9.8 2.4-12.8 6.4L224 96zm256 48c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16V144z"></path></svg></span><span class="gb-headline-text">Headline</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"0e0ca14f","element":"p","blockVersion":2,"sizing":{},"marginBottom":"0","marginLeft":"45","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[]} -->
<p class="gb-headline gb-headline-0e0ca14f gb-headline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque mollis lacus, ac viverra nisi bibendum sit amet.</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"d604f1eb","isDynamic":true,"blockVersion":3,"columnGap":"16px","marginTopMobile":"30"} -->
<!-- wp:generateblocks/headline {"uniqueId":"54a8312e","element":"h3","blockVersion":2,"display":"flex","alignItems":"center","sizing":{},"backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","hasIcon":true,"iconColor":"var(\u002d\u002dpaletteColor2, #1559ed)","iconPaddingRight":"15","iconPaddingUnit":"px","iconSize":30,"iconSizeUnit":"px","opacities":[],"useTransition":true,"transitions":[{"state":"normal","target":"icon","customSelector":"","timingFunction":"ease","property":"all","duration":0.3,"delay":""}],"boxShadows":[],"useTransform":true,"transforms":[{"type":"translate","state":"hover","target":"icon","translateX":4}],"textShadows":[],"filters":[]} -->
<h3 class="gb-headline gb-headline-54a8312e"><span class="gb-icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M312.5 168.5c-4.7-4.7-12.3-4.7-17 0l-98.3 98.3c-4.7 4.7-4.7 12.3 0 17l5.7 5.7c4.7 4.7 12.3 4.7 17 0l68.2-68.2V372c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12V221.3l68.2 68.2c4.7 4.7 12.3 4.7 17 0l5.7-5.7c4.7-4.7 4.7-12.3 0-17l-98.5-98.3zm259.2 70.3c2.8-9.9 4.3-20.2 4.3-30.8 0-61.9-50.1-112-112-112-16.7 0-32.9 3.6-48 10.8-31.6-45-84.3-74.8-144-74.8-94.4 0-171.7 74.5-175.8 168.2C39.2 220.2 0 274.3 0 336c0 79.6 64.4 144 144 144h368c70.7 0 128-57.2 128-128 0-47-25.8-90.8-68.3-113.2zM512 448H144c-61.9 0-112-50.1-112-112 0-56.8 42.2-103.7 97-111-.7-5.6-1-11.3-1-17 0-79.5 64.5-144 144-144 60.3 0 111.9 37 133.4 89.6C420 137.9 440.8 128 464 128c44.2 0 80 35.8 80 80 0 18.5-6.3 35.6-16.9 49.2C573 264.4 608 304.1 608 352c0 53-43 96-96 96z"></path></svg></span><span class="gb-headline-text">Headline</span></h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"1d9e65d7","element":"p","blockVersion":2,"sizing":{},"marginBottom":"0","marginLeft":"45","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[]} -->
<p class="gb-headline gb-headline-1d9e65d7 gb-headline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque mollis lacus, ac viverra nisi bibendum sit amet.</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
    Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    Hi @zerocore,

    Are the previews better now for you?

    We just released Phil’s fixes in the latest version of Pattern Manager, 0.1.8.

    Thread Starter Kovas

    (@zerocore)

    Hello @ryankienstra,

    Yes, that’s perfect. And unlike the native preview (block inserter), it has access to color variables.

    Good job ??

    Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    Hi @zerocore!

    Great to hear! @johnstonphilip fixed it.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Pattern preview is distorted’ is closed to new replies.