fieldmanager ui update

[stevenslack]

• greater spacing between fields
• repeatable / sortable UI improvements
• media upload field provides more info about file uploaded
• tab UI updates
• new field CSS class which wraps just the label, field and description
• labels and descriptions style updates

[mboynes]

• Test descriptions in horizontal tab groups
• Test descriptions in vertical tab groups
• Test descriptions in nested groups (2 and 3 levels deep)

[montchr]

Looks good to me overall! I have one blocking question about the use of ID selectors in one place, and some suggestions about using more prominent section divider comments in CSS.

[montchr]

🌀

[dlh01]

Is there a risk of these media icon classes becoming out of sync with the filtered icon class used in PHP?

[stevenslack]

@dlh01 I think the filter may not have a solid use case. I pushed up a change that will set the icon depending on the attachment icon type. See https://github.com/alleyinteractive/wordpress-fieldmanager/pull/468/files#diff-7f0fb55a63140bb4d44360770c1ec06ff18be39f6c9e359f8f7370bca480efcbR81-R83

Let me know what you think about his change.

[stevenslack]

We are now relying on the media type from the attachment to output the correct icon.

[dlh01]

Couple potential edge cases I noticed while testing this branch on a client site:

Checkbox with a long label in the sidebar of the block editor breaks to a new line:

Checkboxes within a tabbed group start to the left of the tab (not actually sure whether this is a defect):

These cases aside, plus the few notes inline, the branch is looking really good to me. I'm excited to get it merged! Let me know what you think about the comments and how it'd be best to handle them, including in a follow-up PR.

[stevenslack]

@dlh01 I addressed your feedback for the checkboxes wrapping to the next line in 3b6e936. For the checkboxes in the tabs, this isn't really a defect as much as it is just the default behavior.

[dlh01]

@stevenslack Re. 9dd2cc2, where does the class .fm-checkbox come from? On the client site where that screenshot originated, the class isn't present, so the fix has no effect.

[stevenslack]

@dlh01 The wrapper element, fm-item does not get updated with a class representing the type of field which it encapsulates. The commit 9dd2cc2 is incorrect in this case.

The issue you are referring to where a checkbox with a long label in the sidebar of the block editor is present on master as well and is not caused by this feature branch. This issue should be addressed in a separate UI update for FM.

[dlh01]

Interestingly, I see that an instance of .fm-checkbox was added to the codebase in 2013: cb4fe88. Perhaps there used to be such a class-based class added.

As for the checkbox label, it looks as expected to me in master:

Regardless, if you'd prefer to move the discussion to a separate issue, let me know.

[stevenslack]

@dlh01 given the age on this PR I'd like to move the discussion of the checkbox label wrapping to another issue.

[dlh01]

🌳 Let's go!