Make WordPress Core

Opened 18 months ago

Closed 17 months ago

Last modified 17 months ago

#57245 closed defect (bug) (fixed)

Twenty Twenty-Three: Aubergine has wrong gradient values

Reported by: wildworks's profile wildworks Owned by: audrasjb's profile audrasjb
Milestone: 6.2 Priority: normal
Severity: normal Version: 6.1
Component: Bundled Theme Keywords: has-patch commit
Focuses: css Cc:

Description (last modified by sabernhardt)

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)

Attachments (1)

tt3_gradients.png (125.7 KB) - added by wildworks 18 months ago.

Download all attachments as: .zip

Change History (8)

This ticket was mentioned in PR #3715 on WordPress/wordpress-develop by @wildworks.

18 months ago

  • Keywords has-patch added

#2 @sabernhardt
18 months ago

  • Component changed from Themes to Bundled Theme

#3 @sabernhardt
18 months ago

  • Description modified (diff)
  • Focuses css added
  • Milestone changed from Awaiting Review to 6.2

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.)

#4 @audrasjb
17 months ago

  • Owner set to audrasjb
  • Status changed from new to accepted
  • Version set to 6.1

Alright, the patch fixes the issue on my side as well.
Self-assigning for commit.

#5 @audrasjb
17 months ago

  • Keywords commit added

#6 @audrasjb
17 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 55041:

Twenty Twenty-Three: Fix incorrect gradient values in Aubergine theme.

This changeset removes two unwanted semicolons from the gradients declaration in aubergine.json, fixing two gradients that were showing a checkerboard pattern instead of the gradient, and a console error for each of them.

Props wildworks, sabernhardt.
Fixes #57245.

Note: See TracTickets for help on using tickets.