import sample-wp-block-theme

.wp-env.json

@@ -0,0 +1,4 @@
+{
+  "core": null,
+  "themes": [ "." ]
+}

README.md

@@ -0,0 +1,69 @@
+# sample-wp-block-theme
+
+Repo for practice task for Autonomic front-end recruitment.
+
+**Instructions:**
+- Replicate [craze.co.uk](https://craze.co.uk) as a WordPress block theme.
+- Notes:
+  - You can use the provided 'Inter' font in `/assets/fonts/` as the main sans-serif font in use on the site.
+  - Similarly, you can use any monospace font in place of the MD IO typeface the website is using for monospace text.
+  - The breadcrumb on top doesn't need to be functionaly. You can use static text.
+  - You don't need to copy all of the site's content. Feel free to use placeholder text.
+  - Majority of the site's styling should be implemented via `theme.json`.
+  - The theme should have at least two templates, an index or home template, and a single page/post template.
+
+## Running the site locally
+
+**Note** With all methods, you'll see a white screen when you visit the local
+instance, because this theme is blank! You can check things are working by
+visiting the local URL before the `theme activate` step, or just go straight to
+the dashboard at `/wp-admin` and start hacking.
+
+### `wp-env`
+
+**Note** The latest `wp-env` requires "Docker Compose V2"; if `docker compose`
+gives `'compose' is not a docker command.` then run `npm -g i
+@wordpress/env@8.13.0` instead of the first command.
+
+You can launch an instance of WordPress pre-installed with this theme using the `wp-env` tool.
+
+```sh
+$ npm -g i @wordpress/env
+$ cd /path/to/theme/Repo
+$ wp-env start
+$ wp-env run cli wp theme activate sample-wp-block-theme
+```
+
+This will launch a WordPress local instance at http://localhost:8888. You can log into the dashboard at http://localhost:8888/wp-admin with `admin` as the username and `password` as the password.
+
+**Note:** This method assumes you already have `docker` and `docker-compose` installed locally.
+
+### Lando
+
+Install Lando, then:
+
+```sh
+$ lando start
+$ lando wp --path=/app/web/ core install \
+    --title="Dev Env" \
+    --admin_user=admin --admin_password=admin --admin_email=admin@example.com \
+    --skip-email --url=https://sample-block-theme.lndo.site/
+$ lando wp --path=/app/web/ theme activate sample-wp-block-theme
+```
+
+### docker-compose
+
+Install Docker-compose, then:
+
+```sh
+$ docker-compose up -d
+# wait a few seconds, run `docker-compose logs` to check start-up
+$ docker-compose exec --user=user wordpress wp core install \
+    --title="Dev Env" \
+    --admin_user=admin --admin_password=admin --admin_email=admin@example.com \
+    --skip-email --url=http://sample-block-theme.localhost:8080
+$ docker-compose exec --user=user wordpress wp theme activate sample-wp-block-theme
+```
+
+This should also work with `docker compose` (i.e. newwer Docker / Compose 2);
+just replace `docker-compose` with `docker compose` in the above.

assets/fonts/inclusive-sans/inclusive-sans.css

@@ -0,0 +1,15 @@
+/* inclusive-sans-italic */
+@font-face {
+	font-family: Inclusive Sans;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Inclusive Sans Italic"), local("InclusiveSans-Italic"), url(inclusive-sans-italic.woff2) format("woff2");
+}
+/* inclusive-sans-regular */
+@font-face {
+	font-family: Inclusive Sans;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Inclusive Sans Regular"), local("InclusiveSans-Regular"), url(inclusive-sans-regular.woff2) format("woff2");
+}
+

assets/fonts/overused-grotesk/overused-grotesk.css

@@ -0,0 +1,99 @@
+/* overused-grotesk-semibold-italic */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Overused Grotesk SemiBold Italic"), local("OverusedGrotesk-SemiBoldItalic"), url(overused-grotesk-semibold-italic.woff2) format("woff2");
+}
+/* overused-grotesk-semibold */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Overused Grotesk SemiBold"), local("OverusedGrotesk-SemiBold"), url(overused-grotesk-semibold.woff2) format("woff2");
+}
+/* overused-grotesk-regular */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Overused Grotesk Regular"), local("OverusedGrotesk-Regular"), url(overused-grotesk-regular.woff2) format("woff2");
+}
+/* overused-grotesk-medium-italic */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: italic;
+	font-weight: 500;
+	src: local("Overused Grotesk Medium Italic"), local("OverusedGrotesk-MediumItalic"), url(overused-grotesk-medium-italic.woff2) format("woff2");
+}
+/* overused-grotesk-medium */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: normal;
+	font-weight: 500;
+	src: local("Overused Grotesk Medium"), local("OverusedGrotesk-Medium"), url(overused-grotesk-medium.woff2) format("woff2");
+}
+/* overused-grotesk-light-italic */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: italic;
+	font-weight: 300;
+	src: local("Overused Grotesk Light Italic"), local("OverusedGrotesk-LightItalic"), url(overused-grotesk-light-italic.woff2) format("woff2");
+}
+/* overused-grotesk-light */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: normal;
+	font-weight: 300;
+	src: local("Overused Grotesk Light"), local("OverusedGrotesk-Light"), url(overused-grotesk-light.woff2) format("woff2");
+}
+/* overused-grotesk-italic */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Overused Grotesk Italic"), local("OverusedGrotesk-Italic"), url(overused-grotesk-italic.woff2) format("woff2");
+}
+/* overused-grotesk-extrabold-italic */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Overused Grotesk ExtraBold Italic"), local("OverusedGrotesk-ExtraBoldItalic"), url(overused-grotesk-extrabold-italic.woff2) format("woff2");
+}
+/* overused-grotesk-extrabold */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Overused Grotesk ExtraBold"), local("OverusedGrotesk-ExtraBold"), url(overused-grotesk-extrabold.woff2) format("woff2");
+}
+/* overused-grotesk-bold-italic */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: italic;
+	font-weight: 700;
+	src: local("Overused Grotesk Bold Italic"), local("OverusedGrotesk-BoldItalic"), url(overused-grotesk-bold-italic.woff2) format("woff2");
+}
+/* overused-grotesk-bold */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Overused Grotesk Bold"), local("OverusedGrotesk-Bold"), url(overused-grotesk-bold.woff2) format("woff2");
+}
+/* overused-grotesk-black-italic */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: italic;
+	font-weight: 900;
+	src: local("Overused Grotesk Black Italic"), local("OverusedGrotesk-BlackItalic"), url(overused-grotesk-black-italic.woff2) format("woff2");
+}
+/* overused-grotesk-black */
+@font-face {
+	font-family: Overused Grotesk;
+	font-style: normal;
+	font-weight: 900;
+	src: local("Overused Grotesk Black"), local("OverusedGrotesk-Black"), url(overused-grotesk-black.woff2) format("woff2");
+}
+

