Clarify error message if duotone color values is incorrect #51397

t-hamano · 2023-06-10T15:36:10Z

Fixes: #50200
Similar to #50714

What?

This PR fixes a PHP warning error that appears when the duotone color is not HEX or RGB in theme.json and changes the text to be more specific.

Why?

In theme.json, settings.color.duotone[].colors values support only strings representing HEX or RGB. If any other value is present, it cannot be parsed into the RGBA value and will refer to a non-existent index in the array, causing a PHP Warning error.

The fact that only RGB and HEX are allowed is also defined as description in the theme.json schema.

However, many developers may not be aware of this because (in my VSCode) I have to mouse over the value to read that description. I thought it would make sense to let developers know what values are incorrect by means of more explicit error messages.

How?

As in #50714, the _doing_it_wrong function indicates color strings that could not be parsed. Also, the invalid value is not used as a value for the duotone filter.

Testing Instructions

Activate the Empty Theme theme and update theme.json as follows:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"color": {
			"duotone": [
				{
					"name": "Black To White",
					"slug": "black-to-white",
					"colors": [
						"var(--wp--preset--color--black)",
						"#fff"
					]
				},
				{
					"name": "Pale Pink to Vivid Red",
					"slug": "pale-pink-to-vivid-red",
					"colors": [
						"#f78da7",
						"var(--wp--preset--color--vivid-red)"
					]
				},
				{
					"name": "Incorrect Values",
					"slug": "incorrect",
					"colors": [
						"incorrect-value-1",
						"incorrect-value-2"
					]
				},
				{
					"name": "Pale Cyan Blue to Vivid Purple",
					"slug": "pale-cyan-blue-to-vivid-purple",
					"colors": [
						"#8ed1fc",
						"#9b51e0"
					]
				}
			]
		}
	}
}

Access the editor and verify that the error message changes.

Before

PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 533
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 534
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 535
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 536
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 533
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 534
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 535
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 536
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 533
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 534
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 535
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 536
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 533
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 534
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 535
PHP Warning:  Trying to access array offset on value of type null in /var/www/html/wp-content/plugins/gutenberg/lib/class-wp-duotone-gutenberg.php on line 536

After

PHP Notice:  Function WP_Duotone_Gutenberg::get_filter_svg was called <strong>incorrectly</strong>. "var(--wp--preset--color--black)" is not a hex or rgb string in theme.json settings. Please see <a href="https://wordpress.org/documentation/article/debugging-in-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.3.0.) in /var/www/html/wp-includes/functions.php on line 5896
PHP Notice:  Function WP_Duotone_Gutenberg::get_filter_svg was called <strong>incorrectly</strong>. "var(--wp--preset--color--vivid-red)" is not a hex or rgb string in theme.json settings. Please see <a href="https://wordpress.org/documentation/article/debugging-in-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.3.0.) in /var/www/html/wp-includes/functions.php on line 5896
PHP Notice:  Function WP_Duotone_Gutenberg::get_filter_svg was called <strong>incorrectly</strong>. "incorrect-value-1" is not a hex or rgb string in theme.json settings. Please see <a href="https://wordpress.org/documentation/article/debugging-in-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.3.0.) in /var/www/html/wp-includes/functions.php on line 5896
PHP Notice:  Function WP_Duotone_Gutenberg::get_filter_svg was called <strong>incorrectly</strong>. "incorrect-value-2" is not a hex or rgb string in theme.json settings. Please see <a href="https://wordpress.org/documentation/article/debugging-in-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.3.0.) in /var/www/html/wp-includes/functions.php on line 5896

glendaviesnz · 2023-06-12T05:10:00Z

lib/class-wp-duotone-gutenberg.php

