[wp-trac] [WordPress Trac] #57245: Twenty Twenty-Three: Aubergine has wrong gradient values

[WordPress Trac]

#57245: Twenty Twenty-Three: Aubergine has wrong gradient values
---------------------------+---------------------
 Reporter:  wildworks      |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  6.2
Component:  Bundled Theme  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:  has-patch      |     Focuses:  css
---------------------------+---------------------
Changes (by sabernhardt):

 * focuses:   => css
 * milestone:  Awaiting Review => 6.2


Old description:

> The Aubergine theme has invalid gradient values in the json definition
> and an error is displayed in the browser console.
>

> {{{
> Warning: Style property values shouldn't contain a semicolon. Try
> "background: linear-gradient(90deg, var(--wp--preset--color--tertiary)
> 5.74%, var(--wp--preset--color--primary) 100%)" instead.
> }}}
>

> {{{
> Warning: Style property values shouldn't contain a semicolon. Try
> "background: linear-gradient(90deg, var(--wp--preset--color--primary)
> 5.74%, var(--wp--preset--color--tertiary) 100%)" instead.
> }}}
>
> Note that even after correcting this issue, the palette preview appears
> to deviate from the actual style in the Global Style Editor's Gradient
> palette because the CSS variables are not properly referenced.
>
> I think this issue should be fixed separately on the Gutenberg side.

New description:

 The Aubergine theme has invalid gradient values in the json definition and
 an error is displayed in the browser console.


 {{{
 Warning: Style property values shouldn't contain a semicolon. Try
 "background: linear-gradient(90deg, var(--wp--preset--color--tertiary)
 5.74%, var(--wp--preset--color--primary) 100%)" instead.
 }}}


 {{{
 Warning: Style property values shouldn't contain a semicolon. Try
 "background: linear-gradient(90deg, var(--wp--preset--color--primary)
 5.74%, var(--wp--preset--color--tertiary) 100%)" instead.
 }}}

 Note that even after correcting this issue, the palette preview appears to
 deviate from the actual style in the Global Style Editor's Gradient
 palette because the CSS variables are not properly referenced. I think
 this issue should be fixed separately on the Gutenberg side. (GB46233)

--

Comment:

 Tested with the following steps:
 1. Activate Twenty Twenty-Three.
 2. Open the Site Editor.
 3. Access the global Styles menu.
 4. Browse styles and change it to "Aubergine" (the second option, with a
 purple background).
 5. Use the Styles panel's Back (arrow) button to return to the main Styles
 menu.
 6. Access the Colors menu and select the Palette.
 7. Switch to Gradient tab. **''Bug confirmed:''** Two of the gradients
 under the Themes heading showed a checkerboard pattern instead of the
 gradient, and the console had an error for each of them.
 8. **Apply patch** 3715.diff from PR3715, and refresh the Site Editor.
 9. Return to the Gradient tab in the Styles menu (repeat steps 3, 5, 6 and
 7). **''Theme bug fixed:''** Four gradients display under the Themes
 heading, and the console has no errors.
 10. Return to the Colors menu and choose Background under the Elements
 heading. If the Gradient tab is not open, switch from Solid to Gradient.
 (With the patch applied, the four gradient options display for me under
 Theme.)

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