Make WordPress Core

Changeset 52928


Ignore:
Timestamp:
03/13/2022 09:48:08 AM (2 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentythirteen/css/editor-style.css

    r33418 r52928  
    4141}
    4242
     43/* Custom gradient block backgrounds */
     44.has-autumn-brown-gradient-background {
     45    background: linear-gradient(135deg, rgba(226,45,15,1) 0%, rgba(158,25,13,1) 100%);
     46}
     47.has-sunset-yellow-gradient-background {
     48    background: linear-gradient(135deg, rgba(233,139,41,1) 0%, rgba(238,179,95,1) 100%);
     49}
     50.has-light-sky-gradient-background {
     51    background: linear-gradient(135deg,rgba(228,228,228,1.0) 0%,rgba(208,225,252,1.0) 100%);
     52}
     53.has-dark-sky-gradient-background {
     54    background: linear-gradient(135deg,rgba(0,0,0,1.0) 0%,rgba(56,61,69,1.0) 100%);
     55}
    4356
    4457/**
  • trunk/src/wp-content/themes/twentythirteen/functions.php

    r51967 r52928  
    155155                'slug'  => 'off-white',
    156156                'color' => '#f7f5e7',
     157            ),
     158        )
     159    );
     160
     161    // Add support for block gradient colors.
     162    add_theme_support(
     163        'editor-gradient-presets',
     164        array(
     165            array(
     166                'name'     => __( 'Autumn Brown', 'twentythirteen' ),
     167                'gradient' => 'linear-gradient(135deg, rgba(226,45,15,1) 0%, rgba(158,25,13,1) 100%)',
     168                'slug'     => 'autumn-brown',
     169            ),
     170            array(
     171                'name'     => __( 'Sunset Yellow', 'twentythirteen' ),
     172                'gradient' => 'linear-gradient(135deg, rgba(233,139,41,1) 0%, rgba(238,179,95,1) 100%)',
     173                'slug'     => 'sunset-yellow',
     174            ),
     175            array(
     176                'name'     => __( 'Light Sky', 'twentythirteen' ),
     177                'gradient' => 'linear-gradient(135deg,rgba(228,228,228,1.0) 0%,rgba(208,225,252,1.0) 100%)',
     178                'slug'     => 'light-sky',
     179            ),
     180            array(
     181                'name'     => __( 'Dark Sky', 'twentythirteen' ),
     182                'gradient' => 'linear-gradient(135deg,rgba(0,0,0,1.0) 0%,rgba(56,61,69,1.0) 100%)',
     183                'slug'     => 'dark-sky',
    157184            ),
    158185        )
  • trunk/src/wp-content/themes/twentythirteen/style.css

    r52618 r52928  
    466466}
    467467
     468/* Custom gradient block backgrounds */
     469.has-autumn-brown-gradient-background {
     470    background: linear-gradient(135deg, rgba(226,45,15,1) 0%, rgba(158,25,13,1) 100%);
     471}
     472.has-sunset-yellow-gradient-background {
     473    background: linear-gradient(135deg, rgba(233,139,41,1) 0%, rgba(238,179,95,1) 100%);
     474}
     475.has-light-sky-gradient-background {
     476    background: linear-gradient(135deg,rgba(228,228,228,1.0) 0%,rgba(208,225,252,1.0) 100%);
     477}
     478.has-dark-sky-gradient-background {
     479    background: linear-gradient(135deg,rgba(0,0,0,1.0) 0%,rgba(56,61,69,1.0) 100%);
     480}
    468481
    469482/**
Note: See TracChangeset for help on using the changeset viewer.