Stop loading font_icons.css in Elementor by using the custom widget icon class only#2742
Conversation
WalkthroughReplaces an admin-only inline enqueue with a registered Elementor editor hook that calls a new public static method to inject inline CSS containing a 28×28 SVG data-URL for the Formidable widget icon in the Elementor editor; adds a docblock above the widget's get_icon method. Changes
Sequence Diagram(s)(omitted — changes are limited to enqueue registration and inline CSS injection, not a multi-component control-flow requiring a sequence diagram) Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @classes/controllers/FrmElementorController.php:
- Around line 21-27: The docblock above the Elementor editor styles method
contains a placeholder @since x.x; update that tag to the actual release version
(e.g., replace x.x with 6.x.x or the correct version for this release) in the
FrmElementorController class so the method's PHPDoc reflects the real version
number.
🧹 Nitpick comments (1)
classes/controllers/FrmElementorController.php (1)
28-45: Implementation looks correct for inline SVG icon.The approach of encoding the SVG logo via
rawurlencode()and embedding it as a data URL in the CSS::beforepseudo-element is sound. The flexbox centering and the use ofwp_add_inline_style()with theelementor-editorhandle are appropriate for this use case.🛡️ Optional: Add defensive error handling
Consider adding a check to ensure the SVG logo is generated successfully and the style handle exists:
public static function enqueue_editor_styles() { - $icon = rawurlencode( FrmAppHelper::svg_logo() ); + $svg = FrmAppHelper::svg_logo(); + if ( empty( $svg ) ) { + return; + } + + $icon = rawurlencode( $svg ); $css = ' .elementor-element .icon .frm_logo_icon { display: flex; align-items: center; justify-content: center; } .elementor-element .icon .frm_logo_icon::before { content: ""; display: block; width: 28px; height: 28px; background: url("data:image/svg+xml,' . $icon . '") center / contain no-repeat; }'; + if ( ! wp_style_is( 'elementor-editor', 'registered' ) ) { + return; + } + wp_add_inline_style( 'elementor-editor', $css ); }This adds resilience if
FrmAppHelper::svg_logo()fails or if the Elementor editor stylesheet isn't registered for some reason.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
classes/controllers/FrmElementorController.phpclasses/widgets/FrmElementorWidget.php
🧰 Additional context used
🧬 Code graph analysis (1)
classes/controllers/FrmElementorController.php (1)
classes/helpers/FrmAppHelper.php (2)
FrmAppHelper(6-5045)svg_logo(326-339)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Cypress
- GitHub Check: Cypress
- GitHub Check: Cypress
🔇 Additional comments (3)
classes/widgets/FrmElementorWidget.php (2)
24-26: LGTM! Documentation improvement.The added docblock provides clarity on the method's purpose.
28-30: The hardcoded'frm_logo_icon'class correctly matches the CSS selectors inFrmElementorController::enqueue_editor_styles().The CSS targets
.elementor-element .icon .frm_logo_iconat lines 31 and 36, aligning perfectly with the icon class returned byget_icon(). No legacy icon class methods remain in the codebase. The implementation is consistent.classes/controllers/FrmElementorController.php (1)
18-19: LGTM! Proper hook for Elementor editor styles.The
elementor/editor/after_enqueue_styleshook is the appropriate place to add editor-specific styling, ensuring the styles are loaded only in the Elementor editor context.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @classes/controllers/FrmElementorController.php:
- Line 24: Replace the placeholder "@since x.x" in the FrmElementorController
class docblock with the actual release version string; locate the docblock for
class FrmElementorController and update the @since tag to the correct version
number (for example "@since 1.2.0") so the documentation reflects the real
release version.
🧹 Nitpick comments (1)
classes/controllers/FrmElementorController.php (1)
28-44: Implementation looks good.The approach of using
rawurlencode()for the SVG data URL and injecting it viawp_add_inline_style()is valid. The CSS correctly targets the icon class returned byFrmElementorWidget::get_icon().One optional consideration: base64 encoding is sometimes preferred for data URLs as it avoids potential edge cases with special characters in SVG content. However, the current approach should work correctly since
rawurlencode()properly encodes the#characters in the color values.♻️ Alternative using base64 encoding (optional)
public static function enqueue_editor_styles() { - $icon = rawurlencode( FrmAppHelper::svg_logo() ); + $icon = base64_encode( FrmAppHelper::svg_logo() ); $css = ' .elementor-element .icon .frm_logo_icon { display: flex; align-items: center; justify-content: center; } .elementor-element .icon .frm_logo_icon::before { content: ""; display: block; width: 28px; height: 28px; - background: url("data:image/svg+xml,' . $icon . '") center / contain no-repeat; + background: url("data:image/svg+xml;base64,' . $icon . '") center / contain no-repeat; }'; wp_add_inline_style( 'elementor-editor', $css ); }
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
classes/controllers/FrmElementorController.php
🧰 Additional context used
🧬 Code graph analysis (1)
classes/controllers/FrmElementorController.php (1)
classes/helpers/FrmAppHelper.php (2)
FrmAppHelper(6-5045)svg_logo(326-339)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: PHP 8 tests in WP 6.9
- GitHub Check: PHP 7.4 tests in WP 6.9
- GitHub Check: Cypress
🔇 Additional comments (1)
classes/controllers/FrmElementorController.php (1)
18-19: LGTM!The
elementor/editor/after_enqueue_styleshook is the appropriate Elementor hook for injecting editor-specific CSS, and it's correctly registered after the widget is registered.
Stop loading `font_icons.css` in Elementor by using the custom widget icon class only
2 participants
This PR updates the Elementor widget
get_icon()value to return onlyfrm_logo_icon.Demo