Twenty Twenty One Blocks: Migrate Preformatted Block styles

README.md

@@ -11,6 +11,7 @@ This repository is dedicated to exploring how WordPress themes can best leverage
 | Theme | Updated For |
 | --- | --- |
 | [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 |
 | [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 |
@@ -45,6 +46,12 @@ Here are some resources that may be useful context for learning more about block
 - [Full site editing development in the Gutenberg repo](https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Full%20Site%20Editing)
 - [Global styles development in the Gutenberg repo](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+label%3A%22Global+Styles%22)
 
+## Generating your own starter theme  
+
+We have included a script so you can generate a theme based on a starter boilerplate with the minimum necessary to build your own block-based theme. You will need to have php installed to run it using:
+
+`php new-empty-theme.php`
+
 ## Questions or Improvements?
 
 If you'd like to propose improvements to this repository, feel free to open an [issue](https://github.com/WordPress/theme-experiments/issues) or [PR](https://github.com/WordPress/theme-experiments/pulls).

emptytheme/README.md

@@ -0,0 +1,15 @@
+# Empty Theme
+
+Empty theme contains all of the boilerplate you need to get started building a block-based theme: 
+
+- An empty `theme.json` file. 
+- `functions.php` with some basic setup.
+- `style.css` to set up the theme.
+- A separate stylesheet with all the front-end alignments you'll need. 
+- An empty `index.php`
+
+It also includes a basic `index.html` template and `header.html` template part so that the theme works out of the box with no modifications. 
+
+For more background on the theme, [read the original PR](https://github.com/WordPress/theme-experiments/pull/81). 
+
+🌟 [Use the command line tool](https://github.com/WordPress/theme-experiments#generating-your-own-starter-theme) to generate your own brand-new theme based on this boilerplate.

emptytheme/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% + var(--wp--custom--margin--horizontal));
+		max-width: calc(100% + var(--wp--custom--margin--horizontal));
+	}
+}

emptytheme/block-template-parts/header.html

@@ -0,0 +1,3 @@
+<!-- wp:site-title /-->
+
+<!-- wp:site-tagline /-->

emptytheme/block-templates/index.html

@@ -0,0 +1,9 @@
+<!-- wp:template-part {"slug":"header","theme":"emptytheme","tagName":"header"} /-->
+
+<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
+<!-- wp:query-loop -->
+<!-- wp:post-title {"isLink":true} /-->
+
+<!-- wp:post-excerpt /-->
+<!-- /wp:query-loop -->
+<!-- /wp:query -->

emptytheme/block-templates/singular.html

@@ -0,0 +1,5 @@
+<!-- wp:template-part {"slug":"header","theme":"emptytheme","tagName":"header"} /-->
+
+<!-- wp:post-title /-->
+
+<!-- wp:post-content /-->

emptytheme/experimental-theme.json

@@ -0,0 +1,32 @@
+{
+	"global": {
+		"settings": {
+			"color": {
+				"gradients": [ ],
+				"link": true,
+				"palette": [ ]
+			},
+			"typography": {
+				"customLineHeight": true,
+				"fontFamilies": [ ],
+				"fontSizes": [ ],
+				"spacing": {
+					"customPadding": true
+				}
+			},
+			"custom": {
+				"width": {
+					"default": "840px",
+					"wide": "1100px"
+				},
+				"margin": {
+					"horizontal": "14px"
+				}
+			}
+		},
+		"styles": {
+			"color": { },
+			"typography": { }
+		}
+	}
+}

emptytheme/functions.php

@@ -0,0 +1,38 @@
+<?php
+
+if ( ! function_exists( 'emptytheme_support' ) ) :
+	function emptytheme_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', 'emptytheme_support' );
+endif;
+
+/**
+ * Enqueue scripts and styles.
+ */
+function emptytheme_scripts() {
+
+	// Enqueue theme stylesheet.
+	wp_enqueue_style( 'emptytheme-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
+
+	// Enqueue alignments stylesheet.
+	wp_enqueue_style( 'emptytheme-alignments-style', get_template_directory_uri() . '/assets/alignments-front.css', array(), wp_get_theme()->get( 'Version' ) );
+}
+add_action( 'wp_enqueue_scripts', 'emptytheme_scripts' );

emptytheme/style.css

@@ -0,0 +1,15 @@
+/*
+Theme Name: Empty Theme
+Theme URI: https://github.com/wordpress/theme-experiments/
+Author: Kjell Reigstad
+Description: The base for a block-based theme.
+Requires at least: 5.3
+Tested up to: 5.5
+Requires PHP: 5.6
+Version: 1.0
+License: GNU General Public License v2 or later
+License URI: LICENSE
+Text Domain: emptytheme
+
+Empty Theme is distributed under the terms of the GNU GPL.
+*/