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

Custom Color Palette for Core Blocks #14110

Closed
buhlahkay opened this issue Feb 25, 2019 · 3 comments
Closed

Custom Color Palette for Core Blocks #14110

buhlahkay opened this issue Feb 25, 2019 · 3 comments
Labels
[Feature] Block API API that allows to express the block paradigm. [Feature] Extensibility The ability to extend blocks or the editing experience [Type] Enhancement A suggestion for improvement.

Comments

@buhlahkay
Copy link

Is your feature request related to a problem? Please describe.
I can define a global color palette, but I don't want all of those colors being available for every block. I may define 5-6 colors for a theme, but I only want the button to use 1-2 colors. Or maybe I just want to define 2 styles of button that handle the colors, and remove the color panel completely. We can currently register/unregister styles for core blocks, so would like to also see something similar with colors.

Describe the solution you'd like
I believe there are currently 6 blocks that utilize the PanelColorSettings component:

  • core/paragraph
  • core/button
  • core/cover
  • core/media-text
  • core/pullquote
  • core/table

A register/unregister color functionality similar to block styles could be a solution.
Or if we passed down a "customColors" property to the PanelColorSettings's "colors" property, then we could modify the blocks with the editor.BlockEdit hook. The filter solution seems to work for me locally (and gives me the ability to remove the panel with a falsy value), but it seems like there would be a more elegant solution than adding a new property to each block's PanelColorSettings component.

const withCustomColors = createHigherOrderComponent(BlockEdit => {
  return props => {
    if (props.name === 'core/button') {
      return <BlockEdit { ...props } customColors={ [{ name: 'Green', slug: 'green', color: '#00FF00' }] } />
    }
    return <BlockEdit { ...props } />
  }
})
wp.hooks.addFilter(
  'editor.BlockEdit',
  'my-plugin/with-custom-colors',
  withCustomColors
)

Describe alternatives you've considered
Since we can edit styles for each block and we can edit colors globally, it seems like this would make sense as a new feature to sort of combine the two, but there could be more to the issue than I'm considering.

@buhlahkay
Copy link
Author

This could be a duplicate or at least partially solved by #6023

@noisysocks noisysocks added [Type] Enhancement A suggestion for improvement. [Feature] Block API API that allows to express the block paradigm. [Feature] Extensibility The ability to extend blocks or the editing experience labels Mar 13, 2019
@samhermes
Copy link

This is one of the last pain points for me. The ability to disable the color palette on a particular block would be super nice, and going even further, disabling either the background or text color palettes would be amazing. +1 on this.

I've been hiding the color palette with CSS, but this hides it for every block. There doesn't seem to be a parent class that could be used to limit this on a block by block basis.

@gziolo
Copy link
Member

gziolo commented Mar 3, 2020

It makes me wonder whether the proposal from @youknowriad https://make.wordpress.org/core/2020/01/23/controlling-the-block-editor/ and filed under #20588 doesn't share the same characteristics. In general, it also partially overlaps with the Global Styles project (https://github.com/WordPress/gutenberg/projects/40).

I think we can close it in favor of #20588 with the strong emphasis that block editor features must work on the block level as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Feature] Extensibility The ability to extend blocks or the editing experience [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

4 participants