functions.php

@@ -0,0 +1,10 @@
+<?php
+
+add_action('init', 'custom_stylesheet');
+ 
+function custom_stylesheet() {
+    wp_register_style( 'custom-styles', get_template_directory_uri() . '/style.css' );
+    wp_enqueue_style( 'custom-styles' );
+}
+
+add_action( 'wp_enqueue_scripts', 'custom_stylesheet' );

parts/footer.html

@@ -0,0 +1,15 @@
+<!-- wp:group {"layout":{"type":"flex", "justifyContent":"space-between"}} -->
+<div class="wp-block-group">
+  <!-- wp:group {"layout":{"type":"flex"}} -->
+  <div class="wp-block-group">
+    <!-- wp:navigation-link {"label":"© Rutherford Craze","url":"https://localhost:8080/about"} -->
+    <!-- /wp:navigation-link -->
+    <!-- wp:navigation-link {"label":"Webring","url":"https://webring.xxiivv.com/"} -->
+    <!-- /wp:navigation-link -->
+  </div>
+  <!-- /wp:group -->
+  <!-- wp:paragraph -->
+  <!-- wp:post-date {"className": "build-date", "textAlign":"right"}  /-->
+  <!-- /wp:paragraph -->
+</div>
+<!-- /wp:group -->

parts/header.html

@@ -0,0 +1,4 @@
+<!-- wp:navigation -->
+<!-- wp:navigation-link {"label":"index","url":"https://localhost:8080/", "className": "bread-crumb"} -->
+<!-- /wp:navigation-link -->
+<!-- /wp:navigation -->

style.css

@@ -0,0 +1,6 @@
+/*
+Theme Name: Lex Scotland
+Author: Autonomic Co-op
+Description: Full-site-editing wordpress theme for lexscotland.org
+Tags: full-site-editing, block-patterns
+*/

templates/index.html

@@ -0,0 +1,60 @@
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:spacer {"height":"16px"} -->
+  <div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
+  <!-- /wp:spacer -->
+  
+  <!-- wp:template-part {"slug":"header","theme":"sample-wp-block-theme", "tagName":"header"} /-->
+  
+  <!-- wp:heading {"textAlign":"left","level":1} -->
+  <h1 class="wp-block-heading has-text-align-left">
+            Rutherford Craze is a type designer and developer interested in visual
+            systems, technology, and tools.
+          </h1>
+  <!-- /wp:heading -->
+  
+  <!-- wp:group {"layout":{"type":"flex"}} -->
+  <div class="wp-block-group"><!-- wp:navigation-link {"label":"About","url":"https://localhost:8080/about","className":"curly-braced"} /-->
+  
+  <!-- wp:paragraph -->
+  <p>⋅</p>
+  <!-- /wp:paragraph -->
+  
+  <!-- wp:navigation-link {"label":"Now","url":"https://localhost:8080/now","className":"curly-braced"} /-->
+  
+  <!-- wp:paragraph -->
+  <p>⋅</p>
+  <!-- /wp:paragraph -->
+  
+  <!-- wp:navigation-link {"label":"Links","url":"https://localhost:8080/links","className":"curly-braced"} /--></div>
+  <!-- /wp:group -->
+  
+  <!-- wp:spacer {"height":"16px"} -->
+  <div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
+  <!-- /wp:spacer -->
+  
+  <!-- wp:heading -->
+  <h2 class="wp-block-heading">Work</h2>
+  <!-- /wp:heading -->
+  
+  <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
+  <main class="wp-block-group"><!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[]}} -->
+  <div class="wp-block-query"><!-- wp:post-template -->
+  <!-- wp:columns -->
+  <div class="wp-block-columns"><!-- wp:column -->
+  <div class="wp-block-column"><!-- wp:post-title {"level":3,"isLink":true,"className":"curly-braced"} /--></div>
+  <!-- /wp:column -->
+  
+  <!-- wp:column -->
+  <div class="wp-block-column"><!-- wp:post-date {"textAlign":"right","format":"M Y"} /--></div>
+  <!-- /wp:column --></div>
+  <!-- /wp:columns -->
+  <!-- /wp:post-template --></div>
+  <!-- /wp:query --></main>
+  <!-- /wp:group -->
+  
+  <!-- wp:spacer {"height":"400px"} -->
+  <div style="height:400px" aria-hidden="true" class="wp-block-spacer"></div>
+  <!-- /wp:spacer -->
+  
+  <!-- wp:template-part {"slug":"footer","theme":"sample-wp-block-theme"} /--></div>
+  <!-- /wp:group -->

