system
You are an assistant that generates WordPress patterns.
user
Create mask with Background Image Block Support
assistant
<!-- wp:group {"metadata":{"name":"Masking effect"},"align":"full","style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:columns {"align":"full","style":{"spacing":{"blockGap":{"top":"10px","left":"10px"}}}} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"Mask"},"align":"full","style":{"background":{"backgroundImage":{"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285692600-2ab591f8-94dc-4d01-9c4d-758a5b6e3e9b.jpg","id":933,"source":"file","title":"forest"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:cover {"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285693039-73ba8e61-bb55-45ec-8a04-fecd4e289988.png","id":932,"hasParallax":true,"isRepeated":true,"dimRatio":30,"focalPoint":{"x":0,"y":0},"minHeight":592,"minHeightUnit":"px","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#DAA520"]}},"layout":{"type":"constrained","contentSize":"","wideSize":""}} -->
<div class="wp-block-cover alignfull is-light has-parallax is-repeated" style="min-height:592px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-932 has-parallax is-repeated" style="background-position:0% 0%;background-image:url(https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285693039-73ba8e61-bb55-45ec-8a04-fecd4e289988.png)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"كتابة عنوان…","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"large"} -->
<p class="has-text-align-center has-white-color has-text-color has-link-color has-large-font-size">Deep Forest</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"Mask"},"align":"full","style":{"background":{"backgroundImage":{"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285692600-2ab591f8-94dc-4d01-9c4d-758a5b6e3e9b.jpg","id":933,"source":"file","title":"forest"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:cover {"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285693039-73ba8e61-bb55-45ec-8a04-fecd4e289988.png","id":932,"hasParallax":true,"isRepeated":true,"dimRatio":30,"focalPoint":{"x":0,"y":0},"minHeight":592,"minHeightUnit":"px","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#000000"]}},"layout":{"type":"constrained","contentSize":"","wideSize":""}} -->
<div class="wp-block-cover alignfull is-light has-parallax is-repeated" style="min-height:592px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-932 has-parallax is-repeated" style="background-position:0% 0%;background-image:url(https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285693039-73ba8e61-bb55-45ec-8a04-fecd4e289988.png)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"كتابة عنوان…","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"large"} -->
<p class="has-text-align-center has-white-color has-text-color has-link-color has-large-font-size">Deep Forest</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"Mask"},"align":"full","style":{"background":{"backgroundImage":{"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285692600-2ab591f8-94dc-4d01-9c4d-758a5b6e3e9b.jpg","id":933,"source":"file","title":"forest"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:cover {"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285693039-73ba8e61-bb55-45ec-8a04-fecd4e289988.png","id":932,"hasParallax":true,"isRepeated":true,"dimRatio":30,"focalPoint":{"x":0,"y":0},"minHeight":592,"minHeightUnit":"px","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#90905E"]}},"layout":{"type":"constrained","contentSize":"","wideSize":""}} -->
<div class="wp-block-cover alignfull is-light has-parallax is-repeated" style="min-height:592px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-932 has-parallax is-repeated" style="background-position:0% 0%;background-image:url(https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285693039-73ba8e61-bb55-45ec-8a04-fecd4e289988.png)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"كتابة عنوان…","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"large"} -->
<p class="has-text-align-center has-white-color has-text-color has-link-color has-large-font-size">Deep Forest</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"metadata":{"name":"Mask"},"align":"full","style":{"background":{"backgroundImage":{"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285692600-2ab591f8-94dc-4d01-9c4d-758a5b6e3e9b.jpg","id":933,"source":"file","title":"forest"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:cover {"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285693039-73ba8e61-bb55-45ec-8a04-fecd4e289988.png","id":932,"isRepeated":true,"dimRatio":30,"focalPoint":{"x":0.01,"y":0},"minHeight":592,"minHeightUnit":"px","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#000000"]}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull is-light is-repeated" style="min-height:592px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-932 is-repeated" style="background-position:1% 0%;background-image:url(https://github-production-user-asset-6210df.s3.amazonaws.com/20461328/285693039-73ba8e61-bb55-45ec-8a04-fecd4e289988.png)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"كتابة عنوان…","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"large"} -->
<p class="has-text-align-center has-white-color has-text-color has-link-color has-large-font-size">Masking effect</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"10px","padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"1rem","right":"1rem"}},"color":{"background":"#6c6c46"}},"layout":{"type":"constrained","contentSize":"","justifyContent":"center"}} -->
<div class="wp-block-group has-background" style="background-color:#6c6c46;padding-top:var(--wp--preset--spacing--40);padding-right:1rem;padding-bottom:var(--wp--preset--spacing--40);padding-left:1rem"><!-- wp:paragraph {"align":"left","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"typography":{"writingMode":"horizontal-tb","fontStyle":"normal","fontWeight":"700"}},"textColor":"base"} -->
<p class="has-text-align-left has-base-color has-text-color has-link-color" style="font-style:normal;font-weight:700;writing-mode:horizontal-tb"><mark style="background-color:#DAA520" class="has-inline-color has-contrast-color">TIPS:</mark></p>
<!-- /wp:paragraph -->

<!-- wp:list {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast"} -->
<ul class="has-contrast-color has-text-color has-link-color"><!-- wp:list-item -->
<li>Use Background Image on Block Group parent (new with WP6.4)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Use Block Cover inside with png image as mask</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Add effects with Fixed and Repeated background</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Add colors applying Duotone Filter and Overlay on Cover</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->