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

(3.0 Alpha 2) - Repeater - ID's are duplicated #432

Open
wplit opened this issue Jul 24, 2019 · 8 comments

Comments

@wplit
Copy link

commented Jul 24, 2019

Describe the bug
Every post inside the loop has the same ID

To Reproduce
Steps to reproduce the behavior:

  1. Add repeater element
  2. Query posts
  3. Add any elements inside repeater div
  4. Inspect html on front end

Expected behavior
Each new post & all elements inside should have new unique IDs, or no IDs at all, just classes if they all need to be the same.

What actually happens
Every element inside the loop has the same ID in each post. It causes an error in chrome lighthouse

Screen Shot 2019-07-24 at 5 00 26 pm

Screenshots
Screen Shot 2019-07-24 at 4 56 02 pm

@wplit wplit added the bug label Jul 24, 2019

@Spellhammer Spellhammer added this to New Bug Reports in Bug Reports via automation Jul 25, 2019

@Spellhammer Spellhammer moved this from New Bug Reports to Pending Development in Bug Reports Jul 25, 2019

@louisreingold

This comment has been minimized.

Copy link
Member

commented Jul 25, 2019

I can't think of a good way to address this. If we change the IDs, all the styles will stop working, so we'd have to output duplicate styles for every ID in the repeater. When we originally built Oxygen we should have skipped IDs entirely and used exclusively classes, but we didn't, and it's too late to do that now.

@albertso

This comment has been minimized.

Copy link

commented Jul 25, 2019

Incrementing the ids would make them unique, and if we use classes to style the blocks, there shouldn't be any styles from the id's to repeat.

What would be helpful is some way to copy styles between classes and ids, and also a button to reset the styles in a block or class.

@wplit

This comment has been minimized.

Copy link
Author

commented Jul 25, 2019

hmmm..

Incrementing the ids, then having to duplicate all the CSS to make it work doesn't sound ideal.

I would argue the IDs aren't needed at all with repeater elements, but i get it's built heavily into how the components work. If you could somehow...

  • Prevent styles from being added by the user until a class is added, on any element inside the repeater.
  • Don't output the IDs for these elements at all on the front end.

Or have a little warning above the class/id field saying, you're styling an element inside a repeater, please use a class first, Less ideal, but slightly easier to implement.

Update: I've just realised this won't work, as users won't be able to place existing elements into repeaters. As they may have already been styled via ID. Hmm.

@Spellhammer Spellhammer moved this from Pending Development to Confirmed / Replicated in Bug Reports Jul 26, 2019

@albertso

This comment has been minimized.

Copy link

commented Jul 26, 2019

How about if there is an option to disable using id for any kind of block, inside or outside a repeater?

For example a toggle button next to the id field that grays out the id so the user knows it's disabled.

The id could still be there if that's necessary for oxygen internally, but we'd have the option to not use it in frontend.

Also, to help in the workflow of transferring styles from one thing to another, and seeing what's in use, we could have a button to inspect all the styles applied to a block or class, in raw css.

If we could copy/edit/paste/clear the css there and have them converted back to oxygen properties, it would really help in moving stuff between stylesheets, ids and classes.

Whatever property isn't handled by oxygen can go into the custom css option.

@Hanleymade

This comment has been minimized.

Copy link

commented Aug 27, 2019

What is the limitations and fall out of Oxygen being built this way in technical terms? IF it can't be changed as Louis says, then if Oxygen continues to be more dynamic but can't change to classes, then what? Does it affect site performance, speed, bloat, etc.?

@alpabuz

This comment has been minimized.

Copy link

commented Aug 27, 2019

I can't think of a good way to address this. If we change the IDs, all the styles will stop working, so we'd have to output duplicate styles for every ID in the repeater. When we originally built Oxygen we should have skipped IDs entirely and used exclusively classes, but we didn't, and it's too late to do that now.

It may be possible to implement the generation of styles for each element with reference to the parent ID and this is what to display in the user interface, such as: _dinamic_list-60-43> *: nth-child(0). And by the same principle for nested elements of each element: _dinamic_list-60-43> *: nth-child(0)> *: nth-child(0). Due to the impossibility of deleting the ID for each element, I think it is possible to implement ID regeneration with the addition of a new index after the element is added to the repeater (e.g. div_block-61-43-1, div_block-61-43-2, div_block-61-43-3 ...). At the same time, such IDs should not be involved in the generation of styles and not displayed in the user interface.

I apologize if I have not explained clearly or my idea is too delusional.

@srikat

This comment has been minimized.

@knytl

This comment has been minimized.

Copy link

commented Sep 17, 2019

The jQuery workaround is handy, but still need to add code. I think it would be enough to be able to remove ID of element. Now when I delete ID it still output "id" which is not much better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
7 participants
You can’t perform that action at this time.