Merge pull request #120 from WordPress/try/photo-block-theme

Try: A simple photoblogging theme

README.md

@@ -13,6 +13,7 @@ This repository is dedicated to exploring how WordPress themes can best leverage
 | [Ambitious](https://github.com/WordPress/theme-experiments/tree/master/ambitious) | Gutenberg 7.6 |
 | [Empty Theme](https://github.com/WordPress/theme-experiments/tree/master/emptytheme) | Gutenberg 9.5 |
 | [Gutenberg Starter Theme Blocks](https://github.com/WordPress/theme-experiments/tree/master/gutenberg-starter-theme-blocks) | Gutenberg 8.6 |
+| [Photo Blocks](https://github.com/WordPress/theme-experiments/tree/master/photo-blocks) | Gutenberg 9.5 |
 | [Twenty Nineteen Blocks](https://github.com/WordPress/theme-experiments/tree/master/twentynineteen-blocks) | Gutenberg 8.6 |
 | [Twenty Twenty Blocks](https://github.com/WordPress/theme-experiments/tree/master/twentytwenty-blocks) | Gutenberg 8.6 |
 | [Twenty Twenty-One Blocks](https://github.com/WordPress/theme-experiments/tree/master/twentytwentyone-blocks) | Gutenberg 9.4 |

photo-blocks/README.md

@@ -0,0 +1,3 @@
+# Photo Blocks
+
+A simple photoblogging theme.

photo-blocks/assets/alignments-front.css

@@ -0,0 +1,79 @@
+/*
+ * Alignments, loaded in the front-end only.
+ */
+
+body {
+	margin: 0;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+.wp-site-blocks,
+.wp-block-template-part.alignfull {
+	padding: 0 var(--wp--custom--margin--horizontal);
+}
+
+.wp-site-blocks > *:not(.wp-block-post-content),
+.wp-site-blocks .wp-block-post-content > * {
+	max-width: var(--wp--custom--width--default);
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wp-site-blocks .alignwide {
+	width: var(--wp--custom--width--wide);
+	max-width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wp-site-blocks .alignfull {
+	transform: translateX(calc(0px - var(--wp--custom--margin--horizontal)));
+	width: calc(100% + (2 * var(--wp--custom--margin--horizontal)));
+	max-width: calc(100% + (2 * var(--wp--custom--margin--horizontal)));
+	margin-left: 0;
+	margin-right: 0;
+	box-sizing: content-box;
+}
+
+.wp-site-blocks .wp-block-template-part.alignfull {
+	width: 100%;
+	max-width: 100%;
+}
+
+.wp-site-blocks .wp-block-columns.alignfull {
+	width: 100%;
+	max-width: 100%;
+}
+
+.aligncenter {
+	text-align: center;
+}
+
+.wp-site-blocks .alignleft {
+	float: left;
+	margin-right: 2em;
+	max-width: 360px;
+}
+
+.wp-site-blocks .alignright {
+	float: right;
+	margin-left: 2em;
+	max-width: 360px;
+}
+
+@media screen and (min-width: 1290px) {
+
+	.wp-site-blocks,
+	.wp-block-template-part.alignfull {
+		padding: 0;
+	}
+
+	.wp-site-blocks .alignfull {
+		transform: translateX(0px);
+		width: 100%;
+		max-width: 100%;
+	}
+}

photo-blocks/block-template-parts/footer.html

@@ -0,0 +1,11 @@
+<!-- wp:spacer {"height":38} -->
+<div style="height:38px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">Proudly Powered by WordPress</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":38} -->
+<div style="height:38px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

photo-blocks/block-template-parts/header.html

@@ -0,0 +1,25 @@
+<!-- wp:spacer {"height":38} -->
+<div style="height:38px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
+<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"48px"} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:48px"><!-- wp:site-logo {"width":48,"className":"is-style-rounded"} /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center","width":"66.66%"} -->
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:site-title /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
+<!-- wp:navigation-link {"label":"About","url":"#"} /-->
+
+<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
+<!-- /wp:navigation --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->

photo-blocks/block-template-parts/post-grid.html

@@ -0,0 +1,5 @@
+<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","perPage":12,"exclude":[223]},"layout":{"type":"flex","columns":3},"className":"alignfull"} -->
+<!-- wp:query-loop -->
+<!-- wp:post-featured-image {"isLink":true} /-->
+<!-- /wp:query-loop -->
+<!-- /wp:query -->

photo-blocks/block-templates/index.html

@@ -0,0 +1,11 @@
+<!-- wp:template-part {"slug":"header","theme":"photo-blocks","tagName":"header","align":"wide"} /-->
+
+<!-- wp:group {"align":"wide"} -->
+<div class="wp-block-group alignwide"><div class="wp-block-group__inner-container"><!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","perPage":12,"exclude":[223]},"layout":{"type":"flex","columns":3},"className":"alignfull"} -->
+<!-- wp:query-loop -->
+<!-- wp:post-featured-image {"isLink":true} /-->
+<!-- /wp:query-loop -->
+<!-- /wp:query --></div></div>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","theme":"photo-blocks","tagName":"footer","align":"wide"} /-->

photo-blocks/block-templates/singular.html

@@ -0,0 +1,21 @@
+<!-- wp:template-part {"slug":"header","theme":"photo-blocks","tagName":"header","align":"wide"} /-->
+
+<!-- wp:post-featured-image {"align":"wide"} /-->
+
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-title /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"33.33%"} -->
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-date {"textAlign":"right"} /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:spacer {"height":38} -->
+<div style="height:38px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:post-content /-->
+
+<!-- wp:template-part {"slug":"footer","theme":"photo-blocks","tagName":"footer","align":"wide"} /-->

photo-blocks/experimental-theme.json

@@ -0,0 +1,118 @@
+{
+	"global": {
+		"settings": {
+			"color": {
+				"gradients": [ ],
+				"link": true,
+				"palette": [
+					{
+						"color": "#000",
+						"slug": "black",
+						"name": "Black"
+					},
+					{
+						"color": "#FFF",
+						"slug": "white",
+						"name": "White"
+					}
+				]
+			},
+			"spacing": {
+				"customPadding": true
+			},
+			"typography": {
+				"customLineHeight": true,
+				"fontFamilies": [
+					{
+						"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
+						"slug": "system-font",
+						"name": "System Font"
+					}
+				],
+				"fontSizes": [
+					{
+						"slug": "normal",
+						"size": "18px",
+						"name": "Normal"
+					},
+					{
+						"slug": "large",
+						"size": "20px",
+						"name": "Large"
+					},
+					{
+						"slug": "extra-large",
+						"size": "24px",
+						"name": "Extra Large"
+					}
+				]
+			},
+			"custom": {
+				"font-weight": {
+					"light": 300
+				},
+				"line-height": {
+					"normal": 1.7,
+					"heading": 1.4
+				},
+				"margin": {
+					"horizontal": "1.25em"
+				},
+				"width": {
+					"default": "720px",
+					"wide": "1296px"
+				}
+			}
+		},
+		"styles": {
+			"color": {
+				"background": "var(--wp--preset--color--white)",
+				"text": "var(--wp--preset--color--black)",
+				"link": "var(--wp--preset--color--black)"
+			},
+			"typography": {
+				"fontFamily": "var(--wp--preset--font-family--system-font)",
+				"fontSize": "var(--wp--preset--font-size--normal)",
+				"lineHeight": "var(--wp--custom--line-height--normal)",
+				"fontWeight": "var(--wp--custom--font-weight--light)"
+			}
+		}
+	},
+	"core/heading/h1": {
+		"styles": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--extra-large)",
+				"lineHeight": "var(--wp--custom--line-height--heading)"
+			}
+		}
+	},
+	"core/heading/h2": {
+		"styles": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--large)"
+			}
+		}
+	},
+	"core/post-title": {
+		"styles": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--large)",
+				"lineHeight": "var(--wp--custom--line-height--normal)"
+			}
+		}
+	},
+	"core/site-title": {
+		"styles": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--large)"
+			}
+		}
+	},
+	"core/navigation": {
+		"styles": {
+			"typography": {
+				"fontSize": "var(--wp--preset--font-size--large)"
+			}
+		}
+	}
+}

