PHP 8.0 compatibility error

Hello @bozzmedia

Thank you for contacting us, I think you also faced similar issue when you are using PHP 7.4.0 so I doubt that this is related to the PHP version, the issue might be related to your hex color code.

To make sure we also tested it with PHP 8.0.21 and we didn’t get any warning.

To debug the issue further Can you please log in as Admin and visit
Appearance -> AMP -> Colors & Dark Mode, Copy the color code and send it back to us by replying to this thread

I hope this helps!

Thank you @milindmore22 for your help here and in my other thread that I completely forgot about (sorry!).

I am using Reader Mode with the AMP Legacy theme. I checked the color settings and the only thing that I noticed was for one color I was using an abbreviated hex code #fff. While I figure that is still a compliant syntax I changed it to #ffffff — let’s see if that does the trick.

So far, no impact. More lines of the error here indicating it may be several items?

[28-Sep-2022 19:34:21 UTC] PHP Deprecated:  Invalid characters passed for attempted conversion, these have been ignored in /home/redacted/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 375
[28-Sep-2022 19:34:21 UTC] PHP Deprecated:  Invalid characters passed for attempted conversion, these have been ignored in /home/redacted/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 376
[28-Sep-2022 19:34:21 UTC] PHP Deprecated:  Invalid characters passed for attempted conversion, these have been ignored in /home/redacted/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 377

Hello @bozzmedia

Can you please send your site health information using this form so we can try to re-create your site environment and debug the issue

This is the code in question: https://github.com/ampproject/amp-wp/blob/a373ac8f65f26ee7df7313ff5d734b5704781ab0/src/ReaderThemeSupportFeatures.php#L366-L380

The code being complained about is:

$red   = hexdec( substr( $hex, 0, 2 ) );
$green = hexdec( substr( $hex, 2, 2 ) );
$blue  = hexdec( substr( $hex, 4, 2 ) );

No error occurs when $hex is ffffff: https://3v4l.org/VTmvu

However, if $hex is #ffffff then the reported issue occurs: https://3v4l.org/RNVnF

Nevertheless, this # should not be present because of this code:

// Remove the "#" symbol from the beginning of the color.
$hex = ltrim( $hex, '#' );

So what specifically is $hex for you as being passed into your get_relative_luminance_from_hex method?

• This reply was modified 2 years, 2 months ago by Weston Ruter.

I have hex codes complete with the # symbol in the Customizer > AMP settings.

I will see if removing those helps. Thanks for the insight!

OK, I went to run through this again and instead of manually pasting in the hex code I used the color picker. It adds the # symbol to the field automatically.

I’m not sure how to debug what the actual $hex values are, but happy to try if you can point me in the right direction. Thanks again.

I still don’t see how including or omitting the # would make any difference because the code is doing ltrim( $hex, '#' ), which means any initial # will be stripped.

Here is the frontend html from the customizer, does this help? Let me know how else I can help debug.

