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

Jump to bottom

Add editor-gradient-presets to get_theme_support #17841

Merged
merged 4 commits into from
Nov 1, 2019
Merged

Add editor-gradient-presets to get_theme_support #17841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
22e19ee
Add editor-gradient-presets to get_theme_support
spacedmonkey Oct 8, 2019
c3dbc6d
Add docs.
spacedmonkey Oct 8, 2019
104247a
Fixed docs
spacedmonkey Oct 8, 2019
49fdd89
Document slug property; Make the API experimental.
jorgefilipecosta Nov 1, 2019
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
40 changes: 40 additions & 0 deletions docs/designers-developers/developers/themes/theme-support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,46 @@ Themes are responsible for creating the classes that apply the colors in differe

The class name is built appending 'has-', followed by the class name _using_ kebab case and ending with the context name.

### Block Gradient Presents

Different blocks have the possibility of selecting from a list of predined of gradients. The block editor provides a default gradient presets, but a theme can overwrite them and provide its own:

```php
add_theme_support(
'__experimental-editor-gradient-presets',
Copy link
Contributor

Choose a reason for hiding this comment

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

Any particular reason to keep this as experimental for now? When do you think we should make it stable?

array(
array(
'name' => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
'slug' => 'vivid-cyan-blue-to-vivid-purple'
),
array(
'name' => __( 'Vivid green cyan to vivid cyan blue', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
'slug' => 'vivid-green-cyan-to-vivid-cyan-blue',
),
array(
'name' => __( 'Light green cyan to vivid green cyan', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
'slug' => 'light-green-cyan-to-vivid-green-cyan',
),
array(
'name' => __( 'Luminous vivid amber to luminous vivid orange', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
'slug' => 'luminous-vivid-amber-to-luminous-vivid-orange',
),
array(
'name' => __( 'Luminous vivid orange to vivid red', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
'slug' => 'luminous-vivid-orange-to-vivid-red',
),
)
);
```

`name` is a human-readable label (demonstrated above) that appears in the tooltip and provides a meaningful description of the gradient to users. It is especially important for those who rely on screen readers or would otherwise have difficulty perceiving the color. `gradient` is a CSS value of a gradient applied to a background-image of the block. Details of valid gradient types can be found in the [mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients). `slug` is a unique identifier for the gradient and is used to generate the CSS classes used by the block editor.


### Block Font Sizes:

Blocks may allow the user to configure the font sizes they use, e.g., the paragraph block. The block provides a default set of font sizes, but a theme can overwrite it and provide its own:
Expand Down
6 changes: 6 additions & 0 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,12 @@ function gutenberg_experiments_editor_settings( $settings ) {
'__experimentalEnableFullSiteEditing' => gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ),

);

$gradient_presets = current( (array) get_theme_support( '__experimental-editor-gradient-presets' ) );
if ( false !== $gradient_presets ) {
$experiments_settings['gradients'] = $gradient_presets;
Copy link
Member

Choose a reason for hiding this comment

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

We have a problem where KSES rules in multi-sites remove spacing from gradients and then make the block look invalid.
PR fixing the problem here for default gradients here: #17940

I guess we need to process the gradient values against our KSES function that removes the spaces, before setting it as setting, so even if devs pass values with space the spacing is removed.

If we prefer to solve this issue in a follow up PR, I guess we should update our samples to not include the spaces.

}

return array_merge( $settings, $experiments_settings );
}
add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' );
1 change: 1 addition & 0 deletions packages/editor/src/components/provider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ class EditorProvider extends Component {
'__experimentalBlockDirectory',
'__experimentalEnableFullSiteEditing',
'showInserterHelpPanel',
'gradients',
] ),
mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
__experimentalReusableBlocks: reusableBlocks,
Expand Down