Add background colour transparency to blocks that support background colour

[timhibberd]

Is your feature request related to a problem? Please describe.
In modern design transparency background colour is used frequently (e.g. sub-blocks of text in a group block). On all blocks that provide a background colour the GUI control supports colour adjustment but not transparency adjustment. This forces the user to add custom CSS for a trivial action which is counter to the intention of GB to be Wix-like and useable by ordinary consumers.

Describe the solution you'd like
On all blocks that provide a background colour the GUI control should include a transparency slider (like the opacity slider for the background image of the cover block).

Describe alternatives you've considered
Unless there is a reason I am not aware of the technical implementation would be changing the background colour setter to use CSS RBGA vs. RGB as at present. The transparency slider control should be able to reuse the opacity slider currently in use by the Cover block.

[kjellr]

Agreed that this would be a helpful addition. Here's a super-quick mockup:

[aristath]

Hmmm colorpickers already have a disableAlpha parameter, and internally they're disabled.
But I suppose we could expose that and enable it for all background-colors... 🤔

[cpapazoglou]

Thanks @aristath for the heads up! Indeed switching disableAlpha to false returns an opacity picker inside the color picker

I have prepared the groundwork #25421 and trying to apply it in the background-color of the cover block. Haven't found a global way to enable it for all background-colors and I am not sure we want that.

Now I am searching how to actually pass that alpha value to the component cause currently defaults to rgb in the editor and hex in the frontend.

[cpapazoglou]

Added the transparency control to cover, button, paragraph, heading, list. I hope it is not overused 😃 !

[rooksads]

Can the transparency control also be added to container and group?

[cpapazoglou]

Can the transparency control also be added to container and group?

Excellent suggestion, I will look into it!

[sophiegyo]

I would love this in general <3 I was thinking for group blocks specifically today, but things like Media & Text, or paragraph blocks etc would be nifty.

[maba4891]

Any news on that issue? Would love to see a fix as well

[mupic]

This task is 19 years old, how about already making progress in it? This is one of the reasons why gutenberg is so lagging behind the competition, there are no basic functions that should be built in from the beginning.

[amir2mi]

#27960 It is related. I believe many users want to have it. Also, related PR is #30493

[lecoqlibre]

Any news on this? I'm making a new theme using blocks and I need opacity but I'm so surprised that there is no alpha selector! Don't you think alpha selection is a must-have in every serious design solution? It would be so nice to have this feature in the next Gutenberg release...

+1 to add color transparency to any block that supports background color, especially the group one!

[supernovia]

+1; someone contacted us today for help with this. We couldn't find another way to fix it but to give them CSS.

[lecoqlibre]

Maybe this will interest someone here like @supernovia?

I made a filter to handle the opacity of the background color. One you have put it in your theme's function file, you just have to set the background color and add the CSS class bg-opacity-<opacity percent> to the block you want to set the opacity for (eg. bg-opacity-80 to make it 80% opacity). It works with custom colors and also with the predefined WordPress colors (white, pale pink, and so on). The filter append the alpha hex value to the end of the color hex.

/** Add an alpha to the background-color of any block that support bg based onto the CSS class bg-opacity-%% */
add_filter( 'render_block', function( string $block_content, array $block ) {
  if( ! isset( $block[ 'attrs' ][ 'className' ] ) )
    return $block_content;

  if( ! isset( $block[ 'attrs' ][ 'style' ][ 'color' ][ 'background' ] ) && ! isset( $block[ 'attrs' ][ 'backgroundColor' ] ) )
    return $block_content;

  $classes = explode( ' ', $block[ 'attrs' ][ 'className' ] ); // classes should be separated with space
  $mask = 'bg-opacity-'; // the base CSS class name to search for
  $opacity = array();
  
  // Search for the opacity through the CSS classes, the first one will be used
  foreach( $classes as $class ) {
    $match = array();
    if( ! 1 == preg_match( "#{$mask}([0-9]+)#", $class, $match ) )
      continue;
    $opacity = intval( $match[ 1 ] );
    break;
  }
  
  if( is_array( $opacity ) && empty( $opacity ) )
    return $block_content;

  // Compute the alpha value
  $alpha = dechex( 255 * $opacity / 100 );

  // Add a background color with an alpha when using predefined color name
  if( isset( $block[ 'attrs' ][ 'backgroundColor' ] ) ) {
    $colorName = $block[ 'attrs' ][ 'backgroundColor' ];
    $colors = array(
      'pale-pink' => '#f78da7', 
      'vivid-red' => '#cf2e2e', 
      'luminous-vivid-orange' => '#ff6900', 
      'luminous-vivid-amber' => '#fcb900', 
      'light-green-cyan' => '#7bdcb5', 
      'vivid-green-cyan' => '#00d084', 
      'pale-cyan-blue' => '#8ed1fc', 
      'vivid-cyan-blue' => '#0693e3', 
      'vivid-purple' => '#9b51e0', 
      'white' => '#ffffff', 
      'very-light-gray' => '#eeeeee', 
      'cyan-bluish-gray' => '#abb8c3', 
      'very-dark-gray' => '#313131', 
      'black' => '#000000'
    );
    $color = $colors[ $colorName ] . $alpha;
    $block_content = preg_replace( '#style="#', "style=\"background-color:{$color};", $block_content, 1 );
  }

  // Replace the background color with the alpha when using custom color
  else {
    $color = $block[ 'attrs' ][ 'style' ][ 'color' ][ 'background' ] . $alpha;
    $block_content = preg_replace( '#background-color:(.+);#', "background-color:{$color};", $block_content, 1 );
  }
  
  return $block_content;
}, 10, 2 );

[uniquesolution]

I am not able to understand why can't we simply apply to group block, we already have it in cover block working perfectly, then why group not work the same way ? If we provide rgba format color in theme.json, then it should simply show opacity parameter too to change the color opacity.

[ramonjd]

The ColorPicker component has support for alpha transparency.

See: https://developer.wordpress.org/block-editor/reference-guides/components/color-picker/#enablealpha-boolean

In this example, I've manually set the prop to enable it for all colors (background, link etc) in the block inspector:

A question is whether we should allow enabling alpha transparency via block supports, e.g., on a per block basis via block.json, or everywhere.

I can't think of a reason why we would want to limit this useful and, thanks to the new color picker layout, unobtrusive feature.

Still, there might be a reason for theme developers to want to limit usage of the effect.

[dennisheiden]

Here is a PR waiting for review since mid 2021:
#30493

here is a second PR in WIP for some reasons:
#37731

we need some progress on this after 2 years

[ramonjd]

here is a second PR in WIP for some reasons:

Hallo @dennisheiden

#30493 (and #25421) employs disableAlpha, which has been deprecated since the new ColorPicker, though there is a legacy bridge for such props, I guess we should probably move away from it.

#37731 enables alpha via the supported enableAlpha prop.

If you have time to test #37731 that would be great, thank you!

[dennisheiden]

@ramonjd Thanks for the clarification, this helps to prevent wasting time with obsolete PRs. ty.

[richwalton]

Any word on this? seems as if the time it takes to respond here would have already fixed this. As of today no transparency in the group block. Such an easy fix takes years, why?

[ramonjd]

Hi @richwalton,

#37731 was merged a couple of weeks back. The change should be part of Gutenberg 12.5, which was released a few days back.

If you update the Gutenberg plugin to 12.5 you should see the following controls: