Payment Block Cover 2

Open
#194 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
wordpress
Domain
design

Research direction

Start with the attached screenshot, Preview link, and embedded Cover block markup; inspect how the Cover and Group blocks render together. Reproduce the bottom-right alignment issue and compare the result with the preview; done means the white Group block is correctly aligned, though the issue does not name a repository file or test.

Written by the indexing model from the issue text.

Description

image

Preview →

Cover block bottom right vertical alignment with white group block background.

@ianstewart @olaolusoga @alaczek @iamtakashi


<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/03/baby-bed.jpg","id":4580,"dimRatio":0,"minHeight":100,"minHeightUnit":"vh","contentPosition":"bottom left","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-left" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-4580" alt="" src="https://dotcompatterns.files.wordpress.com/2022/03/baby-bed.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"},"blockGap":"0px"},"color":{"text":"#0a0a0a","background":"#fefefe"},"border":{"radius":"15px"}},"layout":{"contentSize":"450px"}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#fefefe;border-radius:15px;color:#0a0a0a;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:heading {"style":{"typography":{"fontSize":"55px","fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"bottom":"40px"}},"color":{"text":"#0a0a0a"}}} -->
<h2 class="has-text-color" id="find-your-happy-place" style="color:#0a0a0a;font-size:55px;font-style:normal;font-weight:700;margin-bottom:40px">Find your happy place</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"17px","lineHeight":"1.6"},"color":{"text":"#545454"}}} -->
<p class="has-text-color" style="color:#545454;font-size:17px;line-height:1.6">Transformation happens on many fronts: in the way you treat your body through fitness and food, in the quality of the relationships with yourself or others you cultivate, and the quality of the choices you make.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/recurring-payments {"shouldDisplayFrontendBanner":false} -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-id","text":"Buy Now","customTextColor":"#fefefe","customBackgroundColor":"#0a0a0a","borderRadius":10,"width":"100%","className":"is-style-fill"} /--></div>
<!-- /wp:jetpack/recurring-payments --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Dominant language
No language data
Stars
7
Forks
2
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/blockpatterns

All issues in Automattic/blockpatterns

Similar issues

More Design issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.