Merge pull request #2167 from Automattic/seedlet-blocks/try-global-styles

Seedlet Blocks: Add basic global styles support

seedlet-blocks/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": "#333333"
+				},
+				{
+					"slug": "primary",
+					"value": "#000000"
+				},
+				{
+					"slug": "secondary",
+					"value": "#3C8067"
+				},
+				{
+					"slug": "tertiary",
+					"value": "#FAFBF6"
+				}
+			]
+		}
+	}
+}

seedlet-blocks/functions.php

@@ -9,6 +9,24 @@
  * @since 1.0.0
  */
 
+if ( ! function_exists( 'seedlet_blocks_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 seedlet_blocks_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', 'seedlet_blocks_setup' );
+
 /**
  * Enqueue scripts and styles.
  */

seedlet-blocks/style-editor.css

@@ -0,0 +1,18 @@
+/* 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);
+}

seedlet-blocks/style.css

@@ -28,6 +28,26 @@ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.
 */
 
+/* Override Seedlet variables 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) */
+:root:root {
+	/* 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);
+}
+
 /* Set up alignments */
 .wp-block-group .wp-block-group__inner-container > * {
 	max-width: var(--responsive--aligndefault-width);