WordPress 5 - conditionals don't work. Any ideas?
dameer opened this issue · comments
Just as the title says, conditionals do not work under WordPress 5 release candidate. Not sure whether it's Gutenberg shit or else. It shouldn't be coz I recall that G developers decided to leave meta boxes as is. CMB2 is fully functional tho.
I'm using the latest CMB2 branch/trunk, there are no javascript or server side errors - that's what I can say for sure. Other than that I doubt I'm skilled enough for some serious debugging.
It must be some Gutenberg compatibility thing because all works fine with good old TinyMCE.
The issue is bascially that with Gutenberg there is also some updated markup for the editor. The form element with the id="post" does not exist anymore and this is actually what the cmb2-conditionals.js is referencing.
Instead there is actually now a div element with the id="editor". I now tried to update the cmb2-conditionals.js in order that it gets initialized on #editor instead of #post but for some reason that doesn't have any effect. I then just removed the #post all together, but of course this script gets then initialized on every page. I just ended up by simply initializing the script on '.post-php, .post-new-php' which are basically 2 classes which are applied to the body element and are getting used on the editor pages. I keep testing this a bit more and will then PR
I tried Joe's method and indeed it works a little.....like if you have a checkbox that adds a column or takes it away. if you change the #post to #editor it will initiate but not save and when you add new rows it doesn't take in account the conditionals. So for now I have installed the disable Gutenberg plugin and it restores the editor markup back to the original style and allows for conditionals to work.
it sucks cause I use cmb2 to basically build out all my websites and to do that I need the conditionals to add columns and background images and animations and what not. So this is a bummer but hopefully we can figure it out and get it working cause the Gutenberg is kinda cool in that it uses flex and you can set up columns fairly easy. but to each there own.
So yeah disable Gutenberg plugin will solve the conditional problems but still allow you to have the latest wordpress version
@TheNewGuy16 Instead of #editor you should try .cmb2-wrap. For me it works just as fine as before.
@TheNewGuy16 Instead of #editor you should try .cmb2-wrap. For me it works just as fine as before.
That doesn't work for me at all. Moreover, I've noticed that CMB2's color picker doesn't work too. Of course, regardless Conditionals.
Things are getting more and more complicated. My clients too. Damn Gutenberg.
OK, here's the solution...
- Open "cmb2-conditionals/js/cmb2-conditionals.js"
- scroll down to the file bottom
- change
CMB2ConditionalsInit( '#post', '#post .cmb2-wrap' );
... to ...
CMB2ConditionalsInit( '.metabox-location-normal', '.metabox-location-normal .cmb2-wrap' ); - save, refresh, empty cache (BE SURE THE LATEST "cmb2-conditionals.js" is loaded!)
Things to keep on mind tho...
Gutenberg doesn't use id #post on post/page edit screen any more. .metabox-location-normal is the new form class for all the metaboxes underneath the Gutenberg editor. I'm guessing the class name will be different for metabox in different context ( 'side' or 'advanced' ), so try with
.metabox-location-side or .metabox-location-advanced if your CMB2 metabox context is different.
That's my presumption, it doesn't necessarily be true.
Hope it helps!
EDIT
If you want to make CMB2 Conditionals work for both classic editor and G-shit, try with:
if( $( '#post .cmb2-wrap' ).length ) {
// yes, good old TinyMCE
CMB2ConditionalsInit( '#post', '#post .cmb2-wrap' );
} else {
// nope, it's the bad one
CMB2ConditionalsInit( '.metabox-location-normal', '.metabox-location-normal .cmb2-wrap' );
}
...or anything similar that might suit your needs
You are the author of this plugin mate, give a shot to the code, consider the possible class name alterations and update. I don't wanna bother myself with Git stuff, I'm not into it. Beside, I've got too much work these days.
I'm sorry but this code doesn't make any sense at all. You actually init also on .cmb2-wrap, even within your fallback. Did you actually cleared your browsers cache after you've applied the modification I've suggested?
@jcchavezs I already PR'ed. And there are also other PR's. Perhaps a good idea to finally look over them all?
JoeHana, I'm not an expert but CMB2ConditionalsInit() function takes two params; changeContext and conditionContext. If you omit second one, BODY is considered to be conditional element. Maybe I'm wrong, apologies on my ignorance.
@dameer no, sorry - my bad. I was confused and thought you had just 2 classes in one param. However, its working for me with just one param which is .cmb2-wrap. But will do more testing later as I need to work with that on a current project anyway. Will review accordingly.
Hi, You may watch the tutorial. how to use the addon as a plugin or how to use the plugin with your theme.
I've got the tutorial, maybe you may get help from the tutorial.
https://youtu.be/ZyS2wxC_suE