New color-alpha package available

A few months ago we started creating a new color-alpha package for themes that want to use a color picker in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. capable of handling rgba colors with opacity.

During the course of these months the concept we were working on evolved and today we’re glad to announce it’s finally available for themes.

RGBA Colorpicker control screenshot

This control uses the react-color color picker, and can serve as an example of how developers can build reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-based controls for the Customizer.
It is lighter than the default Customizer color picker scripts based on Iris, and there were further performance improvements – namely regarding the instantiation of the control. By default, color pickers get instantiated when the customizer loads. This control, however, will only get instantiated when the section containing it opens, significantly improving performance for themes that use many color pickers in the customizer.

By default, the control works just like any other control and saves a string with the selected color. The format of the saved value will depend on the opacity of the selected color. If the color is completely opaque, then it will save a HEX value (#000000). If the selected color is not completely opaque (has an alpha value smaller than 1) then the value will be saved as RGBA (rgba(0,0,0,0.9)).

Installation

You can find installation instructions in the repository’s readme file.

Usage

This is a control containing a JS template. As such, it should be whitelisted in the Customizer. To do that we can use the WP_Customize_Manager::register_control_type method:

add_action( 'customize_register', function( $wp_customize ) {
	$wp_customize->register_control_type( '\WPTRT\Customize\Control\ColorAlpha' );
} );

After the control is registered with the above snippet, we can use it in the customizer using the Customizer API:

use \WPTRT\Customize\Control\ColorAlpha;

add_action( 'customize_register', function( $wp_customize ) {

	// Add Setting.
	$wp_customize->add_setting( 'your_setting_id' , [
		'default'           => 'rgba(0,0,0,0.5)', // Use any HEX or RGBA value.
		'transport'         => 'refresh',
		'sanitize_callback' => 'my_custom_sanitization_callback'
	] );

	// Add Control.
	$wp_customize->add_control( new ColorAlpha( $wp_customize, 'your_setting_id', [
		'label'      => __( 'My Color', 'mytheme' ),
		'section'    => 'my_section',
		'settings'   => 'your_setting_id',
	] ) );
} );

Sanitization

All controls should be sanitized in the customizer. Since the color-alpha control can save either a hex or an rgba value, we built a custom sanitization callback you can use.

Available filters

By default, the control will work out of the box for any plugins and themes installed in wp-content/themes and wp-content/plugins respectively. If however, the control is not inside the wp-content folder, then you can use the wptrt_color_picker_alpha_url filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to define its URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. You can see an example of that in the repository’s readme file.


Everything described above is the default behavior of the control. However, if developers wish, this control can handle a lot more. We added the option to save the value as an array and expose more tools that you can use.

If you want to automate things and do more advanced color calculations, continue reading the section below.

Saving value as an array

Though the default behavior of the control is to save a simple string, developers have the option to save the value as an array. The saved array contains the color properties as well as some extra items that can be used to enhance a theme’s (or pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party’s) accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility).

To change the behavior of the control and make it save an array instead of string, users can add 'save_as' => 'array' under the control’s choices:

$wp_customize->add_control( new ColorAlpha( $wp_customize, 'your_setting_id', [
	'label'    => __( 'My Color', 'mytheme' ),
	'section'  => 'my_section',
	'settings' => 'your_setting_id',
	'choices'  => [
		'save_as' => 'array',
	]
] ) );

The value saved will then have the following format:

