Changeset 52928

Timestamp:

03/13/2022 09:48:08 AM (3 years ago)

Author:

audrasjb

Message:

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

This change implements gradient background options that fit the color scheme used in Twenty Thirteen.

Props ianbelanger, tomjdevisser, audrasjb.
Fixes #49762.

Location:

trunk/src/wp-content/themes/twentythirteen

Files:

• css/editor-style.css (modified) (1 diff)
• functions.php (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentythirteen/css/editor-style.css

@@ -41 +41 @@
 }
 
+/* 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%);
+}
 
 /**

trunk/src/wp-content/themes/twentythirteen/functions.php

@@ -155 +155 @@
                 'slug'  => 'off-white',
                 'color' => '#f7f5e7',
+            ),
+        )
+    );
+
+    // 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',
             ),
         )

trunk/src/wp-content/themes/twentythirteen/style.css

@@ -466 +466 @@
 }
 
+/* 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%);
+}
 
 /**