Merge pull request #44 from WordPress/add/twenty-twenty-global-styles

Twenty Twenty Blocks: Try adding new Global Styles Rules
WordPress · Jul 21, 2020 · e709b2e · e709b2e
2 parents 53ec337 + 5fce20a
commit e709b2e
Show file tree

Hide file tree

Showing 7 changed files with 217 additions and 208 deletions.
diff --git a/twentytwenty-blocks/block-styles.css b/twentytwenty-blocks/block-styles.css
@@ -29,8 +29,8 @@
 }
 
 .is-style-header-nav .wp-block-navigation-link > ul {
-	background: #000;
-	border-color: #000;
+	background: var(--wp--preset--color--foreground);
+	border-color: var(--wp--preset--color--foreground);
 	border-radius: 0.4rem;
 	font-size: 1.7rem;
 	opacity: 0;

diff --git a/twentytwenty-blocks/block-templates/index.html b/twentytwenty-blocks/block-templates/index.html
@@ -3,7 +3,11 @@
 <!-- /wp:group -->
 
 <!-- wp:group {"align":"full","className":"site-content"} -->
-<div class="wp-block-group alignfull site-content"><div class="wp-block-group__inner-container"><!-- wp:post-title /--><!-- wp:post-content /--></div></div>
+<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","className":"site-footer"} -->

diff --git a/twentytwenty-blocks/experimental-theme.json b/twentytwenty-blocks/experimental-theme.json
@@ -0,0 +1,58 @@
+{
+	"global": {
+		"presets": {
+			"color": [
+				{
+					"slug": "background",
+					"value": "#f5efe0"
+				},
+				{
+					"slug": "foreground",
+					"value": "#000"
+				},
+				{
+					"slug": "primary",
+					"value": "#cd2653"
+				}
+			],
+			"font-size": [
+				{
+					"slug": "small",
+					"value": "20px"
+				},
+				{
+					"slug": "normal",
+					"value": "22px"
+				},
+				{
+					"slug": "large",
+					"value": "37px"
+				},
+				{
+					"slug": "huge",
+					"value": "50px"
+				}
+			],
+			"line-height": [
+				{
+					"slug": "normal",
+					"value": "1.8"
+				},
+				{
+					"slug": "heading",
+					"value": "1.4"
+				}
+			],
+			"font-weight": [
+				{
+					"slug": "normal",
+					"value": "normal"
+				},
+				{
+					"slug": "heading",
+					"value": "700"
+				}
+			]
+		}
+	}
+}
diff --git a/twentytwenty-blocks/functions.php b/twentytwenty-blocks/functions.php
@@ -52,29 +52,19 @@ function twentytwentyblocks_theme_support()  {
 			'editor-color-palette',
 			array(
 				array(
-					'name'  => __( 'Primary', 'twentytwenty-blocks' ),
-					'slug'  => 'primary',
-					'color' => '#0073AA',
-				),
-				array(
-					'name'  => __( 'Secondary', 'twentytwenty-blocks' ),
-					'slug'  => 'secondary',
-					'color' => '#005177',
+					'name'  => __( 'Background', 'twentytwenty-blocks' ),
+					'slug'  => 'background',
+					'color' => '#f5efe0',
 				),
 				array(
-					'name'  => __( 'Dark Gray', 'twentytwenty-blocks' ),
-					'slug'  => 'dark-gray',
-					'color' => '#111',
+					'name'  => __( 'Text', 'twentytwenty-blocks' ),
+					'slug'  => 'foreground',
+					'color' => '#000',
 				),
 				array(
-					'name'  => __( 'Light Gray', 'twentytwenty-blocks' ),
-					'slug'  => 'light-gray',
-					'color' => '#767676',
-				),
-				array(
-					'name'  => __( 'White', 'twentytwenty-blocks' ),
-					'slug'  => 'white',
-					'color' => '#FFF',
+					'name'  => __( 'Primary', 'twentytwenty-blocks' ),
+					'slug'  => 'primary',
+					'color' => '#cd2653',
 				),
 			)
 		);
@@ -308,6 +298,16 @@ function twentytwentyblocks_register_styles() {
 }
 add_action( 'wp_enqueue_scripts', 'twentytwentyblocks_register_styles' );
 
+/**
+ * Load styles into Edit Site
+ * (This shouldn't be necessary but it seems to be for now.)
+ */
+function twentytwentyblocks_register_FSE_styles() {
+	$theme_version = wp_get_theme()->get( 'Version' );
+	wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/twentytwenty-styles/editor-style-block.css', false, $theme_version );
+    wp_enqueue_style( 'custom_wp_admin_css' );
+}
+add_action( 'admin_enqueue_scripts', 'twentytwentyblocks_register_FSE_styles' );
 
 /**
  * Register Block Patterns.
@@ -321,4 +321,4 @@ function twentytwentyblocks_register_styles() {
 	        'content' => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://2020.wordpress.net/wp-content/uploads/2019/10/2020-three-quarters-1.png\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Works and Days</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"fontSize\":\"larger\"} -->\n<p class=\"has-larger-font-size\">August 1 – December 1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\">Read More</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://2020.wordpress.net/wp-content/uploads/2019/10/2020-three-quarters-2.png\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>The Life I Deserve</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"fontSize\":\"larger\"} -->\n<p class=\"has-larger-font-size\">August 1 – December 1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\">Read More</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
 	    )
 	);
-}
+}
diff --git a/twentytwenty-blocks/style.css b/twentytwenty-blocks/style.css
@@ -16,6 +16,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 */
 @import url('twentytwenty-styles/style.css');
 
+/* 
+ * Set the default link color.
+*/
+:root {
+	--wp--style--color--link: var(--wp--preset--color--primary);
+}
+
 /*
 ** Header
 */
@@ -48,22 +55,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	background-color: #fff;
 }
 
+
 /*
-** Entry Header
+** Site Content
+** (Extra specificity here is necessary to override default theme styles for content within Group block inner containers.) 
 */
-
-.site-content > h1:first-child {
-	width: 100%;
-	padding: 4rem 2rem;
-	margin: 0 0 4rem;
-	text-align: center;
-	background: #FFF;
-}
-
-@media screen and (min-width: 700px) {
-	.site-content > h1:first-child {
-		padding: 8rem 2rem;
-	}
+.site-content > .wp-block-group__inner-container > .entry-content:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
+	max-width: inherit;
 }
 
 /*