Arik Dynamic Table & Addons for Elementor

Changelog

2.0.2 – 2026-05-25

New widget, expanded query controls, WordPress 7.0 / WooCommerce 10.7 / Elementor 4.0.9 readiness, and a round of CSS fixes around image aspect ratio and content alignment.

DONE

New widget
* New widget: Arik Product Categories Card — circular icon / image / SVG / icon-picker category cards with badge, label, sub-label, per-item link, and per-item color overrides. Includes full Style sections: Grid Wrapper, Card, Icon / Image, Label & Sub-Label, Hover Effects, and Badge. Layout & Grid section with responsive Columns, Gap, Card Alignment, Text Alignment, and Icon Position (top / left / right). Link & Accessibility section with three switches: Wrap Entire Card in Link, Show Sub-Label, Show Badge, plus an ARIA Label Fallback.
* The new widget includes a Backbone content_template() for editor live preview, using the official view.addRenderAttribute() API.
* wp_kses allowlist for inline SVG content added so SVG icon markup is sanitized before output.
* Repeater image uses wp_get_attachment_image() with loading="lazy" and decoding="async" when an attachment ID is available, falling back to an escaped URL otherwise.
* Icon control uses a recommended subset to reduce the Elementor icon picker’s initial paint cost in the editor.

Compatibility
* Tested with WordPress 7.0 — Tested up to raised from 6.9 → 7.0; Requires at least raised from 5.8 → 6.6.
* Tested with WooCommerce 10.7 — WC tested up to raised from 10.4.2 → 10.7; minimum raised to 8.0.
* Tested with Elementor 4.0.9 — Elementor tested up to raised from 3.35.6 → 4.0.9; added explicit minimum-version check (3.20.0) with a non-fatal admin notice when below.
* Added explicit minimum-PHP runtime check with a non-fatal admin notice when below 8.0.
* Declared compatibility with WooCommerce cart_checkout_blocks (alongside the existing custom_order_tables / HPOS declaration).

Order By — controls added / corrected
* Term-based widgets (Product Category Grid, Product Category Inline, Product Tag): Order By now includes Menu Order, Name, Slug, Product Count, Term ID, Description, Parent, and None. Menu Order moved to the first position and set as the default.
* Post / product widgets (Product Table, Product Hierarchy Grid, Product Hierarchy One): Order By now includes Menu Order, Date, Last Modified, Title, Slug, ID, Author, Random, and Comment Count. Menu Order moved to the first position and set as the default.
* Render-side allowlists tightened to match each query type (get_terms() vs WP_Query) — no invalid orderby values can reach the database.
* Fixed: Product Hierarchy One and Product Hierarchy Grid had 'default' => 'menu_order' on the Order (ASC/DESC) control, which is not a valid value for that field. Default corrected to ASC.
* Magazine Grid widget: previously had no Order By or Order control at all. Both added, with Menu Order / Date / Modified / Title / Price / Popularity / Rating / Random. Price/Popularity/Rating map to the correct WooCommerce meta keys (_price, total_sales, _wc_average_rating) with meta_value_num orderby.

Custom product reordering (Product Hierarchy One, Product Hierarchy Grid, Product Magazine Grid)
* New control: Offset — skip N products from the start of the query result.
* New control: Reverse Final Order — flips the result list end-to-end after the query runs (last product becomes first).
* New control: Move First Product to Last — rotates the front of the list to the back.
* New control: Shift Count — pairs with the rotate switch; rotate any N products from front to back.
* These controls are applied post-query in PHP, so they work with every Query Type (Recent, Featured, Sale, Best Selling, Top Rated, Manual Selection).

Image Aspect Ratio (Product Hierarchy One, Product Hierarchy Grid, Product Category Hierarchy Two)
* Fixed: in the previous build, an internal Order By patch incorrectly overwrote the Image Aspect Ratio dropdown options in Product Hierarchy One and Product Hierarchy Grid with order-by values (Menu Order / Date / Title / Slug / etc.). Aspect Ratio is now restored to actual aspect values.
* New options: Auto, 1:1, 4:3, 3:2, 16:9, 21:9, 3:4, 2:3, 9:16, and Custom.
* Custom mode adds a slider (0.25 – 4.0, step 0.01) for any free ratio, with responsive overrides per breakpoint.
* Render-side allowlist tightened so only valid CSS aspect-ratio classes can be emitted.

Image fit / „gray strip below product card” fix
* Fixed: aspect-ratio CSS was applied to the inner <img> (with position: absolute; min-height: 100%), causing the image to render shorter than its card and leaving a visible gray strip at the bottom of the card on certain layouts (Product Hierarchy Grid / Hierarchy One Featured layouts).
* Aspect-ratio CSS is now applied to the card link wrapper instead of the image. The image stays 100% × 100%; object-fit: cover and fills the wrapper completely regardless of source dimensions.
* New .aspect-ratio-3-2, .aspect-ratio-2-3, and .aspect-ratio-custom CSS rules added to support the expanded ratio set.

Horizontal Alignment fixes (6 widgets)
* Fixed: in Product Hierarchy One, Product Hierarchy Grid, Product Magazine Grid, Product Tag, Product Category Hierarchy Grid, and Product Category Hierarchy Two, the Horizontal Alignment control only emitted one of text-align or align-items — but the target content blocks are display: flex; flex-direction: column;, where neither property alone produces the expected result. Each widget’s control now uses selectors_dictionary to emit BOTH align-items (the flex cross-axis property that actually moves children) AND text-align (for text inside any 100%-width child).
* Removed hard-coded align-items: flex-start; text-align: left; from .arik-prod-content, .arik-prod-one-content, .arik-product-content, and .arik-hierarchy-content in the frontend stylesheet — those were overriding the Horizontal Alignment control. Defaults are now driven by the widget controls themselves.

Categories Card widget — bugs fixed in same release window
* Fixed: editor’s left-side Elements panel went blank when a Categories Card was on the page. Root cause was a TypeError: C.replace is not a function in Elementor’s ControlIconsView — the icon control had 'fa4compatibility' => 'icon', which made Elementor’s FA4→FA5 string migration run against an array value. Removed fa4compatibility and gave the control an explicit empty default of { value: '', library: '' }.
* Fixed: the Backbone content_template() had a bare return; at the top level (illegal inside Underscore’s with(obj){…} wrapper), a malformed <# } } #> chained brace, an incorrect 5th argument to elementor.helpers.renderIcon(), and a print() call that isn’t exposed in the template scope. All four were causing JS SyntaxErrors that propagated up and blanked the Elements panel. Template rewritten with a single empty-state <# if … else … #> block, separate <# if #> branches per icon type, and a try/catch around the icon render. A JS template compiler/parser check is now part of the build to prevent recurrence.
* Fixed: when a Font Awesome SVG with no intrinsic width/height (only viewBox) was picked, it filled the entire circle wrap. CSS containment box added: .arik-pcc-icon is now 60% × 60% of the wrapper with overflow: hidden; <svg>, <img>, and <i> inside fit via object-fit: contain or font-size driven by container. Badge still overflows on top of the outer wrap (which keeps overflow: visible).
* Text Alignment in the Categories Card was using text-align only on .arik-pcc-text (a column flex). Fix uses selectors_dictionary to emit both align-items and text-align, same approach as the 6 widgets above.

Hardening
* All @version docblocks across the codebase bumped to 2.0.2 in a single pass.
* New widget’s PHP and JS template are checked at build time: php -l on every file, a stub-Elementor harness that loads every widget class without fatal, and a custom Underscore template compiler that parses the content_template() JS body through the V8 parser.

Removed widgets
* Removed: Arik Product Hierarchy Grid Style — superseded by Arik Product Hierarchy One Style and Arik Product Magazine Style which cover the same use cases with fewer responsive edge cases.
* Removed: Arik Product Category Hierarchy Grid — superseded by Arik Product Category Hierarchy Grid Two and Arik Product Categories Card. Total widget count is now 22 (was 24).
* The corresponding entries were removed from the admin widget toggles panel and the plugin’s widget registry. Existing pages that placed these widgets will render Elementor’s „widget not found” message; the stored settings remain in the database but cannot be displayed.

Editor search & widget title alignment
* Fixed: six product widgets had a get_title() that did not match the title shown in the admin „Active Widgets” settings panel. Searching for the admin name (e.g. „Arik Product Category Inline Style”) returned „No widget found” in the Elementor Elements panel. All widget titles are now identical to their admin labels:
– Arik Product Category Grid Style
– Arik Product Category Hierarchy Grid Two
– Arik Product Category Inline Style
– Arik Product Hierarchy One Style
– Arik Product Magazine Style
– Arik Product Tags Style
* Expanded get_keywords() on the same six widgets so partial searches („inline”, „magazine”, „hierarchy”, „tag”) also surface them in the Elements panel.

Image Aspect Ratio — Arik Product Category Hierarchy Grid Two
* Fixed: the Image Aspect Ratio dropdown in Style → Image Settings had no visible effect because the rule was written to .arik-cat-img, an absolute-fill <img> element whose width: 100%; height: 100% overrode the aspect-ratio declaration. The rule is now written to the card item itself (scoped to the „grid” layout only — magazine layout cells keep their grid-area-driven shape). The image inside still fills via object-fit: cover. Item Min Height continues to act as a floor.

Image Position (Left / Right) — Arik Grid Image Box
* Fixed: when Image Position was set to Left or Right, the image area expanded to fill the entire card and pushed the title, description, and button out of view. The base CSS now reserves 40% of the card width for the image area when it sits beside the content, with a responsive Image Width control (default desktop 40%, tablet 45%, mobile 100% so the card collapses to vertical on phones). The content area receives min-width: 0 so its text can wrap inside the flex container.

!important removal

* Removed every !important declaration from the plugin frontend stylesheet and admin stylesheet. Specificity bumps were added in their place (.elementor-widget prefix for frontend rules, .wrap prefix for admin rules, full ancestor chains where the rule needs to beat both Elementor’s reset CSS and an external theme). Third-party stylesheets shipped with the plugin (Swiper) are untouched.

NOT DONE — pending for a follow-up release

• Product Table widget did NOT receive the new Offset / Reverse / Move First to Last / Shift Count controls. Different render structure (table rows, not cards) and no immediate bug report against it.
• The 18 widgets outside this turn’s scope have NOT had a full CSS or responsive audit. Only widgets with a specific reported bug or screenshot from the customer were modified.
• No PHPCS / WordPress Coding Standards sniff run on the codebase. Conventions followed by hand (tab indent, long array syntax, escape-on-output, sanitize-on-input, type declarations) but not machine-verified.
• No content_template() was added to the other product widgets (Product Hierarchy One, Hierarchy Grid, Magazine) — they still re-render on save rather than live in the editor. Only the new Categories Card has live preview.
• Icon-picker performance lag in the admin is mitigated (Categories Card uses the recommended subset and a strict condition on the control) but not eliminated. The underlying cost is inside Elementor’s ControlIconsView SVG fetch, not in this plugin.
• The CSS aspect-ratio fix and the gray-strip fix have been written and shipped but have not been visually verified on a live staging site by the plugin author. Customer testing required.

2.0.1 – 2026-03-10

Bug Fixes & Code Quality — Site Logo & Text, Tabs, and Text Grid Box widgets

Code Standards & Compatibility
* Fixed: Removed erroneous double backslashes throughout all three widgets (\Elementor\ → \Elementor)
that caused fatal PHP class-not-found errors on strict autoloaders
* Fixed: Renamed deprecated _register_controls() to register_controls() across all three widgets
(the underscore-prefixed method is removed in Elementor 3.x and triggers PHP deprecation notices)
* Fixed: Added PHP 8.x return type declarations (: string, : array, : void) to all public
and protected methods for strict-type compatibility with PHP 8.0–8.4
* Fixed: Replaced all short array syntax [] with long array() syntax to comply with
WordPress Coding Standards (WPCS)
* Removed: Redundant @access phpdoc tags — visibility is already declared by the method keyword

Security Fixes
* Fixed: $title_tag (Text Grid Box, Site Logo & Text) was passed directly to esc_attr() without
being validated first; now allowlisted against a ALLOWED_TITLE_TAGS constant before output,
preventing unexpected tag injection
* Fixed: $wrapper_tag (Site Logo & Text) and $display_type were not allowlisted; both are now
validated against defined constant arrays before use in HTML output
* Fixed: custom_css_class (Text Grid Box) was only run through esc_attr() — added a
sanitize_css_classes() helper that strips non-CSS characters ([^a-zA-Z0-9\s_-]) before escaping
* Fixed: Button link attributes in Text Grid Box had class=”arik-text-box-button” set as a raw
inline attribute alongside print_render_attribute_string(), producing a duplicate class attribute
in the DOM; class is now registered on the same handle via add_render_attribute() and merged correctly
* Fixed: External links in content_template() JS templates were missing rel=”noopener noreferrer”;
a relParts[] accumulator now builds the rel attribute correctly for external and nofollow combinations

Control Registration Fixes
* Fixed: Opacity SLIDER controls (Site Logo & Text, normal and hover tabs) had a flat range array
(range => [min, max, step]) instead of the required unit-keyed structure
(range => [px => [min, max, step]]); the flat structure is silently ignored by Elementor,
meaning the slider had no enforced range limits in the editor
* Fixed: Tabs widget content section was missing an explicit tab => TAB_CONTENT declaration,
causing it to appear outside the Content tab in some Elementor versions
* Fixed: nav_border_radius in the Tabs widget used add_control() instead of add_responsive_control(),
preventing per-breakpoint border-radius overrides on tablet and mobile

Render & Editor Fixes
* Fixed: render() in the Tabs widget output class and data-* attributes via raw string concatenation
inside HTML; replaced with add_render_attribute() / print_render_attribute_string() to properly
integrate with Elementor’s attribute pipeline (CSS animations, dynamic tags, motion effects)
* Fixed: Inline editing in Site Logo & Text used two separate render-attribute handles for the same
element (title_text and custom_text); consolidated into a single title_element handle using
add_render_attribute() array syntax to prevent duplicate or missing attributes on the title tag
* Fixed: Empty $settings[‚text_boxes’] / $settings[‚tabs’] check silently returned with no output;
replaced with a visible printf() editor notice so content authors see actionable feedback
instead of a blank widget in the Elementor panel

New: content_template() — Backbone JS Live Preview
* Added: content_template() to all three widgets (was entirely absent), enabling live preview
updates in the Elementor editor without a page reload
* All three JS templates use view.addRenderAttribute() / view.getRenderAttributeString() — the
official Elementor JS API — instead of manual string concatenation for safe attribute output
* Site Logo & Text: view.addInlineEditingAttributes(‚custom_text’, ‚none’) correctly wires up
double-click-to-edit in the editor (replaces manual data-* attribute strings)
* Text Grid Box: Applies an inline grid-template-columns style in the JS template so column-count
changes are reflected in real time before the Elementor dynamic stylesheet is regenerated
* Tabs & Text Grid Box: Uses _.each() for repeater iteration, {{ }} double-mustache for plain-text
titles (HTML-escaped), and {{{ }}} triple-mustache for WYSIWYG content (raw HTML rendered)
* All JS templates include allowlist guards for title tags and wrapper tags to mirror the PHP
render() security model on the editor side

Refactoring
* Refactored: Monolithic register_controls() split into focused protected helper methods
in all three widgets — register_content_controls(), register_nav_style_controls(),
register_box_style_controls(), etc. — for improved readability and maintainability
* Added: ALLOWED_TITLE_TAGS and ALLOWED_WRAPPER_TAGS as protected const on relevant widget
classes, making the allowlists reusable across both render() and content_template()

2.0.0 – 2025-12-04

Initial release

22 free premium Elementor widgets and content elements
WooCommerce product display widgets
Dynamic table with unlimited rows and columns
Advanced styling controls for all widgets
Fully responsive and mobile-optimized
HPOS compatibility
Translation-ready with .pot file
Performance optimizations