Merge pull request #2303 from Automattic/new/ibis

New theme: Ibis

ibis/block-template-parts/footer.html

@@ -0,0 +1,11 @@
+<!-- wp:spacer {"height":30} -->
+<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
+<p class="has-text-align-center has-small-font-size">Proudly powered by <a href="https://wordpress.org">WordPress</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":30} -->
+<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

ibis/block-template-parts/header.html

@@ -0,0 +1,13 @@
+<!-- wp:group {"align":"full","backgroundColor":"background"} -->
+<div class="wp-block-group alignfull has-background-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"width":33.33} -->
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:site-title /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":66.66} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
+<!-- wp:navigation-link {"label":"Home","url":"http://home"} /-->
+<!-- /wp:navigation --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div></div>
+<!-- /wp:group -->

ibis/block-templates/index.html

@@ -0,0 +1,15 @@
+<!-- wp:group {"align":"full","tagName":"header"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:template-part {"slug":"header","theme":"ibis","align":"full"} /--></div></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","className":"site-content","tagName":"main"} -->
+<div class="wp-block-group alignfull site-content"><div class="wp-block-group__inner-container"><!-- wp:query-loop -->
+<!-- wp:post-title /-->
+
+<!-- wp:post-content /-->
+<!-- /wp:query-loop --></div></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","tagName":"footer"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:template-part {"slug":"footer","theme":"ibis","align":"full"} /--></div></div>
+<!-- /wp:group -->

ibis/block-templates/singular.html

@@ -0,0 +1,13 @@
+<!-- wp:group {"align":"full","tagName":"header"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:template-part {"slug":"header","theme":"ibis","align":"full"} /--></div></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","className":"site-content","tagName":"main"} -->
+<div class="wp-block-group alignfull site-content"><div class="wp-block-group__inner-container">
+<!-- wp:post-title /-->
+<!-- wp:post-content {"align":"full"} /--></div></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"full","tagName":"footer"} -->
+<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:template-part {"slug":"footer","theme":"ibis","align":"full"} /--></div></div>
+<!-- /wp:group -->

ibis/experimental-theme.json

@@ -0,0 +1,58 @@
+{
+	"global": {
+		"presets": {
+			"font-size": [
+				{
+					"slug": "tiny",
+					"value": "14px"
+				},
+				{
+					"slug": "small",
+					"value": "16px"
+				},
+				{
+					"slug": "medium",
+					"value": "18px"
+				},
+				{
+					"slug": "large",
+					"value": "24px"
+				},
+				{
+					"slug": "extra-large",
+					"value": "28px"
+				},
+				{
+					"slug": "huge",
+					"value": "32px"
+				},
+				{
+					"slug": "gigantic",
+					"value": "48px"
+				}
+			],
+			"color": [
+				{
+					"slug": "background",
+					"value": "#FFFFFF"
+				},
+				{
+					"slug": "foreground",
+					"value": "#303C4D"
+				},
+				{
+					"slug": "primary",
+					"value": "#E1534B"
+				},
+				{
+					"slug": "secondary",
+					"value": "#323E4E"
+				},
+				{
+					"slug": "tertiary",
+					"value": "#BED4DF"
+				}
+			]
+		}
+	}
+}

ibis/functions.php

@@ -0,0 +1,71 @@
+<?php
+/**
+ * Ibis functions and definitions
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package WordPress
+ * @subpackage seedlet_blocks
+ * @since 1.0.0
+ */
+
+if ( ! function_exists( 'ibis_setup' ) ) :
+	/**
+	 * Sets up theme defaults and registers support for various WordPress features.
+	 *
+	 * Note that this function is hooked into the after_setup_theme hook, which
+	 * runs before the init hook. The init hook is too late for some features, such
+	 * as indicating support for post thumbnails.
+	 */
+	function ibis_setup() {
+		// Add support for editor styles.
+		add_theme_support( 'editor-styles' );
+
+		// Enqueue editor styles.
+		add_editor_style( 'style-editor.css' );
+	}
+endif;
+add_action( 'after_setup_theme', 'ibis_setup' );
+
+/**
+ * Add Google webfonts
+ *
+ * http://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/
+ */
+function ibis_fonts_url() {
+
+	$fonts_url = '';
+
+	/* Translators: If there are characters in your language that are not
+	* supported by Lora, translate this to 'off'. Do not translate
+	* into your own language.
+	*/
+	$poppins = esc_html_x( 'on', 'Lora font: on or off', 'ibis' );
+
+	if ( 'off' !== $poppins ) {
+		$font_families = array();
+
+		$font_families[] = 'Lora:400,400i,600,600i,700,700i';
+
+		$query_args = array(
+			'family' => urlencode( implode( '|', $font_families ) ),
+			'subset' => urlencode( 'latin,latin-ext' ),
+		);
+
+		$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
+	}
+
+	return esc_url_raw( $fonts_url );
+}
+
+/**
+ * Enqueue scripts and styles.
+ */
+function ibis_enqueue() {
+	wp_enqueue_style( 'ibis-styles', get_stylesheet_uri() );
+
+	// enqueue Google fonts
+	wp_enqueue_style( 'mayland-fonts', ibis_fonts_url(), array(), null );
+
+}
+add_action( 'wp_enqueue_scripts', 'ibis_enqueue' );

ibis/readme.txt

@@ -0,0 +1,33 @@
+=== Ibis ===
+Contributors: Automattic
+Requires at least: 5.0
+Tested up to: 4.9.6
+Requires PHP: 7.3
+License: GPLv2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+A long-legged theme that inhabits wetlands, forests and plains.
+
+== Description ==
+
+Ibis is a long-legged theme that inhabits wetlands, forests and plains.
+
+== Changelog ==
+
+= 1.0 =
+* Initial release 
+
+== Copyright ==
+
+Ibis WordPress Theme, (C) 2020 Automattic, Inc.
+Ibis 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.

ibis/style-editor.css

@@ -0,0 +1,23 @@
+/* Override Seedlet variables with values from experimental-theme.json. */
+body {
+	/* Font Size */
+	--global--font-size-xs: var(--wp--preset--font-size--tiny);
+	--global--font-size-sm: var(--wp--preset--font-size--small);
+	--global--font-size-md: var(--wp--preset--font-size--medium);
+	--global--font-size-lg: var(--wp--preset--font-size--large);
+	--global--font-size-xl: var(--wp--preset--font-size--extra-large);
+	--global--font-size-xxl: var(--wp--preset--font-size--huge);
+	--global--font-size-xxxl: var(--wp--preset--font-size--gigantic);
+
+	/* Colors */
+	--global--color-background: var(--wp--preset--color--background);
+	--global--color-foreground: var(--wp--preset--color--foreground);
+	--global--color-primary: var(--wp--preset--color--primary);
+	--global--color-secondary: var(--wp--preset--color--secondary);
+	--global--color-tertiary: var(--wp--preset--color--tertiary);
+}
+
+.site-content .wp-block[data-align="full"] > [data-block], .site-content .wp-block.alignfull > [data-block] {
+	margin-top: 0;
+	margin-bottom: 0;
+}

ibis/style.css

@@ -0,0 +1,116 @@
+/*
+Theme Name: Ibis
+Theme URI: https://github.com/Automattic/themes/
+Author: Automattic
+Author URI: https://automattic.com/
+Description: A long-legged theme that inhabits wetlands, forests and plains.
+Requires at least: 4.9.6
+Version: 1.0
+License: GNU General Public License v2 or later
+License URI: LICENSE
+Template: seedlet
+Text Domain: ibis
+Tags:
+
+Ibis WordPress Theme, (C) 2020 Automattic, Inc.
+Ibis 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.
+*/
+
+/* Override Seedlet variables.
+ * When possible, override with values from experimental-theme.json.
+ * Doubling up on the :root selector is weird, but it just ensures these have higher specificity than everything else)
+ * and that just makes doubling up on the :root selector really cool.
+ */
+:root:root {
+	/* Font Family */
+	--global--font-primary: var(--font-headings, Lora, serif);
+	--global--font-secondary: var(--font-base, Lora, sans-serif);
+	--global--font-code: monospace, monospace;
+	--global--font-ui: var(--font-base, var(--global--font-secondary));
+
+	/* Font Size */
+	--global--font-size-xs: var(--wp--preset--font-size--tiny);
+	--global--font-size-sm: var(--wp--preset--font-size--small);
+	--global--font-size-md: var(--wp--preset--font-size--medium);
+	--global--font-size-lg: var(--wp--preset--font-size--large);
+	--global--font-size-xl: var(--wp--preset--font-size--extra-large);
+	--global--font-size-xxl: var(--wp--preset--font-size--huge);
+	--global--font-size-xxxl: var(--wp--preset--font-size--gigantic);
+	--heading--font-weight: 600;
+	--heading--font-weight-strong: 700;	
+
+	/* Colors */
+	--global--color-background: var(--wp--preset--color--background);
+	--global--color-foreground: var(--wp--preset--color--foreground);
+	--global--color-primary: var(--wp--preset--color--primary);
+	--global--color-secondary: var(--wp--preset--color--secondary);
+	--global--color-tertiary: var(--wp--preset--color--tertiary);
+
+	/* Colors */
+	--button--padding-vertical: calc(.66 * var(--global--spacing-horizontal) - var(--button--border-width));
+	--button--padding-horizontal: var(--global--spacing-horizontal);
+}
+
+/**
+ * Override Seedlet Root Media Query Variables
+ * Doubling up on the :root selector is weird, but it just ensures these have higher specificity than everything else)
+ * and that just makes doubling up on the :root selector really cool.
+ */
+@media only screen and (min-width: 482px) {
+	:root:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+@media only screen and (min-width: 592px) {
+	:root:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+@media only screen and (min-width: 652px) {
+	:root:root {
+		--responsive--aligndefault-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+@media only screen and (min-width: 822px) {
+	:root:root {
+		--responsive--aligndefault-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(822px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+@media only screen and (min-width: 1024px) {
+	:root:root {
+		--responsive--aligndefault-width: calc(750px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(990px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+/* Make sure full-width items in entry content show up as full-width. */
+.wp-block-group.site-content .wp-block-group__inner-container .entry-content {
+	max-width: calc(100% + (2 * var(--global--spacing-horizontal)));
+	width: calc(100% + (2 * var(--global--spacing-horizontal)));
+	margin-left: calc(-1 * var(--global--spacing-horizontal));
+	margin-right: auto;
+}