Add custom gradients - Githubissues

WordPress / twentytwentyone

Ongoing development of Twenty Twenty-One, the new default WordPress theme slated for 5.6.

GNU General Public License v2.0

179 stars 117 forks source link

Add custom gradients #46

Closed carolinan closed 4 years ago

carolinan commented 4 years ago

The theme currently has no custom gradients, but a placeholder for editor-gradient-presets has been left in functions.php to make them easier to include. If no custom gradients are added, this code needs to be removed in time for beta 1.

melchoyce commented 4 years ago

I have some gradient ideas in progress, but I need to try them out in context before we can decide which ones to include: https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=764%3A54

Hoping to work on this more tomorrow.

ellenbauer commented 4 years ago

Love the gradients, they look beautiful and I think work well as backgrounds eg in the cover block or group block with images in front (photography or graphic images).

Just as an inspiration, I by accident came across the Carbonmade website today and they use similar colours and background gradients on their front page. It reminded me of it so I just want to through it in here.

melchoyce commented 4 years ago

Thanks @ellenbauer! Great inspiration source.

I tried a bunch of combinations of our recommended colors in the editor:

Overall, they looked nice. I noticed:

All of them look great when inside a block with the border style
The lighter colors don't look as good against the default mint background, without any sort of divider
The gradients that go from mint to another color, or another color to mint, look good. And, you can do fun things by combining those with a solid color group blocks to get a smooth color transition:

I tried to make some color-stop gradients with the Gutenberg plugin active, but I couldn't figure out how to make one. Anyone know?

LittleBigThing commented 4 years ago

I tried to make some color-stop gradients with the Gutenberg plugin active, but I couldn't figure out how to make one. Anyone know?

I don't think you can. The color-stops can (now) only be presets. There are some cool presets in the Seedlet theme and how they are added.

I made an example PR with some gradient presets in #258.

LittleBigThing commented 4 years ago

I was wondering whether we can change the initial colors of the custom gradient picker to match the theme‘s color palette.

From: Screenshot 2020-10-03 at 18 18 38

To: Screenshot 2020-10-03 at 18 19 33