Drupal Gutenberg is missing support for some basic theme supports.

All the available options are available at:
https://github.com/WordPress/gutenberg/blob/master/docs/designers-develo...

The ones I'm particularly interested in are the disable-custom-colors and disable-custom-font-sizes options.

But ideally, the module should provide the full feature-set highlighted on the link above.

The quick and dirty solution would be to add an extras property into the themes gutenberg.yml file which gets merged into the main editor's configuration object.

The relevant code in Wordpress: https://github.com/WordPress/gutenberg/blob/master/lib/widgets-page.php#L72

Thanks

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

codebymikey created an issue. See original summary.

aaronpinero’s picture

I would like to second this request. This is a must have for any site where website governance and enforced style standards are important . I cannot use this module on a production site without these sorts of controls. Ideally, they could be connected to Drupal permissions, but it would also be great if text sizing and color options could just be switched off.

James Hawthorn-Byng’s picture

I would also love to see this. The above comments are right, you can't really use this is a customers production site without being able to customise these options.
As it is already available in the WordPress version, I would be surprised if its not already in the stable release somehow but just not documented.
If this is the case, some extra documentation on https://www.drupal.org/docs/8/modules/gutenberg/create-a-custom-palette-in-a-theme would be great.

James Hawthorn-Byng’s picture

I am adding a patch to allow for the gutenberg.yml file to be able to override some more of the editor options, specifically:

  • disableCustomColors
  • disableCustomFontSizes
  • disablePostFormats (not really sure what this one does though)
  • codeEditingEnabled
  • gradients (Block Gradient Presets)
  • fontSizes (this one already existed but was not documented)



You and then override these settings in your themes gutenberg.yml file (mytheme.gutenberg.yml) under `theme-support`.

E.G.

theme-support:
  colors:
    - slug: "black"
      name: "Black"
      color: "#000000"
    - slug: "white"
      name: "White"
      color: "#FFFFFF"
    - slug: "dark-midnight-blue"
      name: "Dark Midnight Blue"
      color: "#003366"
    - slug: "very-dark-orange"
      name: "Very Dark Orange"
      color: "#663300"

  gradients:
    - slug: 'vivid-green-cyan-to-vivid-cyan-blue'
      name: 'Light green cyan to vivid cyan blue'
      gradient: 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)'

  fontSizes:
    - name: "Small"
      size: 12
      slug: 'small'

  disableCustomColors: TRUE
  disableCustomFontSizes: TRUE
  disableCodeEditing: TRUE

The only thing I cant workout is when you enable disableCustomFontSizes, it removed the text field to input the custom size, but doesn't remove custom from the select list. If any one else can would that bit out, it would be greatly appreciated.

The patch applies to the current dev version.

James Hawthorn-Byng’s picture

This patch is for the current 8.x-1.10 release if anyone wanted to try it in a development environment.

James Hawthorn-Byng’s picture

Status: Active » Needs review
codebymikey’s picture

I appreciate the implementation.

But I think the patch needs to be applied to the gutenberg.es6.js file instead, then built by running npm build.

James Hawthorn-Byng’s picture

Thanks codebymikey!
It took ages to get npm run build to work correctly as it wouldn't install from the package.json correctly fyi.

Attaching the patch to the es6 file.

codebymikey’s picture

Hi @James Byng,

I meant that the patch would need to include both gutenberg.es6.js and gutenberg.js.

Your main code changes would be to gutenberg.es6.js, then the npm command should generate the relevant gutenberg.js file (which is what is used by Drupal).

I like the addition of the themeSupport variable. It makes the code much cleaner, it can be used on the following block code as well.

I personally feel the ideal solution would be to merge drupalSettings.gutenberg['theme-support'] into the original editorSettings variable. This way it's future-proof against any new theme APIs the Gutenberg editor supports, and it's up to the theme developer to specify that they want support for it.

James Hawthorn-Byng’s picture

Ah damn, sorry. I wasn't sure how the code was being built when packaged up to drupal.org. I assumed it might build it.

Ok, here is another patch for the es6 file and includes the generated gutenberg.js file.
I have also included the changes to the colors and the fontSizes constants to use the theme support variable.

I'm not really sure what you mean by that last bit as I'm a php dev really and not exactly the best at JS. I more figured this bit our by accident. I might leave that part up to someone else.

codebymikey’s picture

Merges the current theme's theme-support values into the editor settings. This future-proofs the module against future theme supports changes. The crucial editor settings won't be overridden.

Also fixed an optimization issue where _gutenberg_get_default_theme_settings repeats the file_exists checks unnecessarily when theme.gutenberg.yml doesn't exist.

marcofernandes’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.