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

Control editor palette and gradients from theme.json #25419

Merged
merged 1 commit into from
Sep 18, 2020
Merged

Control editor palette and gradients from theme.json #25419

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
7 changes: 2 additions & 5 deletions lib/edit-site-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,11 +133,8 @@ function gutenberg_edit_site_init( $hook ) {
'siteUrl' => site_url(),
);

list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we want to offer the handling of get_theme_support and map it to the new setting like we do for the other theme support flags or is this something that is already handled.

Copy link
Member Author

Choose a reason for hiding this comment

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

This is already being handled when loading the theme configuration we also load things for themes using theme support. https://github.com/WordPress/gutenberg/blob/9262497ffb5cbbf7b49deec90c0bf5e9631c760a/lib/global-styles.php#L250. We map the existing theme supports to the new theme.json structure.

list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );
if ( false !== $color_palette ) {
$settings['colors'] = $color_palette;
}
list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );

if ( false !== $font_sizes ) {
$settings['fontSizes'] = $font_sizes;
}
Expand Down
108 changes: 66 additions & 42 deletions lib/experimental-default-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,102 +4,126 @@
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "Cyan bluish gray",
"slug": "cyan-bluish-gray",
"color": "#abb8c3"
},
{
"slug": "light-green-cyan",
"color": "#7bdcb5"
"name": "White",
"slug": "white",
"color": "#ffffff"
},
{
"slug": "luminous-vivid-amber",
"color": "#fcb900"
"name": "Pale pink",
"slug": "pale-pink",
"color": "#f78da7"
},
{
"slug": "luminous-vivid-orange",
"color": "#ff6900"
"name": "Vivid red",
"slug": "vivid-red",
"color": "#cf2e2e"
},
{
"slug": "pale-cyan-blue",
"color": "#8ed1fc"
"name": "Luminous vivid orange",
"slug": "luminous-vivid-orange",
"color": "#ff6900"
},
{
"slug": "pale-pink",
"color": "#f78da7"
"name": "Luminous vivid amber",
"slug": "luminous-vivid-amber",
"color": "#fcb900"
},
{
"slug": "vivid-cyan-blue",
"color": "#0693e3"
"name": "Light green cyan",
"slug": "light-green-cyan",
"color": "#7bdcb5"
},
{
"name": "Vivid green cyan",
"slug": "vivid-green-cyan",
"color": "#00d084"
},
{
"slug": "vivid-purple",
"color": "#9b51e0"
"name": "Pale cyan blue",
"slug": "pale-cyan-blue",
"color": "#8ed1fc"
},
{
"slug": "vivid-red",
"color": "#cf2e2e"
"name": "Vivid cyan blue",
"slug": "vivid-cyan-blue",
"color": "#0693e3"
},
{
"slug": "white",
"color": "#ffffff"
"name": "Vivid purple",
"slug": "vivid-purple",
"color": "#9b51e0"
}
],
"gradients": [
{
"slug": "blush-bordeaux",
"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)"
"name": "Vivid cyan blue to vivid purple",
"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
"slug": "vivid-cyan-blue-to-vivid-purple"
},
{
"slug": "blush-light-purple",
"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)"
"name": "Light green cyan to vivid green cyan",
"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
"slug": "light-green-cyan-to-vivid-green-cyan"
},
{
"slug": "cool-to-warm-spectrum",
"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)"
"name": "Luminous vivid amber to luminous vivid orange",
"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
},
{
"slug": "electric-grass",
"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)"
"name": "Luminous vivid orange to vivid red",
"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
"slug": "luminous-vivid-orange-to-vivid-red"
},
{
"slug": "light-green-cyan-to-vivid-green-cyan",
"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"
"name": "Very light gray to cyan bluish gray",
"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
"slug": "very-light-gray-to-cyan-bluish-gray"
},
{
"slug": "luminous-dusk",
"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"
"name": "Cool to warm spectrum",
"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
"slug": "cool-to-warm-spectrum"
},
{
"slug": "luminous-vivid-amber-to-luminous-vivid-orange",
"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)"
"name": "Blush light purple",
"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
"slug": "blush-light-purple"
},
{
"slug": "luminous-vivid-orange-to-vivid-red",
"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)"
"name": "Blush bordeaux",
"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
"slug": "blush-bordeaux"
},
{
"slug": "midnight",
"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"
"name": "Luminous dusk",
"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
"slug": "luminous-dusk"
},
{
"slug": "pale-ocean",
"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)"
"name": "Pale ocean",
"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
"slug": "pale-ocean"
},
{
"slug": "very-light-gray-to-cyan-bluish-gray",
"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)"
"name": "Electric grass",
"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
"slug": "electric-grass"
},
{
"slug": "vivid-cyan-blue-to-vivid-purple",
"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"
"name": "Midnight",
"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
"slug": "midnight"
Copy link
Contributor

Choose a reason for hiding this comment

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

How about i18n here? Is the idea to keep the "double registration" for now (theme.json and php)?

Copy link
Member Author

Choose a reason for hiding this comment

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

We have a previous history of extracting i18n strings from JSON files. I opened an issue for this task wp-cli/i18n-command#224.
My plan is simply have a function that returns the translatable paths from theme.json. This function can probably be used by wp-cli. We simply use that function and on the translatable paths, we map the value to the result of __( value ). Provided the strings were extracted it should work well.
For now, the themes use theme supports and the strings are translatable there. I proposed a temporary solution for i18n of the WordPress default settings, until we have the proper string extraction ready.

}
],
"custom": true,
Expand Down
44 changes: 44 additions & 0 deletions lib/global-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,49 @@ function gutenberg_experimental_global_styles_get_core() {
$config = gutenberg_experimental_global_styles_get_from_file(
__DIR__ . '/experimental-default-theme.json'
);
// Start i18n logic to remove when JSON i18 strings are extracted.
$default_colors_i18n = array(
'black' => __( 'Black', 'gutenberg' ),
'cyan-bluish-gray' => __( 'Cyan bluish gray', 'gutenberg' ),
'white' => __( 'White', 'gutenberg' ),
'pale-pink' => __( 'Pale pink', 'gutenberg' ),
'vivid-red' => __( 'Vivid red', 'gutenberg' ),
'luminous-vivid-orange' => __( 'Luminous vivid orange', 'gutenberg' ),
'luminous-vivid-amber' => __( 'Luminous vivid amber', 'gutenberg' ),
'light-green-cyan' => __( 'Light green cyan', 'gutenberg' ),
'vivid-green-cyan' => __( 'Vivid green cyan', 'gutenberg' ),
'pale-cyan-blue' => __( 'Pale cyan blue', 'gutenberg' ),
'vivid-cyan-blue' => __( 'Vivid cyan blue', 'gutenberg' ),
'vivid-purple' => __( 'Vivid purple', 'gutenberg' ),
);

if ( ! empty( $config['global']['settings']['color']['palette'] ) ) {
foreach ( $config['global']['settings']['color']['palette'] as &$color ) {
$color['name'] = $default_colors_i18n[ $color['slug'] ];
}
}

$default_gradients_i18n = array(
'vivid-cyan-blue-to-vivid-purple' => __( 'Vivid cyan blue to vivid purple', 'gutenberg' ),
'light-green-cyan-to-vivid-green-cyan' => __( 'Light green cyan to vivid green cyan', 'gutenberg' ),
'luminous-vivid-amber-to-luminous-vivid-orange' => __( 'Luminous vivid amber to luminous vivid orange', 'gutenberg' ),
'luminous-vivid-orange-to-vivid-red' => __( 'Luminous vivid orange to vivid red', 'gutenberg' ),
'very-light-gray-to-cyan-bluish-gray' => __( 'Very light gray to cyan bluish gray', 'gutenberg' ),
'cool-to-warm-spectrum' => __( 'Cool to warm spectrum', 'gutenberg' ),
'blush-light-purple' => __( 'Blush light purple', 'gutenberg' ),
'blush-bordeaux' => __( 'Blush bordeaux', 'gutenberg' ),
'luminous-dusk' => __( 'Luminous dusk', 'gutenberg' ),
'pale-ocean' => __( 'Pale ocean', 'gutenberg' ),
'electric-grass' => __( 'Electric grass', 'gutenberg' ),
'midnight' => __( 'Midnight', 'gutenberg' ),
);

if ( ! empty( $config['global']['settings']['color']['gradients'] ) ) {
foreach ( $config['global']['settings']['color']['gradients'] as &$gradient ) {
$gradient['name'] = $default_gradients_i18n[ $gradient['slug'] ];
}
}
// End i18n logic to remove when JSON i18 strings are extracted.
return $config;
}