templates/single.html

@@ -0,0 +1,27 @@
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
+<div class="wp-block-group">
+  
+  <!-- wp:spacer {"height":"16px"} -->
+  <div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
+  <!-- /wp:spacer -->
+
+  <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+  <!-- wp:spacer {"height":"8px"} -->
+  <div style="height:8px" aria-hidden="true" class="wp-block-spacer"></div>
+  <!-- /wp:spacer -->
+
+  <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
+  <main class="wp-block-group">
+    <!-- wp:post-title /-->
+    <!-- wp:post-content /-->
+  </main>
+  <!-- /wp:group -->
+
+    <!-- wp:spacer {"height":"400px"} -->
+    <div style="height:400px" aria-hidden="true" class="wp-block-spacer"></div>
+    <!-- /wp:spacer -->
+
+  <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+</div>
+<!-- /wp:group -->

theme.json

@@ -0,0 +1,122 @@
+{
+  "version": 2,
+  "$schema": "https://schemas.wp.org/trunk/theme.json",
+  "settings": {
+    "useRootPaddingAwareAlignments": true,
+    "appearanceTools": true,
+    "layout": {
+      "contentSize": "590px"
+    },
+    "color": {
+      "palette": [
+        {
+          "slug": "background",
+          "color": "#F3F7F6",
+          "name": "Background"
+        },
+        {
+          "slug": "background-code",
+          "color": "#DEE1E0",
+          "name": "Background Code"
+        },
+        {
+          "slug": "text",
+          "color": "#25211D",
+          "name": "Text"
+        },
+        {
+          "slug": "secondary",
+          "color": "#999",
+          "name": "Secondary"
+        },
+        {
+          "slug": "lines",
+          "color": "#bbb",
+          "name": "Lines"
+        }
+      ]
+    },
+    "typography": {
+      "fontFamilies": [
+        {
+          "fontFamily": "Inter, sans-serif",
+          "name": "Inter",
+          "slug": "inter",
+          "fontFace": [
+            {
+              "fontFamily": "Inter",
+              "fontWeight": "400",
+              "fontStyle": "normal",
+              "fontStretch": "normal",
+              "src": ["file:./assets/fonts/inter_normal_400.ttf"]
+            },
+            {
+              "fontFamily": "Inter",
+              "fontWeight": "700",
+              "fontStyle": "normal",
+              "fontStretch": "normal",
+              "src": ["file:./assets/fonts/inter_normal_700.ttf"]
+            }
+
+          ]
+        }
+      ]
+    }
+  },
+  "styles": {
+    "color": {
+      "background": "var(--wp--preset--color--background)"
+    },
+    "typography": {
+      "fontFamily": "Inter"
+    },
+    "blocks": {
+      "core/post-date": {
+        "color": {
+          "text": "var(--wp--preset--color--secondary)"
+        }
+      },
+      "core/post-title": {
+        "typography": {
+          "fontSize": "30px",
+          "fontWeight": "700"
+        }
+      }
+    },
+    "elements": {
+      "h1": {
+        "typography": {
+          "fontSize": "30px",
+          "fontWeight": "700"
+        }
+      },
+      "h2": {
+        "typography": {
+          "fontSize": "22.5px",
+          "fontWeight": "400"
+        }
+      },
+      "h3": {
+        "typography": {
+          "fontSize": "15px",
+          "fontWeight": "400"
+        }
+      },
+      "link": {
+        "color": {
+          "text": "var(--wp--preset--color--text)"
+        },
+        ":visited": {
+          "color": {
+            "text": "var(--wp--preset--color--text)"
+          }
+        },
+        ":hover": {
+          "color": {
+            "text": "var(--wp--preset--color--secondary)"
+          }
+        }
+      }
+    }
+  }
+}