+			if ( null === $color ) {
+				$error_message = sprintf(
+					/* translators: %s: duotone colors */
+					__( '"%s" is not a hex or rgb string in theme.json settings.', 'gutenberg' ),


Tested well for me. I wonder if for even more clarity we should say `'"%s" in theme.json settings.color.duotone is not a hex or rgb string.'?

Thanks for the review! Updated with dae5201. Here are the new error messages:

PHP Notice: Function WP_Duotone_Gutenberg::get_filter_svg was called incorrectly. "var(--wp--preset--color--black)" in theme.json settings.color.duotone is not a hex or rgb string. Please see <a href="https://wordpress.org/documentation/article/debugging-in-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.3.0.) in /var/www/html/wp-includes/functions.php on line 5896 PHP Notice: Function WP_Duotone_Gutenberg::get_filter_svg was called incorrectly. "var(--wp--preset--color--vivid-red)" in theme.json settings.color.duotone is not a hex or rgb string. Please see <a href="https://wordpress.org/documentation/article/debugging-in-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.3.0.) in /var/www/html/wp-includes/functions.php on line 5896 PHP Notice: Function WP_Duotone_Gutenberg::get_filter_svg was called incorrectly. "incorrect-value-1" in theme.json settings.color.duotone is not a hex or rgb string. Please see <a href="https://wordpress.org/documentation/article/debugging-in-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.3.0.) in /var/www/html/wp-includes/functions.php on line 5896 PHP Notice: Function WP_Duotone_Gutenberg::get_filter_svg was called incorrectly. "incorrect-value-2" in theme.json settings.color.duotone is not a hex or rgb string. Please see <a href="https://wordpress.org/documentation/article/debugging-in-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.3.0.) in /var/www/html/wp-includes/functions.php on line 5896

github-actions · 2023-06-12T12:18:27Z

Flaky tests detected in dae5201.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5243050796
📝 Reported issues:

[Flaky Test] page-list submenu user interactions #51348 in /test/e2e/specs/editor/blocks/navigation.spec.js

glendaviesnz

LGTM

t-hamano · 2023-06-14T07:45:11Z

I believe this PR needs to be backported to WordPress core. ~~I will add a comment to #51077 when the ticket and PR are ready in WordPress core.~~ I learned that numerous changes were made to the class-wp-duotone-gutenberg.php file. Therefore, I only tied the PR to the target file in #51077.

ramonjd · 2023-06-15T04:59:15Z

I learned that numerous changes were made to the class-wp-duotone-gutenberg.php file. Therefore, I only tied the PR to the target file in #51077.

Thanks @t-hamano !

…#51397) * Clarify error message if duotone color values is incorrect * Add period * Update message

Clarify error message if duotone color values is incorrect

8560727

t-hamano self-assigned this Jun 10, 2023

t-hamano added the [Package] Style Engine /packages/style-engine label Jun 10, 2023

t-hamano requested review from scruffian and ajlende June 10, 2023 15:44

Add period

50b96c6

t-hamano marked this pull request as ready for review June 10, 2023 15:48

t-hamano requested a review from spacedmonkey as a code owner June 10, 2023 15:48

glendaviesnz reviewed Jun 12, 2023

View reviewed changes

t-hamano added 2 commits June 12, 2023 20:27

Merge branch 'trunk' into enhancement/notice-error-duotone-values

bfd6038

Update message

dae5201

glendaviesnz approved these changes Jun 13, 2023

View reviewed changes

t-hamano merged commit 04cab49 into trunk Jun 13, 2023

t-hamano deleted the enhancement/notice-error-duotone-values branch June 13, 2023 02:32

github-actions bot added this to the Gutenberg 16.1 milestone Jun 13, 2023

t-hamano added the Needs PHP backport Needs PHP backport to Core label Jun 14, 2023

t-hamano mentioned this pull request Jun 14, 2023

Plugin: Synchronize PHP changes for WordPress 6.3 release #51077

Closed

MaggieCabrera mentioned this pull request Jun 15, 2023

Backport: Duotone changes WordPress/wordpress-develop#4619

Closed

12 tasks

ramonjd removed the Needs PHP backport Needs PHP backport to Core label Jun 30, 2023

sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023

Clarify error message if duotone color values is incorrect (WordPress…

1de97d4

…#51397) * Clarify error message if duotone color values is incorrect * Add period * Update message

t-hamano mentioned this pull request Aug 16, 2023

Update theme.json schema to mark text as an invalid variable name #53153

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clarify error message if duotone color values is incorrect #51397

Clarify error message if duotone color values is incorrect #51397

t-hamano commented Jun 10, 2023 •

edited

Loading

glendaviesnz Jun 12, 2023

t-hamano Jun 12, 2023

github-actions bot commented Jun 12, 2023

glendaviesnz left a comment

t-hamano commented Jun 14, 2023 •

edited

Loading

ramonjd commented Jun 15, 2023

Clarify error message if duotone color values is incorrect #51397

Clarify error message if duotone color values is incorrect #51397

Conversation

t-hamano commented Jun 10, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

Before

After

glendaviesnz Jun 12, 2023

Choose a reason for hiding this comment

t-hamano Jun 12, 2023

Choose a reason for hiding this comment

github-actions bot commented Jun 12, 2023

glendaviesnz left a comment

Choose a reason for hiding this comment

t-hamano commented Jun 14, 2023 • edited Loading

ramonjd commented Jun 15, 2023

t-hamano commented Jun 10, 2023 •

edited

Loading

t-hamano commented Jun 14, 2023 •

edited

Loading