add two examples of pattern

assets/css/editor.css

@@ -4,6 +4,8 @@
 
 @import 'tailwindcss/utilities';
 
+@import './patterns.css';
+
 .wp-block[data-align='full'] {
   @apply max-w-none;
 }

assets/css/patterns.css

@@ -0,0 +1,27 @@
+.gm-exemple-pattern {
+  @apply grid lg:grid-cols-2 m-0;
+}
+
+.gm-exemple-pattern > div {
+  @apply m-0;
+}
+
+.gm-exemple-pattern > div:first-child figure {
+  @apply h-full overflow-hidden max-w-full flex;
+}
+
+.gm-exemple-pattern > div:first-child figure img {
+  @apply object-cover object-center;
+}
+
+.gm-exemple-pattern > div:last-child {
+  @apply py-10 px-6 lg:px-12 xl:px-16 m-0 flex flex-col justify-center;
+}
+
+.gm-exemple-pattern-reverse > div:first-child {
+  @apply lg:col-start-2 row-start-1;
+}
+
+.gm-exemple-pattern-reverse > div:last-child {
+  @apply lg:col-start-1 row-start-1;
+}

assets/css/styles.css

@@ -11,3 +11,5 @@
 
 /** DEFAULT FOR EXAMPLE */
 @import './default.css';
+
+@import './patterns.css';

patterns/gm-exemple-pattern-reverse.php

@@ -0,0 +1,32 @@
+<?php
+
+/**
+ * Title: Exemple Pattern Reverse
+ * Slug: press-wind/gm-exemple-pattern-reverse
+ * Categories: press-wind/press-wind-patterns
+ */
+?>
+
+<!-- wp:group {"className":"gm-exemple-pattern gm-exemple-pattern-reverse"} -->
+<div class="wp-block-group gm-exemple-pattern gm-exemple-pattern-reverse">
+  <!-- wp:group -->
+  <div class="wp-block-group">
+    <!-- wp:image {"id":9,"sizeSlug":"large","linkDestination":"none"} -->
+    <figure class="wp-block-image size-large"><img src="http://wpperformance.localhost/wp-content/uploads/2022/08/wasa-crispbread-IgYBpcquAg4-unsplash-1024x775.jpg" alt="" class="wp-image-9" /></figure>
+    <!-- /wp:image -->
+  </div>
+  <!-- /wp:group -->
+
+  <!-- wp:group -->
+  <div class="wp-block-group">
+    <!-- wp:heading {"textColor":"tertiary"} -->
+    <h2 class="has-tertiary-color has-text-color">Hello world</h2>
+    <!-- /wp:heading -->
+
+    <!-- wp:paragraph -->
+    <p>Adipisicing ad fugiat consectetur ex cillum aliquip id tempor. Adipisicing adipisicing proident aliquip enim tempor consectetur Lorem elit proident labore excepteur irure ut. Culpa aliqua excepteur incididunt adipisicing veniam excepteur commodo ullamco dolor pariatur eiusmod eiusmod deserunt amet. </p>
+    <!-- /wp:paragraph -->
+  </div>
+  <!-- /wp:group -->
+</div>
+<!-- /wp:group -->

patterns/gm-exemple-pattern.php

@@ -0,0 +1,32 @@
+<?php
+
+/**
+ * Title: Exemple Pattern
+ * Slug: press-wind/gm-exemple-pattern
+ * Categories: press-wind/press-wind-patterns
+ */
+?>
+
+<!-- wp:group {"className":"gm-exemple-pattern"} -->
+<div class="wp-block-group gm-exemple-pattern">
+  <!-- wp:group -->
+  <div class="wp-block-group">
+    <!-- wp:image {"id":9,"sizeSlug":"large","linkDestination":"none"} -->
+    <figure class="wp-block-image size-large"><img src="http://wpperformance.localhost/wp-content/uploads/2022/08/wasa-crispbread-IgYBpcquAg4-unsplash-1024x775.jpg" alt="" class="wp-image-9" /></figure>
+    <!-- /wp:image -->
+  </div>
+  <!-- /wp:group -->
+
+  <!-- wp:group -->
+  <div class="wp-block-group">
+    <!-- wp:heading {"textColor":"tertiary"} -->
+    <h2 class="has-tertiary-color has-text-color">Hello world</h2>
+    <!-- /wp:heading -->
+
+    <!-- wp:paragraph -->
+    <p>Adipisicing ad fugiat consectetur ex cillum aliquip id tempor. Adipisicing adipisicing proident aliquip enim tempor consectetur Lorem elit proident labore excepteur irure ut. Culpa aliqua excepteur incididunt adipisicing veniam excepteur commodo ullamco dolor pariatur eiusmod eiusmod deserunt amet. </p>
+    <!-- /wp:paragraph -->
+  </div>
+  <!-- /wp:group -->
+</div>
+<!-- /wp:group -->

style-editor.css

@@ -367,6 +367,109 @@
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
 }
 
+.gm-exemple-pattern {
+
+    margin: 0px;
+
+    display: grid
+}
+
+@media (min-width: 1024px) {
+
+    .gm-exemple-pattern {
+
+        grid-template-columns: repeat(2, minmax(0, 1fr))
+    }
+}
+
+.gm-exemple-pattern > div {
+
+    margin: 0px
+}
+
+.gm-exemple-pattern > div:first-child figure {
+
+    display: flex;
+
+    height: 100%;
+
+    max-width: 100%;
+
+    overflow: hidden
+}
+
+.gm-exemple-pattern > div:first-child figure img {
+
+    object-fit: cover;
+
+    object-position: center
+}
+
+.gm-exemple-pattern > div:last-child {
+
+    margin: 0px;
+
+    display: flex;
+
+    flex-direction: column;
+
+    justify-content: center;
+
+    padding-top: 2.5rem;
+
+    padding-bottom: 2.5rem;
+
+    padding-left: 1.5rem;
+
+    padding-right: 1.5rem
+}
+
+@media (min-width: 1024px) {
+
+    .gm-exemple-pattern > div:last-child {
+
+        padding-left: 3rem;
+
+        padding-right: 3rem
+    }
+}
+
+@media (min-width: 1280px) {
+
+    .gm-exemple-pattern > div:last-child {
+
+        padding-left: 4rem;
+
+        padding-right: 4rem
+    }
+}
+
+.gm-exemple-pattern-reverse > div:first-child {
+
+    grid-row-start: 1
+}
+
+@media (min-width: 1024px) {
+
+    .gm-exemple-pattern-reverse > div:first-child {
+
+        grid-column-start: 2
+    }
+}
+
+.gm-exemple-pattern-reverse > div:last-child {
+
+    grid-row-start: 1
+}
+
+@media (min-width: 1024px) {
+
+    .gm-exemple-pattern-reverse > div:last-child {
+
+        grid-column-start: 1
+    }
+}
+
 .wp-block[data-align='full'] {
 
     max-width: none