WordPress · oandregal · Feb 13, 2020 · Feb 13, 2020 · Feb 13, 2020 · Feb 13, 2020
diff --git a/global-styles/block-templates/gutenberg-demo.html b/global-styles/block-templates/gutenberg-demo.html
@@ -0,0 +1,225 @@
+<!-- wp:heading {"level":1} -->
+<h1>Welcome to the Gutenberg Editor</h1>
+<!-- /wp:heading -->
+
+<!-- wp:cover {"url":"https://cldup.com/Fz-ASbo2s3.jpg","className":"alignwide"} -->
+<div class="wp-block-cover has-background-dim alignwide" style="background-image:url(https://cldup.com/Fz-ASbo2s3.jpg)">
+	<div class="wp-block-cover__inner-container">
+		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+		<p class="has-text-align-center has-large-font-size">Of Mountains &amp; Printing Presses</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:cover -->
+
+<!-- wp:paragraph -->
+<p>The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is
+	composed of <em>pieces of content</em>—somewhat similar to LEGO bricks—that you can move around and interact with.
+	Move your cursor around and you’ll notice the different blocks light up with outlines and arrows. Press the arrows
+	to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>What you are reading now is a <strong>text block</strong> the most basic block of all. The text block has its own
+	controls to be moved freely around the post...</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"right"} -->
+<p class="has-text-align-right">... like this one, which is right aligned.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Headings are separate blocks as well, which helps with the outline and organization of your content.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2>A Picture is Worth a Thousand Words</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you’ll find aspects
+	of adding captions or going full-width with your pictures much easier and robust than before.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:image {"align":"center"} -->
+<div class="wp-block-image">
+	<figure class="aligncenter"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="Beautiful landscape" />
+		<figcaption>If your theme supports it, you’ll see the "wide" button on the image toolbar. Give it a try.
+		</figcaption>
+	</figure>
+</div>
+<!-- /wp:image -->
+
+<!-- wp:paragraph -->
+<p>Try selecting and removing or editing the caption, now you don’t have to be careful about selecting the image or
+	other text by mistake and ruining the presentation.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2>The <em>Inserter</em> Tool</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need
+	to figure out HTML tags, classes, or remember complicated shortcode syntax. That’s the spirit behind the
+	inserter—the <code>(+)</code> button you’ll see around the editor—which allows you to browse all available content
+	blocks and add them into your post. Plugins and themes are able to register their own, opening up all sort of
+	possibilities for rich editing and publishing.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Go give it a try, you may discover things WordPress can already add into your posts that you didn’t know about.
+	Here’s a short list of what you can currently find there:</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul>
+	<li>Text &amp; Headings</li>
+	<li>Images &amp; Videos</li>
+	<li>Galleries</li>
+	<li>Embeds, like YouTube, Tweets, or other WordPress posts.</li>
+	<li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li>
+	<li>And <em>Lists</em> like this one of course :)</li>
+</ul>
+<!-- /wp:list -->
+
+<!-- wp:separator -->
+<hr class="wp-block-separator" />
+<!-- /wp:separator -->
+
+<!-- wp:heading -->
+<h2>Visual Editing</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>A huge benefit of blocks is that you can edit them in place and manipulate your content directly. Instead of having
+	fields for editing things like the source of a quote, or the text of a button, you can directly change the content.
+	Try editing the following quote:</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:quote -->
+<blockquote class="wp-block-quote">
+	<p>The editor will endeavor to create a new page and post building experience that makes writing rich posts
+		effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat”
+		embed discovery.</p><cite>Matt Mullenweg, 2017</cite>
+</blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:paragraph -->
+<p>The information corresponding to the source of the quote is a separate text field, similar to captions under images,
+	so the structure of the quote is protected even if you select, modify, or remove the source. It’s always easy to add
+	it back.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Blocks can be anything you need. For instance, you may want to add a subdued quote as part of the composition of your
+	text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:gallery {"ids":[null,null,null],"columns":2} -->
+<figure class="wp-block-gallery columns-2 is-cropped">
+	<ul class="blocks-gallery-grid">
+		<li class="blocks-gallery-item">
+			<figure><img src="https://cldup.com/n0g6ME5VKC.jpg" alt="" /></figure>
+		</li>
+		<li class="blocks-gallery-item">
+			<figure><img src="https://cldup.com/ZjESfxPI3R.jpg" alt="" /></figure>
+		</li>
+		<li class="blocks-gallery-item">
+			<figure><img src="https://cldup.com/EKNF8xD2UM.jpg" alt="" /></figure>
+		</li>
+	</ul>
+</figure>
+<!-- /wp:gallery -->
+
+<!-- wp:paragraph -->
+<p>You can change the amount of columns in your galleries by dragging a slider in the block inspector in the sidebar.
+</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2>Media Rich</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>If you combine the new <strong>wide</strong> and <strong>full-wide</strong> alignments with galleries, you can create
+	a very media rich layout, very quickly:</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:image {"align":"full"} -->
+<figure class="wp-block-image alignfull"><img src="https://cldup.com/8lhI-gKnI2.jpg"
+		alt="Accessibility is important — don’t forget image alt attribute" /></figure>
+<!-- /wp:image -->
+
+<!-- wp:paragraph -->
+<p>Sure, the full-wide image can be pretty big. But sometimes the image is worth it.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:gallery {"ids":[null,null],"align":"wide"} -->
+<figure class="wp-block-gallery alignwide columns-2 is-cropped">
+	<ul class="blocks-gallery-grid">
+		<li class="blocks-gallery-item">
+			<figure><img src="https://cldup.com/_rSwtEeDGD.jpg" alt="" /></figure>
+		</li>
+		<li class="blocks-gallery-item">
+			<figure><img src="https://cldup.com/L-cC3qX2DN.jpg" alt="" /></figure>
+		</li>
+	</ul>
+</figure>
+<!-- /wp:gallery -->
+
+<!-- wp:paragraph -->
+<p>The above is a gallery with just two images. It’s an easier way to create visually appealing layouts, without having
+	to deal with floats. You can also easily convert the gallery back to individual images again, by using the block
+	switcher.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Any block can opt into these alignments. The embed block has them also, and is responsive out of the box:</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:core-embed/vimeo {"url":"https://vimeo.com/22439234","type":"video","providerNameSlug":"vimeo","align":"wide","className":"wp-has-aspect-ratio wp-embed-aspect-16-9"} -->
+<figure
+	class="wp-block-embed-vimeo alignwide wp-block-embed is-type-video is-provider-vimeo wp-has-aspect-ratio wp-embed-aspect-16-9">
+	<div class="wp-block-embed__wrapper">
+		https://vimeo.com/22439234
+	</div>
+</figure>
+<!-- /wp:core-embed/vimeo -->
+
+<!-- wp:paragraph -->
+<p>You can build any block you like, static or dynamic, decorative or plain. Here’s a pullquote block:</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:pullquote -->
+<figure class="wp-block-pullquote">
+	<blockquote>
+		<p>Code is Poetry</p><cite>The WordPress community</cite>
+	</blockquote>
+</figure>
+<!-- /wp:pullquote -->
+
+<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">
+	<em>
+		If you want to learn more about how to build additional blocks, or if you are interested in helping with the
+		project, head over to the <a href="https://github.com/WordPress/gutenberg">GitHub repository</a>. </em>
+</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:button {"align":"center"} -->
+<div class="wp-block-button aligncenter"><a class="wp-block-button__link"
+		href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a></div>
+<!-- /wp:button -->
+
+<!-- wp:separator -->
+<hr class="wp-block-separator" />
+<!-- /wp:separator -->
+
+<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">Thanks for testing Gutenberg!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">👋</p>
+<!-- /wp:paragraph -->
diff --git a/global-styles/block-templates/index.html b/global-styles/block-templates/index.html
@@ -0,0 +1,28 @@
+<!-- wp:heading {"level":1} -->
+<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"level":2} -->
+<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+<!-- /wp:heading -->
+<!-- wp:heading {"level":3} -->
+<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"level":4} -->
+<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"level":5} -->
+<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"level":6} -->
+<h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Mauris consequat augue quis risus sollicitudin commodo. In hac habitasse platea dictumst. Pellentesque massa sem,
+	ultrices non tempus ac, aliquet ac nunc. Sed porttitor ac mi a malesuada. Donec blandit vel arcu blandit
+	scelerisque. Etiam euismod blandit leo a maximus.</p>
+<!-- /wp:paragraph -->
diff --git a/global-styles/editor-styles.css b/global-styles/editor-styles.css
@@ -0,0 +1,55 @@
+/*
+Theme Name: Global Styles
+Text Domain: global-styles
+Version: 0.1
+Requires at least: 5.3
+Description: A test theme using the new WordPress block templating system and Global Styles.
+Author: wordpressdotorg
+Author URI: https://wordpress.org
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+All files, unless otherwise stated, are released under the GNU General Public
+License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
+
+This theme, like WordPress, is licensed under the GPL.
+Use it to make something cool, have fun, and share what you've learned
+with others.
+*/
+
+/*
+ * These block styles are meant to be added to the blocks themselves.
+ * We only have them here to have a safe playground
+ * while we figure out all the loose ends.
+ */
+
+/* HEADING BLOCK ------------------------------------------- */
+h1 {
+	font-size: calc(1px * var(--wp--typography--font-base) * var(--wp--typography--font-scale) * var(--wp--typography--font-scale) * var(--wp--typography--font-scale) * var(--wp--typography--font-scale) * var(--wp--typography--font-scale));
+}
+
+h2 {
+	font-size: calc(1px * var(--wp--typography--font-base) * var(--wp--typography--font-scale) * var(--wp--typography--font-scale) * var(--wp--typography--font-scale) * var(--wp--typography--font-scale));
+}
+
+h3 {
+	font-size: calc(1px * var(--wp--typography--font-base) * var(--wp--typography--font-scale) * var(--wp--typography--font-scale) * var(--wp--typography--font-scale));
+}
+
+h4 {
+	font-size: calc(1px * var(--wp--typography--font-base) * var(--wp--typography--font-scale) * var(--wp--typography--font-scale));
+}
+
+h5 {
+	font-size: calc(1px * var(--wp--typography--font-base) * var(--wp--typography--font-scale));
+}
+
+h6 {
+	font-size: calc(0.5px * var(--wp--typography--font-base) * var(--wp--typography--font-scale));
+}
+
+
+/* PARAGRAPH BLOCK ------------------------------------------- */
+p {
+	font-size: calc(1px * var(--wp--typography--font-base));
+}
diff --git a/global-styles/experimental-theme.json b/global-styles/experimental-theme.json
@@ -0,0 +1,14 @@
+{
+	"color": {
+		"background": "#fff",
+		"text": "#000"
+	},
+	"typography": {
+		"font-base": 16,
+		"font-scale": 1.2,
+		"font-weight-base": 400,
+		"font-weight-heading": 400,
+		"line-height-base": 1.5,
+		"line-height-heading": 1.5
+	}
+}
diff --git a/global-styles/functions.php b/global-styles/functions.php
@@ -0,0 +1,18 @@
+<?php
+
+function global_styles_experimental_after_setup_theme() {
+	add_theme_support('editor-styles');
+	add_editor_style('style.css');
+	add_editor_style('editor-styles.css');
+}
+add_action( 'after_setup_theme', 'global_styles_experimental_after_setup_theme' );
+
+function global_styles_experimental_wp_enqueue_scripts() {
+	wp_enqueue_style(
+		'global-styles-theme-style-resets',
+		get_stylesheet_directory_uri() . '/style.css',
+		array(),
+		filemtime( dirname( __FILE__ ) . '/style.css' )
+	);
+}
+add_action( 'wp_enqueue_scripts', 'global_styles_experimental_wp_enqueue_scripts' );
diff --git a/global-styles/index.php b/global-styles/index.php
@@ -0,0 +1,3 @@
+<?php
+
+// Silence is golden.
diff --git a/global-styles/style.css b/global-styles/style.css
@@ -0,0 +1,20 @@
+/*
+Theme Name: Global Styles
+Author: the WordPress team
+Author URI: https://wordpress.org/
+Description: Global Styles, a playground for testing FSE.
+Requires at least: WordPress 4.9.6
+Version: 0.1
+License: GNU General Public License v2 or later
+License URI: LICENSE
+Text Domain: global-styles
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
+*/
+
+body {
+	box-sizing: border-box;
+	background-color: var(--wp--color--background);
+	max-width: 50rem;
+	margin-left: auto;
+	margin-right: auto;
+}