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.

Sign up for GitHub

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
merged 1 commit into from
Sep 3, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions lib/experimental-default-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

"gradient": {
"custom": true
}
}
}
Expand Down
2 changes: 0 additions & 2 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,6 @@ function gutenberg_experiments_editor_settings( $settings ) {
$experiments_settings['gradients'] = $gradient_presets;
}

$experiments_settings['disableCustomGradients'] = get_theme_support( 'disable-custom-gradients' );

return array_merge( $settings, $experiments_settings );
}
add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' );
8 changes: 8 additions & 0 deletions lib/global-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -615,6 +615,12 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) {
}
$features['global']['color']['custom'] = false;
}
if ( get_theme_support( 'disable-custom-gradients' ) ) {
if ( ! isset( $features['global']['gradient'] ) ) {
$features['global']['gradient'] = array();
}
$features['global']['gradient']['custom'] = false;
}

return $features;
}
Expand Down Expand Up @@ -646,8 +652,10 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
$settings['styles'][] = array( 'css' => $stylesheet );

$settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_features( $merged );

// Unsetting deprecated settings defined by Core.
unset( $settings['disableCustomColors'] );
unset( $settings['disableCustomGradients'] );

return $settings;
}
Expand Down
3 changes: 3 additions & 0 deletions packages/block-editor/src/components/colors-gradients/control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

);

return (
<ColorGradientControlInner
Expand Down
3 changes: 3 additions & 0 deletions packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,9 @@ const PanelColorGradientSettingsSelect = ( props ) => {
colorGradientSettings.disableCustomColors = ! useEditorFeature(
'color.custom'
);
colorGradientSettings.disableCustomGradients = ! useEditorFeature(
'gradient.custom'
);
return (
<PanelColorGradientSettingsInner
{ ...{ ...colorGradientSettings, ...props } }
Expand Down
17 changes: 8 additions & 9 deletions packages/block-editor/src/components/gradient-picker/control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { isEmpty, pick } from 'lodash';
import { isEmpty } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -15,6 +15,7 @@ import { useSelect } from '@wordpress/data';
* Internal dependencies
*/
import GradientPicker from './';
import useEditorFeature from '../use-editor-feature';

export default function GradientPickerControl( {
className,
Expand All @@ -23,14 +24,12 @@ export default function GradientPickerControl( {
label = __( 'Gradient Presets' ),
...props
} ) {
const { gradients = [], disableCustomGradients } = useSelect(
( select ) =>
pick( select( 'core/block-editor' ).getSettings(), [
'gradients',
'disableCustomGradients',
] ),
[]
);
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.

:) #24761 (comment)

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 🏃 💨

( select ) => select( 'core/block-editor' ).getSettings().gradients,
[]
) ?? [];
const disableCustomGradients = ! useEditorFeature( 'gradient.custom' );
if ( isEmpty( gradients ) && disableCustomGradients ) {
return null;
}
Expand Down
25 changes: 12 additions & 13 deletions packages/block-editor/src/components/gradient-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
/**
* External dependencies
*/
import { pick } from 'lodash';

/**
* WordPress dependencies
*/
import { __experimentalGradientPicker as GradientPicker } from '@wordpress/components';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import useEditorFeature from '../use-editor-feature';

function GradientPickerWithGradients( props ) {
const { gradients, disableCustomGradients } = useSelect(
( select ) =>
pick( select( 'core/block-editor' ).getSettings(), [
'gradients',
'disableCustomGradients',
] ),
[]
);
const gradients =
useSelect(
( select ) => select( 'core/block-editor' ).getSettings().gradients,
[]
) ?? [];
const disableCustomGradients = ! useEditorFeature( 'gradient.custom' );

return (
<GradientPicker
gradients={
Expand Down
4 changes: 4 additions & 0 deletions packages/block-editor/src/components/use-editor-feature/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ const deprecatedFlags = {
settings.disableCustomColors === undefined
? undefined
: ! settings.disableCustomColors,
'gradient.custom': ( settings ) =>
settings.disableCustomGradients === undefined
? undefined
: ! settings.disableCustomGradients,
};

/**
Expand Down