WSOD editing Jetpack plugin on jetpack.wp.a2z and jetpack.wp-a2z.org. Jetpack 11.3.1 #55

bobbingwide · 2022-09-16T13:07:39Z

Having updated Jetpack to v11.3.1 I wanted to update the list of blocks that Jetpack delivers.
Attempting to edit the oik-plugins jetpack post in both jetpack.wp.a2z and jetpack.wp-a2z.org fails with a white screen of death (WSOD).

bobbingwide · 2022-09-16T13:08:50Z

In my local env debug.log contains this, which could be a red-herring.

[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Updating...
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Building sitemap-1.xml
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Cleaning Up jp_sitemap
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Cleaning Up jp_sitemap_index
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Building image-sitemap-1.xml
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Cleaning Up jp_img_sitemap
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Cleaning Up jp_img_sitemap_index
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Building video-sitemap-1.xml
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Cleaning Up jp_vid_sitemap
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Cleaning Up jp_vid_sitemap_index
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Building Master Sitemap.
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- Finished.
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL:  0.46 seconds elapsed.
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL: -- ...done for now.
[16-Sep-2022 13:06:53 UTC] jp-sitemap-lPLHL:  0.461 seconds elapsed.

bobbingwide · 2022-09-16T13:44:28Z

Or it could be related to this message, which leads to a 500 internal server error

[16-Sep-2022 13:22:40 UTC] PHP Fatal error:  Uncaught Error: Class "Jetpack_Subscriptions_Widget" not found in C:\apache\htdocs\wordpress\wp-content\plugins\jetpack\_inc\lib\core-api\wpcom-endpoints\subscribers.php:67
Stack trace:
#0 C:\apache\htdocs\wp-a2z\wp-includes\rest-api\class-wp-rest-server.php(1143): WPCOM_REST_API_V2_Endpoint_Subscribers->get_subscriber_count(Object(WP_REST_Request))
bobbingwide/bobbingwide#1 C:\apache\htdocs\wp-a2z\wp-includes\rest-api\class-wp-rest-server.php(990): WP_REST_Server->respond_to_request(Object(WP_REST_Request), '/wpcom/v2/subsc...', Array, NULL)
bobbingwide/bobbingwide#2 C:\apache\htdocs\wp-a2z\wp-includes\rest-api\class-wp-rest-server.php(414): WP_REST_Server->dispatch(Object(WP_REST_Request))
bobbingwide/bobbingwide#3 C:\apache\htdocs\wp-a2z\wp-includes\rest-api.php(394): WP_REST_Server->serve_request('/wpcom/v2/subsc...')
bobbingwide/bobbingwide#4 C:\apache\htdocs\wp-a2z\wp-includes\class-wp-hook.php(307): rest_api_loaded(Object(WP))
bobbingwide/bobbingwide#5 C:\apache\htdocs\wp-a2z\wp-includes\class-wp-hook.php(331): WP_Hook->apply_filters('', Array)
bobbingwide/bobbingwide#6 C:\apache\htdocs\wp-a2z\wp-includes\plugin.php(524): WP_Hook->do_action(Array)
bobbingwide/bobbingwide#7 C:\apache\htdocs\wp-a2z\wp-includes\class-wp.php(398): do_action_ref_array('parse_request', Array)
bobbingwide/bobbingwide#8 C:\apache\htdocs\wp-a2z\wp-includes\class-wp.php(770): WP->parse_request('')
bobbingwide/fizzie#52 C:\apache\htdocs\wp-a2z\wp-includes\functions.php(1330): WP->main('')
bobbingwide/bobbingwide#10 C:\apache\htdocs\wp-a2z\wp-blog-header.php(16): wp()
bobbingwide/bobbingwide#11 C:\apache\htdocs\wp-a2z\index.php(17): require('C:\\apache\\htdoc...')
bobbingwide/bobbingwide#12 {main}
  thrown in C:\apache\htdocs\wordpress\wp-content\plugins\jetpack\_inc\lib\core-api\wpcom-endpoints\subscribers.php on line 67

bobbingwide · 2022-09-16T13:46:54Z

Or it could be this message in the Console which occurs when switching oik-blocks/blocklist to showBatch:true and when the prefix is jetpack.

url.js:323 Uncaught TypeError: Cannot convert a Symbol value to a string
    at encodeURIComponent (<anonymous>)
    at Array.map (<anonymous>)
    at buildQueryString (url.js:323:36)
    at addQueryArgs (url.js:558:26)
    at A (index.js?ver=f851662c17053f4e5aebe71aaa517d8d:1:7982)
    at index.js?ver=f851662c17053f4e5aebe71aaa517d8d:1:5861
    at Array.map (<anonymous>)
    at x (index.js?ver=f851662c17053f4e5aebe71aaa517d8d:1:5837)
    at edit (index.js?ver=f851662c17053f4e5aebe71aaa517d8d:1:16222)
    at renderWithHooks (react-dom.js:15015:20)

where url.js is https://c0.wp.com/c/6.0.2/wp-includes/js/dist/url.js

When this error occurs a second and subsequent time there's more in the console log

react-dom.js:14936 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

with a helpful message to read https://reactjs.org/warnings/invalid-hook-call-warning.html

bobbingwide · 2022-09-16T14:18:00Z

By fiddling with the oik-block/blocklist settings I was able to get it to display the batch commands for Jetpack 11.3.1
but it crashed again a shortwhile later.

The problem occurs when the Show Block Link toggle is set and the prefix is Jetpack.

I'll try rebuilding oik-batch with the latest wp-scripts and see what happens.
And also try different versions of Jetpack.

See #47

bobbingwide · 2022-09-16T14:57:39Z

On jetpack.wp-a2z.org I got this problem Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Similar to #55

bobbingwide · 2022-09-16T20:26:39Z

The problem is because the description of the Jetpack Markdown block isn't a string.
the code fails when adding query args.

 url = addQueryArgs( url, { description: block.description });

the block.description for the Markdown block isn't a string. It's a Symbol( react.element )

The source for the Markdown block's description is

description: (
		<Fragment>
			<p>
				{ __(
					'Use regular characters and punctuation to style text, links, and lists.',
					'jetpack'
				) }
			</p>
			<ExternalLink href={ supportLink }>{ __( 'Support reference', 'jetpack' ) }</ExternalLink>
		</Fragment>
	),

See https://github.com/Automattic/jetpack/blob/89a88c1de4a647c90e8ac186a6011e4d9a51caf5/projects/plugins/jetpack/extensions/blocks/markdown/index.js

bobbingwide · 2022-09-17T07:39:27Z

Or it could be related to this message, which leads to a 500 internal server error

No. This is a different problem with Jetpack. I should raise an issue.

Line 67 of jetpack_inc\lib\core-api\wpcom-endpoints\subscribers.php is

$subscriber_info  = Jetpack_Subscriptions_Widget::fetch_subscriber_count();

But in my local development environment, which is not connected, the 'subscribers' module isn't loaded.

I had define( 'JETPACK_DEV_DEBUG', true ); in my wp-config.php file.

This may have caused the second part of the expression to be true.

if (
	Jetpack::is_module_active( 'subscriptions' ) ||
	( Constants::is_defined( 'TESTING_IN_JETPACK' ) && Constants::get_constant( 'TESTING_IN_JETPACK' ) )
) {
	wpcom_rest_api_v2_load_plugin( 'WPCOM_REST_API_V2_Endpoint_Subscribers' );
}

bobbingwide · 2022-09-17T14:20:38Z

OK, so I don't know how to deal with the block.description for Jetpack's Markdown block.

With the current version of the code I'm unable to save the block to display the description list.
It only displays the pre version of the block list.
And I couldn't view the code because that caused the editor to crash.

I'd attempted to deal with the block.description in two ways.

Wrap it in a <Fragment>.

blockDescription = <Fragment>{block.description}</Fragment>;

This worked in the Visual Editor but the block didn't save.
So I've changed the code to use the second alternative.

Check if its a string.

 blockDescription = ( typeof block.description === 'string' ) ? block.description : 'TBC';

This works for all blocks except Jetpack's Markdown. It's a workaround rather than a solution.

bobbingwide · 2022-09-17T15:02:50Z

I think I've found the Gutenberg code that displays the block information I want to save. Its the <BlockCard> component. The README.md for this component suggests that the description prop is expected to be a string.
The code for the BlockCard wraps the description in a <span>.

bobbingwide · 2022-09-18T08:20:53Z

It would appear that the renderToString() function was not suitable.
I tried renderComponent() instead, but it wasn't exported from @wordpress/element.
I then noted that renderToString is actually imported from renderElement, so it looks like it should work.
But the logic in Gutenberg's doesn't appear to cater for $$typeof: Symbol( react.element ).

I thought that maybe I should be using something like

renderToString( <Fragment>{description}</Fragment );

But this results in the WSOD with

react-dom.js:14936 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at Object.throwInvalidHookError (react-dom.js:14936:15)
at useContext (react.js:1529:23)
at useComponentsContext (components.js:19412:86)
at useContextSystem (components.js:21852:30)
at Object.VisuallyHidden [as render] (components.js:22319:7)
at renderElement (element.js:1137:33)
at renderChildren (element.js:1232:15)
at renderNativeComponent (element.js:1168:15)
at renderElement (element.js:1119:14)
at renderElement (element.js:1137:14)
throwInvalidHookError @ react-dom.js:14936
useContext @ react.js:1529
useComponentsContext @ components.js:19412
useContextSystem @ components.js:21852
VisuallyHidden @ components.js:22319
renderElement @ element.js:1137
renderChildren @ element.js:1232
renderNativeComponent @ element.js:1168
renderElement @ element.js:1119
renderElement @ element.js:1137
renderChildren @ element.js:1232
renderElement @ element.js:1103
renderChildren @ element.js:1232
renderElement @ element.js:1103
BlockDescription @ blocklist.js:272
BlockListItem @ blocklist.js:157
(anonymous) @ blocklist.js:80
BlockListStyled @ blocklist.js:80
save @ index.js:160
getSaveElement @ blocks.js:8544
getSaveContent @ blocks.js:8588
fixCustomClassname @ blocks.js:11292
applyBuiltInValidationFixes @ blocks.js:11325
applyBlockValidation @ blocks.js:11588
parseRawBlock @ blocks.js:11637
(anonymous) @ blocks.js:11699
parser_parse @ blocks.js:11698
(anonymous) @ core-data.js:5685
invokePassiveEffectCreate @ react-dom.js:23517
callCallback @ react-dom.js:3942
invokeGuardedCallbackDev @ react-dom.js:3991
invokeGuardedCallback @ react-dom.js:4053
flushPassiveEffectsImpl @ react-dom.js:23604
unstable_runWithPriority @ react.js:2764
runWithPriority$1 @ react-dom.js:11306
flushPassiveEffects @ react-dom.js:23477
performSyncWorkOnRoot @ react-dom.js:22299
(anonymous) @ react-dom.js:11357
unstable_runWithPriority @ react.js:2764
runWithPriority$1 @ react-dom.js:11306
flushSyncCallbackQueueImpl @ react-dom.js:11352
flushSyncCallbackQueue @ react-dom.js:11339
scheduleUpdateOnFiber @ react-dom.js:21923
dispatchAction @ react-dom.js:16169
onStoreChange @ data.js:4075
onChange @ data.js:4083
(anonymous) @ data.js:2872
(anonymous) @ data.js:2330
dispatch @ data.js:863
(anonymous) @ data.js:1647
(anonymous) @ redux-routine.js:854
(anonymous) @ data.js:1541
(anonymous) @ data.js:1635
(anonymous) @ data.js:2440
(anonymous) @ core-data.js:4828
await in (anonymous) (async)
(anonymous) @ data.js:1644
(anonymous) @ redux-routine.js:854
(anonymous) @ data.js:1541
(anonymous) @ data.js:1635
fulfillResolver @ data.js:2615
(anonymous) @ data.js:2570
setTimeout (async)
fulfillSelector @ data.js:2565
selectorResolver @ data.js:2578
(anonymous) @ edit-post.js:8999
(anonymous) @ data.js:4008
__unstableMarkListeningStores @ data.js:2774
(anonymous) @ data.js:2833
(anonymous) @ data.js:4008
useSelect @ data.js:4022
Editor @ edit-post.js:8967
renderWithHooks @ react-dom.js:15015
mountIndeterminateComponent @ react-dom.js:17841
beginWork @ react-dom.js:19079
beginWork$1 @ react-dom.js:23970
performUnitOfWork @ react-dom.js:22806
workLoopSync @ react-dom.js:22737
renderRootSync @ react-dom.js:22700
performSyncWorkOnRoot @ react-dom.js:22323
scheduleUpdateOnFiber @ react-dom.js:21911
updateContainer @ react-dom.js:25512
(anonymous) @ react-dom.js:26051
unbatchedUpdates @ react-dom.js:22461
legacyRenderSubtreeIntoContainer @ react-dom.js:26050
render @ react-dom.js:26133
initializeEditor @ edit-post.js:9468
(anonymous) @ post.php?post=14756&action=edit:299
Show 25 more frames
react-dom.js:20115 The above error occurred in the component:

at EditorProvider (https://c0.wp.com/c/6.0.2/wp-includes/js/dist/editor.js:11574:5)
at https://c0.wp.com/c/6.0.2/wp-includes/js/dist/editor.js:11342:5
at WithRegistryProvider(EditorProvider)
at SlotFillProvider (https://c0.wp.com/c/6.0.2/wp-includes/js/dist/components.js:23227:5)
at provider_SlotFillProvider (https://c0.wp.com/c/6.0.2/wp-includes/js/dist/components.js:23255:5)
at Provider (https://c0.wp.com/c/6.0.2/wp-includes/js/dist/components.js:23404:5)
at div
at ShortcutProvider (https://c0.wp.com/c/6.0.2/wp-includes/js/dist/keyboard-shortcuts.js:762:75)
at Editor (https://c0.wp.com/c/6.0.2/wp-includes/js/dist/edit-post.js:8948:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

bobbingwide · 2022-09-18T15:39:08Z

This works for all blocks except Jetpack's Markdown. It's a workaround rather than a solution.

There were a couple of other Jetpack blocks like Markdown.
My most recent attempt at handling the block.description ( see below) worked for these other Jetpack blocks
But it fails for blocks which are variations of template parts, where the description is true. See also blocklist - Don't display the current theme's template variations #54

function BlockDescription( description ) {
    if ( typeof description === 'string' ) {
        return(description);
    } else {
        //console.log( description );
        var descFromFirstPara = 'TBC';
        //descFromFirstPara = renderToString( <Fragment> {description} </Fragment>);
        //console.log( descFromFirstPara);
        var children = description.props.children;
        if ( children[0].type === 'p' ) {
            descFromFirstPara = children[0].props.children;
        }
        return( descFromFirstPara );
    }
}

bobbingwide · 2022-09-20T21:15:48Z

The problem with saving the description field also applies to the oik/block-info block
where the selected block is jetpack/payment-buttons.

#55

bobbingwide · 2022-09-22T11:38:09Z

Looks like I wasn't the only person affected by different routine's misuse of the description field. Gutenberg 14.1.1 was released to fix a similar problem with Search. See WordPress/gutenberg#44233

IMO the documentation for registerBlockType() should be updated. See https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/

bobbingwide added the bug Something isn't working label Sep 16, 2022

bobbingwide self-assigned this Sep 16, 2022

bobbingwide added the help wanted Extra attention is needed label Sep 17, 2022

bobbingwide transferred this issue from bobbingwide/bobbingwide Sep 17, 2022

bobbingwide added a commit that referenced this issue Sep 21, 2022

Avoid fatal errors handling Jetpack's Markdown block's description #55

58baa82

bobbingwide added a commit that referenced this issue Sep 21, 2022

Implement BlockDescription function #55

7c73b89

bobbingwide added a commit that referenced this issue Sep 21, 2022

Comment out unnecessary/non-working code #55

8b836d2

bobbingwide added a commit that referenced this issue Sep 21, 2022

Use BlockDescription to format block.description in oik-block/blockinfo

d521422

#55

bobbingwide added a commit that referenced this issue Sep 21, 2022

Update build #55

e820d9e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WSOD editing Jetpack plugin on jetpack.wp.a2z and jetpack.wp-a2z.org. Jetpack 11.3.1 #55

WSOD editing Jetpack plugin on jetpack.wp.a2z and jetpack.wp-a2z.org. Jetpack 11.3.1 #55

bobbingwide commented Sep 16, 2022

bobbingwide commented Sep 16, 2022

bobbingwide commented Sep 16, 2022 •

edited

bobbingwide commented Sep 16, 2022 •

edited

bobbingwide commented Sep 16, 2022 •

edited

bobbingwide commented Sep 16, 2022

bobbingwide commented Sep 16, 2022

bobbingwide commented Sep 17, 2022

bobbingwide commented Sep 17, 2022 •

edited

bobbingwide commented Sep 17, 2022

bobbingwide commented Sep 18, 2022 •

edited

bobbingwide commented Sep 18, 2022 •

edited

bobbingwide commented Sep 20, 2022

bobbingwide commented Sep 22, 2022 •

edited

WSOD editing Jetpack plugin on jetpack.wp.a2z and jetpack.wp-a2z.org. Jetpack 11.3.1 #55

WSOD editing Jetpack plugin on jetpack.wp.a2z and jetpack.wp-a2z.org. Jetpack 11.3.1 #55

Comments

bobbingwide commented Sep 16, 2022

bobbingwide commented Sep 16, 2022

bobbingwide commented Sep 16, 2022 • edited

bobbingwide commented Sep 16, 2022 • edited

bobbingwide commented Sep 16, 2022 • edited

bobbingwide commented Sep 16, 2022

bobbingwide commented Sep 16, 2022

bobbingwide commented Sep 17, 2022

bobbingwide commented Sep 17, 2022 • edited

bobbingwide commented Sep 17, 2022

bobbingwide commented Sep 18, 2022 • edited

bobbingwide commented Sep 18, 2022 • edited

bobbingwide commented Sep 20, 2022

bobbingwide commented Sep 22, 2022 • edited

bobbingwide commented Sep 16, 2022 •

edited

bobbingwide commented Sep 16, 2022 •

edited

bobbingwide commented Sep 16, 2022 •

edited

bobbingwide commented Sep 17, 2022 •

edited

bobbingwide commented Sep 18, 2022 •

edited

bobbingwide commented Sep 18, 2022 •

edited

bobbingwide commented Sep 22, 2022 •

edited