# Plugin Architecture ## System Flow Diagram ``` ┌─────────────────────────────────────────────────────────────────┐ │ WordPress Installation │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ AppsFruit Elementor Embed Plugin │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Main Plugin File (appsfruit-elementor-embed.php) │ │ │ │ - Check Elementor dependency │ │ │ │ - Initialize components │ │ │ │ - Register activation/deactivation hooks │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ │ ┌───────────────┼───────────────┐ │ │ ▼ ▼ ▼ │ │ ┌─────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ AEFE_Post │ │ AEFE_Shortcode│ │ AEFE_Admin │ │ │ │ _Type │ │ │ │ │ │ │ └─────────────┘ └──────────────┘ └──────────────┘ │ │ ▼ ▼ ▼ │ │ ┌─────────────┐ ┌──────────────┐ │ │ │ AEFE_ │ │ AEFE_Hooks │ │ │ │ Gutenberg │ │ │ │ │ └─────────────┘ └──────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` ## Component Architecture ``` ┌─────────────────────────────────────────────────────────────────┐ │ AEFE_Post_Type │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Responsibilities: │ │ │ │ • Register 'aefe_template' custom post type │ │ │ │ • Register 'aefe_category' taxonomy │ │ │ │ • Register 'aefe_tag' taxonomy │ │ │ │ • Handle single template display │ │ │ └────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ AEFE_Shortcode │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Responsibilities: │ │ │ │ • Register [aefe_embed] shortcode │ │ │ │ • Parse shortcode attributes │ │ │ │ • Check conditional display logic │ │ │ │ │ ├─ Device (mobile/desktop) │ │ │ │ │ ├─ User Role (administrator/editor/etc) │ │ │ │ │ └─ Post Type (page/post/custom) │ │ │ │ • Render template using Elementor │ │ │ │ • Handle errors gracefully │ │ │ └────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ AEFE_Admin │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Responsibilities: │ │ │ │ • Add shortcode column to template list │ │ │ │ • Add quick copy button functionality │ │ │ │ • Add "Edit with Elementor" quick action │ │ │ │ • Register shortcode meta box │ │ │ │ • Enqueue admin CSS/JS │ │ │ │ • Render help & documentation page │ │ │ └────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ AEFE_Gutenberg │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ Responsibilities: │ │ │ │ • Register 'aefe/embed-template' block │ │ │ │ • Provide template selector dropdown │ │ │ │ • Handle conditional display settings │ │ │ │ • Server-side rendering │ │ │ │ • Enqueue block editor assets │ │ │ └────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ AEFE_Hooks │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Responsibilities: │ │ │ │ • Document available hooks and filters │ │ │ │ • Provide usage examples │ │ │ │ • Enable developer extensibility │ │ │ └────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` ## Data Flow ### Shortcode Rendering Flow ``` User adds shortcode to content │ ▼ [aefe_embed id="123" device="mobile"] │ ▼ AEFE_Shortcode::render_shortcode() │ ├─► Parse attributes │ └─► Apply 'aefe_shortcode_atts' filter │ ├─► Validate template ID │ └─► Check if template exists │ ├─► Check conditions │ ├─► Device condition │ ├─► Role condition │ ├─► Post type condition │ └─► Apply 'aefe_should_display' filter │ ├─► Apply 'aefe_should_render_template' filter │ ├─► Fire 'aefe_before_render_template' action │ ├─► Render with Elementor │ └─► Get Elementor content │ ├─► Apply 'aefe_template_content' filter │ ├─► Wrap in container │ └─► Apply 'aefe_wrapper_classes' filter │ ├─► Fire 'aefe_after_render_template' action │ ▼ Output HTML ``` ### Gutenberg Block Flow ``` User adds block in editor │ ▼ "Insert Elementor Template" block │ ├─► Load template list │ └─► AEFE_Gutenberg::get_templates_for_block() │ ├─► User selects template │ ├─► User sets conditions (optional) │ ├─► Device │ ├─► Role │ └─► Post Type │ ▼ Block saved with attributes │ ▼ Frontend rendering │ ├─► AEFE_Gutenberg::render_block() │ └─► Calls AEFE_Shortcode::render_shortcode() │ ▼ Output HTML ``` ### Admin UI Flow ``` Admin visits AEFE Templates list │ ▼ WordPress loads list table │ ├─► AEFE_Admin::add_shortcode_column() │ └─► Add "Shortcode" column │ ├─► AEFE_Admin::render_shortcode_column() │ ├─► Display shortcode │ └─► Add copy button │ ├─► AEFE_Admin::add_elementor_edit_link() │ └─► Add "Edit with Elementor" action │ ▼ Admin clicks copy button │ ├─► JavaScript: copyToClipboard() │ ├─► Try modern clipboard API │ └─► Fallback to execCommand │ ▼ Shortcode copied! ``` ## Hook Execution Order ``` Plugin Activation │ ├─► register_activation_hook │ └─► AEFE_Post_Type::register_post_type() │ └─► flush_rewrite_rules() │ └─► do_action('aefe_activated') │ ▼ Plugin Load (on every page load) │ ├─► plugins_loaded │ └─► AppsFruit_Elementor_Embed::init() │ ├─► Check Elementor │ ├─► Initialize components │ └─► do_action('aefe_init') │ ├─► init │ ├─► AEFE_Post_Type::register_post_type() │ │ └─► apply_filters('aefe_post_type_args') │ │ │ ├─► AEFE_Post_Type::register_taxonomies() │ │ ├─► apply_filters('aefe_category_taxonomy_args') │ │ └─► apply_filters('aefe_tag_taxonomy_args') │ │ │ ├─► AEFE_Shortcode::__construct() │ │ └─► add_shortcode('aefe_embed') │ │ │ └─► AEFE_Gutenberg::register_block() │ ├─► admin_menu (admin only) │ └─► AEFE_Admin::add_admin_menu() │ ├─► admin_enqueue_scripts (admin only) │ └─► AEFE_Admin::enqueue_admin_assets() │ ├─► enqueue_block_editor_assets (block editor only) │ └─► AEFE_Gutenberg::enqueue_block_editor_assets() │ ▼ Shortcode Execution (when shortcode is found) │ ├─► do_shortcode('[aefe_embed id="123"]') │ └─► AEFE_Shortcode::render_shortcode() │ ├─► apply_filters('aefe_shortcode_atts') │ ├─► apply_filters('aefe_should_display') │ ├─► apply_filters('aefe_should_render_template') │ ├─► do_action('aefe_before_render_template') │ ├─► Elementor rendering │ ├─► apply_filters('aefe_template_content') │ ├─► apply_filters('aefe_wrapper_classes') │ └─► do_action('aefe_after_render_template') │ ▼ Plugin Deactivation │ └─► register_deactivation_hook └─► flush_rewrite_rules() └─► do_action('aefe_deactivated') ``` ## Database Interactions ``` ┌─────────────────────────────────────────────────────────────────┐ │ WordPress Database │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ wp_posts │ │ │ │ ├─ post_type = 'aefe_template' │ │ │ │ ├─ post_title │ │ │ │ ├─ post_content │ │ │ │ ├─ post_status │ │ │ │ └─ post_author │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ wp_postmeta │ │ │ │ ├─ _elementor_data (Elementor content) │ │ │ │ ├─ _elementor_edit_mode │ │ │ │ ├─ _elementor_template_type │ │ │ │ └─ _elementor_version │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ wp_term_taxonomy │ │ │ │ ├─ taxonomy = 'aefe_category' │ │ │ │ └─ taxonomy = 'aefe_tag' │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ wp_terms │ │ │ │ ├─ Category terms │ │ │ │ └─ Tag terms │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ wp_term_relationships │ │ │ │ └─ Links posts to terms │ │ │ └────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` ## Security Layers ``` ┌─────────────────────────────────────────────────────────────────┐ │ Security Architecture │ │ │ │ Layer 1: Direct Access Prevention │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ if ( ! defined( 'ABSPATH' ) ) { exit; } │ │ │ │ Applied to all PHP files │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ │ Layer 2: Input Sanitization │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ • intval() for IDs │ │ │ │ • sanitize_text_field() for strings │ │ │ │ • wp_kses_post() for HTML │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ │ Layer 3: Output Escaping │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ • esc_html() for text │ │ │ │ • esc_attr() for attributes │ │ │ │ • esc_url() for URLs │ │ │ │ • wp_kses_post() for allowed HTML │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ │ Layer 4: Capability Checks │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ • current_user_can('edit_posts') │ │ │ │ • current_user_can('manage_options') │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ │ Layer 5: Nonce Verification │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ • wp_nonce_field() for forms │ │ │ │ • wp_verify_nonce() for validation │ │ │ └────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` ## Performance Optimization ``` ┌─────────────────────────────────────────────────────────────────┐ │ Performance Strategies │ │ │ │ 1. Conditional Asset Loading │ │ ├─ Admin CSS/JS only on AEFE pages │ │ └─ Block editor assets only in Gutenberg │ │ │ │ 2. Efficient Queries │ │ ├─ Use get_post() instead of WP_Query when possible │ │ └─ Leverage WordPress object cache │ │ │ │ 3. Lazy Rendering │ │ ├─ Templates render only when shortcode is executed │ │ └─ No unnecessary database queries │ │ │ │ 4. Elementor Caching │ │ └─ Leverage Elementor's built-in caching system │ │ │ │ 5. Minimal Footprint │ │ ├─ Lightweight codebase (~75 KB) │ │ └─ No external dependencies │ └─────────────────────────────────────────────────────────────────┘ ``` ## Extension Points ``` ┌─────────────────────────────────────────────────────────────────┐ │ How Developers Can Extend the Plugin │ │ │ │ 1. Add Custom Conditions │ │ └─ Use 'aefe_should_display' filter │ │ │ │ 2. Modify Template Output │ │ └─ Use 'aefe_template_content' filter │ │ │ │ 3. Track Template Usage │ │ └─ Use 'aefe_after_render_template' action │ │ │ │ 4. Add Custom Meta Fields │ │ └─ Use WordPress meta box API │ │ │ │ 5. Modify Post Type Behavior │ │ └─ Use 'aefe_post_type_args' filter │ │ │ │ 6. Add Custom Taxonomies │ │ └─ Register additional taxonomies for 'aefe_template' │ │ │ │ 7. Create Custom Blocks │ │ └─ Use AEFE_Shortcode::render_shortcode() in your blocks │ │ │ │ 8. Integrate with Other Plugins │ │ └─ Use 'aefe_init' action hook │ └─────────────────────────────────────────────────────────────────┘ ``` --- This architecture is designed to be: - **Modular**: Each component has a single responsibility - **Extensible**: Multiple hooks and filters for customization - **Secure**: Multiple layers of security checks - **Performant**: Optimized queries and conditional loading - **Maintainable**: Clean code structure and documentation