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

Update/theme support color palette #6437

Closed
wants to merge 100 commits into from
Closed
Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
100 commits
Select commit Hold shift + click to select a range
51be17f
Set `editor-color-palette` theme support as array
webmandesign Apr 26, 2018
51993c4
Updating `editor-color-palette` setup info using single array argument
webmandesign Apr 26, 2018
560180e
Enhance theme colors (#6438)
jasmussen Apr 26, 2018
62d746f
Fix typo in php doc block for gutenberg_can_edit_post() (#6439)
vishalkakadiya Apr 26, 2018
2e868b1
Used align hook in columns block. Fixed bug where align classes were …
jorgefilipecosta Apr 26, 2018
3442dd5
Split loading of API actions and filters to own files (#6327)
mkaz Apr 26, 2018
8c4698c
Add isDebounced to autocompleter docs (#6446)
Apr 26, 2018
fe1a147
Add drop cap help text in paragraph block (#6415)
samikeijonen Apr 27, 2018
4b80d92
Used IconButton on breadcrumbs to increase accessibility. (#6374)
jorgefilipecosta Apr 27, 2018
01388cb
Build Tools: Fix the package plugin script (#6463)
youknowriad Apr 27, 2018
0a1cd7d
Makes + icon showing consistent across all library states
vishalkakadiya Apr 27, 2018
81af13e
Raw handling: skip inline shortcodes (#6329)
ellatrix Apr 27, 2018
41594cd
Implemented color class mechanism in button. (#6422)
jorgefilipecosta Apr 27, 2018
a7b0835
Switch to `rest_get_server()` for compat with trunk (#6474)
danielbachhuber Apr 27, 2018
3c54f04
Expose Gutenberg Data Format version in the REST API (#6436)
pento Apr 27, 2018
56d2968
Fix arrow navigation in the Shared Block more options menu. (#6483)
afercia Apr 28, 2018
081f931
Add Embed Preview support for classic embed providers (#6345)
pento Apr 30, 2018
da36107
Fix regression with formatting button hover/focus style (#6493)
jasmussen Apr 30, 2018
0d4cf64
Used editorMediaUpload in Gallery files transform (multiple images dr…
jorgefilipecosta Apr 30, 2018
1218df9
Try adding a purify Higher Order Component (#6313)
youknowriad Apr 30, 2018
4e766f1
Framework: Make sure block assets are always registered before wp-edi…
gziolo Apr 30, 2018
af190d5
Used color name in ColorPalette aria-label. (#6423)
jorgefilipecosta Apr 30, 2018
731b4fe
Removed block transforms from the toolbars. (#6473)
jorgefilipecosta Apr 30, 2018
eabcb9b
Fix select box regression. (#6350)
jasmussen Apr 30, 2018
414d850
Minor improvements for the permalink Copy to clipboard button (#6472)
afercia Apr 30, 2018
230ad0d
Revert "Use nested blocks for quotes (#6054)" (#6501)
ellatrix Apr 30, 2018
18b2cb3
Blocks: Extend BlockEdit context with name and use it for autocomplet…
gziolo Apr 30, 2018
3e36770
embed: fix translation string (#6354)
ajitbohra Apr 30, 2018
424dab7
Improved accessibility of PanelColor. (#6428)
jorgefilipecosta Apr 30, 2018
f037e90
Try prevent relative links if URL isn't fully typed out (#5917)
Rahmon Apr 30, 2018
7b62a34
Data: Optimize withSelect shouldComponentUpdate (#6457)
aduth Apr 30, 2018
de2c33b
docs: Fix link to Repository Management (#6517)
tofumatt May 1, 2018
7ec3f8a
Refactor withColors HOC. (#6503)
jorgefilipecosta May 1, 2018
ef833bf
Update CONTRIBUTORS.md
May 1, 2018
88f48b8
Fix 5919 in an alternate way (#6519)
jasmussen May 1, 2018
335618c
RichText: bind known positioned container (#6518)
ellatrix May 1, 2018
5a5486b
Simplify the BlockBreadcrumb component (#6507)
afercia May 1, 2018
ac89ff3
Store: Reset change detection on post update (#6209)
aduth May 1, 2018
afa2195
Rich Text: Deprecate broad handling of events (#6286)
aduth May 1, 2018
36233aa
Testing: Enforce array as Lodash path argument (#6247)
aduth May 1, 2018
f3f59d2
Pre-load REST API index data to avoid FOMD (#6434)
danielbachhuber May 2, 2018
0fd0fa8
Cover Image Block: Remove the text alignment from the block inspector…
youknowriad May 2, 2018
5689341
Update theme extensibility documentation to include editor widths (#6…
jasmussen May 2, 2018
187a643
Cover Image: Hide inspector controls if no image is selected (#6498)
youknowriad May 2, 2018
608af70
Hide color pickers in paragraph and button if no colors are available…
jorgefilipecosta May 2, 2018
afc1dd2
Framework: Use @wordpress/is-shallow-equal for shallow equality (#6526)
aduth May 2, 2018
9a9d435
Editor: Make sure createInnerBlockList never updates when passed usin…
gziolo May 2, 2018
63cf515
Add "Spacer" block to create empty areas. (#6121)
mtias May 2, 2018
5b2e500
Rich Text: Determine emptiness by value (#5091)
aduth May 2, 2018
d904911
Switch `post-author` component to use `/wp/v2/users/?who=authors` (#6…
danielbachhuber May 2, 2018
239de2e
Initial entities implementation (#6462)
youknowriad May 2, 2018
c80eb4c
Fix latest posts block orderby attribute typo (#6188)
loicblascos May 2, 2018
37a03da
Add paste schema (fix various issues, simplify) (#5966)
ellatrix May 2, 2018
39f1798
Disable link suggestions when value is URL (#4649)
danielbachhuber May 2, 2018
2c1eec0
Further harden `who=authors` check by author support for post type (#…
danielbachhuber May 3, 2018
c5766f3
Upgrade react-datepicker to 1.4.1 (#6550)
pento May 3, 2018
150c185
Upgrade showdown to 1.8.6 (#6551)
pento May 3, 2018
56f2956
Fix the clipboard button as IconButton usage. (#6532)
afercia May 3, 2018
9870e81
Add nested settings mechanism with a template configuration and allow…
jorgefilipecosta May 3, 2018
dc7ee12
Only display featured image UI when theme supports it too (#6541)
danielbachhuber May 3, 2018
8c7376e
Blocks: Hide the movers and the block menu when typing (#6564)
youknowriad May 3, 2018
98859d5
Framework: Drop deprecations slated for 2.8 removal (#6559)
aduth May 3, 2018
8729720
Revert "Removed block transforms from the toolbars. #6473" (#6566)
jorgefilipecosta May 3, 2018
3a37ebc
Refactor blocks->PanelColor, to avoid the need for the colorName prop…
jorgefilipecosta May 3, 2018
853d4c0
Restore priority on embed block for raw transforming (#6572)
ellatrix May 3, 2018
12a16a1
Update version to 2.8.0. (#6568)
mtias May 3, 2018
049645b
fix: Remove block alignment from paragraph block (fix #6476) (#6511)
tofumatt May 3, 2018
881617f
Port the core/code block to be used by the ReactNative mobile GB app …
hypest May 4, 2018
3128cea
Remove the document outline from the sidebar (#6557)
youknowriad May 4, 2018
dd7dabd
Fix a PHP Notice in REST API responses (#6576)
pento May 4, 2018
2412523
Update plugin-compat.php (#6535)
ehg May 4, 2018
480990a
MediaUpload: Add documentation for `title` and `modalClass` props. (#…
ocean90 May 4, 2018
c37a222
Add remaining editable shortcuts (#4411)
ellatrix May 4, 2018
fb13235
Fix caretRangeFromPoint for Firefox (#6598)
ellatrix May 5, 2018
d96b9d8
docs: Copy edits to theme extensibility (#6601)
tofumatt May 5, 2018
2a01e39
Update dom-react to 2.2.1 (#6610)
pento May 6, 2018
10d0fda
Fix spelling error in post-featured-image/index.js (#6609)
amdrew May 6, 2018
5e940bf
Add shortcut tooltips for main toolbar (#6605)
ellatrix May 6, 2018
ead8dc5
Blocks: Add automatic handling of focus for RichText component (#6419)
gziolo May 7, 2018
555c29a
Add SlotFill in Status & Availability panel to match existing hook (#…
ryanwelcher May 7, 2018
f564e6c
Build: Introduce the common `build` folder to be used by all modules …
gziolo May 7, 2018
f95b2d5
Framework: Move components from the blocks to the editor module (#6521)
youknowriad May 7, 2018
4dc4c7b
Use `targetSchema` of JSON Hyper Schema to communicate sticky action …
danielbachhuber May 7, 2018
3d93ac6
Allow resetting the permalink by saving it as empty (#6615)
pento May 8, 2018
0bdcdfa
Components: Implement Button as assigning ref via forwardRef (#6527)
aduth May 8, 2018
2c6983a
Table of content: Add a max-height (#6586)
youknowriad May 8, 2018
f06a44f
Port the core/more block to ReactNative (#6626)
hypest May 8, 2018
667322a
Fix multi selection with arrows + shift (#6606)
ellatrix May 8, 2018
c2a5189
Core blocks: Extract edit to their own file - part 1 (#6637)
gziolo May 8, 2018
94e13e3
Writing Flow: Consider tabbable edge if no adjacent tabbable (#6542)
aduth May 8, 2018
9d4fd10
Adds better descriptions for all blocks (#6624)
May 8, 2018
268b871
feat: Show block remove button for empty (paragraph) block (#6589)
tofumatt May 8, 2018
39b420f
Use npm v6 is the minimum required version (#6629)
ntwb May 9, 2018
823dcf2
Core blocks: Refactor blocks to use edit file - part 2 (#6641)
gziolo May 9, 2018
13d2cb8
Update Notice README (#6653)
noisysocks May 9, 2018
f961832
Add FontSizePicker component and refactor paragraph block to use it. …
jorgefilipecosta May 9, 2018
aa5a767
Set `editor-color-palette` theme support as array
webmandesign Apr 26, 2018
3e7ec33
Updating `editor-color-palette` setup info using single array argument
webmandesign Apr 26, 2018
4cedd09
Merge branch 'update/theme-support-color-palette' of https://github.c…
webmandesign May 9, 2018
b3b807b
Backcompat for Color Palette set as multiple parameters.
webmandesign May 9, 2018
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
8 changes: 4 additions & 4 deletions docs/extensibility/theme-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ To opt-in for one of these features, call `add_theme_support` in the `functions.

```php
function mytheme_setup_theme_supported_features() {
add_theme_support( 'editor-color-palette',
add_theme_support( 'editor-color-palette', array(
Copy link
Member

Choose a reason for hiding this comment

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

It could be also:

add_theme_support( 'editor-color-palette', array(
	'strong magenta' => '#a156b4',
	'light grayish magenta' => '#d0a5db',
	...
) );

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've just added the array wrapper there because of @jorgefilipecosta's comment

Copy link
Member

Choose a reason for hiding this comment

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

Can we map it to an ordered array before it gets exposed to JavaScript?

Copy link
Contributor Author

@webmandesign webmandesign Apr 26, 2018

Choose a reason for hiding this comment

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

@gziolo
You mean like declaring the theme support with this:

array(
	'color_name_1' => '#color1',
	'color_name_2' => '#color2',
)

and then transform it in PHP to a JS required form of:

array(
	array(
		'name' => 'color_name_1',
		'color' => '#color1',
	),
	array(
		'name' => 'color_name_2',
		'color' => '#color2',
	),
)

?

If so, this is certainly doable. But I'd like some more input on this, more opinions (maybe from @jorgefilipecosta)? You see, current associated array implementation is more self-explanatory in my opinion and could actually serve well in case of future extending of the palette color features.

Copy link
Member

Choose a reason for hiding this comment

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

Yep, that's what I meant. I don't care as much, I just wanted to make life of theme developers easier and help them save some keystrokes 😃

Copy link
Member

@jorgefilipecosta jorgefilipecosta Apr 26, 2018

Choose a reason for hiding this comment

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

Hi,
Although I agree that it would be easier for themes to declare support using this syntax:

array(
	'color_name_1' => '#color1',
	'color_name_2' => '#color2',
)

I think it could limit future advances as the color value itself is a string and not an object we can expand.
For example, one possible improvement I was thinking about was to let themes define the contexts in which colors appear (e.g: allow some colors only for background).
In the current syntax, it is a matter of allowing an optimal property:

array(
	array(
		'name' => 'color_name_1',
		'color' => '#color1',
	),
	array(
		'name' => 'color_name_2',
		'color' => '#color2',
		'contexts': => array( 'background' ),
	),
)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just like expected ;)

array(
'name' => 'strong magenta',
'color' => '#a156b4',
Expand All @@ -25,7 +25,7 @@ function mytheme_setup_theme_supported_features() {
'name' => 'very dark gray',
'color' => '#444',
)
);
) );
}

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );
Expand All @@ -46,7 +46,7 @@ add_theme_support( 'align-wide' );
Different blocks have the possibility of customizing colors. Gutenberg provides a default palette, but a theme can overwrite it and provide its own:

```php
add_theme_support( 'editor-color-palette',
add_theme_support( 'editor-color-palette', array(
array(
'name' => 'strong magenta',
'color' => '#a156b4',
Expand All @@ -63,7 +63,7 @@ add_theme_support( 'editor-color-palette',
'name' => 'very dark gray',
'color' => '#444',
)
);
) );
```

The colors will be shown in order on the palette, and there's no limit to how many can be specified.
Expand Down
2 changes: 1 addition & 1 deletion lib/client-assets.php
Original file line number Diff line number Diff line change
Expand Up @@ -929,7 +929,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
// Initialize the editor.
$gutenberg_theme_support = get_theme_support( 'gutenberg' );
$align_wide = get_theme_support( 'align-wide' );
$color_palette = get_theme_support( 'editor-color-palette' );
$color_palette = current( (array) get_theme_support( 'editor-color-palette' ) );
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 may be breaking back compatibility with the existing version:

add_theme_support( 'editor-color-palette',
 	'#fff'
 	'#f00'
);

Maybe we should handle some condition to be backcompatible.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

My question would be, is this required? Gutenberg is still in development and from what I can see the theme support declaration have already changed. (Though, I don't know if it was made backwards compatible.)

Also, is this backwards compatible too?:

add_theme_support( 'editor-color-palette',
	array(
		'name' => 'color_name_1',
		'color' => '#color1',
	),
	array(
		'name' => 'color_name_2',
		'color' => '#color2',
	)
);

If needed, I can surely, edit my code to incorporate backwards compatibility.

Copy link
Contributor

Choose a reason for hiding this comment

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

In my opinion backwards compatible in this case is not required.

Copy link
Member

Choose a reason for hiding this comment

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

Hi all,
Thank you for sharing your thoughts, and for this contributions.
When changing colors mechanism, we always made efforts to try to be back-compatible in this case being back-compatible does not look very complicated. I think If we add this block:

	// Backcompat for Color Palette set as multiple parameters.
	if ( is_string( $color_palette ) || isset( $color_palette['color'] ) ) {
		$color_palette = get_theme_support( 'editor-color-palette' );
		wp_add_inline_script(
			'wp-edit-post',
			'console.warn( "' .
				__( 'Setting colors using multiple parameters is deprecated. Please pass a single parameter with an array of colors. See https://wordpress.org/gutenberg/handbook/extensibility/theme-support/ for details.', 'gutenberg' ) .
			'");'
		);
	}

Bellow `$color_palette = current( (array) get_theme_support( 'editor-color-palette' ) );``, it should work with both our old versions:

add_theme_support( 'editor-color-palette',
	array(
		'name => 'red'
		'color' => '#ff0',
	),
	array(
		'name => 'green'
		'color' => '#0f0',
	),
	array(
		'name => 'blue'
		'color' => '#00f',
	)
);

and

add_theme_support( 'editor-color-palette',
	'#f00',
	'#0f0',
	'#00f'
);

Would it be possible to rebase this branch so we can test with our latest changes, e.g., the mechanism to hide color palettes if we don't have colors to choose?

@mtias what are your thoughts? In your opinion, should we advance with this changes and set the color palette using a single array parameter instead of the current way (multiple parameters)?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jorgefilipecosta Thank you for the code provided, I have updated my commits with it.

However, please note that this is the first GIT rebase I've ever done. Does feel like I've screwed something (judging by the number of commits). Please check and let me know. I might rather create a new branch again and redo changes for cleaner approach. Thanks!


// Backcompat for Color Palette set through `gutenberg` array.
if ( empty( $color_palette ) && ! empty( $gutenberg_theme_support[0]['colors'] ) ) {
Expand Down