Issue with TinyMCE not re-initialising

[jonrcarey]

Hi Brandon,

Absolutely love your work, big fan.

I'm experiencing the most unusual bug, and I'll describe it the best I can:

When the Block Inserter is open and the user quickly hovers over the gutenberg block icons, any instances of the TinyMCE editor are destroyed and do not reinitialise. I have tested this on two installs and seeing consistent behaviour.

I've included a couple of screen shots to demonstrate: [https://snipboard.io/4Kgz9W.jpg]

Then after hovering over the icons quickly: [https://snipboard.io/Mpm57B.jpg]

I believe I've narrowed it down to log1x/acf-composer or StoutLogic/acf-builder

Previously, I've been building gutenberg blocks using mwdelaney/sage-acf-gutenberg-blocks with no problem. So as a test, I made a copy of my current project, uninstalled acf-composer and recreated a number of blocks using mwdelaney/sage-acf-gutenberg-blocks – this resolved the issue.

I really would like to continue using your acf-composer but this is causing me quite the problem. I could migrate back to sage-acf-gutenberg-blocks but I don't fancy rebuilding all those blocks again.

If you have a moment, could you run a test yourself to see whether you can replicate the bug?

Any ideas / thoughts on how to resolve this would be welcome.

All the best, Jon

[Log1x]

Not 100% sure on this.

It happens when they hover the custom block or just any blocks quickly?

Could it be $this->preview not being configured properly? Does it happen if you empty the block view?

[jonrcarey]

That was a great question, I had actually disabled the default blocks. Having turned them back on, I can confirm it's hovering over the custom blocks that is causing the issue.

Unfortunately, I've emptied the block views and the error persists. But I expect you're right, it will have something to do with $this->preview.

I've just tried rolling back to previous versions of acf-composer, all the way back to v1.5.5 and the error remains.

If you have any more thoughts on how to possibly resolve this, please do let me know.

Much appreciated.

[Log1x]

What's your block look like right now? Does it happen if you remove all custom blocks and just use the default list block generated with acf:block?

[jonrcarey]

So, I removed all custom blocks only to leave the default blocks.

I generated an Example block using acf:block.

To my page, I then added a gutenberg classic block, as this utilises TinyMCE.

I then hovered over the default block icons and repeatedly over the newly generated Example block's icon – this did not break the tinyMCE of the classic block.

Finally, I reintroduced one of my custom blocks that uses tinyMCE. Hovered repeatedly over the existing block's icons and then the Example block's icon. Hovering over the Example block's icon broke the TinyMCE of my custom block, but the classic block continued to function as expected.

This is what the view looks like for one of my affected blocks: https://snipboard.io/AvFl0Z.jpg

For another test, I've also rendered my preview block using a separate view – in each view is a simple snippet of HTML. This hasn't resolved it either.

Here's an example https://snipboard.io/4dRUEe.jpg

Appreciate your help with this, thanks.

[Log1x]

can you set define('LOG_CHANNEL', 'stack') in wp-config or Bedrock's application.php to enable Acorn logs? I think they'll appear in sage/storage/logs. Afterwards, can you see if any logs get written when the error occurs?

[jonrcarey]

It appears acorns logging isn't working for me. I've tried adding define('LOG_CHANNEL', 'stack') to both application.php and sage/storage/logs.

I even forced a error by recreating the Example block, where I received this error in my terminal: File app/Blocks/Example.php already exists.

But I could not find any log files with their error.

[jonrcarey]

Hey Brandon,

As a test, I've made a completely fresh install of Bedrock and Sage. I have only installed.

"advanced-custom-fields/advanced-custom-fields-pro": "^5.12.3"

and

"log1x/acf-composer": "^2.0", "roots/acorn": "^2.1"

My environment is: mode: development @roots/bud: 6.3.5 webpack: 5.73.0
node: 16.16.0
php: 7.4.30 Sage: 10.2.0 ACF: 5.12.3

I generated the example block:

$ wp acorn acf:field Example

And made one single change, from this:

$example ->addRepeater('items') ->addText('item') ->endRepeater();

To this:

$example ->addRepeater('items') ->addWysiwyg('item') ->endRepeater();

So now within the Block Inserter, we have the default gutenberg blocks and our new custom Example block.

I repeated the experiment by adding one default Classic Block and the new Example block – both having a TinyMCE editor. I hovered quickly over the default block icons with no problem, but when hovering quickly over the Example block's icon the TinyMCE editor in the Example block broke, whereas the Classic Block continued to work as expected.

I've uploaded a screen recording for you to see: https://youtu.be/kX3iJR73YhA

[Log1x]

haha that is ... an interesting bug.

there's no dev console feedback whatsoever when it breaks?? I have no idea how that'd have anything to do with what ACF Composer does. the only thing other than preview I can think of is maybe TinyMCE needs a few defaults that aren't getting set?

can you try just registering a block like this with plain PHP using https://www.advancedcustomfields.com/resources/acf_register_block_type/ ?

ACF Composer isn't really doing any magic when it comes to registering the block. 😕

I can try to reproduce your issue later tonight.

[jonrcarey]

It's so weird right?!

So I've registered a block using plain PHP using _acf_register_blocktype as advised. Quickly hovering over that block's icon, everything works as expected and all instances of TinyMCE continue to function.

The moment I quickly hover over icons for blocks registered using [acf-composer], TinyMCE crashes for all blocks. Either registered via _acf_register_blocktype or acf-composer.

I've take a few screen shots, but have had to blur some of the content due to an NDA.

I'd be really interested to see whether you can replicate the issues I'm having.

Thanks again.

[Log1x]

I'm able to reproduce it, just not sure what's causing it.

It seems the TinyMCE editor in the sidebar is no longer in it's iFrame after it happens and also weirdly has its text color set to white:

Re-selecting the block also seems to fix the issue so the block its self isn't erroring out in the editor. I'm not getting any console logs or PHP/Acorn logs when it happens.

[Log1x]

I narrowed it down to being an example preview bug.

If I comment out https://github.com/Log1x/acf-composer/blob/master/src/Block.php#L261-L266 it doesn't appear to happen.

Can you test adding an example to the test block you made with PHP and see if it errors?

[jonrcarey]

Yes, the iFrame disappears entirely. This happens to the TinyMCE editor wherever it's positioned, whether in the main copy or the sidebar.

I believe the white text is used to hide the textarea and the copy once TinyMCE is initialised.

I've found it you switch to preview mode and back to edit, TinyMCE reinitialises successfully.

[Log1x]

Yeah, really weird. Can you try the above? I feel like this might be an ACF issue with example and the preview mode enabled – I can't really see what I'd be doing that'd break it on my end. :(

[Log1x]

If I comment out https://github.com/Log1x/acf-composer/blob/master/src/Block.php#L261-L266 it doesn't appear to happen.

Also happens if I set example to [] in Block.php as well as mode to edit (which doesn't work at all and kills the block). I have to remove example entirely from acf_register_block_type for it to work.

[jonrcarey]

Looks like you're on the money. I've added an example preview to the block registered with PHP and that now breaks TinyMCE too.

I expect that's why I wasn't experiencing this issue with sage-acf-wp-blocks – that doesn't generate an example preview by default.

Think you're right, looks like a possible issue with ACF.

[Log1x]

I can push a fix to ACF Composer so you can set example to [] or false and it won't pass it in.

In the mean time, I'd confirm that the bug doesn't happen on the latest ACF (or 6.0 beta) and then maybe file a bug report.

[jonrcarey]

That would be amazing, the ability to set example to [] or false would be a huge help.

I'll take a look into 6.0 beta and if that still occurs, I'll report a bug and link them to this issue.

Thank you for your help and time, I really appreciate it.

[jonrcarey]

I can push a fix to ACF Composer so you can set example to [] or false and it won't pass it in.

In the mean time, I'd confirm that the bug doesn't happen on the latest ACF (or 6.0 beta) and then maybe file a bug report.

Can confirm this is still an issue with the latest version and 6.0 beta. Will file a bug report with them.

[Log1x]

:( unfortunately this still happens when another ACF block has an example/preview set. i can still push the ability to not pass example fix if you want (let me know) but it looks like something they'll have to fix if you want to avoid it entirely (unless you remove examples on all of your blocks)

[Log1x]

very strange one-off bug that I'm sure they'll be super stoked to hear about. lol

[jonrcarey]

Yes please, if you could push your change, I'd very much appreciate it. I'm still on the fence about example previews, so I don't mind disabling this entirely for the moment.

[Log1x]

Would you mind giving dev-master a whirl before I version it? My test environment is being weird.

[jonrcarey]

Would you mind giving dev-master a whirl before I version it? My test environment is being weird.

I've tested dev-master and can confirm the example previews are disabled and all instances of TinyMCE continue to work.

I didn't have to set example to [] or false though – it's disabled them by default.

[Log1x]

I didn't have to set example to [] or false though – it's disabled them by default.

o_O did you remove $this->example entirely? if so then that's fine. otherwise it should def be working if you're providing an example like the items. sorry if im confused.

[jonrcarey]

Yes I did remove $this->example entirely. You know what, originally I totally misunderstood what $this->example was being used for. I thought it was purely for test data – my bad!

Anyway, I can confirm dev-master is working perfectly for me, thank you.

[Log1x]

Thanks for testing!

Published v2.0.8 that you can swap over too.

[jonrcarey]

Many thanks Brandon, you've been a huge help – very much appreciated!

Keep up the awesome work :)

[Log1x]

Going to push a small change to this – you will have to explicitly set $example to false to not show block previews. This is due to situations where a block might not require data to render a block preview/example.

126

[jonrcarey]

Thanks for the update Brandon, I've updated my project and can confirm it's working as expected.