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

Clarify error message if duotone color values is incorrect #51397

Merged
merged 4 commits into from
Jun 13, 2023

Conversation

t-hamano
Copy link
Contributor

@t-hamano t-hamano commented Jun 10, 2023

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.

description

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

@t-hamano t-hamano self-assigned this Jun 10, 2023
@t-hamano t-hamano added the [Package] Style Engine /packages/style-engine label Jun 10, 2023
@t-hamano t-hamano marked this pull request as ready for review June 10, 2023 15:48
if ( null === $color ) {
$error_message = sprintf(
/* translators: %s: duotone colors */
__( '"%s" is not a hex or rgb string in theme.json settings.', 'gutenberg' ),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.'?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

PHP Notice:  Function WP_Duotone_Gutenberg::get_filter_svg was called <strong>incorrectly</strong>. "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 <strong>incorrectly</strong>. "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 <strong>incorrectly</strong>. "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 <strong>incorrectly</strong>. "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
Copy link

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:

Copy link
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@t-hamano t-hamano merged commit 04cab49 into trunk Jun 13, 2023
@t-hamano t-hamano deleted the enhancement/notice-error-duotone-values branch June 13, 2023 02:32
@github-actions github-actions bot added this to the Gutenberg 16.1 milestone Jun 13, 2023
@t-hamano t-hamano added the Needs PHP backport Needs PHP backport to Core label Jun 14, 2023
@t-hamano
Copy link
Contributor Author

t-hamano commented Jun 14, 2023

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

ramonjd commented Jun 15, 2023

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 !

@ramonjd 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
…#51397)

* Clarify error message if duotone color values is incorrect

* Add period

* Update message
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Style Engine /packages/style-engine
Projects
None yet
Development

Successfully merging this pull request may close these issues.

error warning it site editor with duotones
3 participants