Test WordPress/gutenberg#25446

experimental-theme.json

@@ -18,23 +18,23 @@
 				"fontSizes": [
 					{
 						"slug": "small",
-						"size": "calc(12px + 0.8vw)"
+						"size": "calc(var(--wp--custom--typo--root-size) * 1px / var(--wp--custom--typo--scale) + var(--wp--custom--typo--adaptive-ratio) * 1vw)"
 					},
 					{
 						"slug": "normal",
-						"size": "calc(17px + 0.8vw)"
+						"size": "calc(var(--wp--custom--typo--root-size) * 1px + var(--wp--custom--typo--adaptive-ratio) * 1vw)"
 					},
 					{
 						"slug": "medium",
-						"size": "calc(23px + 0.8vw)"
+						"size": "calc(var(--wp--custom--typo--root-size) * var(--wp--custom--typo--scale) * 1px + var(--wp--custom--typo--adaptive-ratio) * 1vw)"
 					},
 					{
 						"slug": "large",
-						"size": "calc(31px + 0.8vw)"
+						"size": "calc(var(--wp--custom--typo--root-size) * var(--wp--custom--typo--scale) * var(--wp--custom--typo--scale) * 1px + var(--wp--custom--typo--adaptive-ratio) * 1vw)"
 					},
 					{
 						"slug": "huge",
-						"size": "calc(41px + 0.8vw)"
+						"size": "calc(var(--wp--custom--typo--root-size) * var(--wp--custom--typo--scale) * var(--wp--custom--typo--scale) * var(--wp--custom--typo--scale) * 1px + var(--wp--custom--typo--adaptive-ratio) * 1vw)"
 					}
 				],
 				"fontFamilies": [
@@ -65,6 +65,18 @@
 				],
 				"customFontSize": false,
 				"customLineHeight": true
+			},
+			"custom": {
+				"typo": {
+					"rootSize": 16,
+					"adaptiveRatio": 0.8,
+					"scale": 1.333
+				},
+				"content": {
+					"defaultWidth": "calc((var(--wp--custom--typo--root-size) * 1px + var(--wp--custom--typo--adaptive-ratio) * 1vw) * 37)",
+					"wideWidth": "calc(1.5 * var(--wp--custom--content--default-width))",
+					"padding": "1em"
+				}
 			}
 		},
 		"styles": {

styles/blocks/core/template-part.css

@@ -0,0 +1,14 @@
+.wp-block-template-part {
+    padding: 0;
+}
+
+.wp-site-blocks .wp-block-template-part:not(.wp-block-template-part) {
+    transform: translateX(calc(0px - var(--wp--custom--content--padding)));
+    width: calc(100% + 2 * var(--wp--custom--content--padding));
+    max-width: calc(100% + 2 * var(--wp--custom--content--padding));
+    box-sizing: content-box;
+}
+
+.wp-site-blocks .wp-block-template-part > .alignfull {
+    width: 100%;
+}

styles/layout-editor.css

@@ -1,8 +1,3 @@
-.editor-styles-wrapper.editor-styles-wrapper { /* stylelint-disable-line no-empty-source */
-	--contentWidth: calc((16px + 0.8vw) * 37);
-	--wideWidth: calc(1.5 * var(--contentWidth));
-}
-
 .wp-block {
-	max-width: var(--contentWidth);
+	max-width: var(--wp--custom--content--default-width);
 }

styles/layout.css

@@ -1,50 +1,54 @@
-:root {
-	--contentWidth: calc((16px + 0.8vw) * 37);
-	--wideWidth: calc(1.5 * var(--contentWidth));
-}
-
 .wp-site-blocks {
-	--paddingHorizontal: 1em;
-	padding: 0 var(--paddingHorizontal);
+	padding: 0 var(--wp--custom--content--padding);
 }
 
 .wp-site-blocks > *:not(.wp-block-post-content),
 .wp-site-blocks .wp-block-post-content > * {
-	max-width: var(--contentWidth);
+	max-width: var(--wp--custom--content--default-width);
 	margin-left: auto;
 	margin-right: auto;
 }
 
 .wp-site-blocks .alignwide {
-	width: var(--wideWidth);
+	width: var(--wp--custom--content--wide-width);
 	max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
 }
 
 .wp-site-blocks .alignfull {
-	transform: translateX(calc(0px - var(--paddingHorizontal)));
-	width: calc(100% + 2 * var(--paddingHorizontal));
-	max-width: calc(100% + 2 * var(--paddingHorizontal));
+	transform: translateX(calc(0px - var(--wp--custom--content--padding)));
+	width: calc(100% + 2 * var(--wp--custom--content--padding));
+	max-width: calc(100% + 2 * var(--wp--custom--content--padding));
 	box-sizing: content-box;
 }
 
 .aligncenter {
 	text-align: center;
 }
 
-.wp-site-blocks .alignleft {
+.alignleft {
 	float: left;
 
-	/* margin-left: calc(50% - var(--contentWidth) / 2); */
+	/* margin-left: calc(50% - var(--wp--custom--content--default-width) / 2); */
 	margin-right: 2em;
 	max-width: 360px;
 }
 
-.wp-site-blocks .alignright {
+.alignright {
 	float: right;
 
-	/* margin-right: calc(50% - var(--contentWidth) / 2); */
+	/* margin-right: calc(50% - var(--wp--custom--content--default-width) / 2); */
 	margin-left: 2em;
 	max-width: 360px;
 }
+
+.has-background {
+	padding: var(--wp--custom--content--padding);
+}
+
+.wp-site-blocks .alignfull .alignfull {
+	transform: none;
+	max-width: 100%;
+	box-sizing: border-box;
+}