Make WordPress Core

Changeset 52724


Ignore:
Timestamp:
02/13/2022 09:45:13 PM (3 years ago)
Author:
audrasjb
Message:

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

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

Props ianbelanger, itsamoreh, pls78, audrasjb.
Fixes #49760.

Location:
trunk/src/wp-content/themes/twentyfifteen
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfifteen/css/blocks.css

    r44381 r52724  
    661661    background-color: #e9f2f9;
    662662}
     663
     664.has-dark-gray-gradient-background {
     665    background-image: linear-gradient(90deg, rgba(17,17,17,1) 0%, rgba(42,42,42,1) 100%);
     666}
     667
     668.has-light-gray-gradient-background {
     669    background-image: linear-gradient(90deg, rgba(241,241,241,1) 0%, rgba(215,215,215,1) 100%);
     670}
     671
     672.has-white-gradient-background {
     673    background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
     674}
     675
     676.has-yellow-gradient-background {
     677    background-image: linear-gradient(90deg, rgba(244,202,22,1) 0%, rgba(205,168,10,1) 100%);
     678}
     679
     680.has-dark-brown-gradient-background {
     681    background-image: linear-gradient(90deg, rgba(53,39,18,1) 0%, rgba(91,67,31,1) 100%);
     682}
     683
     684.has-medium-pink-gradient-background {
     685    background-image: linear-gradient(90deg, rgba(229,59,81,1) 0%, rgba(209,28,51,1) 100%);
     686}
     687
     688.has-light-pink-gradient-background {
     689    background-image: linear-gradient(90deg, rgba(255,229,209,1) 0%, rgba(255,200,158,1) 100%);
     690}
     691
     692.has-dark-purple-gradient-background {
     693    background-image: linear-gradient(90deg, rgba(46,34,86,1) 0%, rgba(66,48,123,1) 100%);
     694}
     695
     696.has-purple-gradient-background {
     697    background-image: linear-gradient(90deg, rgba(103,73,112,1) 0%, rgba(131,93,143,1) 100%);
     698}
     699
     700.has-blue-gray-gradient-background {
     701    background-image: linear-gradient(90deg, rgba(34,49,63,1) 0%, rgba(52,75,96,1) 100%);
     702}
     703
     704.has-bright-blue-gradient-background {
     705    background-image: linear-gradient(90deg, rgba(85,195,220,1) 0%, rgba(43,180,211,1) 100%);
     706}
     707
     708.has-light-blue-gradient-background {
     709    background-image: linear-gradient(90deg, rgba(233,242,249,1) 0%, rgba(193,218,238,1) 100%);
     710}
  • trunk/src/wp-content/themes/twentyfifteen/functions.php

    r51043 r52724  
    251251        );
    252252
     253        // Add support for custom color scheme.
     254        add_theme_support(
     255            'editor-gradient-presets',
     256            array(
     257                array(
     258                    'name'     => __( 'Dark Gray Gradient', 'twentyfifteen' ),
     259                    'slug'     => 'dark-gray-gradient-gradient',
     260                    'gradient' => 'linear-gradient(90deg, rgba(17,17,17,1) 0%, rgba(42,42,42,1) 100%)',
     261                ),
     262                array(
     263                    'name'     => __( 'Light Gray Gradient', 'twentyfifteen' ),
     264                    'slug'     => 'light-gray-gradient',
     265                    'gradient' => 'linear-gradient(90deg, rgba(241,241,241,1) 0%, rgba(215,215,215,1) 100%)',
     266                ),
     267                array(
     268                    'name'     => __( 'White Gradient', 'twentyfifteen' ),
     269                    'slug'     => 'white-gradient',
     270                    'gradient' => 'linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%)',
     271                ),
     272                array(
     273                    'name'     => __( 'Yellow Gradient', 'twentyfifteen' ),
     274                    'slug'     => 'yellow-gradient',
     275                    'gradient' => 'linear-gradient(90deg, rgba(244,202,22,1) 0%, rgba(205,168,10,1) 100%)',
     276                ),
     277                array(
     278                    'name'     => __( 'Dark Brown Gradient', 'twentyfifteen' ),
     279                    'slug'     => 'dark-brown-gradient',
     280                    'gradient' => 'linear-gradient(90deg, rgba(53,39,18,1) 0%, rgba(91,67,31,1) 100%)',
     281                ),
     282                array(
     283                    'name'     => __( 'Medium Pink Gradient', 'twentyfifteen' ),
     284                    'slug'     => 'medium-pink-gradient',
     285                    'gradient' => 'linear-gradient(90deg, rgba(229,59,81,1) 0%, rgba(209,28,51,1) 100%)',
     286                ),
     287                array(
     288                    'name'     => __( 'Light Pink Gradient', 'twentyfifteen' ),
     289                    'slug'     => 'light-pink-gradient',
     290                    'gradient' => 'linear-gradient(90deg, rgba(255,229,209,1) 0%, rgba(255,200,158,1) 100%)',
     291                ),
     292                array(
     293                    'name'     => __( 'Dark Purple Gradient', 'twentyfifteen' ),
     294                    'slug'     => 'dark-purple-gradient',
     295                    'gradient' => 'linear-gradient(90deg, rgba(46,34,86,1) 0%, rgba(66,48,123,1) 100%)',
     296                ),
     297                array(
     298                    'name'     => __( 'Purple Gradient', 'twentyfifteen' ),
     299                    'slug'     => 'purple-gradient',
     300                    'gradient' => 'linear-gradient(90deg, rgba(103,73,112,1) 0%, rgba(131,93,143,1) 100%)',
     301                ),
     302                array(
     303                    'name'     => __( 'Blue Gray Gradient', 'twentyfifteen' ),
     304                    'slug'     => 'blue-gray-gradient',
     305                    'gradient' => 'linear-gradient(90deg, rgba(34,49,63,1) 0%, rgba(52,75,96,1) 100%)',
     306                ),
     307                array(
     308                    'name'     => __( 'Bright Blue Gradient', 'twentyfifteen' ),
     309                    'slug'     => 'bright-blue-gradient',
     310                    'gradient' => 'linear-gradient(90deg, rgba(85,195,220,1) 0%, rgba(43,180,211,1) 100%)',
     311                ),
     312                array(
     313                    'name'     => __( 'Light Blue Gradient', 'twentyfifteen' ),
     314                    'slug'     => 'light-blue-gradient',
     315                    'gradient' => 'linear-gradient(90deg, rgba(233,242,249,1) 0%, rgba(193,218,238,1) 100%)',
     316                ),
     317            )
     318        );
     319
    253320        // Indicate widget sidebars can use selective refresh in the Customizer.
    254321        add_theme_support( 'customize-selective-refresh-widgets' );
Note: See TracChangeset for help on using the changeset viewer.