Skip to content
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

Bug: 355: Collapsible Block - generate unique id's when blocks are duplicated #356

Conversation

acketon
Copy link
Member

@acketon acketon commented Aug 25, 2023

Fixes #355

May partially fix https://github.com/bu-ist/r3-law/issues/446, though existing pages would need to be updated to remove duplicates.

After performing a bunch of research I agree with others that the clientId is not the best choice for generating unique ID's and a more robust approach is needed. The unique ID's are needed for the Aria Labels in the block for the interactivity, button label, etc.

This approach uses idea from two locations, the implementation in core in a newer version of Gutenberg and some ideas in this issue.

I was unable to get the object map of generated anchors id's to work reliably in our version of WordPress which was how the core heading block tracked "duplicate" unique ID's. They stored all of the id's in an object variable and searched that object for duplicates. This did not work for me based on when the check for duplicates fired. Additionally our block has "Styles" in enabled which appear as live previews in the sidebar. These too were generating unique ID's and being added to the object map and I couldn't find a way to avoid that. That caused odd duplications of the unique ID's.

Instead I combined the core approach with the approach in #17246 where someone else that ran into this simply queried the editor markup for blocks with a duplicate ID to check for unique ID collisions.

The unique ID's generated from clientId's were problematic because they are generated each time the editor is initialized. They are only unique for that session and 17246 outlines some issues with relying on that approach alone. I prefer the unique ID's that are generated from the title of the block. Now there will be times that this might not be unique if there are multiple blocks with the same title on the page. However I was able to check for that with the isDuplicate search of the DOM and if a duplicate is found part of the clientId is appended to that duplicate's ID. I feel that the ID's generated from the title are more user friendly, easier to read, easier for the admin's to use as anchor's, etc.

From my testing this solves the issues in #355 when a block is duplicated in the editor the uniqueID is now checked against other blocks and regenerated with an appended clientId if it is found to be a duplicate. This prevents the issue of the admin duplicating a collapsible block, then editing it and not realizing the unique ID is the same as the previous block.

I also added the ability to disable the autogenerated unique ID's for cases where an admin or a designer in ID has a need to control the ID's and will manage the uniqueness themselves.

Screen.Recording.2023-08-25.at.2.22.58.PM.mov

Demo: https://id-dakota-upgrade.cms-devl.bu.edu/bu-blocks/wp-admin/post.php?post=233&action=edit

@acketon acketon self-assigned this Aug 25, 2023
@acketon acketon added the 🔥 Product bug A bug which is not directly related to a custom child theme. label Aug 25, 2023
@acketon acketon requested a review from smtierneybu August 25, 2023 18:28
@acketon acketon changed the title initial prototype Bug: 355: Collapsible Block - generate unique id's when blocks are duplicated Aug 25, 2023
acketon added 2 commits June 7, 2024 10:37
…’t change title of block. By having useEffect monitor for the autoID attribute changing we can trigger IDs to be generated immediatly upon turning on autoID’s with the ToggleControl in the sidebar
@acketon acketon marked this pull request as ready for review June 7, 2024 14:39
@acketon acketon merged commit 5b368cf into wp-upgrade/5.7-base-compatibility Jun 7, 2024
@acketon acketon deleted the bug/355-wp5.7-collapsible-block-generated-anchors-issues branch June 7, 2024 14:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔥 Product bug A bug which is not directly related to a custom child theme.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants