Add content editor data attributes based on name/id and css_classes presenter method

[mickenorlen]

What is this pull request for?

To enable more unique targetable classes for styling and manipulating contents in backend forms.

Notable changes (remove if none)

Enable users to specify classes in content definition:

- name: element
  contents:
    - name: content_with_classes
      type: EssenceText
      classes: content_classes

Added classes method to content.rb and injected it to all essences + generator template wrapper classes.

Added test for:

• classes in content_spec.rb
• checking that classes are correctly rendered in page_editing_feature_spec.rb

Checklist

• I have followed Pull Request guidelines
• I have added a detailed description into each commit message
• I have added tests to cover this change

[tvdeyen]

Thanks for the contribution. I like the idea, but think we can achieve the same with either

a. Using the content name as css class in the editor. Maybe also add the element name to the element editor? This should be a good enough selector, right?
b. If we still want to support adding additional classes to the editor. Why not use the settings hash we already have for these things? I do not want to add additional attributes to the Model. Also we already have a presenter class, that would be a great home for this method.

Thanks again for the contribution.

[mickenorlen]

a) Added default element name and content name classes to editor.
b) Added custom editor_css_classes to contents as I find it convenient to use helper classes for these guys that can then be toggled through js.

Opinion/question: If i read here.
https://guides.alchemy-cms.com/essences.html#overview

It seems that global configuration should go in the top level conf and "individual" settings go into settings hash. So i think this one could still be top level?

[tvdeyen]

Opinion/question: If i read here.
https://guides.alchemy-cms.com/essences.html#overview

It seems that global configuration should go in the top level conf and "individual" settings go into settings hash. So i think this one could still be top level?

I think I cannot follow? Content and Essence have a one-to-one relationship there is no "global" and "individual" config for either of them, they are the same. The content is being of an essence_type. The essence record is the individual instance of each content defined, but the same is true for the content instance in each element instance.

[tvdeyen]

Thanks for the changes.

But thinking about this again I think we should add the element.name to a data-element-name attribute and the content.name to a data-content-name attribute.

With that you can do crazy things like:

[data-element-name="blog_settings"] [data-content-name="author_name"] {
  font-weight: bold;
  color: red;
}

or

document.querySelectorAll('[data-element-name="video_header"] [data-content-name="embed_type"]').addEventListener('change', (evt) => {
  evt.target.value
  ...
})

Should be fixing you need (flexibility in the content editors) and ours (less maintenance burden)

WDYT?

[mickenorlen]

From: https://guides.alchemy-cms.com/essences.html#overview

Global content settings

When defining contents, you need to provide a name and essence type. You can set hints and default values as well.

Individual essence settings

Each essence type can have its own type of settings.

To configure these settings you have to pass them into its settings key in the elements.yml.

From that it seems that editor_css_classes which would be available for all contents shouldn't go under the settings hash.

[tvdeyen]

From: https://guides.alchemy-cms.com/essences.html#overview

Global content settings

When defining contents, you need to provide a name and essence type. You can set hints and default values as well.

Individual essence settings

Each essence type can have its own type of settings.
To configure these settings you have to pass them into its settings key in the elements.yml.

From that it seems that editor_css_classes which would be available for all contents shouldn't go under the settings hash.

This might be poorly worded, but my comment is still valid. But since we want to implement this differently this discussion is not necessary any more ;)

[mickenorlen]

Thanks for good comments. I think i fixed it now. I did however use separate data-content-id and data-content-name instead of a nested object.

Because i saw that there were already a few data-content-id attributes in use in the code eg here
https://github.com/mickenorlen/alchemy_cms/blob/user-defined-content-classes/app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee/#L155
And also it felt a bit cryptic to target data attribute objects in general.

[data-content*="name\":\"date"] {
	background: blue;
}

[tvdeyen]

Very nice, just one little thing. Thanks for the contribution 🙏

[mickenorlen]

Np i'll clean that up.

But I think i want to create a ContentEditor#dom_data_attributes also so it's easier to inject data-attributes when needed without changing the templates.

data: {content_id: essence_text_editor.id, content_name: essence_text_editor.name}

# would become
data: essence_text_editor.dom_data_attributes

Ok?

[tvdeyen]

Np i'll clean that up.

But I think i want to create a ContentEditor#dom_data_attributes also so it's easier to inject data-attributes when needed without changing the templates.

data: {content_id: essence_text_editor.id, content_name: essence_text_editor.name}

# would become
data: essence_text_editor.dom_data_attributes

Ok?

Yes

[tvdeyen]

Very nice. One last change and we are ready to go. Thank you for working on this.