Replace Image CTA with Card CTA with UI and performance improvements

[KMchaudhary]

Fixes: #1536

This pull request introduces a comprehensive redesign and modernization of the CTA (Call-To-Action) Card component used in both the video editor and the frontend. The update standardizes card layouts, improves customization options, and enhances the user interface for selecting layouts and adjusting card appearance. Key changes include the addition of a shared SCSS file for CTA card styles, a new layout selection UI with visual icons, support for multiple card layouts, and improved PHP rendering logic to match the new structure.

CTA Card Component Modernization and Layout Enhancements:

• Introduced a new shared SCSS file (_cta-card.scss) with modular, responsive styles and multiple layout variants for the CTA card, including text/image arrangements, image background, and text-only modes. This file is now imported into the main player styles. [1] [2]
• Updated the video editor's Image CTA configuration UI to allow users to visually select from various card layouts using SVG icons, and to adjust image width for horizontal layouts. The orientation dropdown was removed in favor of the new layout system. [1] [2] [3] [4]
• Changed default color values and placeholder texts for CTA buttons to provide a more neutral and modern appearance (e.g., default button color is now black, and the default text is "Check now"). [1] [2]
• Updated the PHP rendering logic (rtgodam_image_cta_html) to support the new layout system, dynamically generate card structure based on selected layout, and handle cases where no image is provided by switching to a text-only layout. [1] [2]
• Set the default CTA type to 'image' (instead of 'text') when adding a new CTA layer in the video editor, aligning with the new component design.

General Codebase Maintenance:

• Updated internal imports to use SCSS instead of CSS for video control styles.
• Minor code cleanup and reordering of imports for clarity.

These changes together provide a more flexible, visually appealing, and user-friendly CTA card experience for both editors and end users.

[github-actions]

🔍 WordPress Plugin Check Report

⚠️ Status: Passed with warnings

📊 Report

🎯 Total Issues	❌ Errors	⚠️ Warnings
17	0	17

---

⚠️ Warnings (17)

📁 composer.json (1 warning)

📍 Line	🔖 Check	💬 Message
0	missing_composer_json_file	The "/vendor" directory using composer exists, but "composer.json" file is missing.

📁 readme.txt (2 warnings)

📍 Line	🔖 Check	💬 Message
0	mismatched_plugin_name	Plugin name "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" is different from the name declared in plugin header "GoDAM".
0	trademarked_term	The plugin name includes a restricted term. Your chosen plugin name - "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" - contains the restricted term "wordpress" which cannot be used at all in your plugin name.

📁 inc/classes/media-library/class-media-folder-utils.php (1 warning)

📍 Line	🔖 Check	💬 Message
91	PluginCheck.Security.DirectDB.UnescapedDBParameter	Unescaped parameter $where_clause used in $wpdb->get_var($wpdb->prepare(\n\t\t\t\t"\n\t\t\tSELECT COUNT(DISTINCT p.ID)\n\t\t\tFROM {$wpdb->posts} p\n\t\t\tINNER JOIN {$wpdb->term_relationships} tr ON p.ID = tr.object_id\n\t\t\tINNER JOIN {$wpdb->term_taxonomy} tt ON tr.term_taxonomy_id = tt.term_taxonomy_id\n\t\t\tWHERE {$where_clause}\n\t\t",\n\t\t\t\t$query_params\n\t\t\t))\n$where_clause assigned unsafely at line 82:\n $where_clause .= ' AND p.post_mime_type LIKE %s'\n$query_params[] used without escaping.\n$mime_type used without escaping.

📁 assets/build/css/main.css (1 warning)

📍 Line	🔖 Check	💬 Message
0	EnqueuedStylesScope	This style is being loaded in all contexts.

📁 assets/src/libs/analytics.min.js (6 warnings)

📍 Line	🔖 Check	💬 Message
0	EnqueuedScriptsScope	This script is being loaded in all frontend contexts.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?p=1 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?page_id=2 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?attachment_id=6 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?godam-video=demo-godam-video-post (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.

📁 assets/build/js/main.min.js (6 warnings)

📍 Line	🔖 Check	💬 Message
0	EnqueuedScriptsScope	This script is being loaded in all frontend contexts.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?p=1 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?page_id=2 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?attachment_id=6 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0	NonBlockingScripts.NoStrategy	This script on http://localhost:8880/?godam-video=demo-godam-video-post (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.

---

🤖 Generated by WordPress Plugin Check Action • Learn more about Plugin Check

[mi5t4n]

Rest looks good, I have one doubt regarding the following

There is padding to left and right, but no padding on top and bottom which makes it inconsistent. Is this intentional design?

[mi5t4n]

We need to make it backward compatible, the default CTA button background color has been changed, and the layout position is also different when the CTA type is changed to card. Make we map the new layouts and configurations to the old ones as not to break backward comatibility

1. Old

2. New

[KMchaudhary]

@mi5t4n added backward compatibility

Before

Landscape layout

Portrait layout

After

Backward compatibility for Default / Landscape layout

Backward compatibility for Portrait layout

Backward compatibility for video editor

[mi5t4n]

@mi5t4n added backward compatibility

The layout remains backward compatible; however, the CTA color is not. Previously orange, it is now black.

@KMchaudhary

[mi5t4n]

LGTM