Appleton: Initial Commit (#5948)

* Initial Commit

Appleton - initial commit

* Template Parts Update

Added custom header and footer template parts w styling based on demo.

* Header template ref id removal

And theme.json version value update to 1.

* Typography and color updates

Typography updates in theme.json and header template padding value matching with the demo

* Template parts and Screenshot updates

- Removed ref from the header
- Footer as a template part
- Compressed Screenshot.png

appleton/parts/footer.html

@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"appleton/footer-default"} /-->

appleton/parts/header.html

@@ -0,0 +1,17 @@
+<!-- wp:group {"className":"gapless-group","layout":{"inherit":"true"}} -->
+<div class="wp-block-group gapless-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"20px","top":"40px","right":"4vw","left":"4vw"}}},"className":"site-header","layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignfull site-header" style="padding-top:40px;padding-right:4vw;padding-bottom:20px;padding-left:4vw"><!-- wp:group {"className":"site-brand","layout":{"type":"flex"}} -->
+<div class="wp-block-group site-brand"><!-- wp:site-logo {"width":64} /-->
+
+<!-- wp:group -->
+<div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"300","fontSize":"24px","letterSpacing":"1.4px"}},"textColor":"custom-superdark"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:navigation {"overlayMenu":"always","__unstableLocation":"primary","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":"30px"} -->
+<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

