WordPress.org

Make WordPress Core

Ticket #49711: 49711.3.patch

File 49711.3.patch, 12.7 KB (added by samful, 12 months ago)
  • wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css

    diff --git wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css
    index 4b3018a..a872e6b 100644
    Inter variable font. Usage: 
    207207        color: #000;
    208208}
    209209
     210/* CUSTOM GRADIENT BACKGROUNDS */
     211
     212:root  .has-primary-to-accent-gradient-background {
     213        background: linear-gradient(135deg, rgba(0,0,0, 1) 0%, rgba(214,19,71, 1) 100%);
     214}
     215
     216:root  .has-accent-to-primary-gradient-background {
     217        background: linear-gradient(135deg, rgba(214,19,71, 1) 0%, rgba(0,0,0, 1) 100%);
     218}
     219
     220:root  .has-background-to-accent-to-primary-gradient-background {
     221        background: linear-gradient(135deg, rgba(245,239,224, 1) 0%, rgba(214,19,71, 1) 50%, rgba(0,0,0, 1) 100%);
     222}
     223
     224:root  .has-primary-to-secondary-gradient-background {
     225        background: linear-gradient(135deg, rgba(0,0,0, 1) 0%, rgba(105,96,62, 1) 100%);
     226}
     227
     228:root  .has-secondary-to-subtle-background-gradient-background {
     229        background: linear-gradient(135deg, rgba(105,96,62, 1) 0%, rgba(215,207,171, 1) 100%);
     230}
     231
    210232/* GENERAL COLORS */
    211233
    212234.has-black-background-color {
  • wp-content/themes/twentytwenty/assets/css/editor-style-block.css

    diff --git wp-content/themes/twentytwenty/assets/css/editor-style-block.css wp-content/themes/twentytwenty/assets/css/editor-style-block.css
    index 55d1446..0001675 100644
    Inter variable font. Usage: 
    207207        color: #000;
    208208}
    209209
     210/* CUSTOM GRADIENT BACKGROUNDS */
     211
     212:root  .has-primary-to-accent-gradient-background {
     213        background: linear-gradient(135deg, rgba(0,0,0, 1) 0%, rgba(214,19,71, 1) 100%);
     214}
     215
     216:root  .has-accent-to-primary-gradient-background {
     217        background: linear-gradient(135deg, rgba(214,19,71, 1) 0%, rgba(0,0,0, 1) 100%);
     218}
     219
     220:root  .has-background-to-accent-to-primary-gradient-background {
     221        background: linear-gradient(135deg, rgba(245,239,224, 1) 0%, rgba(214,19,71, 1) 50%, rgba(0,0,0, 1) 100%);
     222}
     223
     224:root  .has-primary-to-secondary-gradient-background {
     225        background: linear-gradient(135deg, rgba(0,0,0, 1) 0%, rgba(105,96,62, 1) 100%);
     226}
     227
     228:root  .has-secondary-to-subtle-background-gradient-background {
     229        background: linear-gradient(135deg, rgba(105,96,62, 1) 0%, rgba(215,207,171, 1) 100%);
     230}
     231
    210232/* GENERAL COLORS */
    211233
    212234.has-black-background-color {
  • wp-content/themes/twentytwenty/functions.php

    diff --git wp-content/themes/twentytwenty/functions.php wp-content/themes/twentytwenty/functions.php
    index ce1e2a6..ece0965 100644
    function twentytwenty_theme_support() { 
    132132        // Add theme support for selective refresh for widgets.
    133133        add_theme_support( 'customize-selective-refresh-widgets' );
    134134
     135        //Convert the HEX gradient colors to RGB
     136        $primaryRGB              = twentytwenty_hex2rgb(sanitize_hex_color(twentytwenty_get_color_for_area( 'content', 'text' )));
     137        $secondaryRGB            = twentytwenty_hex2rgb(sanitize_hex_color(twentytwenty_get_color_for_area( 'content', 'secondary' )));
     138        $accentRGB                       = twentytwenty_hex2rgb(sanitize_hex_color(twentytwenty_get_color_for_area( 'content', 'accent' )));
     139        $subtleBackgroundRGB = twentytwenty_hex2rgb(sanitize_hex_color(twentytwenty_get_color_for_area( 'content', 'borders' )));
     140
     141        $backgroundRGB  = get_theme_mod( 'background_color' );
     142        if ( ! $backgroundRGB  ) {
     143                $background_color_arr = get_theme_support( 'custom-background' );
     144                $backgroundRGB        = $background_color_arr[0]['default-color'];
     145        }
     146        $backgroundRGB = twentytwenty_hex2rgb(sanitize_hex_color_no_hash($backgroundRGB));
     147
     148        // Add theme support for block gradient colours.
     149        add_theme_support(
     150                'editor-gradient-presets',
     151                array(
     152                        array(
     153                                'name'     => __( 'primary to accent', 'twentytwenty' ),
     154                                'gradient' => 'linear-gradient(135deg, rgba('.$primaryRGB['red'].','.$primaryRGB['green'].','.$primaryRGB['blue'].', 1) 0%, rgba('.$accentRGB['red'].','.$accentRGB['green'].','.$accentRGB['blue'].', 1) 100%)',
     155                                'slug'     => 'primary-to-accent'
     156                        ),
     157                        array(
     158                                'name'     => __( 'accent to primary', 'twentytwenty' ),
     159                                'gradient' => 'linear-gradient(135deg, rgba('.$accentRGB['red'].','.$accentRGB['green'].','.$accentRGB['blue'].', 1) 0%, rgba('.$primaryRGB['red'].','.$primaryRGB['green'].','.$primaryRGB['blue'].', 1) 100%)',
     160                                'slug'     => 'accent-to-primary',
     161                        ),
     162                        array(
     163                                'name'     => __( 'background to accent to primary', 'twentytwenty' ),
     164                                'gradient' => 'linear-gradient(135deg, rgba('.$backgroundRGB['red'].','.$backgroundRGB['green'].','.$backgroundRGB['blue'].', 1) 0%, rgba('.$accentRGB['red'].','.$accentRGB['green'].','.$accentRGB['blue'].', 1) 50%, rgba('.$primaryRGB['red'].','.$primaryRGB['green'].','.$primaryRGB['blue'].', 1) 100%)',
     165                                'slug'     =>  'background-to-accent-to-primary',
     166                        ),
     167                        array(
     168                                'name'     => __( 'primary to secondary', 'twentytwenty' ),
     169                                'gradient' => 'linear-gradient(135deg, rgba('.$primaryRGB['red'].','.$primaryRGB['green'].','.$primaryRGB['blue'].', 1) 0%, rgba('.$secondaryRGB['red'].','.$secondaryRGB['green'].','.$secondaryRGB['blue'].', 1) 100%)',
     170                                'slug'     => 'primary-to-secondary',
     171                        ),
     172                        array(
     173                                'name'     => __( 'secondary to subtle background', 'twentytwenty' ),
     174                                'gradient' => 'linear-gradient(135deg, rgba('.$secondaryRGB['red'].','.$secondaryRGB['green'].','.$secondaryRGB['blue'].', 1) 0%, rgba('.$subtleBackgroundRGB['red'].','.$subtleBackgroundRGB['green'].','.$subtleBackgroundRGB['blue'].', 1) 100%)',
     175                                'slug'     =>  'secondary-to-subtle-background',
     176                        )
     177                )
     178        );
     179
    135180        /*
    136181         * Adds `async` and `defer` support for scripts registered or enqueued
    137182         * by the theme.
    function twentytwenty_get_elements_array() { 
    755800        */
    756801        return apply_filters( 'twentytwenty_get_elements_array', $elements );
    757802}
     803
     804/**
     805 * Converts hex colors to an RGB array
     806 *
     807 * @since 1.0
     808 *
     809 * @return array Array of RGB colors
     810 */
     811function twentytwenty_hex2rgb( $color ) {
     812        if ( $color[0] == '#' ) {
     813                        $color = substr( $color, 1 );
     814        }
     815        if ( strlen( $color ) == 6 ) {
     816                        list( $r, $g, $b ) = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );
     817        } elseif ( strlen( $color ) == 3 ) {
     818                        list( $r, $g, $b ) = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );
     819        } else {
     820                        return false;
     821        }
     822        $r = hexdec( $r );
     823        $g = hexdec( $g );
     824        $b = hexdec( $b );
     825
     826        return array( 'red' => $r, 'green' => $g, 'blue' => $b );
     827}
     828 No newline at end of file
  • wp-content/themes/twentytwenty/inc/custom-css.php

    diff --git wp-content/themes/twentytwenty/inc/custom-css.php wp-content/themes/twentytwenty/inc/custom-css.php
    index a1c560d..f9391a6 100644
    if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { 
    7676                $background         = sanitize_hex_color_no_hash( get_theme_mod( 'background_color' ) );
    7777                $background_default = 'f5efe0';
    7878
     79                // RGB colors for gradients.
     80                $primaryRGB              = twentytwenty_hex2rgb(!empty($body) ? $body : $body_default);
     81                $secondaryRGB            = twentytwenty_hex2rgb(!empty($secondary) ? $secondary : $secondary_default);
     82                $accentRGB                       = twentytwenty_hex2rgb(!empty($accent) ? $accent : $accent_default);
     83                $subtleBackgroundRGB = twentytwenty_hex2rgb(!empty($borders) ? $borders : $borders_default);
     84                $backgroundRGB           = twentytwenty_hex2rgb(!empty($background) ? $background : $background_default);
     85
    7986                ob_start();
    8087
    8188                /**
    if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { 
    116123                                twentytwenty_generate_css( '.cover-header .entry-header *', 'color', $cover );
    117124                        }
    118125
    119                         // Block Editor Styles.
     126                // Block Editor Styles.
    120127                } elseif ( 'block-editor' === $type ) {
    121128
    122129                        // Colors.
    if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { 
    184191                        }
    185192                }
    186193
     194                // Front-End Styles and Block Editor Styles.
     195                if ('front-end' === $type || 'block-editor' === $type){
     196
     197                        // Gradient colors for Blocks.
     198                        // Primary to Accent.
     199                        if ( ( $body && $body !== $body_default ) || ( $accent && $accent !== $accent_default ) ) {
     200                                twentytwenty_generate_css( ':root  .has-primary-to-accent-gradient-background', 'background', 'linear-gradient(135deg, rgba('.$primaryRGB['red'].','.$primaryRGB['green'].','.$primaryRGB['blue'].', 1) 0%, rgba('.$accentRGB['red'].','.$accentRGB['green'].','.$accentRGB['blue'].', 1) 100%)' );
     201                        }
     202
     203                        // Accent to Primary.
     204                        if ( ( $accent && $accent !== $accent_default ) || ( $body && $body !== $body_default ) ) {
     205                                twentytwenty_generate_css( ':root  .has-accent-to-primary-gradient-background', 'background', 'linear-gradient(135deg, rgba('.$accentRGB['red'].','.$accentRGB['green'].','.$accentRGB['blue'].', 1) 0%, rgba('.$primaryRGB['red'].','.$primaryRGB['green'].','.$primaryRGB['blue'].', 1) 100%)' );
     206                        }
     207
     208                        // Background to Accent to Primary.
     209                        if ( ( $background && $background !== $background_default ) || ( $accent && $accent !== $accent_default ) || ( $body && $body !== $body_default ) ) {
     210                                twentytwenty_generate_css( ':root  .has-background-to-accent-to-primary-gradient-background', 'background', 'linear-gradient(135deg, rgba('.$backgroundRGB['red'].','.$backgroundRGB['green'].','.$backgroundRGB['blue'].', 1) 0%, rgba('.$accentRGB['red'].','.$accentRGB['green'].','.$accentRGB['blue'].', 1) 50%, rgba('.$primaryRGB['red'].','.$primaryRGB['green'].','.$primaryRGB['blue'].', 1) 100%)' );
     211                        }
     212       
     213                        // Primary to Secondary.
     214                        if ( ( $body && $body !== $body_default ) || ( $secondary && $secondary !== $secondary_default ) ) {
     215                                twentytwenty_generate_css( ':root  .has-primary-to-secondary-gradient-background', 'background', 'linear-gradient(135deg, rgba('.$primaryRGB['red'].','.$primaryRGB['green'].','.$primaryRGB['blue'].', 1) 0%, rgba('.$secondaryRGB['red'].','.$secondaryRGB['green'].','.$secondaryRGB['blue'].', 1) 100%)' );
     216                        }
     217
     218                        // Secondary to Subtle Background.
     219                        if ( ( $secondary && $secondary !== $secondary_default ) || ( $borders && $borders !== $borders_default ) ) {
     220                                twentytwenty_generate_css( ':root  .has-secondary-to-subtle-background-gradient-background', 'background', 'linear-gradient(135deg, rgba('.$secondaryRGB['red'].','.$secondaryRGB['green'].','.$secondaryRGB['blue'].', 1) 0%, rgba('.$subtleBackgroundRGB['red'].','.$subtleBackgroundRGB['green'].','.$subtleBackgroundRGB['blue'].', 1) 100%)' );
     221                        }
     222                }
     223
    187224                // Return the results.
    188225                return ob_get_clean();
    189226
  • wp-content/themes/twentytwenty/style-rtl.css

    diff --git wp-content/themes/twentytwenty/style-rtl.css wp-content/themes/twentytwenty/style-rtl.css
    index 6114563..c7e4133 100644
    h2.entry-title { 
    27642764        color: #000;
    27652765}
    27662766
     2767/* Block Custom Gradient Backgrounds --------- */
     2768
     2769:root  .has-primary-to-accent-gradient-background {
     2770        background: linear-gradient(135deg, rgba(0,0,0, 1) 0%, rgba(214,19,71, 1) 100%);
     2771}
     2772
     2773:root  .has-accent-to-primary-gradient-background {
     2774        background: linear-gradient(135deg, rgba(214,19,71, 1) 0%, rgba(0,0,0, 1) 100%);
     2775}
     2776
     2777:root  .has-background-to-accent-to-primary-gradient-background {
     2778        background: linear-gradient(135deg, rgba(245,239,224, 1) 0%, rgba(214,19,71, 1) 50%, rgba(0,0,0, 1) 100%);
     2779}
     2780
     2781:root  .has-primary-to-secondary-gradient-background {
     2782        background: linear-gradient(135deg, rgba(0,0,0, 1) 0%, rgba(105,96,62, 1) 100%);
     2783}
     2784
     2785:root  .has-secondary-to-subtle-background-gradient-background {
     2786        background: linear-gradient(135deg, rgba(105,96,62, 1) 0%, rgba(215,207,171, 1) 100%);
     2787}
    27672788
    27682789/* Block Typography Classes ------------------ */
    27692790
  • wp-content/themes/twentytwenty/style.css

    diff --git wp-content/themes/twentytwenty/style.css wp-content/themes/twentytwenty/style.css
    index 4e887a3..82f6e1b 100644
    h2.entry-title { 
    27802780        color: #000;
    27812781}
    27822782
     2783/* Block Custom Gradient Backgrounds --------- */
     2784
     2785:root  .has-primary-to-accent-gradient-background {
     2786        background: linear-gradient(135deg, rgba(0,0,0, 1) 0%, rgba(214,19,71, 1) 100%);
     2787}
     2788
     2789:root  .has-accent-to-primary-gradient-background {
     2790        background: linear-gradient(135deg, rgba(214,19,71, 1) 0%, rgba(0,0,0, 1) 100%);
     2791}
     2792
     2793:root  .has-background-to-accent-to-primary-gradient-background {
     2794        background: linear-gradient(135deg, rgba(245,239,224, 1) 0%, rgba(214,19,71, 1) 50%, rgba(0,0,0, 1) 100%);
     2795}
     2796
     2797:root  .has-primary-to-secondary-gradient-background {
     2798        background: linear-gradient(135deg, rgba(0,0,0, 1) 0%, rgba(105,96,62, 1) 100%);
     2799}
     2800
     2801:root  .has-secondary-to-subtle-background-gradient-background {
     2802        background: linear-gradient(135deg, rgba(105,96,62, 1) 0%, rgba(215,207,171, 1) 100%);
     2803}
    27832804
    27842805/* Block Typography Classes ------------------ */
    27852806