Mpho: add theme (#7180)

* Initial commit

* Use 404 and search patterns in 404 template

* Use footer pattern in footer

* Move no results text to pattern

* Move post meta to pattern

* Remove unused assets

* Remove nav ref

* Remove duplicate layout definitions from theme.json

* Version bump theme

* Add image licenses

mpho/functions.php

@@ -0,0 +1,60 @@
+<?php
+/**
+ * Mpho functions and definitions
+ *
+ * @link https://developer.wordpress.org/themes/basics/theme-functions/
+ *
+ * @package Mpho
+ * @since Mpho 1.0
+ */
+
+
+if ( ! function_exists( 'mpho_support' ) ) :
+
+	/**
+	 * Sets up theme defaults and registers support for various WordPress features.
+	 *
+	 * @since Mpho 1.0
+	 *
+	 * @return void
+	 */
+	function mpho_support() {
+
+		// Enqueue editor styles.
+		add_editor_style( 'style.css' );
+
+		// Make theme available for translation.
+		load_theme_textdomain( 'mpho' );
+	}
+
+endif;
+
+add_action( 'after_setup_theme', 'mpho_support' );
+
+if ( ! function_exists( 'mpho_styles' ) ) :
+
+	/**
+	 * Enqueue styles.
+	 *
+	 * @since Mpho 1.0
+	 *
+	 * @return void
+	 */
+	function mpho_styles() {
+
+		// Register theme stylesheet.
+		wp_register_style(
+			'mpho-style',
+			get_stylesheet_directory_uri() . '/style.css',
+			array(),
+			wp_get_theme()->get( 'Version' )
+		);
+
+		// Enqueue theme stylesheet.
+		wp_enqueue_style( 'mpho-style' );
+
+	}
+
+endif;
+
+add_action( 'wp_enqueue_scripts', 'mpho_styles' );

mpho/parts/footer.html

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

mpho/parts/header.html

@@ -0,0 +1,29 @@
+<!-- wp:group {"style":{"border":{"bottom":{"width":"0px","style":"none"},"top":{"width":"0px","style":"none"}},"spacing":{"padding":{"right":"5vw","left":"5vw"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="border-top-style:none;border-top-width:0px;border-bottom-style:none;border-bottom-width:0px;padding-right:5vw;padding-left:5vw"><!-- wp:group {"style":{"border":{"width":"0px","style":"none"},"spacing":{"padding":{"right":"0vw","left":"0vw","bottom":"2vh","top":"4vh"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group" style="border-style:none;border-width:0px;padding-top:4vh;padding-right:0vw;padding-bottom:2vh;padding-left:0vw"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:site-logo {"width":110,"shouldSyncIcon":false,"className":"is-style-rounded","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|40"}}}} /-->
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"0.3rem","margin":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group" style="margin-top:0;margin-bottom:0"><!-- wp:site-title /-->
+
+<!-- wp:post-author-name /-->
+
+<!-- wp:spacer {"height":"2vh","width":"0px","style":{"layout":{"flexSize":"0.4vh","selfStretch":"fixed"}}} -->
+<div style="height:2vh;width:0px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"0.3rem"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:site-tagline /-->
+
+<!-- wp:post-author-biography /--></div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":"2vh","width":"0px","style":{"layout":{"flexSize":"1vh","selfStretch":"fixed"}}} -->
+<div style="height:2vh;width:0px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->

mpho/parts/post-meta.html

@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"mpho/post-meta"} /-->

mpho/patterns/404.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Title: A 404 page
+ * Slug: mpho/404
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"x-large"} -->
+<h1 class="has-text-align-center has-x-large-font-size" id="oops-that-page-can-t-be-found"><?php echo esc_html__( 'Oops! That page can&rsquo;t be found.', 'mpho' ); ?></h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p><?php echo  esc_html__( 'It looks like nothing was found at this location. Maybe try a search?', 'mpho' ); ?></p>
+<!-- /wp:paragraph -->

mpho/patterns/comments.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Title: Comments
+ * slug: mpho/comments
+ * inserter: no
+ */
+
+?>
+
+<!-- wp:comments {"className":"wp-block-comments-query-loop"} -->
+<div class="wp-block-comments wp-block-comments-query-loop">
+	<!-- wp:comments-title {"level":3} /-->
+
+	<!-- wp:comment-template -->
+		<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}}} -->
+		<div class="wp-block-group" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)">
+			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"0.5em"}}} -->
+			<div class="wp-block-group">
+				<!-- wp:avatar {"size":40,"style":{"spacing":{"margin":{"top":"0.5em"}}}} /-->
+
+				<!-- wp:group -->
+				<div class="wp-block-group">
+					<!-- wp:comment-author-name /-->
+
+					<!-- wp:group {"layout":{"type":"flex"},"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"blockGap":"0.5em"}}} -->
+					<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
+						<!-- wp:comment-date {"format":"F j, Y \\a\\t g:i a"} /-->
+
+						<!-- wp:comment-edit-link /-->
+					</div>
+					<!-- /wp:group -->
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:group -->
+
+			<!-- wp:comment-content /-->
+
+			<!-- wp:comment-reply-link /-->
+		</div>
+		<!-- /wp:group -->
+	<!-- /wp:comment-template -->
+
+	<!-- wp:comments-pagination -->
+		<!-- wp:comments-pagination-previous /-->
+		<!-- wp:comments-pagination-numbers /-->
+		<!-- wp:comments-pagination-next /-->
+	<!-- /wp:comments-pagination -->
+
+	<!-- wp:post-comments-form /-->
+</div>
+<!-- /wp:comments -->

mpho/patterns/footer.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Title: Default footer
+ * Slug: mpho/footer
+ * Categories: footer
+ * Block Types: core/template-part/footer
+ */
+?>
+
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:spacer {"height":"5vh"} -->
+<div style="height:5vh" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"0.2rem"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:site-title {"fontSize":"medium"} /-->
+
+<!-- wp:paragraph {"align":"left","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"typography":{"fontSize":"0.9rem"}},"textColor":"contrast"} -->
+<p class="has-text-align-left has-contrast-color has-text-color has-link-color" style="font-size:0.9rem">
+	<?php
+		$wordpress_link = '<a href="' . esc_url( __( 'https://wordpress.org', 'mpho' ) ) . '" rel="nofollow">WordPress</a>';
+		echo sprintf(
+			/* Translators: WordPress link. */
+			esc_html__( 'Designed with %1$s', 'mpho' ),
+			$wordpress_link
+		);
+		?>
+</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":"6vh"} -->
+<div style="height:6vh" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:group -->

mpho/patterns/hidden-no-results-content.php

@@ -0,0 +1,10 @@
+<?php
+/**
+ * Title: Hidden No Results Content
+ * Slug: mpho/hidden-no-results-content
+ * Inserter: no
+ */
+?>
+<!-- wp:paragraph -->
+<p><?php echo esc_html_x( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'Message explaining that there are no results returned from a search', 'mpho' ); ?></p>
+<!-- /wp:paragraph -->

mpho/patterns/no-results.php

@@ -0,0 +1,11 @@
+<?php
+/**
+ * Title: No Results
+ * Slug: mpho/no-results
+ * Categories: featured
+ */
+?>
+
+<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
+<p><?php echo esc_html_x( 'There are no posts yet.', 'Text displayed when there are no posts returned from the query.', 'mpho' ); ?></p>
+<!-- /wp:paragraph -->

mpho/patterns/post-meta.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Title: Post Meta
+ * Slug: mpho/post-meta
+ * Categories: post meta
+ * Block Types: core/post-date, core/post-author-name
+ */
+?>
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"0.26rem"},"typography":{"fontSize":"1.2rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group" style="font-size:1.2rem"><!-- wp:paragraph -->
+<p><?php echo esc_html_x( 'by', 'The word linking the post title and the post author.', 'mpho' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:post-author-name {"isLink":true} /--></div>
+<!-- /wp:group -->

mpho/patterns/search.php

@@ -0,0 +1,9 @@
+<?php
+/**
+ * Title: Search
+ * Slug: mpho/search
+ * Categories: featured
+ */
+?>
+
+<!-- wp:search {"label":"","showLabel":false,"placeholder":"<?php echo esc_html_x( 'Type...', 'This is a placeholder text in a search field', 'mpho' ); ?>","style":{"border":{"radius":"100px"}},"backgroundColor":"secondary"} /-->

mpho/readme.txt

@@ -0,0 +1,42 @@
+=== Mpho ===
+Contributors: Automattic
+Requires at least: 6.0
+Tested up to: 6.2.2
+Requires PHP: 5.7
+License: GPLv2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+== Description ==
+
+Mpho is a minimalist single column theme that draws inspiration from short-sized posts and social networks. It prioritizes the post content and author, featuring a header with the author's bio and profile picture.
+
+== Changelog ==
+
+= 1.0.0 =
+* Initial release
+
+== Copyright ==
+
+Mpho WordPress Theme, (C) 2023 Automattic
+Mpho is distributed under the terms of the GNU GPL.
+Mpho is based on Fatima (https://github.com/Automattic/themes/tree/trunk/fatima), (C) Automattic, [GPLv2 or later](http://www.gnu.org/licenses/gpl-2.0.html)
+
+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.
+
+Images used in theme screenshot:
+
+"woman"
+License: Public Domain
+Source: https://nappy.co/photo/3653/woman
+
+"Newspaper Rock Is a Large Cliff Mural of Ancient Indian Petroglyphs and Pictographs"
+License: CC0 1.0 Universal
+Source: https://www.rawpixel.com/image/8802659/photo-image-art-ornament-vintage

mpho/style.css

@@ -0,0 +1,35 @@
+/*
+Theme Name: Mpho
+Theme URI: https://github.com/Automattic/themes/tree/trunk/mpho
+Author: Automattic
+Author URI: https://automattic.com/
+Description: Mpho is a minimalist single column theme that draws inspiration from short-sized posts and social networks. It prioritizes the post content and author, featuring a header with the author's bio and profile picture. With its simplicity, Mpho offers four style variations to suit different preferences.
+Requires at least: 6.0
+Tested up to: 6.2.2
+Requires PHP: 5.7
+Version: 1.0.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: mpho
+Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks, auto-loading-homepage
+*/
+
+/*
+ * Control the hover stylings of outline block style.
+ * Unnecessary once block styles are configurable via theme.json
+ * https://github.com/WordPress/gutenberg/issues/42794
+ */
+.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
+	background-color: var(--wp--preset--color--secondary);
+	color: var(--wp--preset--color--base);
+	border-color: var(--wp--preset--color--secondary);
+}
+
+/*
+ * Link styles
+ * https://github.com/WordPress/gutenberg/issues/42319
+ */
+a {
+	text-decoration-thickness: .0625em !important;
+	text-underline-offset: .15em;
+}

mpho/templates/404.html

@@ -0,0 +1,14 @@
+<!-- wp:cover {"overlayColor":"base","minHeight":100,"minHeightUnit":"vh"} -->
+<div class="wp-block-cover" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-base-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"var:preset|spacing|50","margin":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
+<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--60)">
+    <!-- wp:pattern {"slug":"mpho/404"} /-->
+
+    <!-- wp:pattern {"slug":"mpho/search"} /-->
+
+<!-- wp:spacer {"height":"10vh"} -->
+<div style="height:10vh" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:template-part {"slug":"footer","area":"footer"} /--></main>
+<!-- /wp:group --></div></div>
+<!-- /wp:cover -->

mpho/templates/archive.html

@@ -0,0 +1,49 @@
+<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"},"spacing":{"padding":{"right":"5vw","left":"5vw"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="padding-right:5vw;padding-left:5vw"><!-- wp:group {"style":{"spacing":{"padding":{"top":"2vh","right":"0vh","bottom":"2vh","left":"0vh"}},"color":{"background":"#121314ed"},"position":{"type":"sticky","top":"0px"},"border":{"left":{"width":"0px","style":"none"},"right":{"width":"0px","style":"none"},"top":[],"bottom":{"color":"var:preset|color|tertiary","width":"1px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group has-background" style="border-right-style:none;border-right-width:0px;border-bottom-color:var(--wp--preset--color--tertiary);border-bottom-width:1px;border-left-style:none;border-left-width:0px;background-color:#121314ed;padding-top:2vh;padding-right:0vh;padding-bottom:2vh;padding-left:0vh"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>←</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:site-title /--></div>
+<!-- /wp:group -->
+
+<!-- wp:query-title {"type":"archive"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"style":{"spacing":{"padding":{"right":"5vw","left":"5vw","bottom":"0"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="padding-right:5vw;padding-bottom:0;padding-left:5vw"><!-- wp:query {"queryId":10,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"displayLayout":{"type":"list"}} -->
+<div class="wp-block-query"><!-- wp:post-template -->
+<!-- wp:group {"style":{"spacing":{"blockGap":"0.8rem","padding":{"bottom":"1vh","top":"2vh"}},"border":{"bottom":{"style":"none","width":"0px"},"top":{"width":"0px","style":"none"},"right":[],"left":[]}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="border-top-style:none;border-top-width:0px;border-bottom-style:none;border-bottom-width:0px;padding-top:2vh;padding-bottom:1vh"><!-- wp:group {"style":{"spacing":{"blockGap":"0.3rem"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:post-title {"isLink":true} /-->
+
+<!-- wp:post-author-name /--></div>
+<!-- /wp:group -->
+
+<!-- wp:post-content /-->
+
+<!-- wp:post-featured-image /-->
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30","margin":{"top":"0.8rem"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group" style="margin-top:0.8rem"><!-- wp:post-date {"format":"M j, Y g:i A"} /-->
+
+<!-- wp:post-terms {"term":"post_tag","separator":"  "} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+<!-- /wp:post-template -->
+
+<!-- wp:query-no-results -->
+<!-- wp:pattern {"slug":"mpho/no-results"} /-->
+<!-- /wp:query-no-results -->
+
+<!-- wp:spacer {"height":"2vh"} -->
+<div style="height:2vh" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:query --></div>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->