More than three embedded WAV files breaks Gutenberg

  • Yeah, I know that’s a weird title, but this is a weird issue. Basically, whenever I add more than three of these WAV files it breaks the editor completely.

    Here’s the behavior:
    – Loading the editor with this post will often not load the entire contents of the post at first
    – The WP logo at the top left corner of the editor will be blank until the page starts loading again
    – Eventually, the page may continue loading, depending on how many total blocks and audio embeds there are
    – Saving almost never completes, refreshing the page never refreshes, and usually I have to close all site tabs in order to get back in to the post.

    Here’s what I’ve done so far:
    – Changed theme to Twentytwentytwo, no change
    – Disabled possible easy-guess plugins like security etc, no change
    – Checked the Network waterfall in Chrome tools, mostly stalls on the admin-ajax.php file, was indicating WPShowPosts in the call there
    – Disabled WPSP, no change
    – Disabled ALL plugins, no change
    – Disabled Ezoic, no change
    – Copied post content to a demo site on a different host and added files, they work fine there
    – Created a test draft on affected site, saving took longer and longer the more audio embeds I added (starting at about three or four)
    – Even just duplicating an embed adds to behavior
    – Restarted my VPS server, no change
    – Checked nginx logs, no errors found
    – Disabled autosave, no change
    – Modified heartbeat in post editor to 200, no change
    – When clicking Save Draft, the following request stalls as (pending):
    wp-json/wp/v2/posts/9433?_locale=user

    – Regular post lock heartbeat also causes problems. The admin-ajax.php file stalls as (pending) and then goes to (canceled), with the form data listed as wp-refresh-post-lock
    – Experimented with Runcloud Hub caching, both with Redis off and on, no change
    – Disabled Cloudflare via Ezoic integration, no change
    – Reenabled Ezoic and Cloudflare, no change (using Ezoic nameservers for this site)

    Here’s where shit gets weird…
    – Disabled all but four plugins for plugin grouping, heartbeat control, site health plugin, and disabling Gutenberg autosave
    – Changed theme to Twentytwentyone
    – Tested with actual draft and test draft, behavior now doesn’t exist despite doing this before
    – Switched back to GeneratePress theme, behavior doesn’t exist in both drafts
    – Re-enabled ALL plugins, behavior still doesn’t exist in drafts
    – Waited a few minutes after two or three successful draft saves after dirtying the post, behavior has re-emerged
    – Confirmed that post is dirty as shown in Disable Gutenberg Autosave, multiple admin-ajax.php processes pend and then cancel with the wp-refreshpost-lock form data

    I’m at my wits’ end here. Is there anything I’m missing? Anything else I can try?