<ul class="customize-pane-child accordion-section-content accordion-section control-section control-section-default open" id="sub-accordion-section-amp_design">
				<li class="customize-section-description-container section-meta ">
					<div class="customize-section-title">
						<button class="customize-section-back" tabindex="0">
							<span class="screen-reader-text">Back</span>
						</button>
						<h3>
							<span class="customize-action">
								Customizing ? AMP
							</span>
							Design
						</h3>
						

						<div class="customize-control-notifications-container"><ul><li class="notice notice-info  " data-code="amp_unavailable" data-type="info">
				<div class="notification-message">
					AMP is not available for the page currently being previewed.
					
						<a href="https://redacted.com/amp">Navigate to an AMP compatible page</a>
					
				</div>
			</li></ul></div>
					</div>

					
				</li>
			<li id="customize-control-amp_header_color" class="customize-control customize-control-color">
					
		
			<span class="customize-control-title">Header Text Color</span><div class="customize-control-notifications-container" style="display: none;"><ul></ul></div>
		
		
		<div class="customize-control-content">
			<div class="wp-picker-container"><button type="button" class="button wp-color-result" aria-expanded="false" style="background-color: rgb(255, 255, 255);"><span class="wp-color-result-text">Select Color</span></button><span class="wp-picker-input-wrap hidden"><label><span class="screen-reader-text">Header Text Color</span>
			
				<input class="color-picker-hex wp-color-picker" type="text" maxlength="7" placeholder="#fff" data-default-color="#fff">
			
			</label><input type="button" class="button button-small wp-picker-default" value="Default" aria-label="Select default color"></span><div class="wp-picker-holder"><div class="iris-picker iris-mozilla iris-border" style="width: 255px; height: 202.125px; padding-bottom: 23.2209px; display: none;"><div class="iris-picker-inner"><div class="iris-square" style="width: 182.125px; height: 182.125px;"><a class="iris-square-value ui-draggable ui-draggable-handle" href="#" style="left: 0px; top: 0px;"><span class="iris-square-handle ui-slider-handle"></span></a><div class="iris-square-inner iris-square-horiz" style="background-image: -moz-linear-gradient(left, rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255));"></div><div class="iris-square-inner iris-square-vert" style="background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));"></div></div><div class="iris-slider iris-strip" style="height: 205.346px; width: 28.2px; background-image: -moz-linear-gradient(rgb(255, 0, 0), rgb(255, 255, 255));"><div class="iris-slider-offset ui-slider ui-corner-all ui-slider-vertical ui-widget ui-widget-content"><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="bottom: 0%;"></span></div></div></div><div class="iris-palette-container"><a class="iris-palette" tabindex="0" style="background-color: rgb(0, 0, 0); height: 19.5784px; width: 19.5784px; margin-left: 0px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(255, 255, 255); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(241, 196, 15); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(231, 76, 60); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(26, 188, 156); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(30, 114, 189); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(142, 68, 173); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(0, 204, 119); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a></div></div></div></div>
		</div>
				</li><li id="customize-control-amp_header_background_color" class="customize-control customize-control-color">
					
		
			<span class="customize-control-title">Header Background & Link Color</span><div class="customize-control-notifications-container" style="display: none;"><ul></ul></div>
		
		
		<div class="customize-control-content">
			<div class="wp-picker-container"><button type="button" class="button wp-color-result" aria-expanded="false" style="background-color: rgb(241, 98, 2);"><span class="wp-color-result-text">Select Color</span></button><span class="wp-picker-input-wrap hidden"><label><span class="screen-reader-text">Header Background & Link Color</span>
			
				<input class="color-picker-hex wp-color-picker" type="text" maxlength="7" placeholder="#0a89c0" data-default-color="#0a89c0">
			
			</label><input type="button" class="button button-small wp-picker-default" value="Default" aria-label="Select default color"></span><div class="wp-picker-holder"><div class="iris-picker iris-mozilla iris-border" style="display: none; width: 255px; height: 202.125px; padding-bottom: 23.2209px;"><div class="iris-picker-inner"><div class="iris-square" style="width: 182.125px; height: 182.125px;"><a class="iris-square-value ui-draggable ui-draggable-handle" href="#" style="left: 12.1417px; top: 9.10625px;"><span class="iris-square-handle ui-slider-handle"></span></a><div class="iris-square-inner iris-square-horiz" style="background-image: -moz-linear-gradient(left, rgb(255, 0, 0), rgb(255, 128, 0), rgb(255, 255, 0), rgb(128, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128), rgb(255, 0, 0));"></div><div class="iris-square-inner iris-square-vert" style="background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));"></div></div><div class="iris-slider iris-strip" style="height: 205.346px; width: 28.2px; background-image: -moz-linear-gradient(rgb(240, 96, 0), rgb(242, 242, 242));"><div class="iris-slider-offset ui-slider ui-corner-all ui-slider-vertical ui-widget ui-widget-content"><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="bottom: 99%;"></span></div></div></div><div class="iris-palette-container"><a class="iris-palette" tabindex="0" style="background-color: rgb(0, 0, 0); height: 19.5784px; width: 19.5784px; margin-left: 0px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(255, 255, 255); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(241, 196, 15); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(231, 76, 60); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(26, 188, 156); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(30, 114, 189); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(142, 68, 173); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a><a class="iris-palette" tabindex="0" style="background-color: rgb(0, 204, 119); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a></div></div></div></div>
		</div>
				</li><li id="customize-control-amp_color_scheme" class="customize-control customize-control-radio">									<span class="customize-control-title">Color Scheme</span><div class="customize-control-notifications-container" style="display: none;"><ul></ul></div>
								
									<span class="customize-inside-control-row">
						<input id="_customize-input-amp_color_scheme-radio-light" type="radio" value="light" name="_customize-radio-amp_color_scheme" data-customize-setting-link="amp_customizer[color_scheme]" checked="checked">
						<label for="_customize-input-amp_color_scheme-radio-light">Light</label>
					</span>
									<span class="customize-inside-control-row">
						<input id="_customize-input-amp_color_scheme-radio-dark" type="radio" value="dark" name="_customize-radio-amp_color_scheme" data-customize-setting-link="amp_customizer[color_scheme]">
						<label for="_customize-input-amp_color_scheme-radio-dark">Dark</label>
					</span>
								</li></ul>

Color Codes:
#ffffff
#f16202

I sent in the form with other system info. Thanks!

• This reply was modified 2 years, 1 month ago by Marty.

What may be helpful is if you can edit the source code of this method:

https://github.com/ampproject/amp-wp/blob/a373ac8f65f26ee7df7313ff5d734b5704781ab0/src/ReaderThemeSupportFeatures.php#L364-L382

Before these lines:

// Get red, green, blue.
$red   = hexdec( substr( $hex, 0, 2 ) );
$green = hexdec( substr( $hex, 2, 2 ) );
$blue  = hexdec( substr( $hex, 4, 2 ) );

Add this:

error_log( '$hex === ' . json_encode( $hex ) );

Then trigger whatever you do to cause the deprecation notice, and then open the error log to look for that log entry. You may need to enable WP_DEBUG_LOG.

Done. This popped up:

Uncaught exception 'ParseError' with message 'syntax error, unexpected token "&"' in /home/redacted/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php:374

Er, that’s not expected. Copy/paste error?

Here’s what I have:

		error_log( '$hex === ' . json_encode( $hex ) );
		// Get red, green, blue.
		$red   = hexdec( substr( $hex, 0, 2 ) );
		$green = hexdec( substr( $hex, 2, 2 ) );
		$blue  = hexdec( substr( $hex, 4, 2 ) );

Here’s the line from debug:

[04-Oct-2022 00:37:28 UTC] $hex === "var(--base-2)"

Possibly set from the theme, GeneratePress?