[wp-trac] [WordPress Trac] #49711: Twenty Twenty: Add gradient background options that fit the theme color scheme

[WordPress Trac]

#49711: Twenty Twenty: Add gradient background options that fit the theme color
scheme
-------------------------------------------------+-------------------------
 Reporter:  ianbelanger                          |       Owner:  (none)
     Type:  enhancement                          |      Status:  new
 Priority:  normal                               |   Milestone:  Future
                                                 |  Release
Component:  Bundled Theme                        |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  good-first-bug has-patch needs-      |     Focuses:  ui, css
  design-feedback                                |
-------------------------------------------------+-------------------------

Comment (by Anlino):

 Hi @samful,

 Sorry for the late reply. I've had a look at the patch now, and included
 some notes below.

 I believe we also need to output the gradient custom CSS in the block
 editor section of `custom-css.php`. For me, running Gutenberg 8.0.0,
 blocks with the gradients set aren't displaying the gradient background on
 the block unless I duplicate the generate CSS code for the gradient
 classes in the `elseif ( 'block-editor' === $type )` section of the file.

 The `.has-X-color` classes prepends the target with a `:root` selector to
 increase specificity, so we should probably replicate that in the gradient
 classes as well (so instead of targeting `‌.has-primary-to-accent-
 gradient-background`, we target `:root .has-primary-to-accent-gradient-
 background`).

 The `.has-X-color` classes are included in `style.css` and `.editor-style-
 block.css` with the default values, and are output in `custom-css.php`
 only if the value set in the Customizer differs from the default value.
 For consistency, the gradient code should probably be structured the same
 way. In other words, the gradient classes should be included in
 `style.css` and `editor-style-block.css` with the default values, and the
 code outputting the gradient styles in `custom-css.php` should be wrapped
 in conditionals so they are only output if any of the colors used in each
 gradient differ from the default color.

 Using `.has-primary-to-accent-gradient-background` as an example:

 {{{#!php
 if ( ( $body && $body !== $body_default ) || ( $accent && $accent !==
 $accent_default ) ) {
         twentytwenty_generate_css( '.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%)' );
 }
 }}}


 The hex2rgb function should probably be near the bottom of the
 `functions.php` file, close to the `twentytwenty_get_elements_array`
 function, and it’ll need to be prefixed with `twentytwenty_` (so
 `twentytwenty_hex2rgb`).

 There’s a bunch of guidelines for code formatting to adhere to (spacing,
 variable naming, comment structure, and so on), but I’m not the best
 person to speak to that stuff.

 Re the preview in the Customizer: It seems like the JavaScript function
 `twentyTwentyGenerateColorA11yPreviewStyles()`, which renders the color
 preview, uses the selectors and values returned from
 `twentytwenty_get_elements_array()`. I’m assuming a similar solution would
 need to be created for the gradients, but someone else will have to say
 how that should be built. :)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49711#comment:10>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform