WordPress.org

Make WordPress Core

Opened 11 months ago

Last modified 2 months ago

#38093 new enhancement

WP_Customize_Color_Control - Color Transparency

Reported by: mukesh27 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 3.5
Component: Customize Keywords: 2nd-opinion
Focuses: ui, javascript Cc:

Description

In wordpress customizer there is no option for transparent color if user don't want to add color. also opacity option is not there is it possible to add this in feature?

php code :

<?php

/* Navigation Background Color */

$wp_customize->add_setting( 'add_navigation_bg_color_header', array(
        'default'                       => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage'
        
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'add_navigation_bg_color_header', array(
        'label'                 => esc_attr__( 'Navigation Background Color', 'paperio' ),
        'section'               => 'add_navigation_section',
        'settings'                      => 'add_navigation_bg_color_header',
        
) ) );

/* End Navigation Background Color */

?>

if we add transparent color in color picker and add new control for rgba() so it's easy to customize any developer and make more functional theme.

Attachments (1)

customizer-color-box.png (18.2 KB) - added by mukesh27 11 months ago.
transparent checkbox option

Download all attachments as: .zip

Change History (4)

@mukesh27
11 months ago

transparent checkbox option

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


11 months ago

#2 @celloexpressions
11 months ago

  • Focuses ui added; administration performance removed
  • Keywords 2nd-opinion added
  • Type changed from feature request to enhancement
  • Version changed from 4.6.1 to 3.5

This was discussed at some length when the color picker was introduced in #21206. I generally still agree with the reasoning there that allowing transparency generally results in a bad experience for end users. A transparent checkbox has been agreed as not a great solution in particular.

RGBA might be an interesting option, and could be a parameter on the color control class so that it's only enabled when a particular feature calls for it. However, it introduces challenges for saving the associated setting and would require new sanitization functions, etc. A similar effect can be achieved by adding a color control followed by a generic control with 'type' => 'range' and building the CSS back out of the two settings on the output side. I don't think core should add the complexity of rgba support to the core control, but does anyone else have opinions here?

#3 @Howdy_McGee
2 months ago

  • Summary changed from WP_Customize_Color_Control - there is no option for transparent color to WP_Customize_Color_Control - Color Transparency

I think that having color transparency is a necessity. The Customizer has grown and grown since Theme Options has been banned from being baked into themes and it continues to grow. With it comes the complexity of options it must provide. I ran across this also looking for a solution as I want to give my clients an option to change the background color of a box. This is great but without some kind of opacity slider, they are always limited to solid colors.

I agree it's bad UI on text but for things like backgrounds I don't see it as bad UI - it's all in how you use the setting field. I think a checkbox is too black and white and an actual slider with an input is necessary. The best position for it I believe would be underneath the colors swatches, inside or outside the colorpicker container doesn't matter. It should be a horizontal slider with an opacity input on the far right - accepting anything between 0 and 1.

We would need new sanitization functions but I don't see sanitizing RGBA or converting Hex to RGBA to be a difficult task. Either way, I'm all for this proposal!

Note: See TracTickets for help on using tickets.