Twenty Thirteen: Add gradient background options using the theme color scheme.

audrasjb · audrasjb · commit 89de8f3b35d9 · 2022-03-13T09:48:08.000Z
This change implements gradient background options that fit the color scheme used in Twenty Thirteen. Props ianbelanger, tomjdevisser, audrasjb. Fixes #49762. git-svn-id: https://develop.svn.wordpress.org/trunk@52928 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-content/themes/twentythirteen/css/editor-style.css b/src/wp-content/themes/twentythirteen/css/editor-style.css
@@ -40,6 +40,19 @@ body {
 	vertical-align: baseline;
 }
 
+/* Custom gradient block backgrounds */
+.has-autumn-brown-gradient-background {
+	background: linear-gradient(135deg, rgba(226,45,15,1) 0%, rgba(158,25,13,1) 100%);
+}
+.has-sunset-yellow-gradient-background {
+	background: linear-gradient(135deg, rgba(233,139,41,1) 0%, rgba(238,179,95,1) 100%);
+}
+.has-light-sky-gradient-background {
+	background: linear-gradient(135deg,rgba(228,228,228,1.0) 0%,rgba(208,225,252,1.0) 100%);
+}
+.has-dark-sky-gradient-background {
+	background: linear-gradient(135deg,rgba(0,0,0,1.0) 0%,rgba(56,61,69,1.0) 100%);
+}
 
 /**
  * 2.0 Headings
diff --git a/src/wp-content/themes/twentythirteen/functions.php b/src/wp-content/themes/twentythirteen/functions.php
@@ -158,6 +158,33 @@ function twentythirteen_setup() {
 		)
 	);
 
+	// Add support for block gradient colors.
+	add_theme_support(
+		'editor-gradient-presets',
+		array(
+			array(
+				'name'     => __( 'Autumn Brown', 'twentythirteen' ),
+				'gradient' => 'linear-gradient(135deg, rgba(226,45,15,1) 0%, rgba(158,25,13,1) 100%)',
+				'slug'     => 'autumn-brown',
+			),
+			array(
+				'name'     => __( 'Sunset Yellow', 'twentythirteen' ),
+				'gradient' => 'linear-gradient(135deg, rgba(233,139,41,1) 0%, rgba(238,179,95,1) 100%)',
+				'slug'     => 'sunset-yellow',
+			),
+			array(
+				'name'     => __( 'Light Sky', 'twentythirteen' ),
+				'gradient' => 'linear-gradient(135deg,rgba(228,228,228,1.0) 0%,rgba(208,225,252,1.0) 100%)',
+				'slug'     => 'light-sky',
+			),
+			array(
+				'name'     => __( 'Dark Sky', 'twentythirteen' ),
+				'gradient' => 'linear-gradient(135deg,rgba(0,0,0,1.0) 0%,rgba(56,61,69,1.0) 100%)',
+				'slug'     => 'dark-sky',
+			),
+		)
+	);
+
 	// Adds RSS feed links to <head> for posts and comments.
 	add_theme_support( 'automatic-feed-links' );
 
diff --git a/src/wp-content/themes/twentythirteen/style.css b/src/wp-content/themes/twentythirteen/style.css
@@ -465,6 +465,19 @@ hr {
 	margin: 0 0 24px;
 }
 
+/* Custom gradient block backgrounds */
+.has-autumn-brown-gradient-background {
+	background: linear-gradient(135deg, rgba(226,45,15,1) 0%, rgba(158,25,13,1) 100%);
+}
+.has-sunset-yellow-gradient-background {
+	background: linear-gradient(135deg, rgba(233,139,41,1) 0%, rgba(238,179,95,1) 100%);
+}
+.has-light-sky-gradient-background {
+	background: linear-gradient(135deg,rgba(228,228,228,1.0) 0%,rgba(208,225,252,1.0) 100%);
+}
+.has-dark-sky-gradient-background {
+	background: linear-gradient(135deg,rgba(0,0,0,1.0) 0%,rgba(56,61,69,1.0) 100%);
+}
 
 /**
  * 2.0 Repeatable Patterns
