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

Support enabling/disabling custom gradients using theme.json #24964

Merged

Conversation

youknowriad
Copy link
Contributor

Related #20588
Similar to #24761 but for custom gradients

The idea of this PR is to support disabling/enabling custom gradients from theme.json while retaining backward compatibility for the disable-custom-gradients theme support flag.

Testing instructions

  • Check that you can enable/disable custom colors support using the existing theme support flag disable-custom-gradients
  • Check that you can enable/disable custom colors support using the theme.json gradient.custom path.

@youknowriad youknowriad added Customization Issues related to Phase 2: Customization efforts [Type] Experimental Experimental feature or API. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Sep 1, 2020
@youknowriad youknowriad self-assigned this Sep 1, 2020
@github-actions
Copy link

Size Change: -3 B (0%)

Total Size: 1.17 MB

Filename Size Change
build/block-editor/index.js 126 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.99 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/style-rtl.css 10.8 kB 0 B
build/block-editor/style.css 10.8 kB 0 B
build/block-library/editor-rtl.css 8.55 kB 0 B
build/block-library/editor.css 8.55 kB 0 B
build/block-library/index.js 136 kB 0 B
build/block-library/style-rtl.css 7.47 kB 0 B
build/block-library/style.css 7.47 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 742 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.7 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 9.67 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.48 kB 0 B
build/edit-navigation/index.js 11.6 kB 0 B
build/edit-navigation/style-rtl.css 1.16 kB 0 B
build/edit-navigation/style.css 1.16 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.61 kB 0 B
build/edit-post/style.css 5.61 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 12 kB 0 B
build/edit-widgets/style-rtl.css 2.46 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@youknowriad
Copy link
Contributor Author

I'm going to accelerate a bit on these PRs as they are all similar and do the same thing for different flags.

@youknowriad youknowriad merged commit d7cea07 into master Sep 3, 2020
@youknowriad youknowriad deleted the add/support-features-disable-custom-gradients branch September 3, 2020 08:44
@github-actions github-actions bot added this to the Gutenberg 9.0 milestone Sep 3, 2020
@oandregal oandregal mentioned this pull request Sep 3, 2020
@@ -181,6 +181,9 @@ function ColorGradientControlSelect( props ) {
colorGradientSettings.disableCustomColors = ! useEditorFeature(
'color.custom'
);
colorGradientSettings.disableCustomGradients = ! useEditorFeature(
'gradients.custom'
Copy link
Member

Choose a reason for hiding this comment

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

I think this should be gradient.custom. Fix at #25040

[]
);
const gradients =
useSelect(
Copy link
Member

Choose a reason for hiding this comment

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

Does it make sense to have a usePreset('gradients') hook?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Copy link
Member

Choose a reason for hiding this comment

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

I see! I'm only 10 days behind 🏃 💨

@@ -130,6 +130,9 @@
},
"color": {
"custom": true
},
Copy link
Member

Choose a reason for hiding this comment

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

Food for thought: I'm finding the current format too verbose.

{
  "features": {
    "typography": {
      "dropCap": true
    },
    "color": {
      "custom": true
    },
    "gradient": {
      "custom": true
    }
  }
}

My expectations were that we'd group the features under typography and color sub-families, as we do in the style subtree. If we aren't going to group the features by family I think I'd prefer something a bit more terse, along these lines:

{
  "features": {
      "dropCap": true,
      "customColor": true,
      "customGradient": true
  }
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I agree that at the current state, it doesn't make sense to have the nesting but I also think we'll probably add things under the top level keys. In fact as you see on my linked comment above, I initially was thinking the preset is one of these keys (since the preset also allows to disable the control when you provide an empty one).

I'm not too concerned at the moment but this is something we should revisit once we move all the features.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Customization Issues related to Phase 2: Customization efforts Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants