IMPLEMENTED: Make the element IDs copy to clipboard on click

I’ll look into this. I never really copied the ID, but once just to test. I only use the copy class. So, I’ll definitely look into this and update it.

1 Like

Copying IDs usually used for triggers.

Ace thanks :slight_smile: It’s a really helpful tool, saves me squinting at the tiny, low contrast ID in the builder!

I’ve thoroughly tested the code and everything seems to work as it should. Should I just hide the copy ID when a class is selected? Would that be better UX?

Yes if there is no class selected best to hide the class copy icon, similarly with the ID? Hide the ID copy icon if a class is selected?

1 Like

Wohooo! I’m excited to see this one get some attention. :slight_smile:

I think either way is acceptable. Probably less confusion if you include the #, but part of me wants it without. Mainly for use with getElementById(), but I suppose one could just use querySelector() instead. Probably a minor use case in the end.

1 Like

Done and updated. Although I kept the ID icon showing at all times.

2 Likes

@thomas You could have it where maybe if you’re holding shift it will automatically add the # or not (just an idea). I see both use cases for this, one for frontend development, and the other for backend when using PHP filters.

Thanks that’s so helpful! Will try out and let you know how it goes

or, until this functionality is added in Bricks you could inspect it with browser dev tools and copy the ID from there.

1 Like

But isn’t it more fun to hack together 60 lines of code to do it for you? :joy:

1 Like

Possible. But a bit of an overkill to add another event listener just for a single character & document it, as it’s not really a known feature.

Always having the # prefix also helps to understand what your’ve pasted at a (much) later point.

We’ll probably also add the inspect & copy element ID to clipboard feature to the context menu, so it’s even faster to inspect & access :fire:

8 Likes

And custom code that extends the builder, like element render and query loop functions

Yay, my hacky code is no longer needed for ID’s!

Glad @portseif was able to modify it for you class crazed folks!

Hi guys,
With Bricks 1.7.1, now available as a one-click update in your WordPress Dashboard, you can copy the element ID straight from the element panel and context menu.

bricks-copy-element-id-to-clipboard

Best regards,
timmse

5 Likes

Am I the only one that finds the way this feature is implemented not ideal?

99% of the times I am looking to grab the Bricks ID. What gets copied with the built-in feature is the HTML ID incl the #brxe- at the beginning. Not a big deal but a little annoying.

For me copying the full bricks id inkl. #brxe is perfectly fine. Personally I prefer having everything copied and delete what’s not needed afterwards, but maybe it’s just me.

What I am really missing is click-copy classes … same as click-copy ids.

Thank you guys for the implementation! :smiley: