Gutenberg editor and Pattern issue

Hello

Since Woodmart fully supports Gutenberg, I decided to switch my website from Elementor to Gutenberg. However, after my test, when a large number of blocks are added to the page, editing will become very slow, with a delay of 3-10 seconds. This is not a server problem, because I have checked the server CPU and memory, and they are always at a low level.

I think this may be because a large number of blocks are loaded at the same time and can be directly clicked to edit, causing this performance issue. To solve this problem, I converted some of the heavy asset blocks to Synced Pattern, which did improve the editing delay problem because Synced Pattern does not allow editing in page editing, it needs to be edited separately.

But when you Duplicate any woodmart block in Edit Synced Pattern, it will not update the css id, which means the original block and the Duplicate block have the same css id, and subsequent changes will overwrite the original block.

So how should we solve the Gutenberg editor performance issue and the Pattern duplicate id problem?

Best regards
Lin

Attachments:

You must be logged in to view attached files.

Hello Lin

Thank you for reaching out to us with these issues regarding the Gutenberg editor and Pattern functionality in the WoodMart theme.

To better assist you, could you please record two videos detailing the performance issue with the Gutenberg editor and the CSS ID conflict when duplicating blocks in Synced Pattern? This visual representation will greatly aid us in understanding and diagnosing the problems you are experiencing.

Regarding the CSS ID duplication problem, this may occur due to how Gutenberg currently handles block IDs within Synced Patterns. We will need to look into this further once we have reviewed your video recordings.

For further assistance, please ensure your theme and plugins are up to date. If updates do not resolve the issue, these videos would be beneficial.

Thank you for your cooperation and we apologize for any inconvenience caused.

Best regards

Hello

I’m sorry, my English is not good, as there may be many grammatical errors in the translation.
I recorded two videos and you can view the details.

1. performance issue with the Gutenberg editor
https://youtu.be/5TGjJHYqjrk

2. the CSS ID conflict when duplicating blocks in Synced Pattern
https://youtu.be/1-i9PrSn2CI

In the first video, there are a lot of blocks on the page, and no matter I delete or add any text, or even click the save button, it takes a delay of 3-10 seconds, and it is like it is frozen. When I converted a portion of the heavy asset block to Patterns, it started to get normal (There is still a delay, but it was obviously much smoother.).

In the second video, duplicate any block in Synced Patterns, it will duplicate the css id of the original block. normally it should create a new css id.
By the way, in Patterns, there seems to be no correct row gap between the individual blocks. But in the front end it is normal.

Regarding the CSS ID duplication problem, even in normal page editing or html blocks editing, It is also a problem.
In my tests, if you save duplicating block in tablet or mobile mode, it still has duplicate css id, Desktop mode save is normal.

Best regards
Lin

Hello,

Thank you very much for both videos. Now the issues are clear. However, the performance issue might still be related to your website only. We need your admin and FTP access to troubleshoot this. Also, keep all plugins that are not related to our theme temporarily turned off.

Kind Regards

Hello

I have disabled all non-essential plugins. You can check it now.
The longer the page is edited, the more severe the freezing is.

Best regards
Lin

Please disable Cloudflare caching temporarily so we can test our changes in JS files.

Hi,

I just opened Development Mode

Attachments:

You must be logged in to view attached files.

I did a few fixes. Could you please the editor performance now and let me know if it works better? Clear your browser cache before tests.

Hi,

I just tested it and everything was perfect, editing becomes very smooth.
but I have two other sites, what changes should I make to fix this? Or should I wait for the next update?

Best regards
Lin

Hello,

It is a general WordPress performance issue when there are a lot of blocks added to the page. There is no workaround to be added to our theme. To fix this issue, you need to install the latest version of the Gutenberg plugin first (don’t worry, it is the same Gutenberg editor as you have in the core of the WordPress. Installing this plugin will not affect the performance). Then upload and replace the following file in wp-content/plugins/gutenberg/build/block-editor/index.min.js.
https://drive.google.com/file/d/1QG0-fq0nNuEfoRPVgjSyWFclygm18h49/view?usp=sharing

Here are a few links about this issue on Gutenberg GitHub.

https://github.com/WordPress/gutenberg/issues/64219
https://github.com/WordPress/gutenberg/issues/64732
https://github.com/WordPress/gutenberg/pull/64871

Kind Regards

Hello,

Thank you very much for your help!

I’ve done this on my two other sites. Everything is working. The point I’m worried about is if Gutenberg plugin is updated, will this file be overwritten?

and regarding the CSS ID duplication problem, Will it be fixed next time it is updated?

Best regards
Lin

Hello,

Thank you for letting us know. Every time you update the plugin, you need to apply these changes. We hope that this issue will be fixed one day.

As for the ID duplication, we need to perform additional investigation. Can you please send us your current access?

Kind Regards

Hello,

I created a Synced Patterns on the sample page, you can check it.

Best regards
Lin

Thank you very much. Yes, we see the issue and it will be fixed in our theme update next week.

Hello,

since the problem has been resolved you can close this topic.

Best regards
Lin

OK, great. Let me know if there anything else I can help you with.

[Author]

Posts