Viewing 6 replies - 1 through 6 (of 6 total)

  • What exactly do you mean by “breaks”? Does the editor not load at all? Or just a white page?

    Do you really mean wav files?

    How do you add these to Gutenberg? I assume by audio block?

    As a test, I created a page in a completely plugin-free installation with the TwentyTwentyOne theme in which I inserted 4 wav files. Each in its own Audio Block, each with a Paragraph Block in between. I can call up the website with it as well as open the Gutenberg editor again and again and make subsequent changes without any problems.

    So I can’t understand the problem described at the moment.

    Based on your description, I assume that your project is probably an installation with several plugins and you discovered the problem before you deactivated any plugin? Just like me, try deactivating all plugins and activating a standard theme. Create a completely new page like this. Only along the way could you find out whether it is a Gutenberg problem or rather a problem with one or more of the plugins you are using.

    Thread Starter tf5_bassist

    (@tf5_bassist)

    @threadi thanks for the reply. As for what I mean by “breaks”, I described it above in the “behavior” section. But I’ll try to rephrase it:

    – After adding several .WAV files (yes, via the audio block), the editor ceases to respond in a timely fashion. Autosave kicks in and never stops, meanwhile it did not save changes.
    – Had to close the tab and go back into the editor and the page takes quite a while to load (at this point I have only maybe less than 10 low-size images, 4-5 audio blocks, and probably about 4k words)
    – The editor tries to load the entire post, but it only loads halfway
    – If I let it sit there long enough, it MIGHT load the rest of the post
    – I was able to disable the autosave and make the heartbeat run less frequently which allows for the document to actually load now
    – There is still a delay before the editor FULLY loads, such as the WordPress logo at the top left, which won’t load until whatever delay is occurring completes

    Now, I do understand the basics of WP troubleshooting. As per my steps I listed out in the OP, I did actually disable all of the plugins except for 4 that were needed for heartbeat control and plugin grouping (most of which weren’t installed when this issue began, soooooo….).

    I also switched to two of the default themes (Twentytwentyone and Twentytwentytwo). During the first two-three times of doing this disable/theme change, the issue persisted.

    I then tried it again as another round of testing, and the issue went away. Things loaded as expected. I switched back to my GeneratePress theme, issue was still not occurring. I enabled all of my plugins again, the issue was still not occurring. Cool.

    Then I tried to save again, and the issue came back.

    Right now, I basically can’t do anything involving AJAX loading. Saving results in an error at the top of the editor “the response is not a valid JSON response” after at least 30 seconds or a minute. I use the Copy All Content function, close the tab and go back to the Posts screen, click Edit, and wait for it to load again to make sure it saved the changes. It usually is actually saving at this point.

    If I try to embed an audio file now and click Media Library, it basically will never load the library contents. The same occurs when trying to choose an image.

    If I create a hyperlink and search for an existing post title, it won’t ever return a list of posts, just a spinning search indicator.

    I did mention that I created a new blank test post, and added multiple audio blocks to the post, noticing that performance got worse after adding 3-4l blocks. Granted, I didn’t have 4K words in this post so it’s not quite the same (every single post tends to result in Gutenberg running like garbage with a couple thousand words in it). I duplicated an audio block about 10 times in this test post (not even a different audio file, just the same file), and I was able to obtain the same behavior in this test post.

    Before I wrote these last couple of paragraphs, I disabled all of my plugins again, switched to Twentytwentyone, opened the post and tried to add an image via the Media Library. The library spinning indicator has been running the whole time, and it has not loaded the contents of the media library.

    So yeah, the issue exists even with all plugins disabled and the theme set to a WP default theme.

    After re-enabling my theme and all plugins, I created another new post and immediately added an Image block. Clicking the Media Library icon brought up the file picker, progress indicator spun for about a second and a half, and then loaded my entire library within seconds.

    I went back to my affected posts and once again was unable to load my image library at all.

    So, yes, it does seem that the length of the post, amount of embeds (especially WAV files), and who knows what else contributes to AJAX processes effectively being unable to complete properly.

    Does that make more sense?

    I still can’t reproduce it. To compare some more data:

    Which browser do you use?
    Are you using the latest WordPress 6.0?
    Which PHP version are you using?
    Do you always use the same wav files for testing? How big are these? Can you provide them if necessary? I simply use 4 different wav samples from the net with different sizes..

    Thread Starter tf5_bassist

    (@tf5_bassist)

    I’m on WordPress 6.0 and using PHP 7.4 on a 2 vCPU 4GB RAM Vultr VPS with RunCloud managing the VPS.

    I have a bunch of WAV files that I’ve been trying to use, as these are for some mic tests. They’re all 24-bit 44.1kHz WAV files, between 7-12MB in size. The last time I was testing a microphone with similar files I had the same issues but I had less files to work with and just powered through.

    But I believe I recall how I worked around the issue last time. Which brings me to…

    I forgot to mention browser info, I knew I left something important out. I’m using Chrome, which is updated. I’ve tested with Edge and it does the same thing. I have barely any extensions in Edge, either, because I just rarely use it.

    That said, I forget that I have Safari, because who even uses it lmaooo.

    I tested in Safari and it actually works much more normally there. The timeline inspector shows a constant stream of javascript events, but the Network waterfall looks pretty much identical to what it did in Chrome.

    It seems that Safari is able to process the Ajax requests better than Chrome. I believe this is how I got around this issue the last time I had a review with audio samples, it’s just been like.. 8 months since then.

    But it still doesn’t resolve the issue that I’m experiencing in Chrome. And I’m not able to actually play the audio files in Safari within the post. All of the audio blocks show “Error”. But at least it’s something to go on.

    Any thoughts on Gutenberg and issues with rendering engines?

    I’ve only tried it in Firefox so far. In Chrome I can manage the audio blocks in an identical way. I also don’t feel any speed disadvantages.

    Since I still can’t understand it, I can’t help you with this. My recommendation would be that you possibly describe this to the Gutenberg team here: https://github.com/WordPress/gutenberg/issues

    Thread Starter tf5_bassist

    (@tf5_bassist)

    Well, I just installed Firefox and am seeing the same behavior there that I saw in Chrome and Edge. Meanwhile, Safari is still 98% functioning. This keeps getting weirder and weirder.

    Alright, I’ll copy-paste all this over to a ticket there, thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘More than three embedded WAV files breaks Gutenberg’ is closed to new replies.