appleton/patterns/footer-default.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * Title: Default footer block pattern
+ * Slug: appleton/footer-default
+ * Categories: footer
+ * Block Types: core/template-part/footer
+ */
+?>
+
+<!-- wp:group {"style":{"color":{"text":"#fffffe","background":"#160e0e"},"spacing":{"padding":{"top":"6vw","bottom":"6vw","right":"30px","left":"30px"}},"typography":{"fontSize":"15px"}},"layout":{"inherit":false,"contentSize":"1400px"}} -->
+<div class="wp-block-group has-text-color has-background" style="background-color:#160e0e;color:#fffffe;font-size:15px;padding-top:6vw;padding-right:30px;padding-bottom:6vw;padding-left:30px"><!-- wp:columns {"align":"wide"} -->
+  <div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
+    <div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:group {"style":{"spacing":{"blockGap":{"top":"20px","left":"20px"}}}} -->
+      <div class="wp-block-group"><!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"fontStyle":"normal","fontWeight":"600","fontSize":"1.2rem","textTransform":"uppercase"}},"textColor":"background"} /-->
+
+        <!-- wp:paragraph -->
+        <p>
+          <?php
+          echo esc_html__('Photography portfolio website of a nature photographer, John Appleton.', 'appleton');
+          ?>
+        </p>
+        <!-- /wp:paragraph --></div>
+        <!-- /wp:group --></div>
+        <!-- /wp:column -->
+
+        <!-- wp:column {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
+        <div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:group {"style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
+          <div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"letterSpacing":"4px","fontSize":"14px","fontStyle":"normal","fontWeight":"500"},"color":{"text":"#666666"}}} -->
+            <p class="has-text-color" style="color:#666666;font-size:14px;font-style:normal;font-weight:500;letter-spacing:4px">
+              <?php
+                echo esc_html__('ADDRESS', 'appleton');
+              ?>
+            </p>
+            <!-- /wp:paragraph -->
+
+            <!-- wp:paragraph -->
+            <p>
+              <?php
+              echo sprintf( '%1$s<br>%2$s',
+              esc_html( '123 Example St,', 'appleton' ),
+              esc_html( 'CA 12345-6789', 'appleton' )
+            );
+            ?>
+          </p>
+          <!-- /wp:paragraph --></div>
+          <!-- /wp:group --></div>
+          <!-- /wp:column -->
+
+          <!-- wp:column {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
+          <div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px">
+            <!-- wp:paragraph {"style":{"typography":{"fontSize":"14px","fontStyle":"normal","fontWeight":"500","letterSpacing":"4px"},"color":{"text":"#666666"}}} -->
+            <p class="has-text-color" style="color:#666666;font-size:14px;font-style:normal;font-weight:500;letter-spacing:4px">
+              <?php
+              echo esc_html__('GET IN TOUCH', 'appleton');
+              ?>
+            </p>
+            <!-- /wp:paragraph -->
+
+            <!-- wp:social-links {"iconColor":"background","iconColorValue":"#ffffff","showLabels":true,"size":"has-normal-icon-size","className":"is-style-logos-only","layout":{"type":"flex","flexWrap":"wrap"}} -->
+            <ul class="wp-block-social-links has-normal-icon-size has-visible-labels has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"https://www.instagram.com","service":"instagram","label":"Instagram"} /-->
+
+              <!-- wp:social-link {"url":"https://www.deviantart.com","service":"deviantart"} /-->
+
+              <!-- wp:social-link {"url":"https://www.flickr.com","service":"flickr"} /--></ul>
+              <!-- /wp:social-links --></div>
+              <!-- /wp:column --></div>
+              <!-- /wp:columns --></div>
+              <!-- /wp:group -->

appleton/readme.txt

@@ -0,0 +1,31 @@
+=== Appleton ===
+Contributors: Automattic
+Requires at least: 5.8
+Tested up to: 5.9
+Requires PHP: 5.7
+License: GPLv2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+== Description ==
+
+Appleton is a theme for creative professionals, such as photographers, designers and artists.
+
+== Changelog ==
+
+= 0.0.1 =
+* Initial release
+
+== Copyright ==
+
+Appleton WordPress Theme, (C) 2022 Automattic
+Appleton 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.

appleton/style.css

@@ -0,0 +1,16 @@
+/*
+Theme Name: Appleton
+Theme URI: https://github.com/automattic/themes/tree/trunk/appleton
+Author: Automattic
+Author URI: https://automattic.com
+Description: Appleton is a theme for creative professionals, such as photographers, designers and artists.
+Requires at least: 5.8
+Tested up to: 5.9
+Requires PHP: 5.7
+Version: 0.0.1
+License: GNU General Public License v2 or later
+License URI: https://raw.githubusercontent.com/Automattic/themes/trunk/LICENSE
+Template: blockbase
+Text Domain: appleton
+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
+*/

appleton/theme.json

@@ -0,0 +1,80 @@
+{
+	"version": 1,
+	"styles": {
+		"elements": {
+			"link": {
+				"color": {
+					"text": "var:preset|color|custom-superdark"
+				}
+			}
+		},
+		"blocks": {
+			"core/heading": {
+				"typography": {
+					"fontStyle": "normal",
+					"fontWeight": "300",
+					"letterSpacing": "1.4px"
+				}
+			}
+		},
+		"typography": {
+			"fontStyle": "normal",
+			"fontWeight": "400",
+			"fontSize": "var:preset|font-size|small"
+		}
+	},
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"color": "#111111",
+					"name": "Superdark",
+					"slug": "custom-superdark"
+				},
+				{
+					"slug": "primary",
+					"color": "#007cba",
+					"name": "Primary"
+				},
+				{
+					"slug": "secondary",
+					"color": "#006ba1",
+					"name": "Secondary"
+				},
+				{
+					"slug": "foreground",
+					"color": "#444444",
+					"name": "Foreground"
+				},
+				{
+					"slug": "background",
+					"color": "#ffffff",
+					"name": "Background"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#F0F0F0",
+					"name": "Tertiary"
+				}
+			]
+		},
+		"typography": {
+			"fontFamilies": [
+				{
+					"fontFamily": "\"Inter\", sans-serif",
+					"slug": "body-font",
+					"name": "Body (Inter)",
+					"google": "family=Inter:wght@100..900",
+					"fontSlug": "inter"
+				},
+				{
+					"fontFamily": "\"Inter\", sans-serif",
+					"slug": "heading-font",
+					"name": "Heading (Inter)",
+					"google": "family=Inter:wght@100..900",
+					"fontSlug": "inter"
+				}
+			]
+		}
+	}
+}