Merge try/global-styles-at-blocks

WordPress · Feb 18, 2020 · 67c3079 · 67c3079
1 parent 322da29
commit 67c3079
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 17 deletions.
diff --git a/lib/global-styles.php b/lib/global-styles.php
@@ -222,6 +222,14 @@ function gutenberg_experimental_global_styles_enqueue_assets() {
 	wp_register_style( 'global-styles', false, array(), true, true );
 	wp_add_inline_style( 'global-styles', $inline_style );
 	wp_enqueue_style( 'global-styles' );
+
+	wp_register_style(
+		'global-styles-block-library',
+		gutenberg_url( 'build/block-library/global.css' ),
+		array(),
+		filemtime( gutenberg_dir_path() . 'build/block-library/global.css' )
+	);
+	wp_enqueue_style( 'global-styles-block-library' );
 }
 
 /**

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -1,7 +1,7 @@
 $blocks-button__height: 56px;
 
 .wp-block-button {
-	color: $white;
+	color: var(--wp--color--white, $white);
 
 	&.aligncenter {
 		text-align: center;
@@ -14,7 +14,7 @@ $blocks-button__height: 56px;
 }
 
 .wp-block-button__link {
-	background-color: $dark-gray-700;
+	background-color: var(--wp--color--background, $dark-gray-700);
 	border: none;
 	border-radius: $blocks-button__height / 2;
 	box-shadow: none;
@@ -36,10 +36,6 @@ $blocks-button__height: 56px;
 	}
 }
 
-.wp-gs .wp-block-button__link:not(.has-background) {
-	background-color: var(--wp--color--primary);
-}
-
 .is-style-squared .wp-block-button__link {
 	border-radius: 0;
 }
@@ -48,7 +44,7 @@ $blocks-button__height: 56px;
 }
 
 .is-style-outline {
-	color: $dark-gray-700;
+	color: var(--wp--color--background, $dark-gray-700);
 
 	.wp-block-button__link {
 		background-color: transparent;

diff --git a/packages/block-library/src/global.scss b/packages/block-library/src/global.scss
@@ -0,0 +1,5 @@
+@import "./paragraph/global.scss";
+@import "./heading/global.scss";
+@import "./list/global.scss";
+@import "./quote/global.scss";
+@import "./pullquote/global.scss";
diff --git a/packages/block-library/src/heading/global.scss b/packages/block-library/src/heading/global.scss
@@ -0,0 +1,11 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: var(--wp--color--foreground--headings);
+	font-size: var(--wp--type--size--headings);
+	font-weight: var(--wp--type--weight);
+	line-height: var(--wp--type--line-height--headings);
+}
diff --git a/packages/block-library/src/list/global.scss b/packages/block-library/src/list/global.scss
@@ -0,0 +1,6 @@
+ul,
+ol {
+	color: var(--wp--color--foreground--base);
+	font-size: var(--wp--type--size--base);
+	line-height: var(--wp--type--line-height--base);
+}
diff --git a/packages/block-library/src/paragraph/global.scss b/packages/block-library/src/paragraph/global.scss
@@ -0,0 +1,5 @@
+p {
+	color: var(--wp--color--foreground--base);
+	font-size: var(--wp--type--size--base);
+	line-height: var(--wp--type--line-height--base);
+}
diff --git a/packages/block-library/src/pullquote/global.scss b/packages/block-library/src/pullquote/global.scss
@@ -0,0 +1,11 @@
+.wp-block-pullquote p {
+	color: var(--wp--color--foreground--base);
+	font-size: var(--wp--type--size--base);
+	line-height: var(--wp--type--line-height--base);
+}
+
+.wp-block-pullquote cite {
+	color: var(--wp--color--foreground--base);
+	font-size: var(--wp--type--size--smaller);
+	line-height: var(--wp--type--line-height--smaller);
+}
diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss
@@ -1,13 +1,13 @@
 .wp-block-pullquote {
-	border-top: 4px solid $dark-gray-500;
-	border-bottom: 4px solid $dark-gray-500;
+	border-top: 4px solid var(--wp--color--foreground-500, $dark-gray-500);
+	border-bottom: 4px solid var(--wp--color--foreground-500, $dark-gray-500);
 	margin-bottom: $default-block-margin;
-	color: $dark-gray-600;
+	color: var(--wp--color--foreground-600, $dark-gray-600);
 
 	cite,
 	footer,
 	&__citation {
-		color: $dark-gray-600;
+		color: var(--wp--color--foreground-600, $dark-gray-600);
 		text-transform: uppercase;
 		font-size: $default-font-size;
 		font-style: normal;

diff --git a/packages/block-library/src/quote/global.scss b/packages/block-library/src/quote/global.scss
@@ -0,0 +1,11 @@
+.wp-block-quote p {
+	color: var(--wp--color--foreground--base);
+	font-size: var(--wp--type--size--base);
+	line-height: var(--wp--type--line-height--base);
+}
+
+.wp-block-quote cite {
+	color: var(--wp--color--foreground--base);
+	font-size: var(--wp--type--size--smaller);
+	line-height: var(--wp--type--line-height--smaller);
+}
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
@@ -1,12 +1,12 @@
 .wp-block-quote {
-	border-left: 4px solid $black;
+	border-left: 4px solid var(--wp--color--border, $black);
 	margin: 0 0 $default-block-margin 0;
 	padding-left: 1em;
 
 	cite,
 	footer,
 	&__citation {
-		color: $dark-gray-300;
+		color: var(--wp--foreground-300, $dark-gray-300);
 		font-size: $default-font-size;
 		margin-top: 1em;
 		position: relative;
@@ -16,7 +16,7 @@
 	&.has-text-align-right,
 	&.has-text-align-right {
 		border-left: none;
-		border-right: 4px solid $black;
+		border-right: 4px solid var(--wp--color--border, $black);
 		padding-left: 0;
 		padding-right: 1em;
 	}

diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
@@ -61,7 +61,7 @@
 		background-color: transparent;
 
 		tbody tr:nth-child(odd) {
-			background-color: $light-gray-200;
+			background-color: var(--wp--color--foreground-200, $light-gray-200);
 		}
 
 		&.has-subtle-light-gray-background-color {
@@ -93,6 +93,6 @@
 			border-color: transparent;
 		}
 
-		border-bottom: 1px solid $light-gray-200;
+		border-bottom: 1px solid var(--wp--color--foreground-200, $light-gray-200);
 	}
 }
diff --git a/packages/block-library/src/verse/editor.scss b/packages/block-library/src/verse/editor.scss
@@ -1,5 +1,5 @@
 pre.wp-block-verse {
-	color: $dark-gray-900;
+	color: var(--wp--color--foreground-900, $dark-gray-900);
 	white-space: nowrap;
 	font-family: inherit;
 	font-size: inherit;