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 background colour transparency to blocks that support background colour #18095

Closed
Tracked by #33447
timhibberd opened this issue Oct 24, 2019 · 20 comments · Fixed by #37731
Closed
Tracked by #33447

Add background colour transparency to blocks that support background colour #18095

timhibberd opened this issue Oct 24, 2019 · 20 comments · Fixed by #37731
Assignees
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement.

Comments

@timhibberd
Copy link

timhibberd commented Oct 24, 2019

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.

@jorgefilipecosta jorgefilipecosta added the [Type] Enhancement A suggestion for improvement. label Nov 21, 2019
@kjellr kjellr added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Aug 27, 2020
@kjellr
Copy link
Contributor

kjellr commented Aug 27, 2020

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

Screen Shot 2020-08-27 at 9 41 01 AM

@aristath
Copy link
Member

aristath commented Aug 27, 2020

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
Copy link
Contributor

cpapazoglou commented Sep 17, 2020

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
Copy link
Contributor

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

@rooksads
Copy link

rooksads commented Oct 6, 2020

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

@cpapazoglou
Copy link
Contributor

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

Excellent suggestion, I will look into it!

@sophiegyo
Copy link

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
Copy link

maba4891 commented May 7, 2021

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

@mupic
Copy link

mupic commented May 17, 2021

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
Copy link
Contributor

amir2mi commented Jul 4, 2021

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

@mtias mtias mentioned this issue Jul 15, 2021
65 tasks
@mtias mtias mentioned this issue Aug 25, 2021
31 tasks
@lecoqlibre
Copy link

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
Copy link

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

@lecoqlibre
Copy link

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
Copy link

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
Copy link
Member

ramonjd commented Jan 5, 2022

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:

Screen Shot 2022-01-05 at 3 26 21 pm

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
Copy link

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
Copy link
Member

ramonjd commented Jan 18, 2022

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
Copy link

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

@ramonjd ramonjd moved this from ⏱ Not Started to ⏳ In Progress in Design Tools Project Jan 19, 2022
@ramonjd ramonjd self-assigned this Jan 19, 2022
Repository owner moved this from ⏳ In Progress to ✅ Done in Design Tools Project Jan 20, 2022
@richwalton
Copy link

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
Copy link
Member

ramonjd commented Feb 7, 2022

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:

Screen Shot 2022-02-07 at 3 49 42 pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement.
Projects
Status: Done