CampTix Attendee List: Twenty Twenty theme prevents seeing 3 columns

[CdrMarks]

Describe the bug

Without adding custom CSS, it was not possible to use [camptix_attendees] and see 3 columns of attendees.

Slack thread with solution: https://wordpress.slack.com/archives/C08M59V3P/p1640210242065600

To reproduce

Steps to reproduce the behavior:

1. As a WordCamp site administrator, set your site's theme to Twenty Twenty.
2. Have at least 3 attendees visible on the site's Attendee page.
3. Browse to https://city.wordcamp.org/year/attendees/ Assumes the shortcode in places is [camptix_attendees].
4. See only two columns of attendees displayed.

Expected behavior

See three columns of attendees.

Workaround Adding the following CSS using the Customizer > Additional CSS:

#tix-attendees .tix-columns-3 li {
    margin-left: 0;
    margin-right: 0;
}

Screenshots

Before the fix: FYI, I used the Customizer to temporarily undo the CSS fix and capture this screenshot.

After the fix:

WordCamp Birmingham 2022 Likely any using the Twenty Twenty theme.

System (please complete the following information):

• Device: Laptop
• OS: Mac 11.6.2
• Browser Chrome
• Version 96.0.4664.110 (Official Build) (x86_64)

[CdrMarks]

It seems a solution could be to do the following:

• create a file at /public_html/wp-content/mu-plugins/camptix-tweaks/addons/css/camptix-attendees.css
• in the file /public_html/wp-content/mu-plugins/camptix-tweaks/camptix-tweaks.php
  • hook into the camptix_attendees_shortcode_init action
  • enqueue the style file

I'm curious to know if there is a better way to address this?

[dd32]

I'm curious to know if there is a better way to address this?

As Camptix as a separate plugin is no longer supported, this could be tweaked directly in the Camptix plugin on WordCamp sites. It might have an effect upon previous sites designs, but should be minimal enough not to cause concern.

I'd just add margin-left & margin-right into the li here, so that the width percentages should always work as designed: https://github.com/WordPress/wordcamp.org/blob/production/public_html/wp-content/plugins/camptix/camptix.css#L66-L82

[iandunn]

A more stable long-term fix might be to convert the CSS to Grid (and any markup changes needed for that). Or maybe to use the Columns block to do that for us.

The sticking point there is that we'd need to support back-compat w/ wcorg_skip_feature().

I think the approach in #715 is fine as a short-term solution, though.

[iandunn]

Maybe a better back-compat fix would be to create an Attendees block that uses CSS Grid and/or the Columns block, and then disable the shortcode on new sites 🤔