Add ability to disable Color Settings on Table Block

[dougwollison]

Is your feature request related to a problem? Please describe.

Currently, I can disable both pre-defined and custom color options for paragraphs by registering an empty array for the editor-color-palette support as well as adding the disable-custom-colors "support". However, this doesn't affect table blocks (since they use a separate color set).

Describe the solution you'd like

A way—either via theme supports, or hooking into the blocks.registerBlockType filter—to disable or replace the color options on table blocks.

Describe alternatives you've considered

Currently I can just hide the panel in CSS, but this obviously isn't an ideal solution.

[ChemicalSailor]

+1

The table colour options need to be consistent with other blocks and respect add_theme_support( 'disable-custom-colors' )

Testing this on WP 5.3 RC3, these sort of consistency issues really should have been sorted out for a major release.

[carasmo]

This is a bummer.

[ligne13]

+1 !

[ryanleichty]

The fact that something as simple as this hasn't been resolved yet is disconcerting. Has anyone found a solution to remove the option for adding colors to a table?

[kraftner]

Since WP 5.7 still doesn't have a fix for this I ran out of patience and I've found a CSS based workaround for now.

It's a two step process:

1. First we inject an invisible div into the inspector of the table block to "mark" it…
2. …then we can target the color panel with CSS.

Marking the blocks inspector panel

(function () {            
  var el = wp.element.createElement;
  wp.hooks.addFilter(
    "editor.BlockEdit",
    "block-marker-table",
    wp.compose.createHigherOrderComponent( function( BlockEdit ) {
      return function( props ) {
          if(props.name !== 'core/table'){
            return el(BlockEdit, props);
          }
          return el(
              wp.element.Fragment,
              {},                      
              el(
                  wp.blockEditor.InspectorControls,
                  {},
                  el(
                      'div',
                      {
                        className: "is-inspector-of-table",
                        "aria-hidden": "true"
                      },
                      ''
                  )
              ),
              el(BlockEdit, props),
          );
      };
    }, 'withInspectorControls' ),
  );
})();

Hiding the panel with CSS

.is-inspector-of-table,
.is-inspector-of-table ~ .block-editor-panel-color-gradient-settings {
    display:none;
}

I hope this helps folks until a proper fix is available.

[patricklindsay]

Looks like this was closed in #30791

[skorasaurus]

Looks like this was closed in #30791

This is now possible in WP 5.8; you may also need Gutenberg 11.0 (I am not 100% sure whether you do).

This is done through the theme.json aka global settings and styles which allows you to customize settings (colors, typography, etc) for an entire website or on a block-level.

You'll need to first create a theme.json file in base folder of your theme and add a couple basic lines.

Specifically to address this ticket, to disable all color changes in the table block in your theme; your theme.json contain the following lines to disable . With this example below, the editor will not be able to use black and white, the default settings for the block.

Your full theme.json file is available at https://gist.github.com/skorasaurus/02151dba644cfa51b9adb926a06c0cef

    "blocks": {
      "core/table": {
        "color": {
          "custom": false,
          "palette": []
        }
      }

Note: If you remove the line that begins with 'palette' in the example above; the table block will allow any color in the palette to be used (if you already set a palette for the entire website).

More information and context is available at https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json