Skip to content

Use the new wp.domReady helper if it is available #757

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

Merged
merged 16 commits into from
Apr 15, 2020

Conversation

kevinfodness
Copy link
Member

@kevinfodness kevinfodness commented Aug 24, 2019

Fixes issues with Fieldmanager fields, which require JavaScript hooks, not initializing properly when Gutenberg is active. wp.domReady fires later than jQuery's document.ready, so this, combined with moving most FM scripts to the footer, should resolve race conditions that prevent initialization of dynamic fields across the board in Fieldmanager.

Additionally, uses FM_VERSION to set version numbers for Fieldmanager JS and CSS to ensure cache busting when shipping a new version of Fieldmanager to aggressively cached sites, such as VIP Go. Accordingly, bumps the version to 1.2.5.

Finally, moves script load for most FM scripts to the footer, which is required for proper initialization of fields in a Gutenberg context, and is generally a best practice. This move should not break anything in practice, but may require a change to the qunit tests in order for them to pass.

This PR obviates the need for the following PRs:

#745
#744
#717

It also resolves the following issues:

Fixes #753 #730 #720 #713 #710

Fixes issues with Fieldmanager fields that require JavaScript hooks
not initializing properly when Gutenberg is active. wp.domReady fires
later than jQuery's document.ready, so this should resolve race
conditions that prevent initialization of dynamic fields across the
board in Fieldmanager.
Copy link
Contributor

@mboynes mboynes left a comment

Choose a reason for hiding this comment

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

Thank you!

From a code-level perspective, this is fantastic. We should run a systematic QA on it, testing a version each of WP 4.x and 5.x, and testing a variety of browsers down to IE11. Can you coordinate that @kevinfodness?

@kevinfodness
Copy link
Member Author

@mboynes yep, I can coordinate that.

@rfair404
Copy link

Would love to know the status of this update?

@kevinfodness
Copy link
Member Author

@rfair404 this is a fairly significant change to the way we are loading JS in the plugin, so we want to run it through a gamut of tests before merging, which we haven't completed yet. We are dogfooding it on a few production sites with no issues though, so if it's possible for you to use this branch while we complete testing, I'd love to hear your feedback.

@rfair404
Copy link

I loaded the branch in my local environment and can confirm that this fixes the issues that I'm currently having with colorpicker, datepicker, autocomplete and richtext.

@allan23
Copy link

allan23 commented Sep 25, 2019

I was not able to get fm-zones to work properly.

@JasonHoffmann
Copy link

We've been trying this out and it's working really well for dropdown / autocompletes inside of Gutenberg. The one thing I noticed was that I sometimes get "wp is not defined" in non-Gutenberg contexts. The way I fixed it was to change line 8 of fieldmanager-loader.js to:

if ( typeof wp !== 'undefined' && wp && wp.domReady ) {

Adding that extra check for undefined appears to solve the issue

@jcrawford
Copy link

jcrawford commented Dec 5, 2019

These Issues were found by @montchr.

a roundup of the issues i ran into:
Upon visiting the widget admin screen, the entry fields did not display (though the widget scheduling fields did load). I noticed some errors in the console, those are here:

Uncaught ReferenceError: wp is not defined
    at fmLoadModule (??-eJylkNtOAzEMRH+I1CxQLg+Ib3Fid5Ult8YJZf+eVNXSVVHaB97i8ZlRPHBIygbjKrHAJFADcRYTM2+8DZtJ7qARJobCoUBydbRBYF85z0pX6xp9tCFdoZuE4QtLVCcFnNVgovexa9l5dbA0chGQgsWas3Jp8VUtrolLQvMJj5lUwlxmINZ1VBrz+dX9ZcyUMouonWVHHgOOp+PWs3IR283/C1nc6+LJSgGKXmVGmtfl/6FwGLqAbvfrGLi3b2Mt1l1Z30rwTBaVj8ROekyrIx2LAh+/bTfpl1oePXCSGB5upjT9IujDvw/bl+3T69vwfD/9AP6mFN4=:215)
    at ??-eJylkNtOAzEMRH+I1CxQLg+Ib3Fid5Ult8YJZf+eVNXSVVHaB97i8ZlRPHBIygbjKrHAJFADcRYTM2+8DZtJ7qARJobCoUBydbRBYF85z0pX6xp9tCFdoZuE4QtLVCcFnNVgovexa9l5dbA0chGQgsWas3Jp8VUtrolLQvMJj5lUwlxmINZ1VBrz+dX9ZcyUMouonWVHHgOOp+PWs3IR283/C1nc6+LJSgGKXmVGmtfl/6FwGLqAbvfrGLi3b2Mt1l1Z30rwTBaVj8ROekyrIx2LAh+/bTfpl1oePXCSGB5upjT9IujDvw/bl+3T69vwfD/9AP6mFN4=:514
    at ??-eJylkNtOAzEMRH+I1CxQLg+Ib3Fid5Ult8YJZf+eVNXSVVHaB97i8ZlRPHBIygbjKrHAJFADcRYTM2+8DZtJ7qARJobCoUBydbRBYF85z0pX6xp9tCFdoZuE4QtLVCcFnNVgovexa9l5dbA0chGQgsWas3Jp8VUtrolLQvMJj5lUwlxmINZ1VBrz+dX9ZcyUMouonWVHHgOOp+PWs3IR283/C1nc6+LJSgGKXmVGmtfl/6FwGLqAbvfrGLi3b2Mt1l1Z30rwTBaVj8ROekyrIx2LAh+/bTfpl1oePXCSGB5upjT9IujDvw/bl+3T69vwfD/9AP6mFN4=:516
??-eJyNkN0KwjAMRl/Iris41AvxWcoaRkab1ab7eXyjRZgXHV4mOSf5iF6jQur97ID1yDqAQwseAlD+KVTAIdkMTUBqRj7pI1Fm+7rm2IgqwXMGriIOOWs0Vzq8qxaElfdIP1F+J4l+HpC+GGzRTwlSEbdYo6VlabF5UqXzgUX6cztDWrCXfDLLVt4WivsId9Ndzjdj2q4dXyYKjE8=:5 Uncaught TypeError: Cannot set property 'isTouchDevice' of undefined
    at Object.media (??-eJyNkN0KwjAMRl/Iris41AvxWcoaRkab1ab7eXyjRZgXHV4mOSf5iF6jQur97ID1yDqAQwseAlD+KVTAIdkMTUBqRj7pI1Fm+7rm2IgqwXMGriIOOWs0Vzq8qxaElfdIP1F+J4l+HpC+GGzRTwlSEbdYo6VlabF5UqXzgUX6cztDWrCXfDLLVt4WivsId9Ndzjdj2q4dXyYKjE8=:5)
    at o (??-eJyNkN0KwjAMRl/Iris41AvxWcoaRkab1ab7eXyjRZgXHV4mOSf5iF6jQur97ID1yDqAQwseAlD+KVTAIdkMTUBqRj7pI1Fm+7rm2IgqwXMGriIOOWs0Vzq8qxaElfdIP1F+J4l+HpC+GGzRTwlSEbdYo6VlabF5UqXzgUX6cztDWrCXfDLLVt4WivsId9Ndzjdj2q4dXyYKjE8=:5)
    at Object.media (??-eJyNkN0KwjAMRl/Iris41AvxWcoaRkab1ab7eXyjRZgXHV4mOSf5iF6jQur97ID1yDqAQwseAlD+KVTAIdkMTUBqRj7pI1Fm+7rm2IgqwXMGriIOOWs0Vzq8qxaElfdIP1F+J4l+HpC+GGzRTwlSEbdYo6VlabF5UqXzgUX6cztDWrCXfDLLVt4WivsId9Ndzjdj2q4dXyYKjE8=:5)
    at o (??-eJyNkN0KwjAMRl/Iris41AvxWcoaRkab1ab7eXyjRZgXHV4mOSf5iF6jQur97ID1yDqAQwseAlD+KVTAIdkMTUBqRj7pI1Fm+7rm2IgqwXMGriIOOWs0Vzq8qxaElfdIP1F+J4l+HpC+GGzRTwlSEbdYo6VlabF5UqXzgUX6cztDWrCXfDLLVt4WivsId9Ndzjdj2q4dXyYKjE8=:5)
    at ??-eJyNkN0KwjAMRl/Iris41AvxWcoaRkab1ab7eXyjRZgXHV4mOSf5iF6jQur97ID1yDqAQwseAlD+KVTAIdkMTUBqRj7pI1Fm+7rm2IgqwXMGriIOOWs0Vzq8qxaElfdIP1F+J4l+HpC+GGzRTwlSEbdYo6VlabF5UqXzgUX6cztDWrCXfDLLVt4WivsId9Ndzjdj2q4dXyYKjE8=:5
    at ??-eJyNkN0KwjAMRl/Iris41AvxWcoaRkab1ab7eXyjRZgXHV4mOSf5iF6jQur97ID1yDqAQwseAlD+KVTAIdkMTUBqRj7pI1Fm+7rm2IgqwXMGriIOOWs0Vzq8qxaElfdIP1F+J4l+HpC+GGzRTwlSEbdYo6VlabF5UqXzgUX6cztDWrCXfDLLVt4WivsId9Ndzjdj2q4dXyYKjE8=:5
js.js?m=1565722534g:18 Uncaught TypeError: Cannot read property 'view' of undefined
    at js.js?m=1565722534g:18
media-widgets.min.js?ver=5.3:1 Uncaught TypeError: Cannot read property 'controller' of undefined
    at media-widgets.min.js?ver=5.3:1
    at media-widgets.min.js?ver=5.3:1
widgets.php?sidebar-id=sidebar-1:112 Uncaught TypeError: Cannot read property 'init' of undefined
    at widgets.php?sidebar-id=sidebar-1:112
media-image-widget.min.js?ver=5.3:1 Uncaught TypeError: Cannot read property 'MediaWidgetModel' of undefined
    at media-image-widget.min.js?ver=5.3:1
    at media-image-widget.min.js?ver=5.3:1
widgets.php?sidebar-id=sidebar-1:116 Uncaught TypeError: Cannot read property 'modelConstructors' of undefined
    at widgets.php?sidebar-id=sidebar-1:116
media-gallery-widget.min.js?ver=5.3:1 Uncaught TypeError: Cannot read property 'view' of undefined
    at media-gallery-widget.min.js?ver=5.3:1
    at media-gallery-widget.min.js?ver=5.3:1
widgets.php?sidebar-id=sidebar-1:124 Uncaught TypeError: Cannot read property 'modelConstructors' of undefined
    at widgets.php?sidebar-id=sidebar-1:124
text-widgets.min.js?ver=5.3:1 Uncaught ReferenceError: Backbone is not defined
    at text-widgets.min.js?ver=5.3:1
    at text-widgets.min.js?ver=5.3:1
widgets.php?sidebar-id=sidebar-1:136 Uncaught TypeError: Cannot read property 'idBases' of undefined
    at widgets.php?sidebar-id=sidebar-1:136
custom-html-widgets.min.js?ver=5.3:1 Uncaught ReferenceError: Backbone is not defined
    at custom-html-widgets.min.js?ver=5.3:1
    at custom-html-widgets.min.js?ver=5.3:1
widgets.php?sidebar-id=sidebar-1:147 Uncaught TypeError: Cannot read property 'idBases' of undefined
    at widgets.php?sidebar-id=sidebar-1:147
??-eJx9UltywyAMvFAxzUzTx0enR+lgpDrCvALCTm5f6tQdpy35YUDaXS07knMUOnhGzzLaMpDPcg4JYsKcxQehBae8GjBJk+X2LUAxRtIjps7kO7kRckWsWgY5Kj3Kd/Ja9oUsrCVhiF3nyK/sirAFMH8NyoeQWAfAFsAhkBL14JBuY1QBChMBhiZOo5gI51af3KASqowWNUtzLJjO3VVxy1RQHxdajWmxuG3/Dvv7I6doQ6ohZ0wT6Tr3HAqXHqvQf5aOpQbPasgtz3O05MdWlw+V3ofTz+WP+YutUl0puGW/vSuLwvXGLKWq9OZed/un/cPzy+7x3nwC0Nvvaw==:21 Uncaught TypeError: Cannot set property 'coerce' of undefined
    at ??-eJx9UltywyAMvFAxzUzTx0enR+lgpDrCvALCTm5f6tQdpy35YUDaXS07knMUOnhGzzLaMpDPcg4JYsKcxQehBae8GjBJk+X2LUAxRtIjps7kO7kRckWsWgY5Kj3Kd/Ja9oUsrCVhiF3nyK/sirAFMH8NyoeQWAfAFsAhkBL14JBuY1QBChMBhiZOo5gI51af3KASqowWNUtzLJjO3VVxy1RQHxdajWmxuG3/Dvv7I6doQ6ohZ0wT6Tr3HAqXHqvQf5aOpQbPasgtz3O05MdWlw+V3ofTz+WP+YutUl0puGW/vSuLwvXGLKWq9OZed/un/cPzy+7x3nwC0Nvvaw==:21
    at ??-eJx9UltywyAMvFAxzUzTx0enR+lgpDrCvALCTm5f6tQdpy35YUDaXS07knMUOnhGzzLaMpDPcg4JYsKcxQehBae8GjBJk+X2LUAxRtIjps7kO7kRckWsWgY5Kj3Kd/Ja9oUsrCVhiF3nyK/sirAFMH8NyoeQWAfAFsAhkBL14JBuY1QBChMBhiZOo5gI51af3KASqowWNUtzLJjO3VVxy1RQHxdajWmxuG3/Dvv7I6doQ6ohZ0wT6Tr3HAqXHqvQf5aOpQbPasgtz3O05MdWlw+V3ofTz+WP+YutUl0puGW/vSuLwvXGLKWq9OZed/un/cPzy+7x3nwC0Nvvaw==:21
??-eJyFUNFOwzAM/CFad9B19AHtU5CbeMMhcULiiPH3pBJF1YTEk+3z2b4zfKbORFESheTrlaVAgwpFcFvWu/IAO56+UaACQreimMF4XtGlsrfrENrA0s+ncR5xGuYTjsY+PtlhuvRLFeupX/t3O0PttvOONKF5h1cWA54X0NzK8hM6dHi7n/5VHrNNmUrpLkzeBhS8Ul5F7evmyZPRbUk746tthhrNfVTKX1AZUiysHGUv9m9mIKn/s7BqNDEkT7o94BxeDsfTcXyeD9PgvgFkn5Aa:83 Uncaught TypeError: Cannot read property 'view' of undefined
    at HTMLDocument.t.default (??-eJyFUNFOwzAM/CFad9B19AHtU5CbeMMhcULiiPH3pBJF1YTEk+3z2b4zfKbORFESheTrlaVAgwpFcFvWu/IAO56+UaACQreimMF4XtGlsrfrENrA0s+ncR5xGuYTjsY+PtlhuvRLFeupX/t3O0PttvOONKF5h1cWA54X0NzK8hM6dHi7n/5VHrNNmUrpLkzeBhS8Ul5F7evmyZPRbUk746tthhrNfVTKX1AZUiysHGUv9m9mIKn/s7BqNDEkT7o94BxeDsfTcXyeD9PgvgFkn5Aa:83)
??-eJyFUNFOwzAM/CFad9B19AHtU5CbeMMhcULiiPH3pBJF1YTEk+3z2b4zfKbORFESheTrlaVAgwpFcFvWu/IAO56+UaACQreimMF4XtGlsrfrENrA0s+ncR5xGuYTjsY+PtlhuvRLFeupX/t3O0PttvOONKF5h1cWA54X0NzK8hM6dHi7n/5VHrNNmUrpLkzeBhS8Ul5F7evmyZPRbUk746tthhrNfVTKX1AZUiysHGUv9m9mIKn/s7BqNDEkT7o94BxeDsfTcXyeD9PgvgFkn5Aa:83 Uncaught TypeError: Cannot read property 'view' of undefined
    at HTMLDocument.t.default (??-eJyFUNFOwzAM/CFad9B19AHtU5CbeMMhcULiiPH3pBJF1YTEk+3z2b4zfKbORFESheTrlaVAgwpFcFvWu/IAO56+UaACQreimMF4XtGlsrfrENrA0s+ncR5xGuYTjsY+PtlhuvRLFeupX/t3O0PttvOONKF5h1cWA54X0NzK8hM6dHi7n/5VHrNNmUrpLkzeBhS8Ul5F7evmyZPRbUk746tthhrNfVTKX1AZUiysHGUv9m9mIKn/s7BqNDEkT7o94BxeDsfTcXyeD9PgvgFkn5Aa:83)

On my local environment I noticed this error message.

fieldmanager-loader.js?ver=1.2.5:8 Uncaught ReferenceError: wp is not defined
    at fmLoadModule (fieldmanager-loader.js?ver=1.2.5:8)
    at fieldmanager.js?ver=1.2.5:281
    at fieldmanager.js?ver=1.2.5:283

I did have him try the fix for the wp is undefined outlined in the comment above, however, that did not solve the issue for us.

@kevinfodness
Copy link
Member Author

@JasonHoffmann I just pushed an update that should fix the wp is not defined error in all contexts.

@kevinfodness
Copy link
Member Author

This has been battle-tested enough that we're confident with shipping it. Merging to master.

@kevinfodness kevinfodness merged commit 630745a into master Apr 15, 2020
@kevinfodness kevinfodness deleted the gutenberg-wp-domready branch April 15, 2020 15:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Validation rules skipped on Gutenberg enabled post types
6 participants