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

Add color palette edit functionality to global styles #25711

Merged

Conversation

jorgefilipecosta
Copy link
Member

This PR allows the user to configure a global color palette or even a color palette for a specific block.

Limitations

  • The colors created by the user don't work well when applied, that happens because we are not automatically generating CSS classes for theme.json yet and rely on themes providing them. There will be a parallel PR that fixes that.
  • We don't show the default colors applied by the theme. That happens because we don't yet retrieve the theme and core defaults on global styles, e.g: if the theme sets a default font size the global styles sidebar does not show it. That is an existing issue with global styles that is going to be solved in parallel.
  • When we change the color palette, and then go the block editor on the edit site, the new colors don't appear, they only appear after the saving and reload of the editor. That happens because the settings passed to the block editor are a static object retrieved from the server, it should be dynamic as the user can now change these settings. Another PR will solve this issue.
  • The UI may take advantage of some enhancements. @noahshrader I tried to follow your mockups adapting them to the current state of the sidebar, but it still required lots of custom code because we did not have any component that fits. I am open to feedback for changes that should happen on the first version.

Screenshots

image

image

image

Tests

I added a custom color palette I saved the design and verified the colors were persisted.
I verified I could change the color code, name, and slug of existing colors.
I verified I could remove colors.

@github-actions
Copy link

github-actions bot commented Sep 29, 2020

Size Change: +1.73 kB (0%)

Total Size: 1.18 MB

Filename Size Change
build/annotations/index.js 3.52 kB -4 B (0%)
build/blob/index.js 668 B +48 B (7%) 🔍
build/block-directory/index.js 8.55 kB -57 B (0%)
build/block-editor/index.js 129 kB -121 B (0%)
build/block-editor/style-rtl.css 10.9 kB -16 B (0%)
build/block-editor/style.css 10.9 kB -16 B (0%)
build/block-library/editor-rtl.css 8.65 kB +42 B (0%)
build/block-library/editor.css 8.65 kB +43 B (0%)
build/block-library/index.js 135 kB +45 B (0%)
build/block-library/style-rtl.css 7.66 kB +3 B (0%)
build/block-library/style.css 7.65 kB +3 B (0%)
build/block-serialization-default-parser/index.js 1.78 kB +1 B
build/blocks/index.js 47.5 kB -3 B (0%)
build/components/index.js 170 kB +1.17 kB (0%)
build/components/style-rtl.css 15.4 kB +58 B (0%)
build/components/style.css 15.4 kB +55 B (0%)
build/compose/index.js 9.42 kB +2 B (0%)
build/core-data/index.js 12 kB -2 B (0%)
build/data-controls/index.js 685 B -585 B (85%) 🏆
build/data/index.js 8.6 kB +187 B (2%)
build/edit-navigation/index.js 10.7 kB -2 B (0%)
build/edit-post/index.js 306 kB +248 B (0%)
build/edit-post/style-rtl.css 6.29 kB +37 B (0%)
build/edit-post/style.css 6.27 kB +38 B (0%)
build/edit-site/index.js 20.8 kB +340 B (1%)
build/edit-site/style-rtl.css 3.71 kB -67 B (1%)
build/edit-site/style.css 3.72 kB -64 B (1%)
build/edit-widgets/index.js 21.4 kB +313 B (1%)
build/editor/index.js 45.5 kB +8 B (0%)
build/editor/style-rtl.css 3.85 kB +17 B (0%)
build/editor/style.css 3.84 kB +20 B (0%)
build/element/index.js 4.44 kB +1 B
build/escape-html/index.js 734 B +1 B
build/format-library/index.js 7.48 kB -5 B (0%)
build/i18n/index.js 3.54 kB -1 B
build/is-shallow-equal/index.js 710 B +1 B
build/keyboard-shortcuts/index.js 2.39 kB -4 B (0%)
build/nux/index.js 3.27 kB -1 B
build/plugins/index.js 2.44 kB -1 B
build/priority-queue/index.js 790 B +1 B
build/redux-routine/index.js 2.85 kB -1 B
build/rich-text/index.js 13 kB -1 B
build/server-side-render/index.js 2.6 kB -1 B
build/shortcode/index.js 1.7 kB +1 B
build/url/index.js 4.06 kB +3 B (0%)
build/warning/index.js 1.13 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/date/index.js 31.9 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.42 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-widgets/style-rtl.css 3 kB 0 B
build/edit-widgets/style.css 3 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 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 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 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.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/primitives/index.js 1.34 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@aristath
Copy link
Member

Just tested this one 👍
Additional limitation: If all custom colors are deleted, on save & refresh it reverts to the default colors instead of the theme.json colors

@jorgefilipecosta jorgefilipecosta force-pushed the add/color-palette-edit-functionality-to-global-styles branch from 38eca3e to bfc494a Compare September 30, 2020 11:29
@jorgefilipecosta
Copy link
Member Author

Additional limitation: If all custom colors are deleted, on save & refresh it reverts to the default colors instead of the theme.json colors

There is an important related point: the state of having no user color palette (using the default/theme colors) and the state of the user intentionally setting an empty color palette are different. I added a button to allow the user to remove the user color palette and get back to defaults after removing all the colors.
@aristath I'm not being able to reproduce the issue. After I'm back to defaults the defaults are the theme and the core colors (if theme colors don't exist). I guess the issue may have been solved as a side effect of another change.

Copy link
Contributor

@mcsf mcsf left a comment

Choose a reason for hiding this comment

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

Feels nice! Looking forward for the subsequent PRs for the rest of the system.

Comment on lines +78 to +84
renderToggle={ ( { isOpen, onToggle } ) => (
<>
<DropdownOpenOnMount
shouldOpen={ isEditingColorOnMount }
isOpen={ isOpen }
onToggle={ onToggle }
/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Interesting :)

@jorgefilipecosta jorgefilipecosta merged commit bd79ac4 into master Oct 7, 2020
@jorgefilipecosta jorgefilipecosta deleted the add/color-palette-edit-functionality-to-global-styles branch October 7, 2020 14:42
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants