Enable SEO controls and assessments Breaks Block Editor on Some Pages

  • Resolved Tim Nolte

    (@tnolte)


    10 months ago

    Update: So I determined that this is actually being caused by the wpseo_metabox_prio hook that we were using to force it to the bottom below ACF and other metaboxes.

    When the “Enable SEO controls and assessments” is turned on some Pages, when editing via the Block Editor end up in a white screen state. This isn’t a traditional WordPress WSOD issue as looking at the page source I can see all of the normal Block Editor HTML markup.

    This causes basically the Block Editor from not being able to render. This happens by turning all plugins off and using a default WordPress theme. After turning that setting off then the Block Editor is restored.

    • This topic was modified 10 months ago by Tim Nolte. Reason: Cause revision
    • This topic was modified 10 months ago by Tim Nolte.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Tim Nolte

    (@tnolte)

    Note: Here is the actual code we are using.

    /**
 * Move Yoast metabox to the bottom of the backend editor.
 *
 * @return string
 */
function force_yoast_to_bottom() {
	return 'low';
}
add_filter( 'wpseo_metabox_prio', 'force_yoast_to_bottom' );
    Thread Starter Tim Nolte

    (@tnolte)

    This code we are using follows what is documented.

    https://developer.yoast.com/customization/yoast-seo/filters/change-metabox-prio-filter/

    Thread Starter Tim Nolte

    (@tnolte)

    So actually, I was on the wrong environment when testing disabling the hook. I’m still in a situation where having the SEO tools on for some Page editing is still breaking the Block Editor. Turning it off allows the Block Editor to work.

    Plugin Support Maybellyne

    (@maybellyne)

    Hello Tim,

    Thanks for reaching out. To summarize the issue, you are using this developer filter to lower the Yoast SEO meta box priority such that when you have only the Yoast SEO plugin, a default WordPress theme, and you turn ON Enable SEO controls and assessments for Pages (WordPress > Yoast SEO > Settings > Content Tyes > Pages), the block editor is not being rendered. Is that correct?

    I’m still in a situation where having the SEO tools on for some Page editing is still breaking the Block Editor. Turning it off allows the Block Editor to work.

    Do you still have the developer filter added to your code?

    Thread Starter Tim Nolte

    (@tnolte)

    @maybellyne so if you notice my last comment and my updates the priority hook is not actually the issue and doesn’t have any impact on this. I was mistakenly switching between to different environment when I was trying to test that. This issue is specifically due to the Yoast SEO metabox trying to be presented on the Block Editor screen. Turning off the SEO settings for pages, so the metabox doesn’t attempt to render fixes the issue. Turning back on the SEO settings for Pages causes it to be broken again.

    This is with the latest version of WordPress, even attempts to rollback to older versions of WordPress didn’t resolve the issue. This is also testing with a number of Yoast SEO plugin versions.

    Plugin Support Maybellyne

    (@maybellyne)

    Thanks Tim for the clarification. When this happens, are there are console errors you notice so you could share with us?

    Thread Starter Tim Nolte

    (@tnolte)

    Here is about the only thing that seems at issue

    blocks.js?ver=1e16b1d8cd192ec1a469:13893 Updated Block: core/heading

blocks.js?ver=1e16b1d8cd192ec1a469:13893 Updated Block: core/image

react-dom.js?ver=18.2.0:22849 Uncaught TypeError: n.models.Page is not a constructor
    at post-edit.js?ver=f2c775a6667e3c9c92183bf09f93dc73:12:37585
    at fire (jquery.js?ver=3.7.1:3223:31)
    at Object.add [as done] (jquery.js?ver=3.7.1:3282:7)
    at post-edit.js?ver=f2c775a6667e3c9c92183bf09f93dc73:12:37575
    at data.js?ver=2b5bb06caaeb5048ed96:3093:45
    at Array.forEach (<anonymous>)
    at notifyListeners (data.js?ver=2b5bb06caaeb5048ed96:3093:25)
    at Object.emit (data.js?ver=2b5bb06caaeb5048ed96:3117:7)
    at globalListener (data.js?ver=2b5bb06caaeb5048ed96:3185:13)
    at data.js?ver=2b5bb06caaeb5048ed96:3354:9
(anonymous) @ post-edit.js?ver=f2c775a6667e3c9c92183bf09f93dc73:12
fire @ jquery.js?ver=3.7.1:3223
add @ jquery.js?ver=3.7.1:3282
(anonymous) @ post-edit.js?ver=f2c775a6667e3c9c92183bf09f93dc73:12
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:3093
notifyListeners @ data.js?ver=2b5bb06caaeb5048ed96:3093
emit @ data.js?ver=2b5bb06caaeb5048ed96:3117
globalListener @ data.js?ver=2b5bb06caaeb5048ed96:3185
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:3354
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:2853
dispatch @ data.js?ver=2b5bb06caaeb5048ed96:1031
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:1770
(anonymous) @ redux-routine.js?ver=154d0b98be93c015ec5a:875
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:1690
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:1760
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:2765
(anonymous) @ editor.js?ver=d4a7ac425a2df2d760ab:4003
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:1768
(anonymous) @ redux-routine.js?ver=154d0b98be93c015ec5a:875
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:1690
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:1760
(anonymous) @ data.js?ver=2b5bb06caaeb5048ed96:2765
(anonymous) @ editor.js?ver=d4a7ac425a2df2d760ab:12555
commitHookEffectListMount @ react-dom.js?ver=18.2.0:23160
commitLayoutEffectOnFiber @ react-dom.js?ver=18.2.0:23278
commitLayoutMountEffects_complete @ react-dom.js?ver=18.2.0:24698
commitLayoutEffects_begin @ react-dom.js?ver=18.2.0:24684
commitLayoutEffects @ react-dom.js?ver=18.2.0:24622
commitRootImpl @ react-dom.js?ver=18.2.0:26833
commitRoot @ react-dom.js?ver=18.2.0:26692
performSyncWorkOnRoot @ react-dom.js?ver=18.2.0:26127
flushSyncCallbacks @ react-dom.js?ver=18.2.0:12052
flushPassiveEffectsImpl @ react-dom.js?ver=18.2.0:27070
flushPassiveEffects @ react-dom.js?ver=18.2.0:26994
(anonymous) @ react-dom.js?ver=18.2.0:26779
workLoop @ react.js?ver=18.2.0:2653
flushWork @ react.js?ver=18.2.0:2626
performWorkUntilDeadline @ react.js?ver=18.2.0:2920

react-dom.js?ver=18.2.0:18697 The above error occurred in one of your React components:

    at https://gateshosting-accelerateed.ddev.site/wp/wp-includes/js/dist/editor.js?ver=d4a7ac425a2df2d760ab:12496:3
    at https://gateshosting-accelerateed.ddev.site/wp/wp-includes/js/dist/editor.js?ver=d4a7ac425a2df2d760ab:12081:5
    at WithRegistryProvider(Component)
    at SlotFillProvider (https://gateshosting-accelerateed.ddev.site/wp/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36374:3)
    at provider_SlotFillProvider (https://gateshosting-accelerateed.ddev.site/wp/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36396:5)
    at Provider (https://gateshosting-accelerateed.ddev.site/wp/wp-includes/js/dist/components.js?ver=130f16b14b15a9666b83:36531:3)
    at Editor (https://gateshosting-accelerateed.ddev.site/wp/wp-includes/js/dist/edit-post.js?ver=57aa460a64bb0e4ae963:9253:3)

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.
logCapturedError @ react-dom.js?ver=18.2.0:18697
update.callback @ react-dom.js?ver=18.2.0:18730
callCallback @ react-dom.js?ver=18.2.0:13933
commitUpdateQueue @ react-dom.js?ver=18.2.0:13954
commitLayoutEffectOnFiber @ react-dom.js?ver=18.2.0:23401
commitLayoutMountEffects_complete @ react-dom.js?ver=18.2.0:24698
commitLayoutEffects_begin @ react-dom.js?ver=18.2.0:24684
commitLayoutEffects @ react-dom.js?ver=18.2.0:24622
commitRootImpl @ react-dom.js?ver=18.2.0:26833
commitRoot @ react-dom.js?ver=18.2.0:26692
performSyncWorkOnRoot @ react-dom.js?ver=18.2.0:26127
flushSyncCallbacks @ react-dom.js?ver=18.2.0:12052
flushPassiveEffectsImpl @ react-dom.js?ver=18.2.0:27070
flushPassiveEffects @ react-dom.js?ver=18.2.0:26994
(anonymous) @ react-dom.js?ver=18.2.0:26779
workLoop @ react.js?ver=18.2.0:2653
flushWork @ react.js?ver=18.2.0:2626
performWorkUntilDeadline @ react.js?ver=18.2.0:2920

react-dom.js?ver=18.2.0:12066 Uncaught TypeError: n.models.Page is not a constructor
    at post-edit.js?ver=f2c775a6667e3c9c92183bf09f93dc73:12:37585
    at fire (jquery.js?ver=3.7.1:3223:31)
    at Object.add [as done] (jquery.js?ver=3.7.1:3282:7)
    at post-edit.js?ver=f2c775a6667e3c9c92183bf09f93dc73:12:37575
    at data.js?ver=2b5bb06caaeb5048ed96:3093:45
    at Array.forEach (<anonymous>)
    at notifyListeners (data.js?ver=2b5bb06caaeb5048ed96:3093:25)
    at Object.emit (data.js?ver=2b5bb06caaeb5048ed96:3117:7)
    at globalListener (data.js?ver=2b5bb06caaeb5048ed96:3185:13)
    at data.js?ver=2b5bb06caaeb5048ed96:3354:9
    Plugin Support Maybellyne

    (@maybellyne)

    Due to the nature of the issue, we’ll need to take a look at your setup. However, we are unable to do it here as this is a public forum. So, if you could consider purchasing a?Yoast SEO Premium?subscription since it comes with email support, we can investigate the issue further directly on your setup privately.

    Thread Starter Tim Nolte

    (@tnolte)

    Unfortunately, this site is behind Azure Active Directory single-sign-on so I can’t really give you Dashboard access. For now we’ve simply disabled the SEO controls for Pages as our client hasn’t been using them at this point. We’ll have to investigate further once the client wants to begin using them.

    We do already have a premium license that we could possibly use for support but we won’t pursue that for now.

    It’s a really bizarre issue as sometimes, for certain people it will randomly start working, but then break again after later attempts. It’s also not all Pages but consistently some of them. I even attempted to roll back Yoast SEO and WordPress Core to earlier versions with it also remaining broken. It’s also happened across multiple browsers so it is just baffling to say the least.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Enable SEO controls and assessments Breaks Block Editor on Some Pages’ is closed to new replies.

Tags