Skip to content

Refactor CSS class naming to follow consistent component pattern#1183

Merged
mauteri merged 8 commits intodevelopfrom
update-gatherpress-classes
Sep 27, 2025
Merged

Refactor CSS class naming to follow consistent component pattern#1183
mauteri merged 8 commits intodevelopfrom
update-gatherpress-classes

Conversation

@mauteri
Copy link
Copy Markdown
Contributor

@mauteri mauteri commented Aug 31, 2025

Summary

This PR refactors CSS class naming throughout GatherPress to establish a consistent, maintainable component-based naming pattern. The changes improve code clarity, reduce confusion, and align class names with their corresponding block names.

Key Changes

Modal Classes

  • Modal triggers:

    • gatherpress--open-modalgatherpress-modal--trigger-open
    • gatherpress--close-modalgatherpress-modal--trigger-close
    • Rationale: Clarifies intent and eliminates confusion where the same class was previously used for both opening and closing modals*
  • Modal types:

    • gatherpress--is-rsvp-modalgatherpress-modal--type-rsvp
    • gatherpress--is-login-modalgatherpress-modal--type-login
    • Rationale: Uses clearer --type- pattern to identify modal variants*

RSVP Classes

  • RSVP triggers:

    • gatherpress--update-rsvpgatherpress-rsvp--trigger-update
    • Rationale: Follows component pattern, clearly indicates action trigger*
  • Empty state:

    • gatherpress--empty-rsvpgatherpress-rsvp-response--no-responses
    • Rationale: Clearly associates with the rsvp-response block component*

Form Field Classes

  • Field types:
    • gatherpress-field-type-*gatherpress-form-field--*
    • Examples: gatherpress-field-type-checkboxgatherpress-form-field--checkbox
    • Rationale: Aligns with the actual block name "form-field" for consistency*

Visibility Classes

  • gatherpress--is-not-visiblegatherpress--is-hidden
  • Rationale: More concise and conventional naming*

RSVP State Classes

  • gatherpress--rsvp-attendinggatherpress--is-attending
  • gatherpress--rsvp-waiting-listgatherpress--is-waiting-list
  • gatherpress--rsvp-not-attendinggatherpress--is-not-attending
  • Rationale: Uses state-like naming pattern for clarity*

Technical Improvements

  • Replaced deprecated strpos() with str_contains() throughout PHP codebase (WordPress provides polyfill)
  • Added backwards compatibility layer via gatherpress-alpha plugin for smooth migration
  • Extended migration to include FSE template post types (wp_template, wp_template_part)

Testing

  • All unit tests pass (PHP and JavaScript)
  • Build completes successfully
  • Backwards compatibility tested via gatherpress-alpha migration mappings

Migration Support

The gatherpress-alpha plugin includes a complete migration system that automatically updates all existing content with the new class names, ensuring no breaking changes for existing installations. That PR can be found here.

@mauteri mauteri changed the title Class updates to follow BEM conventions better. Refactor CSS class naming to follow consistent component pattern Sep 22, 2025
@mauteri mauteri marked this pull request as ready for review September 23, 2025 00:00
@jmarx jmarx self-requested a review September 23, 2025 00:12
Copy link
Copy Markdown
Collaborator

@jmarx jmarx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@github-actions
Copy link
Copy Markdown
Contributor

Preview changes with Playground

You can preview the recent changes for PR#1183 with the following PHP versions:

PHP Version 8.3

PHP Version 7.4

Download .zip with build changes

Made with 💙 from GatherPress & a little bit of WordPress Playground. Changes will not persist between sessions.

@mauteri mauteri merged commit becc7e4 into develop Sep 27, 2025
17 checks passed
@mauteri mauteri deleted the update-gatherpress-classes branch September 27, 2025 18:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants