Payton (work in progress) (#4969)

* Payton: Add theme screenshot.

* Payton: Update readme.txt and style.css with theme info and image credits.

* Payton: Style tweaks (update default color scheme, use font size presets for headings).

* Payton: Update header spacing - remove the spacer block.

* Payton: Remove separator under nav menu.

* Payton: Update header spacing on blog and single post page.

payton/block-template-parts/header.html

@@ -3,10 +3,6 @@
 	<!-- wp:navigation {"itemsJustification":"center","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"fontFamily":"var:preset|font-family|overpass"}},"fontSize":"small"} -->
 	<!-- /wp:navigation -->
 
-	<!-- wp:separator {"color":"tertiary","align":"full","className":"is-style-wide"} -->
-	<hr class="wp-block-separator alignfull has-text-color has-background has-tertiary-background-color has-tertiary-color is-style-wide"/>
-	<!-- /wp:separator -->
-
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"6vh","bottom":"6vh"}}}} -->
 	<div class="wp-block-group" style="padding-top:6vh;padding-bottom:6vh">
 		<!-- wp:site-logo {"align":"center"} /-->

payton/block-templates/index.html

@@ -8,11 +8,10 @@
 	<hr class="wp-block-separator has-text-color has-background has-tertiary-background-color has-tertiary-color"/>
 	<!-- /wp:separator -->
 
-	<!-- wp:spacer {"height":30} -->
-	<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- wp:spacer {"height":10} -->
+	<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
 
-
 	<!-- wp:post-template {"align":"wide"} -->
 		<!-- wp:group -->
 		<div class="wp-block-group">

payton/block-templates/page.html

@@ -6,11 +6,7 @@
 	<hr class="wp-block-separator has-text-color has-background has-tertiary-background-color has-tertiary-color"/>
 	<!-- /wp:separator -->
 
-	<!-- wp:spacer {"height":30} -->
-	<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
-
-	<!-- wp:post-title {"textAlign":"center","level":1} /-->
+	<!-- wp:post-title {"textAlign":"center","level":1,"style":{"spacing":{"margin":{"top":"8vh","bottom":"0"}}}} /-->
 	<!-- wp:post-featured-image /-->
 </div>
 <!-- /wp:group -->

payton/block-templates/single.html

@@ -7,8 +7,8 @@
 	<hr class="wp-block-separator has-text-color has-background has-tertiary-background-color has-tertiary-color"/>
 	<!-- /wp:separator -->
 
-	<!-- wp:spacer {"height":30} -->
-	<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- wp:spacer {"height":10} -->
+	<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
 
 	<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->

payton/child-theme.json

@@ -1,91 +1,91 @@
 {
 	"$schema": "https://json.schemastore.org/theme-v1.json",
 	"version": 1,
-    "settings": {
-        "color": {
-            "palette": [
-                {
-                    "slug": "primary",
-                    "color": "#111111",
-                    "name": "Primary"
-                },
-                {
-                    "slug": "secondary",
-                    "color": "#557769",
-                    "name": "Secondary"
-                },
-                {
-                    "slug": "foreground",
-                    "color": "#323232",
-                    "name": "Foreground"
-                },
-                {
-                    "slug": "background",
-                    "color": "#ffffff",
-                    "name": "Background"
-                },
-                {
-                    "slug": "tertiary",
-                    "color": "#d5e1dc",
-                    "name": "Tertiary"
-                }
-            ]
-        },
-        "custom": {
-            "separator": {
-                "margin": "var(--wp--custom--gap--vertical) auto"
-            }
-        },
-        "layout": {
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "primary",
+					"color": "#111111",
+					"name": "Primary"
+				},
+				{
+					"slug": "secondary",
+					"color": "#557769",
+					"name": "Secondary"
+				},
+				{
+					"slug": "foreground",
+					"color": "#686868",
+					"name": "Foreground"
+				},
+				{
+					"slug": "background",
+					"color": "#ffffff",
+					"name": "Background"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#d5e1dc",
+					"name": "Tertiary"
+				}
+			]
+		},
+		"custom": {
+			"separator": {
+				"margin": "var(--wp--custom--gap--vertical) auto"
+			}
+		},
+		"layout": {
 			"contentSize": "684px",
 			"wideSize": "1194px"
 		},
-        "typography": {
-            "customFontSize": true,
-            "customLineHeight": true,
-            "fontFamilies": [
-                {
-                    "fontFamily": "\"Source Serif Pro\", serif",
-                    "slug": "source-serif-pro",
-                    "name": "Source Serif Pro",
-                    "google": "family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400;1,700"
-                },
-                {
-                    "fontFamily": "\"Overpass\", sans-serif",
-                    "slug": "overpass",
-                    "name": "Overpass",
-                    "google": "family=Overpass:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700"
-                }
-            ],
-            "fontSizes": [
-                {
-                    "name": "Small",
-                    "size": "16px",
-                    "slug": "small"
-                },
-                {
-                    "name": "Normal",
-                    "size": "18px",
-                    "slug": "normal"
-                },
-                {
-                    "name": "Medium",
-                    "size": "24px",
-                    "slug": "medium"
-                },
-                {
-                    "name": "Large",
-                    "size": "28px",
-                    "slug": "large"
-                },
-                {
-                    "name": "Huge",
-                    "size": "32px",
-                    "slug": "huge"
-                }
-            ]
-        }
-    },
+		"typography": {
+			"customFontSize": true,
+			"customLineHeight": true,
+			"fontFamilies": [
+				{
+					"fontFamily": "\"Source Serif Pro\", serif",
+					"slug": "source-serif-pro",
+					"name": "Source Serif Pro",
+					"google": "family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400;1,700"
+				},
+				{
+					"fontFamily": "\"Overpass\", sans-serif",
+					"slug": "overpass",
+					"name": "Overpass",
+					"google": "family=Overpass:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700"
+				}
+			],
+			"fontSizes": [
+				{
+					"name": "Small",
+					"size": "16px",
+					"slug": "small"
+				},
+				{
+					"name": "Normal",
+					"size": "18px",
+					"slug": "normal"
+				},
+				{
+					"name": "Medium",
+					"size": "24px",
+					"slug": "medium"
+				},
+				{
+					"name": "Large",
+					"size": "28px",
+					"slug": "large"
+				},
+				{
+					"name": "Huge",
+					"size": "32px",
+					"slug": "huge"
+				}
+			]
+		}
+	},
 	"styles": {
 		"blocks": {
 			"core/button": {
@@ -103,8 +103,7 @@
 			"core/post-title": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
-					"fontSize": "36px",
-					"fontWeight": "700",
+					"fontSize": "var(--wp--preset--font-size--huge)",
 					"lineHeight": 1.2
 				},
 				"color": {
@@ -120,48 +119,52 @@
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--huge)"
 				}
+			},
+			"core/site-title": {
+				"spacing": {
+					"margin": {
+						"bottom": "0"
+					}
+				}
 			}
 		},
-        "elements": {
-            "h1": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)",
-                    "fontSize": "36px"
-                }
-            },
-            "h2": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)",
-                    "fontSize": "30px"
-                }
-            },
-            "h3": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)",
-                    "fontSize": "24px"
-                }
-            },
-            "h4": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)",
-                    "fontSize": "18px"
-                }
-            },
-            "h5": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)",
-                    "fontSize": "16px"
-                }
-            },
-            "h6": {
-                "typography": {
-                    "fontFamily": "var(--wp--preset--font-family--overpass)",
-                    "fontSize": "16px"
-                }
-            }
-        },
-		"spacing": {
-			"blockGap": "1em"
+		"elements": {
+			"h1": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--overpass)",
+					"fontSize": "var(--wp--preset--font-size--huge)"
+				}
+			},
+			"h2": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--overpass)",
+					"fontSize": "var(--wp--preset--font-size--large)"
+				}
+			},
+			"h3": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--overpass)",
+					"fontSize": "var(--wp--preset--font-size--medium)"
+				}
+			},
+			"h4": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--overpass)",
+					"fontSize": "var(--wp--preset--font-size--normal)"
+				}
+			},
+			"h5": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--overpass)",
+					"fontSize": "var(--wp--preset--font-size--small)"
+				}
+			},
+			"h6": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--overpass)",
+					"fontSize": "var(--wp--preset--font-size--small)"
+				}
+			}
 		},
 		"typography": {
 			"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",

payton/readme.txt

@@ -1,8 +1,8 @@
 === Payton ===
 Contributors: Automattic
-Requires at least: 5.7
-Tested up to: 5.7.2
-Requires PHP: 5.6.2
+Requires at least: 5.8
+Tested up to: 5.8
+Requires PHP: 5.7
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -10,10 +10,6 @@ License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
 Payton is a simple blogging theme that supports full-site editing. It comes with a set of minimal templates and design settings that can be manipulated through Global Styles.
 
-== About Payton ==
-
-For more information see our README.md file.
-
 == Changelog ==
 
 = 1.0 =
@@ -35,3 +31,23 @@ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.
 
 Payton uses the following third-party resources:
+
+Assorted Color Leaves by Evie Schaffer
+Source: https://www.pexels.com/photo/assorted-color-leaves-2652346/
+Included in theme screenshot.
+
+Book, Coffee, and Hand Cream Flatlay by Vanesa Conunaese
+Source: https://unsplash.com/photos/HoYkFpI8yd4
+Included in theme screenshot.
+
+Bath Accessories by Diana Akhmetianova
+Source: https://unsplash.com/photos/pBBxMUCgwuU
+Included in theme demo.
+
+Green Goddess Pita by Alexandra Golovac
+Source: https://unsplash.com/photos/MAbhhj3QCXQ
+Included in theme demo.
+
+Soap Product Photography by Visual Stories || Micheile
+Source: https://unsplash.com/photos/2Cp7Tdu9t9U
+Included in theme demo.

payton/style.css

@@ -1,17 +1,49 @@
 /*
 Theme Name: Payton
-Theme URI:
-Author:
-Author URI:
-Description:
-Requires at least: 5.7
-Tested up to: 5.7
+Theme URI: https://github.com/automattic/themes/tree/trunk/payton
+Author: Automattic
+Author URI: https://automattic.com/
+Description: Payton is a simple blogging theme that supports full-site editing. It comes with a set of minimal templates and design settings that can be manipulated through Global Styles.
+Requires at least: 5.8
+Tested up to: 5.8
 Requires PHP: 5.7
 Version: 0.0.8
 License: GNU General Public License v2 or later
 License URI:
 Template: blockbase
 Text Domain: payton
-Tags: editor-style, auto-loading-homepage
+Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks, auto-loading-homepage
 
+Payton WordPress Theme, (C) 2021 Automattic, Inc.
+Payton is distributed under the terms of the GNU GPL.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 2 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+Assorted Color Leaves by Evie Schaffer
+Source: https://www.pexels.com/photo/assorted-color-leaves-2652346/
+Included in theme screenshot.
+
+Book, Coffee, and Hand Cream Flatlay by Vanesa Conunaese
+Source: https://unsplash.com/photos/HoYkFpI8yd4
+Included in theme screenshot.
+
+Bath Accessories by Diana Akhmetianova
+Source: https://unsplash.com/photos/pBBxMUCgwuU
+Included in theme demo.
+
+Green Goddess Pita by Alexandra Golovac
+Source: https://unsplash.com/photos/MAbhhj3QCXQ
+Included in theme demo.
+
+Soap Product Photography by Visual Stories || Micheile
+Source: https://unsplash.com/photos/2Cp7Tdu9t9U
+Included in theme demo.
 */

payton/theme.json

@@ -50,7 +50,7 @@
 				},
 				{
 					"slug": "foreground",
-					"color": "#323232",
+					"color": "#686868",
 					"name": "Foreground"
 				},
 				{
@@ -184,7 +184,7 @@
 				"color": {
 					"background": "transparent",
 					"boxShadow": "none",
-					"text": "inherit"
+					"text": "var(--wp--custom--color--foreground)"
 				},
 				"label": {
 					"spacing": {
@@ -428,9 +428,8 @@
 				},
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
-					"fontSize": "36px",
-					"lineHeight": 1.2,
-					"fontWeight": "700"
+					"fontSize": "var(--wp--preset--font-size--huge)",
+					"lineHeight": 1.2
 				},
 				"color": {
 					"text": "var(--wp--custom--color--primary)"
@@ -463,12 +462,6 @@
 					}
 				}
 			},
