Adding classes and attributes to Papi standard fields

[sasimon]

Hello! I would love to know about the feasibility of adding custom classes and attributes to Papi properties. One of Papi's great standouts is that it is being actively developed but not rewritten into another framework. I also appreciate that all of its basic types contain at most one textarea, select, or input that is not of type button or checkbox. Given that, it lacks robust JavaScript validation. I would prefer to use my own third-party Javascript validator.

This is not about adding a validator. As a matter of fact, Papi's lack thereof is one of its great strengths, as it allows its users to implement whichever validator they prefer. But most of the Javascript validators I have seen require either a certain class on the element or else various data-* attributes that I would like to add. Thank you!

[frozzare]

Thanks. Validation is hard when it comes to a UI and I don't think it's something we would add to Papi other than the required option.

What do you think about adding css classes and html attributes to a new div that wraps the property html method.

I think that is the best solution to get custom css classes and attributes to all properties since the advanced properties don't just use a single input tag or a textbox tag and it would be nice to use the same solution for each properties. It also give the developers how create own properties less to think about.

Something like this: (just a example, not sure about the proeprty options however)

<div class="example" data-example="">
  <?php $this->html(); ?>
</div>

papi_property( [
  'wrap_attributes' => ['data-example' => ''],
  'wrap_classes'    => 'example'
] );

[sasimon]

While it is nice, it is also not very useful. The most important place to allow additional attributes is on input, select, and textarea elements. That is where the validators check for them. I understand why you might not want multiple solutions. But I am willing to bet that I can find the central element in each type, even the complex ones. On Tue, Feb 14, 2017 at 1:44 PM Fredrik Forsmo notifications@github.com wrote:

Thanks. Validation is hard when it comes to a UI and I don't think it's something we would add to Papi other than the required option.

What do you think about adding css classes and html attributes to a new div that wraps the property html method https://github.com/wp-papi/papi/blob/master/src/properties/class-papi-property.php#L155 .

I think that is the best solution to get custom css classes and attributes to all properties since the advanced properties don't just use a single input tag or a textbox tag and it would be nice to use the same solution for each properties. It also give the developers how create own properties less to think about.

Something like this: (just a example, not sure about the proeprty options however)

html(); ?>

papi_property( [ 'wrap_attributes' => '', 'wrap_classes' => '' ] );

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wp-papi/papi/issues/220#issuecomment-279814181, or mute the thread https://github.com/notifications/unsubscribe-auth/ABFRcpPQCy0bpIT3i54HoFW0JfwChwzFks5rcgQJgaJpZM4MA3Hf .

[frozzare]

I don't want multiple solutions for different properties when it comes to css classes and attributes since it should be the same solution for all kind properties. So adding css classes and attributes just to input, select and textareas isn't a good solution.

When it comes to the complex properties it's harder to add this kind of stuff on all elements that needs it's and it would require a lot of work and I'm not sure it is worth the time to do it and developers that creates there own property classes needs to implement this kind of behaviour and I'm not sure if it's a good solution to add more stuff on the developers that creates there own properties. That's why I suggested a div that's wrap the property.

So if we can't create a wrap solution then I'm not sure that this kind of enhancement is something that will be added to Papi. If a validation library don't can handle .wrap-class input selectors then it's bad.

[sasimon]

I'm guessing that properties that extend Papi_Property can themselves be extended, and that the Yo generator might help with that. On Tue, Feb 14, 2017 at 2:45 PM Fredrik Forsmo notifications@github.com wrote:

I don't want multiple solutions for different properties when it comes to css classes and attributes since it should be the same solution for all kind properties. So adding css classes and attributes just to input, select and textareas isn't a good solution.

When it comes to the complex properties it's harder to add this kind of stuff on all elements that needs it's and it would require a lot of work and I'm not sure it is worth the time to do it and developers that creates there own property classes needs to implement this kind of behaviour and I'm not sure if it's a good solution to add more stuff on the developers that creates there own properties. That's why I suggested a div that's wrap the property.

So if we can't create a wrap solution then I'm not sure that this kind of enhancement is something that will be added to Papi. If a validation library don't can handle .wrap-class input selectors then it's bad.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wp-papi/papi/issues/220#issuecomment-279830297, or mute the thread https://github.com/notifications/unsubscribe-auth/ABFRcg3E9HgAywhEKPOjyQYpGLQxiLvyks5rchJcgaJpZM4MA3Hf .

[frozzare]

Yes you can extend existing properties as you like.

This is what you can do to solve this by yourself:

• Extend existing properties
• Create a JavaScript file that adds the classes and attributes you like

Sorry to say that this proposal about classes and attributes on input/select and textarea will not be added to Papi so closing the issue for now.