From 89de8f3b35d985116ab00e7629669b1442fec516 Mon Sep 17 00:00:00 2001 From: Jb Audras Date: Sun, 13 Mar 2022 09:48:08 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@52928 602fd350-edb4-49c9-b593-d223f7449a82 --- .../twentythirteen/css/editor-style.css | 13 +++++++++ .../themes/twentythirteen/functions.php | 27 +++++++++++++++++++ .../themes/twentythirteen/style.css | 13 +++++++++ 3 files changed, 53 insertions(+) diff --git a/src/wp-content/themes/twentythirteen/css/editor-style.css b/src/wp-content/themes/twentythirteen/css/editor-style.css index 568418992b..24297fd5b8 100644 --- 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 index f47a249dba..ddb6833f92 100644 --- 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 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 index 730176c764..5727d2e8f0 100644 --- 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