-			"core/search": {
-				"typography": {
-					"fontSize": "var(--wp--custom--button--typography--font-size)",
-					"lineHeight": "var(--wp--custom--body--typography--line-height)"
-				}
-			},
 			"core/separator": {
 				"color": {
 					"text": "var(--wp--custom--color--foreground)"
@@ -479,12 +472,29 @@
 					"width": "0 0 1px 0"
 				}
 			},
+			"core/site-title": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"fontWeight": 700
+				},
+				"spacing": {
+					"margin": {
+						"bottom": "0"
+					}
+				}
+			},
 			"core/quote": {
 				"border": {
 					"color": "var(--wp--custom--color--primary)",
 					"style": "solid",
 					"width": "0 0 0 1px"
 				},
+				"citation": {
+					"typography": {
+						"fontSize": "var(--wp--custom--font-sizes--tiny)",
+						"fontWeight": "400"
+					}
+				},
 				"spacing": {
 					"padding": {
 						"left": "var(--wp--custom--gap--horizontal)"
@@ -494,13 +504,6 @@
 					"fontSize": "var(--wp--preset--font-size--normal)",
 					"fontStyle": "normal"
 				}
-			},
-			"core/site-title": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--normal)",
-					"fontWeight": "700",
-					"textDecoration": "none"
-				}
 			}
 		},
 		"color": {
@@ -513,7 +516,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "36px"
+					"fontSize": "var(--wp--preset--font-size--huge)"
 				},
 				"spacing": {
 					"margin": {
@@ -527,7 +530,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "30px"
+					"fontSize": "var(--wp--preset--font-size--large)"
 				},
 				"spacing": {
 					"margin": {
@@ -541,7 +544,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "24px"
+					"fontSize": "var(--wp--preset--font-size--medium)"
 				},
 				"spacing": {
 					"margin": {
@@ -555,7 +558,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "18px"
+					"fontSize": "var(--wp--preset--font-size--normal)"
 				},
 				"spacing": {
 					"margin": {
@@ -569,7 +572,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "16px"
+					"fontSize": "var(--wp--preset--font-size--small)"
 				},
 				"spacing": {
 					"margin": {
@@ -583,7 +586,7 @@
 					"fontFamily": "var(--wp--preset--font-family--overpass)",
 					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
-					"fontSize": "16px"
+					"fontSize": "var(--wp--preset--font-size--small)"
 				},
 				"spacing": {
 					"margin": {
@@ -599,7 +602,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "1em"
+			"blockGap": "calc(2 * var(--wp--custom--gap--baseline))"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",