Expand Down Expand Up @@ -762,6 +804,8 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
// We also need to unset the deprecated settings defined by core.
$settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_settings( $merged );

unset( $settings['colors'] );
unset( $settings['gradients'] );
unset( $settings['disableCustomColors'] );
unset( $settings['disableCustomGradients'] );
unset( $settings['disableCustomFontSizes'] );
Expand Down
7 changes: 1 addition & 6 deletions lib/navigation-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,7 @@ function gutenberg_navigation_init( $hook ) {
'blockNavMenus' => get_theme_support( 'block-nav-menus' ),
);

list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );
list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );

if ( false !== $color_palette ) {
$settings['colors'] = $color_palette;
}
list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );

if ( false !== $font_sizes ) {
$settings['fontSizes'] = $font_sizes;
Expand Down
7 changes: 1 addition & 6 deletions lib/widgets-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,7 @@ function gutenberg_widgets_init( $hook ) {
gutenberg_get_legacy_widget_settings()
);

list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );
list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );

if ( false !== $color_palette ) {
$settings['colors'] = $color_palette;
}
list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );

if ( false !== $font_sizes ) {
$settings['fontSizes'] = $font_sizes;
Expand Down
5 changes: 5 additions & 0 deletions packages/block-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@

## Unreleased

### Breaking Changes

- The block editor does not contain default colors and gradients anymore. If one wants to take advantage of these features, please explicitly pass colors and gradients settings or use the new __experimentalFeatures setting that is available.


## 4.0.0 (2020-05-28)

### Breaking Changes
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,7 +477,6 @@ _Properties_

- _alignWide_ `boolean`: Enable/Disable Wide/Full Alignments
- _availableLegacyWidgets_ `Array`: Array of objects representing the legacy widgets available.
- _colors_ `Array`: Palette colors
- _fontSizes_ `Array`: Available font sizes
- _imageEditing_ `boolean`: Image Editing settings set to false to disable.
- _imageSizes_ `Array`: Available image sizes
Expand Down
63 changes: 24 additions & 39 deletions packages/block-editor/src/components/color-palette/with-color-context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,33 @@ import { isEmpty } from 'lodash';
/**
* WordPress dependencies
*/
import { createHigherOrderComponent, compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import { createHigherOrderComponent } from '@wordpress/compose';

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

const withDisableCustomColors = createHigherOrderComponent(
( WrappedComponent ) => {
return ( props ) => {
const disableCustomColors = ! useEditorFeature( 'color.custom' );

return (
<WrappedComponent
{ ...props }
disableCustomColors={
props.disableCustomColors || disableCustomColors
}
/>
);
};
},
'withDisableCustomColors'
);

export default createHigherOrderComponent(
compose(
withDisableCustomColors,
withSelect( ( select, ownProps ) => {
const settings = select( 'core/block-editor' ).getSettings();
const colors =
ownProps.colors === undefined
? settings.colors
: ownProps.colors;

return {
colors,
hasColorsToChoose:
! isEmpty( colors ) || ! ownProps.disableCustomColors,
};
} )
),
'withColorContext'
);
export default createHigherOrderComponent( ( WrappedComponent ) => {
return ( props ) => {
const colorsFeature = useEditorFeature( 'color.palette' );
const disableCustomColorsFeature = ! useEditorFeature( 'color.custom' );
const colors =
props.colors === undefined ? colorsFeature : props.colors;
const disableCustomColors =
props.disableCustomColors === undefined
? disableCustomColorsFeature
: props.disableCustomColors;
const hasColorsToChoose = ! isEmpty( colors ) || ! disableCustomColors;
return (
<WrappedComponent
{ ...{
...props,
colors,
disableCustomColors,
hasColorsToChoose,
} }
/>
);
};
}, 'withColorContext' );
10 changes: 4 additions & 6 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 @@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { every, isEmpty, pick } from 'lodash';
import { every, isEmpty } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -17,7 +17,6 @@ import {
__experimentalGradientPicker as GradientPicker,
} from '@wordpress/components';
import { sprintf, __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
Expand Down Expand Up @@ -174,10 +173,9 @@ function ColorGradientControlInner( {
}

function ColorGradientControlSelect( props ) {
const colorGradientSettings = useSelect( ( select ) => {
const settings = select( 'core/block-editor' ).getSettings();
return pick( settings, colorsAndGradientKeys );
} );
const colorGradientSettings = {};
colorGradientSettings.colors = useEditorFeature( 'color.palette' );
colorGradientSettings.gradients = useEditorFeature( 'color.gradients' );
colorGradientSettings.disableCustomColors = ! useEditorFeature(
'color.custom'
);
Expand Down
Loading