Merge branch 'feat/global-block-layout' into feat/global-color-schemes

Author: kaeizen

src/styles/block-design-system-blocks.scss

@@ -118,6 +118,8 @@
 
 .stk--container-small .stk-container:not(.stk--no-padding) {
 	#{ '--stk-container-padding' }: cssvar(container-padding-small);
+	#{ '--stk-container-padding-hover' }: cssvar(container-padding-small);
+	#{ '--stk-container-padding-parent-hover' }: cssvar(container-padding-small);
 }
 .stk-container:not(.stk--no-background) {
 	background-color: cssvar(container-background-color);

src/styles/block-design-system.json

@@ -39,6 +39,34 @@
 				"parent-hover": true
 			}
 		},
+		"container-padding-large": {
+			"desktop": {
+				"top": 64,
+				"right": 80,
+				"bottom": 64,
+				"left": 80
+			},
+			"mobile": {
+				"top": 32,
+				"right": 24,
+				"bottom": 32,
+				"left": 24
+			}
+		},
+		"container-padding-small": {
+			"desktop": {
+				"top": 16,
+				"right": 32,
+				"bottom": 16,
+				"left": 32
+			},
+			"mobile": {
+				"top": 8,
+				"right": 24,
+				"bottom": 8,
+				"left": 24
+			}
+		},
 		"container-border-style": {
 			"desktop": ""
 		},

src/styles/block-design-system.php

@@ -46,6 +46,34 @@ public static function get_block_design_system() {
 						"left" => 24
 					),
 				),
+				"container-padding-large" => array(
+					"desktop" => array(
+						"top" => 64,
+						"right" => 80,
+						"bottom" => 64,
+						"left" => 80
+					),
+					"mobile" => array(
+						"top" => 32,
+						"right" => 24,
+						"bottom" => 32,
+						"left" => 24
+					)
+				),
+				"container-padding-small" => array(
+					"desktop" => array(
+						"top" => 16,
+						"right" => 32,
+						"bottom" => 16,
+						"left" => 32
+					),
+					"mobile" => array(
+						"top" => 8,
+						"right" => 24,
+						"bottom" => 8,
+						"left" => 24
+					)
+				),
 				"container-border-style" => array(
 					"desktop" => ""
 				),

src/styles/block-design-system.scss

@@ -34,6 +34,14 @@ $block-design-system: (
 	),
 	container-padding-hover: cssvar(container-padding),
 	container-padding-parent-hover: cssvar(container-padding),
+	container-padding-large: (
+		desktop: 64px 80px,
+		mobile: 32px 24px,
+	),
+	container-padding-small: (
+		desktop: 16px 32px,
+		mobile: 8px 24px,
+	),
 	container-border-style: none,
 	container-border-width: 1px,
 	container-border-width-hover: cssvar(container-border-width),