[
	'r'    => 107, // Red.
	'g'    => 55, // Green.
	'b'    => 119, // Blue.
	'h'    => 289, // Hue.
	's'    => 37, // Saturation.
	'l'    => 34, // Lightness.
	'a'    => 0.82, // Alpha
	'hex'  => '#6b3777', // The HEX code of the color (alpha = 1)
	'css'  => 'rgba(107,55,119,0.82)', // The CSS value of the selected color.
	'a11y' => [ // An array of accessibility-related properties.

		'luminance'                         => 0.0719,

		// Contrast with white (value 0 - 21).
		'distanceFromWhite'                 => 8.613,

		// Contrast with black (value 0 - 21).
		'distanceFromBlack'                 => 2.438,

		// Maximum contrasting color. Use this to get the text-color
		// if the colorpicker is used to select a background-color.
		'maxContrastColor'                  => '#ffffff',

		// Readable text-colors on white background preserving the hue.
		// The 1st value has a minimum contrast of 7:1 with white.
		// The 2nd value has a minimum contrast of 4.5:1 with white.
		'readableContrastingColorFromWhite' => [ '#6b3777', '#6b3777' ],

		// Readable text-colors on black background preserving the hue.
		// The 1st value has a minimum contrast of 7:1 with black.
		// The 2nd value has a minimum contrast of 4.5:1 with black.

		'readableContrastingColorFromBlack' => [ '#bc83c7', '#a458b5' ],

		// True if the color is dark.
		'isDark'                            => true
	],
]

The saved value contains all the properties needed to automate a lot of processes, and we hope it will encourage developers to do more things without the need to provide multiple controls.

Sanitizing the control when saving an array

If you choose to save the value as an array, we have an example sanitization callback you can use in the repository.

Using the array value

You can use these properties however you like. Below are some simple examples:

Get the cssvalue

This will get the value that the control would normally save if not saving as an array:

$rgba = $value['css']

Get the text-color from a background-color

Using the code below we can get the optimum text-color when our selected color is used for the background. Text color, in this case, will be either #000000 or #ffffff:

$text_color = $value['a11y']['maxContrastColor'];

Get readable color from background color:

$color = $value['a11y']['readableContrastingColorFromWhite'][0];
if ( $value['isDark'] ) {
	$color = $value['a11y']['readableContrastingColorFromBlack'][0];
}

Get a complementary color

Here we’re using the saved color properties. We’ll rotate the hue by 180 degrees, and build an hsla color that can then be used in our CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.:

$h = ( $value['h'] > 180 ) ? $value['h'] - 180 : $value['h'] + 180;
$s = $value['s'];
$l = $value['l'];
$a = $value['a'];
$color = 'hsla(' . $h . ',' . $s . '%,' . $l . '%,' . $a . ')';

You can use the same logic to build color triads or your own custom palette from a single control by rotating the hue (usually by 30, 45, 60, 90, 120, or 180 degrees)

Contributing

This control is developed on its own GitHub repository. All contributions are welcomed there.

#color-alpha-package, #customizer-api, #open-source

Theme Review Team Meeting Agenda for December 10

First, apologies for not posting meeting notes for November 26.

In case anyone missed it, we also had an extra meeting on December 4.

Theme review team (TRT) conducts a meeting on the second and fourth Tuesday of the month. Along with the fixed agendas, we have open floor meeting at the end where you can ask or share anything related to themes.

We encourage all members and anyone interested to attend.

Channel: #themereview | Time: Tuesday, 10th December 2019, 17:00 UTC

Meeting Agenda

  1. Weekly Updates
    • Featured themes- no news to report.
    • Theme Review Team Badges -no news to report.
    • Suspensions -There is still a large backlog of reports.
  2. Fonts: Privacy related to google fonts, and enqueuing variable fonts.
  3. Recap of the future of themes meeting. Status report on our two current tasks regarding the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor:
    • Get a list of things that are in discussion and relates to themes
    • Get a list of blocks that are missing for themes
  4. Do not contact reviewers outside official channels

#meeting, #trt

Do Not Contact Reviewers Outside of the WordPress.org System About your Review

You should not contact people about your review outside of the predefined systems. Do not contact a reviewer in a way they have not invited you do contact them on.

A reviewer should never be worried about the messages they receive outside of the reviewing system.

Additionally, it is never going to be OK to offer someone an incentive to help ‘speed things up’. The best way for you to speed up the process is to get involved and help review other themes – and for themes to be ready when they are uploaded so that long review times are not required.

Ways To Contact Your Reviewer or Discuss your Review

If you have a reviewer assigned to your theme or you want to discuss something about the theme then these are the places and ways you can do that.

  • In your theme ticket on trac.
  • In the slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. ThemeReview channel.
  • Sometimes a DM on slack is allowable but if someone does not respond to it take that as a sign they do not have the time to respond or that they do not welcome such messages.

Ways Not To Contact A Reviewer

You should never contact a reviewer outside of the above-mentioned channels without first being invited to do so by that person. This is often called a follow home and is not acceptable.

Do not contact anyone by:

  • Reaching out to them on Twitter.
  • Sending them a message through a contact form on their personal sites.
  • Sending emails to their work addresses.
  • Finding them on Facebook.
  • etc, etc…

Basically, if it’s not on tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. or in the related slack channels then don’t expect that people want to receive messages there.

Questions about the Future of Themes

This week we held a meeting at the last minute in the #themereview slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel (you’ll need an account to see it). The goal of the meeting was to discuss where themes are going in the future.

We (the TRT reps) do not have all the answers but we do think this discussion is important to have and to keep open going forward.

We had a handful of questions that we wanted to get an answer on:

  • Is it time to allow theme authors to use what is available from the editor?
  • How can theme authors be more involved with the editor building experience and influence where it is going so that it is going where they need it?
  • In what ways does future editor plans affect themes?

How can we, as the people that build themes, influence the direction the editor is going in if the destination has already been decided?

William Patton

Matías Ventura offered up specifically these 2 things which we can help with that are not yet decided.

We made a proposal to the Theme Review Team and are seeking opinions from the team and from theme authors:

My proposal is firstly about allowing blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. templates into themes. Secondly it is about the pros/cons of including custom blocks directly.

William Patton

Ultimately we want to allow theme authors the ability to make use of all the features the editor can offer. Even the experimental ones, we think it’s important that experiments are done by real people to solve real-world problems.

The issue highlighted with allowing all themes to do this is that it results in a type of lock-in which we generally want to avoid at all costs. We also don’t want to have things exposed to end-users that may break in the future.

For experimental themes what was suggested is that instead of standard theme submissions and the queue authors could test these things and place them on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ for us to check out. I think this is a good idea and something we will try to make happen.

We had 2 final points we wanted to get across to act as open-ended questions we can work on in the coming weeks and months. Please feel free to ponder these and share in the comments any insights you may have.

  • Theme authors: We propose we allow themes to experiment with current and future features. We will tag them as experimental . What are the thoughts on this?
    • Sidenote: this is likely best done not in the standard review system but instead on GitHub or similar.
  • Editor builders: How best can we help if we do not yet know ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. or have the time to look through the thousands of issues on GitHub.

As for ways to help out there is work ongoing to create a demo space here: https://github.com/WordPress/gutenberg/blob/master/lib/demo-block-templates/index.html

As for a few action points here is what we need to do before we have another discussion about this.

  1. Get a list of things that are in discussion and relates to themes (Josepha has kindly offered to get us the inside scoop on this.)
  2. Get a list of blocks that are missing for themes right now (TRT and theme authors are in a good position to tell people what they are missing and any sticking points they have.)

Thanks to everyone who attended the meeting for this. It was very short notice so if anyone wants to bring anything up that was not discussed or considered in advance feel free to pop by #themereview channel and let us know.

Theme Review Team Meeting Agenda for November 26, 2019

November 26th is the 4th Tuesday of the month. The Theme Review Team (TRT) has a meeting at 17:00 UTC. We encourage all members and anyone interested to attend.

We usually have a fixed agenda to discuss. However, this week we don’t have anything special to discuss with the team. So we would like to request all members to comment below if you want to discuss any theme-related topics.

We will start our meeting with the updates that happened since the last meeting and what TRT leads are doing and working on. After that, we will go through the proposed topics and the meeting will end with the open floor where we can discuss various theme-related topics.

Meetings usually last around 60 minutes. Attend and share your valuable feedback and suggestions.

Channel: #themereview  Time: Tuesday, 26th November 2019, 17:00 UTC

#meeting

#announcements, #meeting