Improve fullwidth container (#669)

verdigado · Jul 17, 2024 · 13034fd · 13034fd
1 parent b89daec
commit 13034fd
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 20 deletions.
diff --git a/sass/_layout.scss b/sass/_layout.scss
@@ -246,6 +246,11 @@ iframe {
             opacity: 0.3;
             background-color: $black;
         }
+
+        .wp-block-group__inner-container {
+            position: relative;
+        }
+
     }
 }
 

diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -44,7 +44,7 @@ $container-max-widths: (
     sm: 540px,
     md: 720px,
     lg: 960px,
-    xl: 1200px) !default;
+    xl: 1170px) !default;
 
 $font-size-base: 1.1875rem;
 $small-font-size: 15px;

diff --git a/sass/wp-blocks/group.scss b/sass/wp-blocks/group.scss
@@ -2,30 +2,26 @@
 
     position: relative;
 
-    &.is-layout-flex {
-        gap: 0;
-    }
-
-    &.alignfull.has-background {
+    &.alignfull {
         width: 100vw;
         display: flex;
         justify-content: center;
-        flex-wrap: wrap;
-        flex-direction: column;
 
         margin-left: calc(50% - 50vw);
         margin-right: calc(50% - 50vw);
-        padding-left: 5vw;
-        padding-right: 5vw;
 
-        @include media-breakpoint-up(lg) {
-            padding-left: 10vw;
-            padding-right: 10vw;
+        @include media-breakpoint-down(xl) {
+            padding-left: 2rem;
+            padding-right: 2rem;
+        }
+
+        @include media-breakpoint-down(sm) {
+            padding-left: 1rem;
+            padding-right: 1rem;
         }
 
-        @include media-breakpoint-up(xl) {
-            padding-left: 20vw;
-            padding-right: 20vw;
+        > p {
+            max-width: map-get($container-max-widths, "xl");
         }
     }
 

diff --git a/src/latest-posts/render.php b/src/latest-posts/render.php
@@ -83,7 +83,7 @@
 $sunflower_list_items .= sprintf(
 	'
     <a class="text-white no-link d-block bg-primary has-green-550-hover-background-color border-radius" href="%1$s" rel="">
-        <div class="p-45 row ">
+        <div class="p-45 row">
         <span class="continue-reading text-white text-center pt-0">%2$s</span>
         </div>
     </a>
@@ -92,7 +92,7 @@
 	( $attributes['archiveText'] ?? '' ) ? ( $attributes['archiveText'] ?? '' ) : __( 'to archive', 'sunflower-latest-posts' )
 );
 
-$sunflower_list_items .= '</div></div></div></div>';
+$sunflower_list_items .= '</div></div></div>';
 
 echo wp_kses(
 	$sunflower_list_items,

diff --git a/src/next-events/block.json b/src/next-events/block.json
@@ -30,7 +30,9 @@
 		}
 	},
 	"supports": {
-		"html": false
+		"html": false,
+		"align": [ "full" ],
+		"alignWide": true
 	},
 	"textdomain": "sunflower-next-events",
 	"editorScript": "file:./index.js",

diff --git a/theme.json b/theme.json
@@ -3,6 +3,7 @@
 	"version": 3,
 	"settings": {
 		"appearanceTools": false,
+		"useRootPaddingAwareAlignments": true,
 		"color": {
 			"palette": [
 				{
@@ -128,5 +129,16 @@
 				}
 			]
 		}
-	}
+	},
+	"styles": {
+		"spacing": {
+		  "padding": {
+			"top": "0px",
+			"bottom": "0px",
+			"right": "2rem",
+			"left": "2rem"
+		  }
+		}
+	  }
+
 }