Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BBT-95] Adds Support for Gradients #101

Merged
merged 6 commits into from
Aug 30, 2024

Conversation

chrishall0
Copy link
Contributor

@chrishall0 chrishall0 commented Aug 29, 2024

Description

Fixes #95. This PR adds a GradientPicker component.

Component has been added within the Color component rather than it's own section as this is where it would be within the core Site Editor. In the theme.json scheme the gradient values live within the color options also.

Change Log

  • Added StyleGradient Component to existing Color Component to allow users to add a color gradient to site/blocks.
  • Added support to disable custom gradients using customGradient theme.json setting
  • Added support for default gradients where defaultGradients option is true (true by default)

Steps to test

Default Gradient options should be available with a standard theme.json (i'm using twenty twenty three) unless settings.color.defaultGradients is set to false.

Theme Gradients will need to be added to test those. For example theme.json could be updated - settings.color.gradients

"gradients": 
	[
		{
			"gradient": "linear-gradient(135deg, #9DFF20 0%, #345C00 100%)",
			"name": "Primary Gradient",
			"slug": "primary-gradient"
		}
	]

Setting settings.color.customGradient to false in the theme.json should hide the ability to customise gradients in the Component.

Screenshots/Videos

image

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • Any dependent changes have been merged and published in downstream modules

@chrishall0 chrishall0 marked this pull request as draft August 29, 2024 10:33
@chrishall0 chrishall0 changed the title [BBT-95 Adds Support for Gradients [BBT-95] Adds Support for Gradients Aug 29, 2024
@chrishall0 chrishall0 self-assigned this Aug 29, 2024
@chrishall0 chrishall0 marked this pull request as ready for review August 29, 2024 10:56
src/editor/components/StylesGradient.js Outdated Show resolved Hide resolved
src/editor/components/StylesGradient.js Outdated Show resolved Hide resolved
src/editor/components/StylesGradient.js Outdated Show resolved Hide resolved
@g-elwell
Copy link
Member

Thanks for picking this up @chrishall0 🙌

@chrishall0
Copy link
Contributor Author

@g-elwell made a small change to the if statement before the render, noticed it wasn't rendering in scenarios where there were no preset gradients available however the tool is still usable to create custom gradients

Copy link
Member

@g-elwell g-elwell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great, thanks @chrishall0 !

@g-elwell g-elwell merged commit 72276cb into release/1.0.0 Aug 30, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants