New attributes for the Font Awesome shortcode in Memberlite

[RachelRVasquez]

All Submissions:

• Have you followed the Contributing guidelines?
• Does your code follow the WordPress' coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

As I was working with patterns and using this shortcode for icons, I would apply colors from the paragraph block that contains the shortcode and even adjust border-radius if I wanted to adjust the shape. This works fine on the front-end, but it made the shortcode impossible to edit because it would get clipped. So instead of relying on styles from the paragraph block to emulate icons in circles, rounded squares etc. we decided to add additional attributes to the shortcode instead.

Before:

After:

• Added additional color options for the existing color attribute. By default, if this attribute isn't being used, the icon will inherit the site's text color or colors from a block that wraps it.
• New additional values: white', text, text, site-background, .site-navigation, site-navigation-background, footer-widgets, footer-widgets-background`
• Added the 'background' attribute. The same colors that can be passed to the color attribute can also be passed here. Including the existing primary, secondary, action colors.
• Added the shape attribute. For use mainly with the background attribute so you can get that square, rounded square and circle icon effect.
• Values: circle', squircle, square`

Note: Ideally, we'd replace these shortcodes with WordPress 7.0's icon block but since that block is still pretty new, the shortcode feels like the stable option for our bundled patterns. Maybe we can revisit in a year to possibly swap to icon blocks as well as provide an icon library in Memberlite. 🤞

How to test the changes in this Pull Request:

1. Test that you can pass existing color values or new ones in the color attribute.
2. Test that you can pass colors to the background attribute.
3. Test that you can change the shape of the background color by using the shape attribute.

Expect that it will not be very nice looking in the editor depending on how you're setting up and styling your blocks, but the icons should still look good on the front-end.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you successfully run tests with your changes locally?

Changelog entry

Add new attributes to the Font Awesome shortcode so that color and background color can be adjusted separately without having to rely on the paragraph block in the editor. Also added a shape attribute that is meant to work when the icon has a background for circular, square, and rounded square icons.

[Copilot]

Pull request overview

Adds new styling capabilities to Memberlite’s Font Awesome [fa] shortcode so icon foreground color, background color, and background shape can be controlled via shortcode attributes (improving editor usability vs. relying on wrapper block styles).

Changes:

• Extends the [fa] shortcode with new background and shape attributes and applies corresponding CSS classes.
• Adds SCSS rules for additional color tokens, background color tokens, and shape styling (square, squircle, circle) scoped to Font Awesome icon base classes.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/scss/components/_shortcodes.scss	Adds scoped style rules for icon color/background tokens and shape layout for [fa] output classes.
shortcodes/font-awesome.php	Adds background/shape attributes and appends new CSS classes to the [fa] shortcode output.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[flintfromthebasement]

PR: #331 — New attributes for the Font Awesome shortcode in Memberlite
RachelRVasquez → dev | 2 files, +129 -0
#331

---

Summary
Ready to merge. Clean, backward-compatible addition of background and shape attributes to the [fa] shortcode, plus expanded color values. Output still passes through esc_attr(implode(...)) (unchanged, end of memberlite_fa_shortcode()), so no injection risk from the new values. A few small consistency nits below, none blocking.

---

Issues

• Minor shortcodes/font-awesome.php:45 — $classes[] = 'bg-' . $background; has no value allowlist, unlike the shape handling right below it (:48-56) which explicitly checks square/circle/squircle. A typo like background="primry" silently emits a dead bg-primry class with no feedback. This mirrors the pre-existing color attribute (also unvalidated), so it's not a regression, but shape sets a better precedent in this same diff — worth applying the same allowlist (or sanitize_html_class()) to background and color while you're in here.

• Minor src/scss/components/_shortcodes.scss (new bg-* classes) — Naming convention mismatch: the existing theme uses underscore naming for background helpers — .bg_primary, .bg_secondary, .bg_action (src/scss/base/_alerts.scss:114-122). This PR introduces hyphenated .bg-primary, .bg-secondary, etc. for the same concept. Not a bug, but two conventions for "background color modifier" now coexist in the codebase — worth a one-line note in the changelog/PR if intentional, since it may confuse anyone reaching for the shortcode's helper on a non-shortcode element later.

• Minor src/scss/components/_shortcodes.scss (new .shape-* rules) — The shape-square/shape-circle/shape-squircle block applies padding: 1em, aspect-ratio: 1, display: inline-flex, and min-width/height unconditionally — it isn't scoped to only apply when background is also set. [fa icon="star" shape="circle"] alone (no background) produces a transparent padded flex box that still affects layout/spacing. The PR description says shape is "mainly" for use with background, but nothing enforces that. Consider scoping the box-model rules to &.shape-circle[class*="bg-"]-style selectors, or just document the standalone behavior so it's not mistaken for a bug later.

• Minor src/scss/components/_shortcodes.scss:461 (EOF) — Missing trailing newline (\ No newline at end of file in the diff). Cosmetic, but inconsistent with the rest of the file.

---

Looks Good

• shape attribute uses an explicit if/elseif allowlist (font-awesome.php:48-56) rather than trusting raw input — the strongest validation pattern in the function, better than the pre-existing color/size/rotate/flip handling.
• SCSS scoping via :is(.fa, .fas, .far, .fab) compound selectors keeps new classes like .text/.white from leaking into unrelated generic class names elsewhere in the theme or third-party plugin CSS — good call, and the inline comment explaining why is helpful.
• The full bg-* set matches every new color value 1:1, and every --memberlite-color-* custom property referenced (primary, secondary, action, text, site-background, site-navigation, site-navigation-background, footer-widgets, footer-widgets-background, plus the statically-defined white) is confirmed defined via the customizer's color preset map in inc/colors.php — no dangling CSS variables.

---

Questions

1. The PR description lists white' with a stray backtick and lists text twice — worth cleaning up before merge since it doubles as the changelog source.
2. Any interest in whitelisting color/background the same way shape is now, in a quick follow-up, or leaving that as-is intentionally?