search

bobbingwide / oik-blocks

WordPress 5.0 blocks for oik shortcodes
https://oik-plugins.com/oik-plugins/oik-blocks
GNU General Public License v3.0
1 stars 0 forks source link

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

Open bobbingwide opened 1 year ago

bobbingwide commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 https://github.com/bobbingwide/oik-blocks/issues/47

bobbingwide commented 1 year ago

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 https://github.com/bobbingwide/oik-blocks/issues/55

bobbingwide commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

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

  1. 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.

  1. 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 commented 1 year ago

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 commented 1 year ago

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:

  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 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 commented 1 year ago

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

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 commented 1 year ago

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

bobbingwide commented 1 year ago

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 https://github.com/WordPress/gutenberg/pull/44233

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