Custom Attributes: Feedback

Beta
#1

Hi!

I love Custom Attributes! Thanks!

I have some suggestions to improve the UX and to speed up the process of using them:

  1. Allow right click context menu on the whole attribute set (when there are several of them), and on an individual attribute, with an option to copy them, and paste into another element.

  2. Allow writing and copy/pasting the whole attribute name="value", along with an option to put each one in its own box. This additionally speeds up the use of it in many cases.

  3. Allow saving attribute templates (Individual and whole sets). Many libraries have their own sets of attributes that are always the same. Selecting them from the list can significantly speed up the use of them, instead of writing the whole set from scratch. (This could be partly solved with ACF and Dynamic Content, but not quite).

  4. Allow per-breakpoint usage. Many things that work on desktop do not work or look well on mobile.

  5. Expand the Attributes fields when adding a new one. “Click to edit” is one click too many, because if new attribute is added, it is expected that editing it is the next step.

An example of Attributes set:

  data-when="span"
  data-from="0.4"
  data-to="0.1"
  data-easing="easeinout"
  data-translatex="-600"

##Scenarios
a) We have added the set from the above example to the Image element. We have changed our mind and want to add them to the Column. Currently, we need to write them again, filling ten individual boxes.

b) We want this same set on another element, with slightly different values. Again we need to manually fill ten different boxes.

That’s it for now. :slight_smile:
Thanks!

#2

Thanks Misho! Glad to hear you like it and it’s working nicely for you. I appreciate you sharing the suggestions here.

I see what you mean in terms of improving usability and making it faster to work with. Some of these would take a while to work out, so we’d rather wait and do the release while getting more feedback and just seeing how people like it.

Good point on the right click copy/paste. Now that we are leveraging context menus more, we have some good opportunities here. I think this would be better realized as a copy/paste for controls in general. For example, I could right click a box shadow control and copy it, then paste it on another element entirely. This functionality could naturally work for custom attributes as well.

It’s not really something that can be managed per breakpoint because it simply adds HTML attributes directly to the Element’s top level DOM node.

I’ll definitely get in number 5 - that will be quick and easy. Good point there.

1 Like
#3

Copy/paste for controls are great stuff!

And if they would be able to paste all attributes with their values to a new element, that’d be good enough! :thumbsup:

Until then, I’ll speed things up a bit with clipboard management, to at least not write same things so many times. :slight_smile:

#4

Sounds good!

#5

With regards to the custom attributes. Everything seems in order. I would just like to agree with most of what Misho has to say with regards to making the usability better. Otherwise great job definitely something that will come in handy.

2 Likes
#6

Yes! :slight_smile:

I’d love to be able to click on the “Box Shadow” label and select “Clear Styles”. I am always removing native styles by having to click the offset, blur, color etc individually.

3 Likes
#7

I know right? We’re actually planning on having a “On/Off” toggle so it can just be flipped off entirely hiding the box.

We’ve also talked about using a similar style of the custom Attributes control to allow adding multiple box shadows since CSS supports it. We’ve just not identified how/if it will be possible yet .

2 Likes