Meeting Notes for Tuesday 14th January 2020

A meeting was held with the proposed agenda.

The following is the recap of the meeting, you can read the meeting transcript in the slack archives (a Slack account is required).

Updates

In the past seven days:

  • 289 tickets were opened
  • 287 tickets were closed:
    • 267 tickets were made live
      • 7 new Themes were made live
      • 260 Theme updates were made live
      • 14 more were approved but are waiting to be made live
    • 17 tickets were not-approved
    • 3 tickets were closed-newer-version-uploaded

How to gain new reviewers and keep the experienced ones

Theme Review Team discussed the issue of the lack of reviewers in general. New reviewers often leave because they have no supervision and have no feedback on whether their review was good. The feedback often comes in the admin review, and by that time reviewers lose interest in doing any reviews.

Incentives usually don’t work (as was demonstrated by the trusted author programme).

One idea was to close the reviews to the public. This would lessen the pressure on the reviewer from any negative feedback from the author. But would be hard to accomplish from the technical side.

Another pain point is the number of requirements that have grown over time.

The second idea was to focus our efforts on improving our automation tools as much as possible. For that to happen we would need to get more code-savvy contributors.

The issue that team reps are battling with at the moment is handling authors that try to game the system with multiple accounts.

@aristath proposed a possible system we could impose

  • 1 theme limit – just like now.
  • If an author successfully completes a review, they get the ability to upload an extra theme.

What constitutes a “successful” review:

  • If on the final review we find more than 3 issues that were not covered by the initial review, then it’s a fail.
  • If they do 5 rushed/incomplete/bad reviews, they lose the ability to participate for 3 months in the multi-themes thing.

First, they do a good review, then after the theme goes live and we’re satisfied it was an OK review, they get the ability to upload a 2nd one. If we catch them with multi-accounts after that is in effect, we’d suspend the author for 6 months.

The idea is to try to make authors see what the issues are and in that way educate them to write better code.

We’d also need a way to track the success of such implementation. The team reps will discuss how an implementation of this would look like in more detail and post the plan on the make blog.

Focus areas for 2020

The key focus area the TRT will have to focus on is the full site editing with the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor (GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/).

Changes are already happening and we need to educate and prepare theme authors and theme reviewers for the upcoming changes to the way the theme role will be in the future of WordPress.

One thing is clear: if we want to have any impact, we (the TRT) need to participate actively in the development of Gutenberg.
Participation and contribution don’t necessarily have to be code additions. It can be testing out the new features and providing valuable feedback to the core editor team. This will steer the editor in the way that is favorable to both end-users and theme authors.

An option that we can consider is to try to allow experimental themes to the repository in order to get more valuable feedback.

If you want to contribute, the best way is to discuss and get involved with the Gutenberg tickets labeled [Feature] Full Site Editing.

Other than that you can explore the experimental themes, play with them and offer your insight by opening issues in the repo.

Every contribution, no matter how small, is beneficial.

Other news (open floor)

There is a proposal to start having regular polls so that we can see the public opinion on certain theme review related issues.

We will look into it and we’ll try to get some help into formulating interesting and valuable poll questions.

#meeting, #meeting-notes, #trt

Theme Review Team Meeting Agenda for January 14

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, 14th January 2020, 18:00 UTC

Meeting Agenda

  1. Weekly Updates
  2. Discussion about the issue of low review turnout – how to gain new reviewers and keep the experienced ones
  3. Focus areas for 2020
  4. Open floor

The discussion about the meeting agenda can be held in the comments below. You are encouraged to propose the topic for the agenda.

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

#agenda, #meeting, #trt

Thank You All, Looking Forward to Another Year

The Theme Review Team reviews all the themes that go live in the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ directory. Every single one of them gets a full and detailed review. It’s a huge task – and it is not an easy one.

We can only manage it because of the immense amount of help we receive from the community. From you. Every single person that helps is a member of this team and we thank you greatly for all the effort that has been put in.

Every bit of help someone gives pushes things forward. It made 2019 a year to remember for the Theme Review Team. There have been ups and downs, as always, but this year a massive amount of progress was made on many fronts.

Rather than just review themes, we branched out into more areas.

  • We released several packages for theme authors.
    • Notices package
    • Color Alpha Picker package
  • We worked on the new default theme – Twenty Twenty – alongside @anlino and @ianbelanger
  • We gained edit access to the Theme Developer Handbook.
  • Several projects got MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. commits moving them forward.
  • The Report a Theme button was used a lot to flag problems in themes.
  • We restructured the team and switched from leads into representatives.
  • We started having triages – although infrequently, which will change.
  • We released the minor update to WPThemeReview coding standards.

We are aware that there is a lot to be done, but we hope that with your help we’ll all get there in no time 🙂

#new-year, #reflection

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