photo-blocks/functions.php

@@ -0,0 +1,38 @@
+<?php
+
+if ( ! function_exists( 'photo_blocks_support' ) ) :
+	function photo_blocks_support()  {
+
+		// Adding support for featured images.
+		add_theme_support( 'post-thumbnails' );
+
+		// Adding support for alignwide and alignfull classes in the block editor.
+		add_theme_support( 'align-wide' );
+
+		// Adding support for core block visual styles.
+		add_theme_support( 'wp-block-styles' );
+
+		// Adding support for responsive embedded content.
+		add_theme_support( 'responsive-embeds' );
+
+		// Add support for editor styles.
+		add_theme_support( 'editor-styles' );
+
+		// Enqueue editor styles.
+		add_editor_style( 'style.css' );
+    }
+    add_action( 'after_setup_theme', 'photo_blocks_support' );
+endif;
+
+/**
+ * Enqueue scripts and styles.
+ */
+function photo_blocks_scripts() {
+
+	// Enqueue theme stylesheet.
+	wp_enqueue_style( 'photo_blocks-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
+
+	// Enqueue alignments stylesheet.
+	wp_enqueue_style( 'photo_blocks-alignments-style', get_template_directory_uri() . '/assets/alignments-front.css', array(), wp_get_theme()->get( 'Version' ) );
+}
+add_action( 'wp_enqueue_scripts', 'photo_blocks_scripts' );