system
You are an assistant that generates WordPress patterns.
user
Tiles with different sizes containing images or text for Portfolio
assistant
<!-- wp:group {"metadata":{"name":"Tiles"},"align":"full","style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"10px","left":"10px"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:cover {"url":"https://images.rawpixel.com/image_300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAxNi1sMTA4M2I3MS5qcGc.jpg","dimRatio":0,"minHeight":310,"isDark":false,"style":{"color":{"duotone":["#DAA520","#000000"]}},"layout":{"type":"default"}} -->
<div class="wp-block-cover is-light" style="min-height:310px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAxNi1sMTA4M2I3MS5qcGc.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><mark style="background-color:#ffffff" class="has-inline-color has-black-color"><strong>Duotone</strong></mark></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%","style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:cover {"customOverlayColor":"#daa520","isUserOverlayColor":true,"minHeight":150,"isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#daa520"></span><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"1.5rem","fontStyle":"normal","fontWeight":"700"}}} -->
<h2 class="wp-block-heading has-text-align-center" style="font-size:1.5rem;font-style:normal;font-weight:700">Group Tiles with Blocks Columns and Cover</h2>
<!-- /wp:heading --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"https://images.rawpixel.com/image_300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAzMy1sMTA4NG14bi5qcGc.jpg","dimRatio":50,"customOverlayColor":"#8e6b46","isUserOverlayColor":true,"minHeight":150,"isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#8e6b46"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAzMy1sMTA4NG14bi5qcGc.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><mark style="background-color:#ffffff" class="has-inline-color has-black-color"><strong>Overlay</strong></mark></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"16.665%","style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column" style="flex-basis:16.665%"><!-- wp:cover {"url":"https://images.rawpixel.com/image_350/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTA0NC1sMTA4NG15MS5qcGc.jpg","dimRatio":0,"minHeight":150,"isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_350/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTA0NC1sMTA4NG15MS5qcGc.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"https://images.rawpixel.com/image_350/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTA0Ni12LWwxMDgzYWxmLmpwZw.jpg","dimRatio":0,"minHeight":150,"isDark":false,"style":{"color":{"duotone":["#000000","#90905E"]}}} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_350/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTA0Ni12LWwxMDgzYWxmLmpwZw.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"16.665%"} -->
<div class="wp-block-column" style="flex-basis:16.665%"><!-- wp:cover {"url":"https://images.rawpixel.com/image_300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTEwNi14LmpwZw.jpg","dimRatio":50,"customOverlayColor":"#8e6b46","isUserOverlayColor":true,"minHeight":310,"isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:310px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#8e6b46"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTEwNi14LmpwZw.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"10px","left":"10px"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"15.7%"} -->
<div class="wp-block-column" style="flex-basis:15.7%"><!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"minHeight":310,"minHeightUnit":"px","contentPosition":"center center","align":"center","style":{"color":[]},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover aligncenter" style="min-height:310px"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"right","placeholder":"Введите заголовок…","style":{"typography":{"writingMode":"vertical-rl","fontStyle":"normal","fontWeight":"700","fontSize":"50px"}}} -->
<p class="has-text-align-right" style="font-size:50px;font-style:normal;font-weight:700;writing-mode:vertical-rl">Ready ?</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"16.665%","style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column" style="flex-basis:16.665%"><!-- wp:cover {"customOverlayColor":"#90905e","isUserOverlayColor":true,"minHeight":150,"isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#90905e"></span><div class="wp-block-cover__inner-container"><!-- wp:social-links {"iconColor":"base","iconColorValue":"#ffffff","openInNewTab":true,"size":"has-huge-icon-size","align":"center","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center","flexWrap":"nowrap"}} -->
<ul class="wp-block-social-links aligncenter has-huge-icon-size has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"https://wordpress.org/patterns/","service":"wordpress","label":"WordPress Pattern Directory","rel":""} /--></ul>
<!-- /wp:social-links --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"https://images.rawpixel.com/image_300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAzNC14LmpwZw.jpg","dimRatio":0,"isUserOverlayColor":true,"minHeight":150,"isDark":false,"style":{"color":{"duotone":["#000000","#DAA520"]}}} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAzNC14LmpwZw.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"16.665%"} -->
<div class="wp-block-column" style="flex-basis:16.665%"><!-- wp:cover {"url":"https://images.rawpixel.com/image_350/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAxOC14LmpwZw.jpg","dimRatio":0,"focalPoint":{"x":0.66,"y":0.47},"minHeight":310,"isDark":false,"style":{"color":[]}} -->
<div class="wp-block-cover is-light" style="min-height:310px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_350/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAxOC14LmpwZw.jpg" style="object-position:66% 47%" data-object-fit="cover" data-object-position="66% 47%" /><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"minHeight":310,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover" style="min-height:310px"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"style":{"typography":{"fontSize":"14px"}}} -->
<p style="font-size:14px"><strong><mark style="background-color:#DAA520" class="has-inline-color has-contrast-color">TIPS:</mark></strong> Use it as is, or add to theme.json the Gap you need:</p>
<!-- /wp:paragraph -->

<!-- wp:code {"style":{"typography":{"fontSize":"11px"}}} -->
<pre class="wp-block-code" style="font-size:11px"><code>"styles": {
  "spacing": {			      
    "blockGap": "10px"
  }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"14px"}}} -->
<p style="font-size:14px">if so, delete Block Spacing in editor on Tiles: Blocks Group, Columns, Column with 2 Covers. Adjust the minimum height of cover</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"16.665%","style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column" style="flex-basis:16.665%"><!-- wp:cover {"url":"https://images.rawpixel.com/image_350/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAxNS14LmpwZw.jpg","dimRatio":0,"minHeight":150,"isDark":false,"style":{"color":[]}} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_350/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAxNS14LmpwZw.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"customOverlayColor":"#daa520","isUserOverlayColor":true,"minHeight":150,"isDark":false,"style":{"color":[]}} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#daa520"></span><div class="wp-block-cover__inner-container"><!-- wp:image {"align":"center","width":"80px","sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image aligncenter size-large is-resized"><a href="https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/" target="_blank" rel="noreferrer noopener"><img src="https://cdn-icons-png.flaticon.com/512/659/659999.png" alt="Block Editor Handbook Patterns" style="width:80px" /></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"10px","left":"10px"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"49.5%"} -->
<div class="wp-block-column" style="flex-basis:49.5%"><!-- wp:cover {"customOverlayColor":"#90905e","isUserOverlayColor":true,"minHeight":150,"isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#90905e"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph -->
<p>Because of the use of external images here, tiles don't always fit properly in the editor (fine on front) when used on your website, loading your own from the Media folder solves display bugs.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"16.665%"} -->
<div class="wp-block-column" style="flex-basis:16.665%"><!-- wp:cover {"url":"https://images.rawpixel.com/image_300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAxOS1sMTA4NTIzcS5qcGc.jpg","dimRatio":50,"customOverlayColor":"#8e6b46","isUserOverlayColor":true,"minHeight":150,"isDark":false,"style":{"color":[]},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#8e6b46"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAxOS1sMTA4NTIzcS5qcGc.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":""} -->
<div class="wp-block-column"><!-- wp:cover {"customOverlayColor":"#90905e","isUserOverlayColor":true,"minHeight":150,"isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:150px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#90905e"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Введите заголовок…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Lorem ipsum ...</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->